代码解释
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获取。
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦