GirdsomeでヘッドレスCMS・APIのマークダウン記法のデータを変換する

ヘッドレスCMSでマークダウンを使っている場合は手間がある

Gridsomeにはプロジェクト内のマークダウンファイル（.mdファイル）を変換する前提のプラグインはありますが、ヘッドレスCMSやAPIから送られてくるマークダウン記法のデータには対応していません。

ヘッドレスCMSはマークダウン形式で記述していても、APIでデータを送信する際にはHTMLに変換してくれるケースもありますが、そうでない場合やデータ送信量を減らしたい時には、Gridsomeに取り込む際にマークダウンを変換してやる必要があります。

マークダウンデータを変換する方法

Gridsomeでは、APIからデータを追加する際は、gridsome.server.jsで設定を書きますが、ここでnodeを追加する際にデータをマークダウンにします。

Gridsomeでnodeを追加する際には、mimeTypeを「text/markdown」とすることもできますが、mimeTypeを指定したからといってHTMLに変換してくれるわけではないことと、ToC（目次）の自動生成機能を追加するためには、gridsome.server.jsで処理するのがベストです。

マークダウンを変換する

まずはマークダウン記法で書いたデータを変換します。Node.jsのマークダウン変換は様々なプラグインがありますが、今回は「markdown-it」を使います。

markdown-it

yarn add markdown-it

あとは、gridsome.server.jsで呼び出して、データを変換するだけです。

const MarkdownIt = require('markdown-it')
const md = new MarkdownIt()

api.loadSource(async actions => {
  // 諸々の処理
  for (const item of dataArticles.entries) {
    articles.addNode({
      text: md.render(item.text),
    })
  }
}

これで、GridsomeのGraphQLにHTMLに変換された状態で収容されます。

ToC（目次）をつける

これだけでも良いのですが、せっかくマークダウンなので目次をつけてみましょう。こちらもmarkdown-itを拡張する様々なプラグインがありますが、今回は「markdown-it-toc-and-anchor」を使います。

markdown-it-toc-and-anchor

yarn add markdown-it-toc-and-anchor

gridsome.server.jsで呼び出します。

const MarkdownIt = require('markdown-it')
const markdownItTocAndAnchor = require('markdown-it-toc-and-anchor').default;
const md = new MarkdownIt().use(markdownItTocAndAnchor);

markdown-itの呼び出しにも少し違いがあるので注意してください。

これだけで、ToCと見出しへのID付与がされます。ただし、ToCを表示させるには、マークダウンデータ内に、

@[toc]

がないとダメなので、全ての記事に挿入します。これが面倒な場合は、他のプラグインを使って、ToCと本文を別のデータにすれば可能ですが、プラグインが変わるとIDの付与ルールが違っていたりして、調整が面倒な場合があります。

オリジナルデータを綺麗なまま維持して、使えるのが◎

マークダウン記法で書かれたデータは、どの段階で変換すべきか悩むポイントでもありますが、個人的にはジェネレータ側で変換する方が良いかなと思っています。

WordPressなんかはマークダウンで書いてもDBには変換後のデータが入っていて、DBを無駄に圧迫します。しかも、記事を書くときに都度「マークダウン <===> HTML」という処理をするので、かなり無駄です。

また、APIからの送信データサイズという意味でも、マークダウン記法のままの方が小さいのでメリットになります。

静的サイトジェネレータの場合、何度もデータを送受信するわけではないので、変換してから送っても良いかもしれません。その場合、WordPressのようにデータをHTML化して保存しない方式の方が、記事の管理方法を変えた時に移行がスムーズになります。