继续完善主题,老实说能从一跟着练习到这里的人,开发一个自己的hexo主题已经不是什么难事了。(前题有html、js、css[学习这三最快的地方首推w3cshool])。开发到这里其实已经讲的差不多了。剩下一些功能都是类似或可有可无的。比如分类和标签是类似的,单页面都是一样的,今天我个就来开发一个单页面。

文章归档单页面

即archive页,如果还记得之前的教程或有认真看过hexo文档的话,应该知道它是官方给出的六大模板之一。这也是它特殊的地方。如果你打开hexo根目录的package.json的话就能发现:(关于package.json是干啥用自行百度,好奇能使你进步)

archive、category、index、tag都在里面,而且都是hexo-generator开头的。那么hexo-generator又是什么呢?来到hexo官网的api页:

而且也举了归档页面的例子来向我们说明:

认真看懂它。
意思是生成archives/index.html这个文件,提供的数据为所有的文章(data: locals.posts,),渲染的模板是archive,没有archive就用index替补(layout: [‘archive’, ‘index’])

好了好了不扯了,关于hexo运行原理一时半会儿也说不完。

编写代码

以上扯了这么久就是说我们直接在archive.ejs里面撸代码就行了。嗯嗯网上找了个模板,样子如下:

先直接将代码复制到archive.ejs中,在source/css中新建archive.css,把需要的css复制其中。再在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
<%- css(['/css/archive.css']) %>
<div class="content">
<article>
<h3>2013</h3>
<section>
<span class="point-time point-yellow"></span>
<time datetime="2013-03">
<span>March</span>
<span>2013</span>
</time>
<aside>
<p class="things">The FAW</p>
<p class="brief"><span class="text-yellow">Award</span> (Miami. FL)</p>
</aside>
</section>
<section>
<span class="point-time point-red"></span>
<time datetime="2013-03">
<span>March</span>
<span>2013</span>
</time>
<aside>
<p class="things">You reached 500 followers on Twitter</p>
<p class="brief"><span class="text-red">Social Appearance</span></p>
</aside>
</section>
</article>

hexo s后,在浏览器地址栏输入localhost:4000/archives/就能访问到:

找到archive的页面变量:(page.year和page.month是undefined,可能哪里需要设置)

然后去把测试的md文章都改下时间。万事具备,接下来开始修改html代码:

1
2
3
4
5
6
7
<%- css(['/css/archive.css']) %>
<div class="content">
<% console.log(page)%>
<% page.posts.each(function(post){ %>
<% console.log(post.title)%>
<% }) %>
<article>


这里说明一下,8,9,5都是我改了后还是2020年的,2019和2018的不在。说明page.posts是不全的,我们应该用网站变量:

1
2
3
4
5
6
<%- css(['/css/archive.css']) %>
<div class="content">
<% console.log(site)%>
<% site.posts.each(function(post){ %>
<% console.log(post.title)%>
<% }) %>


当是可以看出它似乎没有按照时间排序,前面我们有说过page.posts是Model.js的model对像,在Query.js中给我们提供了个sort方法如下:

所以修改代码如下:

1
2
3
4
5
6
<%- css(['/css/archive.css']) %>
<div class="content">
<% console.log(site)%>
<% site.posts.sort('date').each(function(post){ %>
<% console.log(post.title)%>
<% }) %>


可以看到已经按时间排序了。

coding……

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
<%- css(['/css/archive.css']) %>
<div class="content">
<% var tempYear %>
<% var posts = site.posts.sort('date') %>
<% posts.each(function(post, i){ %>
<% var currentYear = parseInt(date(post.date, 'YYYY')); %>
<% if (tempYear != currentYear){ %>
<% tempYear = currentYear %>
<article>
<h3><%- currentYear%></h3>
<% } %>
<section>
<span class="point-time point-yellow"></span>
<time datetime="<%- date(post.date, 'YYYY-MM')%>">
<span><%- date(post.date, 'MMMM DD,')%></span>
</time>
<aside>
<p class="things"><%= post.title%></p>
<p class="brief"><span class="text-yellow"><%= Object.values(post.categories.data[0])[0] %>
</span></p>
</aside>
</section>
<% if (!posts.eq(i + 1) || currentYear != parseInt(date(posts.eq(i + 1).date, 'YYYY'))){ %>
</article>
<% } %>
<% }) %>
</div>

最后效果如下:

如果想让归档列表按照分类显示不同颜色怎么实现呢?

代码解释和实现方法待续 To be continued……
代码同步上传在github仓库和百度云上,关注回复story009获取。

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

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