hexo 分类、标签、归档合并浏览

一直在用 hexo-theme-cactus ,有些地方还是很别扭的,刚添加好博客的分类和标签显示,可到 Writing 页面查看。

hexo 自动加载 layout.ejs ,这个 layout 比较特殊,如果访问 indexlayout.ejs+index.ejs ,访问 archiveslayout.ejs+archive.ejs,其它页面则是 layout.ejs+page.ejs 。所以说 archives 对应 archive.ejs 文件,categoriestags 页面则是在 page.ejs 中判断并加载的,我在主题 cactus 中,将他们都加到了 archive.ejs 文件中,如下:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<% if (site.categories) {%>
<% if (page.archive) {%>
<div id="category">
<span class="h1">Categories</span>
<%- list_categories() %>
</div>
<div id="tag">
<span class="h1">Tags</span>
<%- list_tags() %>
</div>
<% } %>

<%}%>

<div id="archive">
<% if (page.tag) {%>
<%
var n = page.path.split('/')
var title = '<<Tag>>' +n[1];
%>
<span class="h1"><%=title%></span>
<% } %>

<% if (page.category) {%>
<%
var n = page.path.split('/')
var title = '<<Category>>' +n[1];
%>
<span class="h1"><%=title%></span>
<% } %>

<% if (page.archive) {%>
<span class="h1">Archives</span>
<% } %>
<!-- 上面主要是自定义内容,下面是主题自带 -->
<ul class="post-list">
<% var year = 0 %>
<% var change = false %>
<% page.posts.sort('date', 'desc').each(function(post) { %>
<% var itemYear = date(post.date, 'YYYY') - 0 %>
<% change = year !== itemYear %>
<% year = change ? itemYear : year %>
<% if (change) { %>
<h2><%= year %></h2>
<% } %>
<li class="post-item">
<%- partial('_partial/post/date', { post: post, class_name: 'meta' }) %>
<span><%- partial('_partial/post/title', { post: post, index: true, class_name: ''}) %><span>
</li>
<% }); %>
</ul>
<%- partial('_partial/pagination') %>
</div>

获得所有标签或者分类,有两种常用方式:

  1. hexo 的内置函数 list_tags()list_catogories() ,详情请查看 doc
  2. 通过全局变量 site 获得, site.categoriessite.tags 可以得到所有标签和分类,详情请查看 doc

上面的代码已经使用了方法一,再演示一下方法二:

1
2
3
4
5
6
7
8
9
10
11
12
<% if (site.categories.length){ %>
<div class="categorieslist">
<p class="asidetitle"><%= __('categories') %></p>
<ul>
<% site.categories.sort('name').each(function(item){ %>
<% if(item.posts.length){ %>
<li><a href="<%- config.root %><%- item.path %>" title="<%= item.name %>"><%= item.name %><sup><%= item.posts.length %></sup></a></li>
<% } %>
<% }); %>
</ul>
</div>
<% } %>

效果如下:
Image.png

这个主题应用后,发现在每篇 postheader 处都不显示 categorypost 模板 对应 post.ejs 文件,hexopartial 函数可用来加载自定义模板,修改 post.ejsheader 内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header>
<%- partial('_partial/post/title', { post: page, index: false, class_name: 'posttitle' }) %>
<div class="meta">
<span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
<i class="fa fa-user-secret"></i>
<span itemprop="name"><% if (page.author) { %><%- page.author %><% } else { %><%- config.title %><% } %></span>
</span>
<i class="fa fa-calendar"></i>
<%- partial('_partial/post/date', { post: page, class_name: 'postdate' }) %>
<i class="fa fa-eye"></i>
<span id="busuanzi_container_site_pv" style="display: inline;"><span id="busuanzi_value_page_pv"></span></span>
<%- partial('_partial/post/category') %>
<%- partial('_partial/post/tag') %>
</div>
</header>

category.ejs 文件内容:

1
2
3
4
5
6
<% if (page.categories && page.categories.length) { %>
<div class="article-category">
<i class="fa fa-bookmark"></i>
<%- list_categories(page.categories, { show_count: false, style: 'link' }) %>
</div>
<% } %>

article.styl 中修改样式:

1
2
3
4
5
6
7
8
9
10
11
12
.article-tag
.tag-link
&:before
content: "#"

@media (min-width: 480px)
.article-category
display: inline
&:before
content: "|"
.article-tag
display: inline

效果:
Image.png





root@kali ~# cat 重要声明
本博客所有原创文章,作者皆保留权利。转载必须包含本声明,保持文本完整,并以超链接形式注明出处【Techliu】。查看和编写文章评论都需翻墙,为了更方便地获取文章信息,可订阅RSS,如果您还没有一款喜爱的阅读器,不妨试试Inoreader.
root@kali ~# Thankyou!