博客个性化配置

2018-07-08 阅读量

博客搭建好后，总会有一些个性化的想法。比如做网站的访问量统计，文章评论系统，文章分享功能，或是在博客主页放一个音乐播放器，让别人进来浏览博客的同时，还伴随着动听的音乐。大部分博客主题都兼容这些功能，只不过需要自己去配置。下面是我做个性化博客配置时踩的坑，供大家参考参考。

1 . 访问量统计

访问量统计功能可以用百度的站长统计、leancloud，还有不蒜子，这里我用的不蒜子，主要原因是它很简单易用，不需要注册账号什么的。不蒜子官网：http://busuanzi.ibruce.info/

(1) . 引入不蒜子

1	<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

这段代码可以写在footer.ejs里或者header.ejs里或者layout.ejs里，因为是 js 文件，所有推荐放在 html 文档的末尾处加载。这里我放在/themes/yilia/layout/_partial/footer.ejs中。

(2) . 添加站点访问量

1
2
3

<span id="busuanzi_container_site_uv"> 
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

这段代码是用来显示访客数的，可根据个人喜好放在合适的位置即可。我放在了footer.ejs 中。运行的效果如下图

计算访问量的方法有两种，我用的是uv的方式，大家自行选择即可。

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。

(4) . 添加文章访问量

文章的访问量显示在文章里面，所以在article.ejs里加上文章访问量的标签：

1
2
3

<span id="busuanzi_container_page_pv">
   阅读量：<span id="busuanzi_value_page_pv"></span>
</span>

这里加个判断，如果是首页不显示该文章的访问量，下面这段代码添加在/themes/yilia/layout/_partial/article.ejs的header的日期后面：

<% if ( !index ){ %>
		<span class="archive-article-date">
			阅读量 <span id="busuanzi_value_page_pv"></span>
		</span>
<% } %>

2 . 文章分享功能

yilia主题中已经集成了文章的分享插件，直接配置即可。但是在使用微信分享的时候发现那个二维码图片出不来。报参数错误，于是换了一个接口。下面分享四个非常方便的微信分享功能的二维码生成连接

说明：把url=或data=后面的网址改成你的，四种任选一。
http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://lanyes.org
http://b.bshare.cn/barCode?site=weixin&url=http://lanyes.org
http://s.jiathis.com/qrcode.php?url=http://lanyes.org
http://www.kuaizhan.com/common/encode-png?large=true&data=http://lanyes.org
http://api.k780.com:88/?app=qr.get&data=http://www.54admin.net&level=L&size=6
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://www.54admin.net

然后修改 yilia/layout/_partial/post/share.ejs中的代码，将微信分享 img 标签中的连接改成上面中的一个链接即可

<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="<%- 'qrcode' in locals ? qrcode(sUrl) : 'http://qr.liantu.com/api.php?text=' + sUrl  %>" alt="微信分享二维码">
    </div>
</div>

3 . 在博客中使用数学公式

在用markdown写技术文档时，免不了会碰到数学公式。常用的Markdown编辑器都会集成 MathJax插件，用来渲染文档中的类Latex格式书写的数学公式，但有些主题可能使用默认插件，导致公式渲染出现各种问题，其原因是因为Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线’_’代表斜体，有特殊的含义，存在语义冲突。渲染引擎会处理为<em>标签。这样一来，我们写的MathJax公式就被错误渲染了，也就没办法正确显示出来。解决办法也比较简单，更换Hexo的markdown渲染引擎。

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save

执行上面两个命令即可，先卸载原来的渲染引擎，再安装新的。这样能解决大部分公式的问题，但但是个别行内公式还会出现渲染出错因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的escape变量的值做相应的修改：

1 2	// escape: /^\\([\\`{}\[\]()#$+\-.!_>])/, escape: /^\\([`\[\]()#$+\-.!_>])/,

把第20行的em变量也要做相应的修改

1 2	// em: /^\b_((?:__\|[\s\S])+?)_\b\|^\((?:\\\|[\s\S])+?)\(?!\)/, em: /^\((?:\\\|[\s\S])+?)\(?!\)/,

这样问题就完美解决了，然后在主题的_config.yml 配置文件中开启mathjax ，把mathjax 设置为true

1	mathjax: true

同时在文章的Front-matter里打开mathjax开关

title: 
date: 2018-07-28 08:11:02
mathjax: true
tags:

这里设置是只有在用到公式的页面才会有，没用到公式就不需要设置。这样不需要渲染数学公式的页面的访问速度就不会受到影响了。

更多关于在Markdown中使用数学公式的用法参考链接：https://www.zybuluo.com/codeep/note/163962

4 . 评论系统

第三方评论系统很多，例如多说，畅言等。多说，网易云跟贴都已经下线，目前可用的评论系统大概有：

HyperComments ：来自俄罗斯的评论系统，目前只支持谷歌账号登录，国内有万里长城阻隔，翻墙注意安全！

来必力：来自韩国，使用邮箱注册。这个还可以，本来打算用这个的

Valine ：基于Leancloud的极简风评论系统

畅言：国产，符合大部分国人的风格和需求，但是安装需要备案号，比较麻烦

gitalk：一个基于 Github Issue 和 Preact 开发的评论插件，博客的评论就是github上对应repository的Issue

最后经过对比，最终选择了gitalk。样式美观，功能也比较实用，评论支持Markdown 语法。

引用

官方提供了两种方式的引用

links

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<!-- or -->

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

npm install

npm i --save gitalk

import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

注册OAuth application

既然使用github的issue，那么肯定要得到github的授权，这步操作就是做这个事情。如果没有需先去注册，注册地址：Register a new OAuth application 。

注册后来到如下界面

在这里会得到Client ID和Client Secret两个值，这两个值是后面需要用到的。

配置

进入yilia主题的文件路径，打开 /yilia/layout_partial/目录下的article.ejs文件。拉至底部，可以发现原作者已经为我们集成了很多评论系统，如下

<% if (!index && post.comments){ %>

  <% if (theme.duoshuo){ %>
  <%- partial('post/duoshuo', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>
  
  <% if (theme.wangyiyun){ %>
  <%- partial('post/wangyiyun', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

在 <% if (!index && post.comments){ %> 的下一行加入gitalk的初始化代码，如下所示

<% if (!index && post.comments){ %>

  <!--  评论插件 -->
  <% if (theme.gitalk.enable){ %>
	<div class="gitalk" style="padding: 0 40px;">
	  <div id="gitalk-container"></div>   
	  <link rel='stylesheet' href="/blog/gitalk/gitalk.css">
	  <script src="/blog/gitalk/gitalk.min.js"></script>
	   <script src="/blog/gitalk/md5.min.js"></script>
	  <script type="text/javascript">
		  var gitalk = new Gitalk({
			clientID:  '<%=theme.gitalk.clientID%>', 
			clientSecret: '<%=theme.gitalk.clientSecret%>',
			repo: '<%=theme.gitalk.repo%>', 
			id: md5(location.pathname),
			owner: '<%=theme.gitalk.owner%>', 
			admin: '<%=theme.gitalk.admin%>', 
			distractionFreeMode: <%=theme.gitalk.distractionFreeMode%>,
		  })
		  gitalk.render('gitalk-container')
	  </script>
    </div>
  <% } %>
 

  <% if (theme.duoshuo){ %>
  <%- partial('post/duoshuo', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>
  
  <% if (theme.wangyiyun){ %>
  <%- partial('post/wangyiyun', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

这里我为了简单，直接把代码放这里了。实际可以像作者一样，在post文件夹下新建一个gitalk.ejs文件，把这段代码，然后通过引用的方式引入进来。然后就是最后一步了，还需要在主题的 _config.xml 文件下加入gitalk的配置属性。如下

#6 Gitalk
gitalk: 
  #用来做启用判断可以不用
  enable: true   
  #your clientID，在github注册得到
  clientID: 848f5278f2459aaa9a50  
  #your clientSecret 在github注册得到
  clientSecret: 'db9688596567c9ba2786f5ba635395562e0df353'  
  #存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名）
  repo: 'blog'
  #github用户名
  owner: 'lushunjian'  
  #这个仓库的管理员，可以有多个，用数组表示，一般写自己
  admin: ['lushunjian']
  #无干扰模式开启
  distractionFreeMode: true
  #页面的唯一标识，gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识
  id: 'window.location.pathname'

更多属性设置，可进入官方查看。至此评论系统配置完毕，启动看一下效果

这里需要登录一下，对gitalk进行初始化，每篇文章都需如此。初始化完成后，会在github对应的仓库中创建队应的issues

此时再看博客效果如下图

5. 添加萌宠

这个功能比较适合女生吧，可以在博客页面中添加可爱的妹纸或者是萌宠，作者提供了很多模型，移动鼠标时萌宠也会跟着鼠标转头，没事可以逗一逗。插件使用比较简单，通过以下命令直接获取就行了

1	npm install --save hexo-helper-live2d

然后在主题的配置文件 _config.yml 中添加以下配置属性

live2d:
  enable: true
  scriptFrom: local
  model:
  	#这里配置你想用的模型
    use: live2d-widget-model-wanko  
  display:
  	#居左或是居右显示
    position: right
    #模型宽高
    width: 150
    height: 300
  mobile:
    show: true

更多模型选择可以作者的github地址：模型

6. 使用第三方图床，缩短图片加载时间

在博客中难免会频繁的使用图片，但是如果图片过多的放在github上，由于github服务器在国外，国内访问会导致页面加载异常缓慢，当然解决的办法也是很多的。就是图片放在国内的服务器上，这里选择方式就很多了，可以把图片单独放在专门的云服务上，也可托管在第三方平台上如七牛等。这里介绍我自己使用的一种方式，简单免费。我们知道在国外github比较有名气，但是由于网速和它禁用百度爬虫的问题，许多程序员会选用gitee作为在国内的代码托管平台，gitee可以说就是国内的github。功能也大多相同，gitee也提供了静态文件的访问服务。因此实际上我们直接可以之间把博客搭建在gitee上。这是一种一劳永逸的办法，而且还可以被百度爬虫爬到哦。由于本人比较懒，暂时没有迁移。github除了图片加载较慢外，其他到是还可以接受，所以我们可以只把图片放在gitee上，然后在github的文章中引用gitee上的图片，问题就完美的解决了。