Hexo Tips

タグでフィルタリングしてページを分けたい

日誌がHomeに並んでいるのが嫌だったので分けた。メモ書きが並ぶのも見目が悪い。

前提

Hexo+NexT環境

手順

  1. 公式の pagination をもってきて、ちょろっと弄る。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const { format: _format, layout, data, perPage, includeTag, excludeTag } = Object.assign({
format: 'page/%d/',
layout: ['archive', 'index'],
data: {},
perPage: 10,
includeTag: null,
excludeTag: null
}, options);

const usePosts = Object.create(posts);
usePosts.data = usePosts.data.sort((a, b) => a.date.isBefore(b.date) ? 1 : a.date.isAfter(b.date) ? -1 : 0 )
if (includeTag !== null) {
usePosts.data = usePosts.data.filter(a => a.tags.data.some(tag => tag.name == includeTag));
usePosts.length = usePosts.data.length;
}
if (excludeTag !== null) {
usePosts.data = usePosts.data.filter(a => !a.tags.data.some(tag => tag.name == excludeTag));
usePosts.length = usePosts.data.length;
}
const length = usePosts.data.length;

適当にpostsを弄ってフィルタリングする。コピーはしておかないとデータを破壊するので注意。

  1. pagination を生成時フックにかけて、特定ディレクトリ以下にページ分けしたデータを入れる。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var pagination = require('./lib/pagination');
hexo.extend.generator.register('home', function(locals){
// hexo-pagination makes an index.html for the /archives route
return pagination('home', locals.posts, {
perPage: 10,
layout: ['index'],
excludeTag: 'Diary'
});
});
hexo.extend.generator.register('diary', function(locals){
// hexo-pagination makes an index.html for the /archives route
return pagination('diary', locals.posts, {
perPage: 10,
layout: ['diary', 'archive', 'index'],
includeTag: 'Diary'
});
});

今回は考えるのが面倒だったのでnext/scripts/events/index.jsにべた書き。これでDiaryタグの有無でフィルタリングしてページわけできる。

  1. _config.ymlのmenuのhomeやdiaryをそのディレクトリにしておく。
1
2
3
4
5
menu:
home: /home/ || fa fa-home
archives: /archives/ || fa fa-archive
tags: /tags/ || fa fa-tags
diary: /diary/ || fa fa-archive

ついでにdiary用のlayoutファイルをindexからコピペして作っておく。

リンク