前後のブログへのリンクを追加
前後のブログへのリンクを追加
VuePress でブログページに前後のブログへのリンクを追加したときのメモです。
環境
vuepress eject済みpugに変更済み- Blog Plugin | 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.vue に Blog(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]; }
よくわかってないところ
computed と methods の違い
キャッシュされるかされないかはわかったが、どういうふうに使い分けするのかよくわからない。
computed
キャッシュする。
methods
毎回処理を行う。
