Hexo | 两个你可能会用到的icarus主题配置

Hexo | 两个你可能会用到的icarus主题配置

开始折腾hexo也差不多有一个多礼拜了,icarus主题整体来讲还是非常棒的,集成的评论、捐赠插件都很全很完整。

但毕竟众口难调,每个博主都有些定制化的需求,就会有一些没满足的功能。这里整理了我在建站过程中真实遇到的问题,希望对也在用icarus主题的同学们有所帮助。

一、文章置顶

博客默认是按照创建时间倒序排列的,有的时候我们希望可以置顶一些文章,icarus没有提供这个功能,因此我们还是需要进行一些改造。

实现的效果是:写文章的时候在front-matter区域定义文章的权重(top),如果top的数值大于0,则将该文章置顶,并展示置顶标签。

第一步,添加top属性在根目录的config文件中

/_config.yml

index_generator:
path: ''
per_page: 10
order_by:
top: -1
date: -1


第二步,修改generator.js,主要是在生成html代码时优先按照top排序

/⁨node_modules⁩/hexo-generator-index⁩/lib⁩/generator.js

var paginationDir = config.pagination_dir || 'page';

// added code
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
if(a.top == b.top) return b.date - a.date;
else return b.top - a.top;
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});
// end

var path = config.index_generator.path || '';

第三步,修改模板中的post.md,添加top属性并设置默认值为0

/scaffolds/post.md
---
title: {{ title }}
date: {{ date }}
tags:
top: 0
---

最后,根据大家自己的喜好在前端添加标签咯~

/themes/icarus/layout/common/article.ejs

<% if (post.top>0) { %>
<i class="fas fa-arrow-alt-circle-up" style="color:#3273dc"></i>
<span class="level-item" style="color:#3273dc">&nbsp;置顶</span>
<% } %>

最后的效果如图,蓝色的置顶标签就是了:

二、添加阅读统计

valine插件在1.2.0版本之后提供了文章阅读量统计的功能,好处是可以通过leancloud后台的可视化界面看到数据。目前只支持文章PV的统计,添加方式非常简单:

  1. 在config文件中添加valine的visitor属性
  2. 修改valine的加载文件valine.ejs,添加visitor字段的加载
  3. 根据想添加统计的展示位置,例如文章尾部,添加前端代码

具体的操作可以参考valine官方文档,这里不多介绍了。我用的是更加简单方便的busuanzi进行统计:

第一步,在icarus主题的head.ejs中添加脚本

/themes/icarus/layout/common/head.ejs

<% if (has_config('visit')) { %>
<script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<% } %>

第二步,在网页footer里面统计站点的UV和PV

/themes/icarus/layout/common/footer.ejs

<span id="busuanzi_container_site_uv">
❤️ 感谢
<span id="busuanzi_value_site_uv">0</span>
位小伙伴的
</span>
<span id="busuanzi_container_site_pv">
<span id="busuanzi_value_site_pv">0</span>
次陪伴
</span>

第三步,在每篇文章article里面统计阅读量PV,主页不显示

/themes/icarus/layout/common/article.ejs

<div class="level is-size-7 has-text-grey">
<div class="level-left">
<i class="far fa-eye"></i>
<span>&nbsp;</span>
<span id="busuanzi_container_page_pv" style="display: inline;">
<span id="busuanzi_value_page_pv">0</span>
</span>
</div>
</div>

效果大家在这个页面就可以找到啦~ 不过需要注意的是,busuanzi统计UV的逻辑是根据浏览器请求的cookie,不是严格意义上的设备唯一标识。逻辑严谨什么的并不重要,有人气才是关键对吧!

(๑•ㅂ•́)و✧

参考:https://www.jianshu.com/p/42a4efcdf8d7

  0

评论

📧 邮箱: 留下邮箱,别人回复后会收到通知喔
😉 头像: 自动同步邮箱对应的「Gravatar」头像
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×