都2020了,带你开发hexo主题(十)
代码解释
1 | <%- css(['/css/archive.css']) %> |
首先在循环外部定义了两个变量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
5color:
技术: 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获取。
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号