ぺんすけブログ

markdownファイルからブログを表示表示できるようにする

サクッと作りたい人はこの記事の内容分のプルリクエストがあるのでfile changesを見てもらえると分かりやすいと思います。

Pull Request（投稿一覧と投稿記事表示機能） pensuke81/gridsome-blog

今見ているこのブログは、Gridsome Blog Starter という予めブログの仕組みが組まれたBlog Starterを利用して作成しましたが、今回はイチからブログを作成していってみたいと思います。

source-filesystem, transformer-remarkをインストール

yarn add @gridsome/source-filesystem @gridsome/transformer-remark

gridsome.config.jsに設定追加

content/posts/first-post.md といったファイルから投稿記事のルーティングを行わせるための設定です。

編集ファイル: gridsome.config.js

plugins: [
  {
    use: '@gridsome/source-filesystem',
    options: {
      typeName: 'Post',
      path: 'content/posts/*.md',
      route: ':slug',
      refs: {
        tags: {
          typeName: 'Tag',
          route: '/tag/:id',
          create: true
        }
      }
    }
  },
],

markdownで書かれた記事内の外部リンクを別タブで開いたりするための設定です。

編集ファイル: gridsome.config.js

transformers: {
  remark: {
    externalLinksTarget: '_blank',
    externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
    anchorClassName: 'icon icon-link',
  }
},

投稿記事一覧を表示するためIndex.vueを編集

下記のようになります。

<template>
  <Layout>
    
    <h1>Gridsomeで作るブログ</h1>

    <h2>投稿一覧</h2>
    <div v-for="post in $page.posts.edges" :key="post.node.id">
      タイトル: <g-link :to="post.node.path">
        {{ post.node.title }}
      </g-link>
      <p>概要: {{ post.node.description }}</p>
      <p>タグ:</p>
      <ul v-if="post.node.tags">
        <li v-for="tag in post.node.tags" :key="tag.id">{{ tag.title }}</li>
      </ul>
    </div>
  </Layout>
</template>

<page-query>
{
  posts: allPost {
    edges {
      node {
        path
        title
        tags {
          id
          title
          path
        }
        description
        content
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: 'Hello, world!'
  }
}
</script>

ここまででトップで記事一覧が表示できます。

all-posts

page-queryについて解説

gridsome developコマンドの後、 http://localhost:8080/___explore にアクセスするとGraphQLを試すことができます。

about-page-query

右側のDOCSをクリックすると、こんな感じで使えるクエリが見れます。画像のようにt と入力しただけでもtags など、候補が出てきていて便利ですね。

graphql-docs

記事ページを表示するためPost.vueを作成

templatesの中に Post.vue を作成します。この Post は gridsome.config.js で記述した、 source-filesystemのoptionsである typeName: 'Post' に紐付いています。

src/templates/Post.vue

<template>
  <Layout>
    <h1>{{ $page.post.title }}</h1>
    <p>タグ:</p>
    <ul v-if="$page.post.tags">
        <li v-for="tag in $page.post.tags" :key="tag.id">{{ tag.title }}</li>
    </ul>
    <div v-html="$page.post.content"/>
  </Layout>
</template>

<page-query>
query Post ($path: String!) {
  post: post (path: $path) {
    title
    path
    date (format: "YYYY/MM/DD")
    tags {
      id
      title
      path
    }
    description
    content
  }
}
</page-query>

<script>
export default {
  metaInfo() {
    return {
        title: this.$page.post.title
    }
  }
}
</script>

ここまでで、投稿記事ページが表示できるようになります。外部リンクは @gridsome/transformer-remark の設定によって別タブで開くことが確認できます。

post-page

まとめ

以上となります。簡単にブログが作成出来たかと思います。あとはCSSをあてて、Netlifyからホスティングすれば完璧ですね。

今回作成したブログはこちらから確認できます。

Gridsomeで作るブログ

また、引続き下記の機能追加を行っています。合わせてご覧くださいませ（GithubのPRです）

Gridsomeのデフォルトスターターからブログを作成する