microCMS シンプルなブログテンプレートで目次機能を実装
15 October, 2023microCMSで目次を自動生成して表示する機能を実装してみました。今回はその改修内容を紹介します。
このブログはmicroCMSの「シンプルなブログ」テンプレートを使用していて、今回自動で目次を入れるようにしたのでその改修内容の備忘録です。
テンプレートはこちら。
完成イメージ
このような目次が、記事の最初に入るのをイメージしています。
参考リンク
ほとんどのコードは以下から拝借しました。ありがとうございます。
微妙にファイル構成などが違うので本エントリではその辺りを記載していこうと思います。
実装
機能実装
まず libs/render-toc.jsファイルを作成して、h1~h3タグのデータを取得し整形するコードを記載します。
import * as cheerio from 'cheerio';
export const renderToc = (body) => {
const $ = cheerio.load(body);
const headings = $('h1, h2, h3').toArray();
const toc = headings.map((data) => ({
text: data.children[0].data,
id: data.attribs.id
}));
return toc;
};次に、記事画面の出力HTMLを編集していきます。 components/Article/index.tsx ファイルになります。
まずコード冒頭のimportで、先ほど作成したファイルを読み込みます。
import { renderToc } from '../../libs/render-toc';次に同ファイルで、記事内で目次を置きたい部分に以下のコードを追加します。
最初と最後の行はコメントアウトされていますが、こちらは後ほど、目次の表示・非表示を管理画面から設定するための部分になります。
{/* {data.toc_visible && ( */}
<div className={styles.tableOfContents}>
<h4>Table Of Contents</h4>
<ul>
{toc.map(data => (
<li key={data.id}>
<a href={`#${data.id}`}>
{data.text}
</a>
</li>
))}
</ul>
</div>
{/* // )} */}以上で出力部分は終わりなので、サンプルで作成した記事で、目次が表示されるかどうかを確認できればOKです。
デザインを整える
今回サンプルで実装したデザインのcssは以下になります。
.tableOfContents {
padding: 30px;
background-color: #f7f7fc;
width: 100%;
margin-bottom: 32px;
border-radius: 5px;
}
.tableOfContents > h4 {
margin: 0 0 10px;
font-weight: normal;
}
.tableOfContents > ul > li {
padding: 5px 16px;
font-size: 14px;
border-bottom: 1px solid #e7e7f3;
vertical-align: baseline;
}管理画面から記事ごとに目次を表示・非表示を切り替える
参考リンクで記載した https://blog.microcms.io/next-microcms-toc/ に記載がありますので、こちらを参考にしていただけたらと思います。
その際、 components/Article/index.tsx でコメントアウトした部分を外していただけたらと思います。
おわりに
ブログを作成すると、こういう細かなところが気になり始めちゃいますよね。他の方のブログを見てこの機能良いなと思うと、すぐ取り入れたくなります。
ということで今回は目次の作成でした。しばらくはmicroCMSを使ってみるつもりなので、また何かTipsがあれば記事にしたいと思います。