美文网首页Nodejs开源框架研究与应用
hexo yilia主题增加分享以及访问统计

hexo yilia主题增加分享以及访问统计

作者: 新时代搬运工 | 来源:发表于2017-05-17 10:38 被阅读256次

在使用yilia主题创建好自己的博客之后,你还想分享到其他平台,比如微信,还想要统计站点以及文章的访问情况。互联网提供了很多第三方分享和访问统计插件,借助第三方插件很容易实现这些功能,本文使用Mob提供的第三方分享插件,使用不蒜子统计站点和文章访问量。以下是详细步骤。

相关网址

Mob分享

  • 注册一个账号
  • 进入后台,使用shareSDK,会申请到一个App Key
mob app key
  • 在主题目录下_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文件<div class="footer-left"><div>标签后面增加:

<span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>

效果

根据以上设置,就可以看见实现效果了。

实现效果 实现效果-分享 实现效果-站点访问量

相关文章

网友评论

  • SoldierCall:尝试分享但是页面并不能显示
  • JulianChern:<%- partial('post/tag') %>是在layout_partial\article.ejs里吧。。。。

本文标题:hexo yilia主题增加分享以及访问统计

本文链接:https://www.haomeiwen.com/subject/azxdxxtx.html