Blog 折腾记

Author Avatar
Travon 8月 16, 2017
  • 在其它设备中阅读本文章

本着不折腾不舒服的精神,对博客进行个性化,丰富功能。

修改不蒜子统计

Material 主题的PV和UV统计用的也是不蒜子,但是显示的位置在分享里,太隐蔽了。于是乎,我就想把统计信息显示在footer里,然后参照网上教程,修改了layout/_partial/footer.ejs,如下:

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>

增加每日一图

每日一图的功能是我在搜索Material主题的博客时,偶然发现的一个隐藏属性,具体可以参见这里,因为我发现这个作者给的API比较慢,于是就搜了一下有没有比较快的API,结果还真有,就是这个,这个API返回的是Bing的图片,图片质量很有保证,而且作者有很多参数可以设置,我选择了分辨率为800*480,这样加载速度更快,十分满意,具体修改layout/_partial/daily_pic.ejs,如下:

<div class="mdl-card__media mdl-color-text--grey-50" style="background-image:url(https://bing.ioliu.cn/v1/rand/?w=800&h=480)">

其中w是设置宽度,h是设置高度,具体的参数设置可以参考github页面。总之,给这个API的作者点个赞,哈哈。

增加版权信息

为每篇文章增加版权信息,其实也没人会来转载我的文章,但是就是想尽可能完善一下自己的博客嘛。我参考的是这位仁兄的方法,结合了一些别的博客看到的版权声明。具体我是修改layout/_partial/post-content.ejs,如下:

<% if(!page.nostatement){ %>
  <div class="article-statement">
    <hr>  
    <strong>本文标题: </strong><a href="<%- url_for(page.path) %>"><%= page.title %></a><br>
    <strong>原始链接: </strong><a href="<%- url_for(page.path) %>" title="<%= page.title %>"><%= page.permalink %></a><br>
    <strong>发布时间: </strong><%= page.date.format("YYYY年MM月DD日-HH:mm") %><br>
    <% if(page.updated){ %>
    <strong>最后更新: </strong><%= page.updated.format("YYYY年MM月DD日-HH:mm") %></p>
    <% } %>
    <strong>版权声明: </strong>本站文章均采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0协议</a>进行许可。转载请注明出处!<br>
  </div>
<% } %>

这里增加了nostatement参数,主要是考虑到About页面并不需要版权信息,加了这个参数可以自由控制版权信息的添加。

增加代码高亮

在增加了上面这些代码以后,发现Material主题的代码渲染不是很好看,于是去查了作者的说明文档,发现可以安装插件Hexo-Prism-Plugin,我按照github页面安装配置。

npm i -S hexo-prism-plugin
prism_plugin:
  mode: preprocess    # realtime/preprocess
  theme: solarizedlight
  line_number: true    # default false

还是不能渲染,最后参照这篇博客,发现是我的theme写错了,所以不能高亮,然后我把所有的theme都试了一遍,最后选择了solarizedlight,显示效果在上面。
主要theme有如下几种:

  • default
  • coy
  • dark
  • funky
  • okaidia
  • solarizedlight
  • tomorrow
  • twilight

.md文件中插入代码块的语法如下,其中language可以包括绝大部分编程语言,具体参考官方文档

```language
代码块
```

About页面增加背景音乐

毋庸置疑,好的事情总会到来。而当它来晚时,也不失为一种惊喜。
——— 《托斯卡纳艳阳下》

这个是心血来潮的想法,之前听过《Almost Lover》,主要是配合女神汤唯和廖凡演的《命中注定》电影原声MV,简直不能更唯美心碎,真的推荐这个MV,刚刚我又循环了10遍。是的,刚刚也把电影刷了一遍。于是想把 它加过来做背景音乐,然后加在了About me页面,方法其实很简单。在网易云音乐上搜索歌名,选择生成外链播放器

得到的外链代码大致如下:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22423722&auto=1&height=66"></iframe>

然后在.md文件中插入这段代码就可以生成播放器,具体效果可以参考About me页面

我会继续折腾,本页面也将持续更新。


本文标题: Blog 折腾记
原始链接: http://oyeblog.com/2017/hexo_blog_personalize/
发布时间: 2017年08月16日 - 20时03分
最后更新: 2017年08月18日 - 18时16分
版权声明: 本站文章均采用CC BY-NC-SA 4.0协议进行许可。转载请注明出处!