markDownファイルで記事を更新出来るようにする
投稿日:2020年10月5日
更新日:2020年10月15日
プラグイン「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/