相关文章阅读顺序

前言

从分析generator-index开始,我们就知道了
只要给出一个对应的path路径和layout布局,我们就可以返回一个pagination,里面有很多的页面可调用数据

现在我们来分析一下hexo-generator-tag这个插件: 源码在这里

用法

用法很简单

1
2
3
4
5
tag_generator:
per_page: 10
tag_generator:false(这个一般不出现 generate tag index page, usually /tags/index.html)

tag_dir: tags (相关属性,这是原本就有的)

就这么一个属性—控制每页的文章数

这个属性不看源码是没有文档的
作用为:
如果你有两篇文章,tag分别是aaa和bbb,那么hexo g后,生成的html分别位于tags/aaa/index.htmltags/bbb/index.html
这两个页面分别展示了两个标签的列表,但是我们有时候也希望,有一个显示所有标签的页面,位于tags/index.html,统领所有标签。这时候tag_generator这个属性就派上用场了

在config中添加

1
2
tag_generator:
tag_generator:true

再次hexo g,则自动生成tags/index.html,访问http://localhost:4000/tags/index.html,就会显示所有tags了

代码分析

先看源码整体结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = function(locals) {
var config = this.config;
var perPage = config.tag_generator.per_page; //指定每页列表数
var paginationDir = config.pagination_dir || 'page'; //生成的文件夹路径
var tags = locals.tags; // 这是一个数组
var tagDir; // 从下面可知 这是生成tag文件夹路径

var pages = tags.reduce(function(result, tag) {
});

return result.concat(data);
}, []);

// 如果enable_index_page为true 生成tag index页,就在/tags/index.html
if (config.tag_generator.enable_index_page) {
tagDir = config.tag_dir;
if (tagDir[tagDir.length - 1] !== '/') {
tagDir += '/';
} //加上路径斜杠

pages.push({
}
});
}

return pages; // 最后返回的是pages 一个数组
};

分析第一段page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var pages = tags.reduce(function(result, tag) {
// result 代表每一次的累加值
// tag 其实就是current value,当前单个tag值

if (!tag.length) return result; // tag为空,就返回result

var posts = tag.posts.sort('-date');
//通过 locals.tags[tag-i].posts来取得相对应的文章,这个用法需要掌握

var data = pagination(tag.path, posts, {
perPage: perPage,
layout: ['tag', 'archive', 'index'],
format: paginationDir + '/%d/',
data: {
tag: tag.name
}
}); // 我们知道 pagination函数返回一个 *键为 path,layout,data的多个对象*的数组

return result.concat(data); // 把数组连接起来变成一个数组
}, []);

其实就是把每一个tag标签分页,分页后再把所有的分页数组组成一个新的大数组返回出来

注意
tag里面包含什么值?
我们可以在tags.ejs模板中操作一下,打印出来看看,我们需要创建一个tag的index页面,因为根据源码,只有tags的汇总页面才会返回tags这个数据,因为tags的分页返回的data中有一项是tags,我们就用它来看一看里面是什么东西!
打印tags

1
2
<%= Object.keys(page.tags) %>
//domain,_events,_eventsCount,_maxListeners,name,data,_mutex,schema,length,Document,Query

我们的目的是tag里面的东西
写如下代码

1
2
3
4
5
6
<ul>
<% page.tags.forEach(function(t,i){ %>
<%= Object.keys(t) %>
<% }) %>
</ul>
<!-- name,_id,slug,path,permalink,posts,length -->

至此 我们知道了tag的所有键

tag.path非常关键!这是生成静态文件包和url的关键一项,format十分关键,尤其是tag下,我们需要清楚的知道page的路径变化

示例

现举例如下:
tag为aaa的页面分页url如下展示
http://localhost:4000/tags/aaa/
http://localhost:4000/tags/aaa/page/2/
静态页面生成地址如下展示

1
2
3
4
5
6
tag
---aaa
------page
---------2
------------index.html
------index.html

扩展

hexo的数据库用的是warehouse 文档地址 ,关于hexo的数据模型关系,可以看其源码
通过这个就大体知道如何写调用数据了

下面是生成tag index的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if (config.tag_generator.enable_index_page) {
tagDir = config.tag_dir;
if (tagDir[tagDir.length - 1] !== '/') {
tagDir += '/';
}

pages.push({
path: tagDir, // 指定路径
layout: ['tag-index', 'tag', 'archive', 'index'], //指定布局,首先找有没有tag-index模板
posts: locals.posts,
data: {
base: tagDir,
total: 1,
current: 1,
current_url: tagDir,
posts: locals.posts,
prev: 0,
prev_link: '',
next: 0,
next_link: '',
tags: tags
}
});
}

可以看出来 其实返回的结构与调用pagination返回的数据结构基本一致,所以我们可以推断,hexo就是利用这个结构来生成页面和输入数据的

参考链接:https://www.jianshu.com/p/470904307d2c