美化详情页

上篇文章已经可以跳转到文章详情页了,这篇教程先来美化下详情页的样式。
首先打开我们从html5up上下载的story网页,浏览器上打开index-demo.html那个,在演示完图标之后有“Additional Elements”

可以看到这部份用来当文章详情页的容器挺合适。修改代码如下:

1
2
3
4
5
<article class="wrapper style1 align-left">
<div class="inner">
<%- post.content %>
</div>
</article>

可以看出这个页面还缺一些必要的内容,如标题。添加后如下:

1
2
3
4
5
6
7
8
9
10
11
12
<article class="wrapper style1 align-left">
<div class="inner">
<div class="header">
<h1 class="title"><%- post.title %></h1>
<div>
<span>日期:<%- post.date %></span>
<span>字数:<%- post.count %></span>
</div>
</div>
<%- post.content %>
</div>
</article>

main.css

1
2
3
4
5
6
7
8
9

/* 添加的css项 */
.title {
font-size: 3rem;
font-weight: 700;
}
article h2 {
font-size: 1.7rem;
}

解决日期和字数显示

可以看到网页上的日期显示的是一串数字,其实这个是日期的时间戳

百度百科:时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数。通俗的讲, 时间戳是一份能够表示一份数据在一个特定时间点已经存在的完整的可验证的数据。 它的提出主要是为用户提供一份电子证据, 以证明用户的某些数据的产生时间。 在实际应用上, 它可以使用在包括电子商务、 金融活动的各个方面, 尤其可以用来支撑公开密钥基础设施的 “不可否认” 服务。

来到hexo官网,搜索date:


修改成下图:

1
<span>日期:<%- date(post.date, 'YYYY/M/D') %></span>

页面显示如下:

和官方例子不一样,应该是文档错了。那如果要文档里那种显示该如何修改代码呢?接下来部分是干货,会举一反三的话能自己解决很多问题。分析下,date()这个函数归类在辅助函数helper里。所以先去找有没有hexo-helper-date的包,(在node_modules里找)。没找到,因为这个官方的辅助函数,试着在hexo-cli和hexo里面找。在node_modules_hexo@4.2.0@hexo\lib\plugins\helper\中找到我们要的date.js这个文件。打开它可以看到

它都原封不动的调用了 Moment.js,所以我们在hexo文档中直接点击date说明上面那个 Moment.js 的超链接去看 Moment.js 文档。找到了如下表:

那就简单了,改成自己相要的日期显示类型就行。参考如下:

1
<span><%- date(post.date, 'MMMM DD, YYYY, dddd ') %></span>

接下来改成中文月份,只要在根目录的config下把language改为zh-cn即可。(为啥知道,看文档和源)

日期解决后就要来看下字数,现我们已经知道文章内容在post.contant里。用post.content.length这种写法会把html标签也算进去,hexo给我们提供了strip_html字符串处理函数:

所以只要strip_html(post.content).length这种写法就好了。效果如下:

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

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

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