继续接上篇完善详情页

添加文章标签

打算在hr的上边添加文章的标签,用f2开发者工具调试如下:

先到css的8551行吧margin调为0:

1
2
3
hr {
margin: 0 0 0 0;
}

接着在hr上面添加html元素,先写好再调样试:

1
2
3
4
5
<div class="tags">
<span>标签:</span>
<a href="" class="tag">XX标签</a>
<a href="" class="tag">XX标签</a>
</div>


再写css,可以自行添加一些交互效果,自由发挥:

1
2
3
4
5
6
7
8
9
10
.tags a {
font-size: 15px;
padding: 3px 5px;
text-decoration: none;
}

.tags a:hover{
color: #fff;
background: #333;
}


当然现在的标签不是文章设置的标签,来到官网可以看到:

所以只要把page.tags循环输出即可。

1
2
3
4
5
6
<div class="tags">
<span>标签:</span>
<% post.tags.each(function(tag){%>
<a href="" class="tag">{{ tag.name }}</a>
<% }) %>
</div>

当然了,再查看效果前你要给md加上标签才行:

1
2
3
4
5
6
7
8
9
10
11
---
title: story6
date: 2020-01-18 22:11:30
tags:
- tag1
- tag2
categories: 技术
keywords:
description:
photos: /images/pic01.jpg
---


光显示了名称还不行,还要跳转到相关页面,那url怎么获取呢?官方文档中并未做详细说明,可以去看源码。不过最简单的还是把tag输出就知道了,在tags循环中加入console.log:

1
2
3
4
<% post.tags.each(function(tag){%>
<% console.log(tag) %>
<a href="" class="tag"><%= tag.name %></a>
<% }) %>

可以看到cmd输出如下:

所以tag.path就可以获取到url了

1
2
3
4
5
6
<div class="tags">
<span>标签:</span>
<% post.tags.each(function(tag){%>
<a href="<%- url_for(tag.path) %>" class="tag"><%= tag.name %></a>
<% }) %>
</div>

标签页空白?

再上一步加好url后,尝试点击标签,会跳转到一个页面:

为啥除了footer全是空白。回想一下之前的文章详情页的时候是不是也这样,再次回顾文档:

加上这句:

每个模板都默认使用 layout 布局,您可在 front-matter 指定其他布局,或是设为 false 来关闭布局功能,您甚至可在布局中再使用其他布局来建立嵌套布局。

分析一下,链接跳转tag模板,默认使用layout:

1
2
3
4
5
6
7
8
9
10
<html>
<!-- //头部模版 -->
<%- partial('_partial/header') %>
<body class="is-preload">
<!-- //内容模版 -->
<%- body %>
<!-- //尾部模版 -->
<%- partial('_partial/footer') %>
</body>
</html>

所以在加载了footer和header(header只是引用css等,不会在页面显示),然后<%- body %>加载了tag模板。而我们的tag模板里啥都没有,所以显示空白。

tag页模板

tag页怎么建好呢,没想好的可以参考下其他主题点击标签后的效果。等你想好前可以试着验证下上一步的分析推论,在tag.ejs下加入如下代码:(可以看到页面出来了)

1
2
3
4
5
<h1>This is Tags page</h1>
<h1>This is Tags page</h1>
<h1>This is Tags page</h1>
<h1>This is Tags page</h1>
<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……

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦