ブログをNuxtContentに移行したときの覚書

最近GatsubyからNuxtへ置き換えたのでそのときの覚書です。

画像表示

通常のマークダウンの記法ではNuxtCountent上で画像を表示できない。

画像を表示する場合はグローバルコンポーネント作成してマークダウン上で指定する必要があります。

以下issues参照

https://github.com/nuxt/content/issues/106

でも、可能な限り通常のマークダウンエディタで見える形にしたい。
→RemarkのPluginで置換する。

置換は以下のようなPluginを作成する。

以下の例では仮の文字列にしていますが、実際はimgタグを作成したコンポーネントへ置換するようにしました。

/**
 *置換処理
 *
 * @param {*} text
 * @returns
 */
const ReplaceText = (text: any) => {
  return text.replace('ReplaceTest', 'ReplaceTestResult')
}

module.exports = attacher

function attacher() {
  return transformer

  /**
   *対象ノードのテキストを変更する。
   *
   * @param {*} tree
   * @param {*} file
   * @returns
   */
  function transformer(tree: any, file: any) {
    for (let i = 0; i < tree.children.length; i++) {
      const item = tree.children[i]
      if (item.type === 'paragraph') {
        for (let j = 0; j < item.children.length; j++) {
          const child = item.children[j]
          if (child.type === 'html') {
            child.value = ReplaceText(child.value)
          }
        }
      }
    }

    return tree
  }
}

nuxt.configのcontent.markdown.remarkPluginsに作成したPluginを追加。

  content: {
    markdown: {
      remarkPlugins: ['~/remarkPlugins/myPlugin.ts'],
    }
  },

NuxtContent公式ページでのRemarkpluginの設定方法

https://content.nuxtjs.org/ja/configuration#markdownremarkplugins

Feedの設定

NuxtContent公式ページでFeedの設定方法があるので参照。

https://content.nuxtjs.org/ja/integrations#nuxtjsfeed

静的ページ生成

nuxtのgenerateで全ての処理が実行されないため$contentはasyncData以外で使わない。

(別のメソッドで使用すると$contentが空となる)

generate.routesで動的ページを設定する。

https://content.nuxtjs.org/ja/advanced

metaタグとtitle

headプロパティを設定する。

その際にasyncDataの返却値と同じ名前のプロパティを作っておくと参照できます。

//asyncDataの返却値
article: any
head() {
    return {
      title: 'title',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.article.description,
        }
    }
}

headプロパティについて

https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-head/