都2020了,带你开发hexo主题(七)
继续接上篇完善详情页
添加文章标签
打算在hr的上边添加文章的标签,用f2开发者工具调试如下:
先到css的8551行吧margin调为0:
1 | hr { |
接着在hr上面添加html元素,先写好再调样试:
1 | <div class="tags"> |
再写css,可以自行添加一些交互效果,自由发挥:
1 | .tags a { |
当然现在的标签不是文章设置的标签,来到官网可以看到:
所以只要把page.tags循环输出即可。
1 | <div class="tags"> |
当然了,再查看效果前你要给md加上标签才行:
1 | --- |
光显示了名称还不行,还要跳转到相关页面,那url怎么获取呢?官方文档中并未做详细说明,可以去看源码。不过最简单的还是把tag输出就知道了,在tags循环中加入console.log:
1 | <% post.tags.each(function(tag){%> |
可以看到cmd输出如下:
所以tag.path就可以获取到url了
1 | <div class="tags"> |
标签页空白?
再上一步加好url后,尝试点击标签,会跳转到一个页面:
为啥除了footer全是空白。回想一下之前的文章详情页的时候是不是也这样,再次回顾文档:
加上这句:
每个模板都默认使用 layout 布局,您可在 front-matter 指定其他布局,或是设为 false 来关闭布局功能,您甚至可在布局中再使用其他布局来建立嵌套布局。
分析一下,链接跳转tag模板,默认使用layout:
1 | <html> |
所以在加载了footer和header(header只是引用css等,不会在页面显示),然后<%- body %>加载了tag模板。而我们的tag模板里啥都没有,所以显示空白。
tag页模板
tag页怎么建好呢,没想好的可以参考下其他主题点击标签后的效果。等你想好前可以试着验证下上一步的分析推论,在tag.ejs下加入如下代码:(可以看到页面出来了)
1 | <h1>This is Tags page</h1> |
回到正题,tags页面应该显示什么?点击某一个标签,一个标签对应n篇文章(至少有一篇)。所以应该显示的是属于该标签下的文章列表页。所以tag.ejs中应该写显示文章列表页的代码,等等!index首页是显示文章列表页,tag是显示文章列表页,将来分类category也是显示文章列表页,我们应该把显示文章列表页部分单独抽离出来。hexo大部分主题用archive来表示文章列表页,但归档页也叫archive,这里为了好理解,就叫post-list好了。
在_partial下新建post-list.ejs文件,把index中的文章列表部分代码复制进去。(应该是全部233333,因为首页没其他东西了)
然后index和tag页都只要简单的引用post-list就行了。
代码同步上传在github仓库和百度云上,关注回复story007获取。
未完待续 To be continued……
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号