# 前後のブログへのリンクを追加📝

VuePress でブログページに前後のブログへのリンクを追加したときのメモです。

# 環境

# Page.vue

/_posts/blog/ 以下にブログのファイルを /_posts/log/ 以下にログのファイルを置いているので、$page.regularPath.startsWith('/_posts/blog/') の部分で表示しているコンテンツ(Markdown ファイル)の内容がブログかそうでないか判断しています。

(ここにどのコンポーネントを呼ぶか追加していくと読みづらいので、適切なところに処理を移したいが、どこに書くべきかよくわかっていないのでとりあえず今回はこのまま進める。)

// src/.vuepress/theme/components/Page.vue

- Content

+ Blog(v-if="$page.regularPath.startsWith('/_posts/blog/')")
+ Log(v-else-if="$page.regularPath.startsWith('/_posts/log/')")
+ Content(v-else)

# Content

Content の部分で、src/_posts/blog/2019/04/30/xxx.md の内容(Markdown ファイルの内容)が展開されます。

# Blog.vue

Page.vueBlog(v-if="$page.regularPath.startsWith('/_posts/blog/')") と書いているので、表示するページがブログのときはこのコンポーネントを経由して Content を表示します。

// src/.vuepress/components/Blog.vue

<template lang="pug">
  main.blog
    Content

    div.page-nav
      p.inner
        span.prev(v-if="prev")
          | ← 
          router-link.prev(v-if="prev" :to="prev.path") {{ prev.title || prev.path }}

        span.next(v-if="next")
          router-link.prev(v-if="next" :to="next.path") {{ next.title || next.path }}
          |  →

</template>

<script>
export default {
  computed: {
    prev() {
      return this.blogs()[this.current_key() + 1];
    },
    next() {
      return this.blogs()[this.current_key() - 1];
    }
  },
  methods: {
    blogs() {
      return this.$site.pages
        .filter(blog => blog.regularPath.startsWith("/_posts/blog/"))
        .sort(
          (x, y) => new Date(y.frontmatter.date) - new Date(x.frontmatter.date)
        );
    },
    current_key() {
      return this.blogs().findIndex(({ key }) => key === this.$page.key);
    }
  }
};
</script>

<style lang="scss" scoped>
.blog {
}
</style>

# blogs()

blogs() では、/_posts/blog/ 以下にあるブログのファイルを日付の降順に並び替えて取得しています。

blogs() {
  return this.$site.pages
    .filter(blog => blog.regularPath.startsWith("/_posts/blog/"))
    .sort(
      (x, y) => new Date(y.frontmatter.date) - new Date(x.frontmatter.date)
  );
}

# current_key()

blogs() の中から、findIndex() を使って表示しているブログのインデックスを取得しています。

current_key() {
  return this.blogs().findIndex(({ key }) => key === this.$page.key);
}

# prev()

表示しているブログのひとつ前のブログを取得しています。

ブログを日付の降順に並べているので +1 しています。

prev() {
  return this.blogs()[this.current_key() + 1];
}

# next()

表示しているブログのひとつ後のブログを取得しています。

next() {
  return this.blogs()[this.current_key() - 1];
}

# よくわかってないところ

# computedmethods の違い

キャッシュされるかされないかはわかったが、どういうふうに使い分けするのかよくわからない。

# computed

キャッシュする。

# methods

毎回処理を行う。

# 参考🔗