microCMSのリッチエディタから取得した値を加工したり、目次リストを作成します。
MIT License
microCMSのリッチエディタから取得できるHTMLデータを自動処理します。
lazysizes
のクラス名をサポート)lazysizes
のクラス名をサポート)highlight.js
をサポート)npm i microcms-richedit-processer
# yarn add microcms-richedit-processer
Next.jsの場合
import { GetStaticProps, NextPage } from "next";
import { createTableOfContents, processer } from "microcms-richedit-processer";
type Props = {
body: string;
toc: {
id: string;
text: string;
name: string;
}[];
};
export const getStaticProps: GetStaticProps<Props> = async () => {
const { contents } = await fetch(
"https://{サービスID}.microcms.io/api/v1/{エンドポイント}",
{
headers: {
"X-API-KEY": "{APIキー}",
},
}
).then((res) => res.json());
// contents.bodyにHTMLデータが取得できる想定です。
return {
props: {
body: await processer(contents.body),
// オプションを渡す場合
// body: processer(contents.body, {}),
toc: createTableOfContents(contents.body),
// オプションを渡す場合
// toc: createTableOfContents(contents.body, {}),
},
};
};
詳しい使い方はZennの記事に書いています! https://zenn.dev/d_suke/articles/e18352797bbe00bdabb6