hexo yilia主題增加分享以及訪問統計
阿新 • • 發佈:2019-02-06
在使用yilia主題建立好自己的部落格之後,你還想分享到其他平臺,比如微信,還想要統計站點以及文章的訪問情況。網際網路提供了很多第三方分享和訪問統計外掛,藉助第三方外掛很容易實現這些功能,本文使用Mob提供的第三方分享外掛,使用不蒜子統計站點和文章訪問量。以下是詳細步驟。
相關網址
Mob分享
- 註冊一個賬號
- 進入後臺,使用shareSDK,會申請到一個App Key
- 在hexo主題目錄下_config.yml增加
sharesdk: true #是否開啟分享
shareSDKappkey: 上一步申請到的app key
- 在layout_partial\share目錄下增加一個share.ejs:
<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分享</div>
<div class="-mob-share-ui" style="display: none">
<ul class="-mob-share-list">
<li class="-mob-share-weibo"><p>新浪微博</p></li>
<li class="-mob-share-tencentweibo"><p>騰訊微博</p></li>
<li class="-mob-share-qzone"><p>QQ空間</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-weixin"><p>微信</p></li > <li class="-mob-share-twitter"><p>Twitter</p></li>
<li class="-mob-share-youdao"><p>有道雲筆記</p></li>
<li class="-mob-share-mingdao"><p>明道</p></li>
<li class="-mob-share-linkedin"><p>LinkedIn</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{ theme.shareSDKappkey }}"></script>
<!--MOB SHARE END-->
- 在layout_partial\article.ejs檔案增加分享的程式碼:
<% if (!index && theme.sharesdk){ %>
<%- partial('_partial/share/sharesdk.swig') %>
<% } %>
不蒜子訪問量統計
layout_partial\header.ejs頁面中引入busuanzi.js:
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
顯示站點總訪問量
在layout_partial\header.ejs檔案<%- partial(‘post/tag’) %>下面增加:
<span id="busuanzi_container_site_pv">
本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
顯示單頁面訪問量
在layout_partial\article.ejs檔案
標籤後面增加:<span id="busuanzi_container_page_pv">
本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
</span>