markDownファイルで記事を更新出来るようにする

プラグイン「vue-remark」を入れました

Gridsomeには多くのプラグインがあります。
ココでGridsome Plugins探すことができます。

私は「vue-remark」を入れました。
公式document@gridsome/vue-remarkにシッカリと手順が記載されていますし、合わせて Gridsomeでイチからブログを作る - Markdownファイルで記事を作るも大変参考になりました。

なのに、この後思いっきりズッコケるんですが…

まずは、インストールから。

npm install @gridsome/vue-remark

そのあと、gridsome.config.jsに追記します。
私の場合は、こうなりました。

module.exports = {
siteName: 'Gridsomeでやってみよう！',
plugins: [
{
use: '@gridsome/vue-remark',
options: {
typeName: 'StepPost', // 必須。GraphQL上で扱う型定義
baseDir: './content/step', // 記事となるmarkdownファイルを置くディレクトリ
pathPrefix: '/step', // URLになるパス。必須ではない。
template: './src/templates/StepPost.vue' // 記事ページのVueコンポーネントファイルの指定
}
}
],
}

markDownファイルを作る。

場所はココ！

baseDir: './content/step',

↑のように指定した場合は、/src/の下じゃないよ！
\gridsome-site-starter\content\step\001.md

補足：ファイル名の先頭に00は止めたほうがいいよ
参考→投稿ページに次のページへ前のページへをつける

このmarkDownファイルのディレクトリを/src/の配下に作ってしまい、、、一日無駄にした…
ずーっと「titleがないよ」っていうエラーが連発してて、titleあるっちゅーの！って思ってたら、そもそもファイルの置き場所間違ってたっていうね～
最初からファイルがないって言ってくれよって思ったね。。私が悪いんだけどさー

私のmdファイルはこんな感じです。
まだ使っていない項目もありますが将来使うかも？と思って入れているものもあります。

---
number: 40
title: "markDownファイルで記事を更新出来るようにする"
tag: "step01"
createdAt: 2020-10-05
updatedAt: 2020-10-05
nextpage: 005
prevpage: 003
---

## プラグイン「vue-remark」を入れました

投稿用のテンプレートを作る。

上記設定ファイルで指定したとおり「/src/templates/StepPost.vue」という投稿用のテンプレートを新しく作ります。
こんな感じです。

<template>
  <Layout>
    <article class="Step">
    <h1 class="h2 mb-5">{{ $page.stepPost.title }}</h1>
    <VueRemarkContent />
  </article>
  </Layout>
</template>

<page-query>
  query StepPost($id: ID!) {
    stepPost(id: $id) {
      title
      tag
      createdAt
      updatedAt
      content
    }
  }
</page-query>

表示を確認する！

表示が確認できればOK!
http://localhost:8080/step/002/