继续完善主题,老实说能从一跟着练习到这里的人,开发一个自己的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获取。
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦