相关文章阅读顺序
前言
从分析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.html和tags/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;
var pages = tags.reduce(function(result, tag) { });
return result.concat(data); }, []);
if (config.tag_generator.enable_index_page) { tagDir = config.tag_dir; if (tagDir[tagDir.length - 1] !== '/') { tagDir += '/'; }
pages.push({ } }); }
return 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) { if (!tag.length) return result; var posts = tag.posts.sort('-date'); var data = pagination(tag.path, posts, { perPage: perPage, layout: ['tag', 'archive', 'index'], format: paginationDir + '/%d/', data: { tag: tag.name } }); return result.concat(data); }, []);
|
其实就是把每一个tag标签分页,分页后再把所有的分页数组组成一个新的大数组返回出来
注意
tag里面包含什么值?
我们可以在tags.ejs模板中操作一下,打印出来看看,我们需要创建一个tag的index页面,因为根据源码,只有tags的汇总页面才会返回tags这个数据,因为tags的分页返回的data中有一项是tags,我们就用它来看一看里面是什么东西!
打印tags
1 2
| <%= Object.keys(page.tags) %>
|
我们的目的是tag里面的东西
写如下代码
1 2 3 4 5 6
| <ul> <% page.tags.forEach(function(t,i){ %> <%= Object.keys(t) %> <% }) %> </ul>
|
至此 我们知道了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'], 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