代码解释

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>

首先在循环外部定义了两个变量teamYear和posts。其中tempYear用来保存临时的年份信息,posts则是保存了按时间排序的所有文章数组。接下来循环posts,第一次循环的时候用currentYear来保存当前这篇文章的创建的年份,此时tempYear肯定和currentYear不等的,所以能进入if语句,将currentYear赋值给tempYear,并生成了article和年份的标题。接下来就是生成文章信息,没啥好说的。最后在用eq(i+1)来获取下一篇文章的信息。顺带一提,eq()这方法也是Model.js中提供的方法。如果没有下一篇了或者下一篇文章的创建年份和这一篇不同,则结束article标签,下一个循环又会再一次进if语句,生成新的年份。反之下一循环还在这一年份,那么此时tempYear肯定和currentYear是相等的,则不会进入if语句,只是在article中增加了一个section来展示文章。(不知道看懂没,我觉得应该能看懂了)

分类显示不同颜色

首先我们确定颜色是由text-yellow这个class决定的,只要把每个分类名对应一个颜色类就搞定了。可以使用js来实现,当然也可以用css来实现(中文类名也是可以的哦,当然不支持这样做)。这里我采用取巧的方法,顺带也讲个hexo文档中重要的知识点:

我们要用它的关键在这里:

因为我们的language: zh-cn,所以在主题languages文件夹中新建zh-cn.yml,然后在里面输入下内容

1
2
3
4
5
color:
技术: blue
生活: green
相册: red
vlog: yellow

修改archive.ejs如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
......
<section>
<!-- 取巧方法,只认第一个分类 -->
<% var category = Object.values(post.categories.data[0])[0]%>
<span class="point-time point-<%= __('color.' + category)%>"></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-<%= __('color.' + category)%>"><%= category%>
</span></p>
</aside>
</section>
......

然后顺带把article.ejs中的返回按钮也给它加上,最终效果如下:

首页侧边栏导航

主题开发到这其实还有很多必要的东西未加上去,比如现在首页还没有一个导航能够到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
54
55
<nav>
<div class="menu-btn">
<div class="line line__1"></div>
<div class="line line__2"></div>
<div class="line line__3"></div>
</div>

<div class="sub-menu-btn">
<div class="line line__1"></div>
<div class="line line__2"></div>
</div>

<ul class="nav-links">
<li class="link">
<a href="#">Home</a>
</li>
<li class="link">
<a href="#">About</a>
<ol>
<li><a href="#">designers</a></li>
<li><a href="#">developers</a></li>
</ol>
</li>
<li class="link">
<a href="#">Work</a>
<ol>
<li><a href="#">web</a></li>
<li><a href="#">graphic </a></li>
<li><a href="#">apps </a></li>
</ol>
</li>
<li class="link">
<a href="#">Contact</a>
<ol>
<li><a href="#">Email</a></li>
<li><a href="#">Social</a></li>
</ol>
</li>
<li class="link">
<a href="#">follow me</a>
<ol>
<li>
<a target="_blank" href="https://www.17sucai.com/">
Twitter <i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a target="_blank" href="https://www.17sucai.com/">
Codepen <i class="fab fa-codepen"></i>
</a>
</li>
</ol>
</li>
</ul>
</nav>

包括css和js代码添加在story\source\js\sidebar.js和story\source\css\sidebar.css,而后在header中引入css,footer中引入js,由于篇幅有限,这里就不展示了。这里说一下为啥有些css和js不在header和footer中引入,比如archive.css。因为这个css只有归档页面中有用到,没必要在其他页面中引入它,这也加快了页面加载速度,后其也可以把多个css、js合并压缩成一个,这样会减少请求次数,也优化了页面速度。

加入后效果如下:

未完待续 To be continued……
代码同步上传在github仓库和百度云上,关注回复story010获取。

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

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