Monniya

简单,美好,奋发

一只萌哒哒的兔子
走在产品进阶之路


vno主题优化(二)添加上下篇导航及优化disqus速度

前言

本主题由喵神原创,基于jekyll,hexo版本由空谷幽兰创建。
由于hexo版本的vno主题,博主已经停止维护,为了这个漂亮的主题不被荒废,特新建了一个repository进行持续修复和优化,有需要的可以从我的github上下载此主题

3.29更新 增加文章末尾,最近的文章,更早的文章

就是博客经常看到的上一篇,下一篇功能啦,还是按照喵神的样式来,只是摘要字数减少了一点,颜色采用蓝色调,具体效果见文章末尾
简要概述:使用hexo的page.prev及page.next获取上一篇,下一篇文章,以及用path,title,content属性获取对应的路径,文章名称,内容,再加入到生成的文章模版中,最后添加css样式即可
操作步骤:
1.在themes/new-vno/layout/_partial/位置新建文件read-more.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
<section class="read-more">
<% if (page.prev || page.next){ %>
<% if (page.prev){ %>
<div class="read-more-item">
<span class="read-more-item-dim">最近的文章</span>
<h2 class="post-list__post-title post-title"><a href="<%- config.root %><%- page.prev.path %>" title="<%= page.prev.title %>"><%= page.prev.title %></a></h2>
<p class="excerpt">
<% if (page.prev.excerpt){ %>
<%= strip_html(page.prev.excerpt) %>
<% } else { %>
<%= strip_html(page.prev.content).substring(0, 150)%>
<% } %>&hellip;
</p>
<div class="post-list__meta"><%- partial('_partial/date',{post: page.prev}) %> &#8226; <span class="post-list__meta--tags tags">于&nbsp;<%- partial('_partial/tags',{post: page.prev}) %></span><a class="btn-border-small" href="<%- config.root %><%- page.prev.path %>">继续阅读</a></div>
</div>
<% } %>
<% if (page.next){ %>
<div class="read-more-item">
<span class="read-more-item-dim">更早的文章</span>
<h2 class="post-list__post-title post-title"><a href="<%- config.root %><%- page.next.path %>" title="<%= page.next.title %>"><%= page.next.title %></a></h2>
<p class="excerpt">
<% if (page.next.excerpt){ %>
<%= strip_html(page.next.excerpt) %>
<% } else { %>
<%= strip_html(page.next.content).substring(0, 150)%>
<% } %>&hellip;
</p>
<div class="post-list__meta"><%- partial('_partial/date',{post: page.next}) %> &#8226; <span class="post-list__meta--tags tags">于&nbsp;<%- partial('_partial/tags',{post: page.next}) %></span><a class="btn-border-small" href="<%- config.root %><%- page.next.path %>">继续阅读</a></div>
</div>
<% } %>
<% } %>
</section>

2.添加到post文章模版中
文件位置:themes/new-vno/layout/post.ejs
在文章模块后,comments模块前加上调用代码

1
<%- partial('_partial/read-more', {}) %>

3.增加css样式
文件位置:/themes/new-vno/source/css/vno.styl

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
.read-more {
margin-top: 1em;
margin-bottom: 1em;
padding-top: 1.2em;
padding-bottom: 1em;
border-top: 1px solid #DDDDDD;
}
.read-more-item {
display: inline-block;
vertical-align: top;
width: 48%;
}
.read-more-item-dim {
color: #4E97D8;
font-size: .8em;
line-height: 1.8em;
}
@media all and (max-width: 960px) {
.read-more-item {
padding-top: 1.2em;
width: 100%;
}
}

好了,搞定!

3.27更新 优化disqus访问速度

disqus评论加载缓慢本质原因是博客没有上https协议,不知为何http的disqus地址绕墙能力很低下,小白不懂。
想想家里的砖块服务器还能用,懒得再买个服务器折腾,就没上https(某人说上https是程序员的尊严😂,幸好我只是一枚产品媛😂)
but总不能一直忍受蜗牛的速度吧,让我们来想几个小办法
首先:disqus评论优化文件位置:themes/new-vno/layout/_partial/comments.ejs
潘神教我直接用a.disquscdn.com减少一次跳转,但我试了效果并不显著,可能姿势不对orz
直接把用到的资源文件下载到本地,懒人还是放弃把
亲测有效 把comments.ejs文件中几个disqus的链接地址从http,改成https.真的有用!哈哈!
相关文章:vno主题优化(一)
相关文章:vno主题优化(三) 添加博客统计

最近的文章

让你安静的离岛-涛岛

上一站 安通国家海洋公园涛岛是苏梅岛的离岛,海水清澈无加,著名的潜水胜地,因为小岛形状似乌龟,又称龟岛。从苏梅岛坐船约2小时,可以提前在官网定船票(有Lomprayah和Seatran两家公司船运,L公司船相对大,行驶更平稳),官网自助购买无压力。但因为官网需要提前3天订票,需提前规划行程,so还是 …

旅旅行 继续阅读
更早的文章

TRY EVERYTHING

现在的世界,哦不,现在的朋友圈好疯狂。谷歌阿法狗撩哥,新晋国民老公撩乔妹,连狐狸都开始撩兔子了。。。休了几天假,这个世界真是发生翻天覆地的变化呀😂还不赶紧跑去观摩一下,树 懒 都 过 完 马 路 啦。坐在位置上听完《try everything》才起身,被这部动画影片深深震撼。进电影院之前看着树懒 …

观观影 继续阅读
comments powered by Disqus