一个个人博客除了给自己去阅读和参考以外，还想给更多的人去参考和阅读，但是我不知道我自己的网站被多少人访问了，写的文章阅读量怎么样？在没有添加这个功能之前，我是无从知晓的。下面就来看看是如何为个人博客添加访问量和文章阅读量的。

添加js文件

这里首先要感谢不蒜子提供的代码，这个不蒜子号称以两行代码就可以搞定访问量。大家可以点进去看一下，这两行代码就是

  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

第一行就就异步去访问js文件，然后在自己网页的某个地方去添加这个span标签的内容，也就是显示访问量。

**但是，经过本人的多次实践，发现添加了这个代码，网站访问会变得很慢，很影响自己的网页的加载，用户体验极度下降，这里我是采用了将busuanzi.pure.mini.js这个js代码下载到本地目录下的/js/目录下，访问也就变得更快了。

下面就来看下我是如何实际操作的。

在/js/目录下创建js文件

打开/js/目录，然后新建一个txt文件，重命名为busuanzi.pure.mini.js，然后复制如下代码到这个文件中:

var bszCaller,bszTag;
!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()/}/})/}/}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})/}/};

添加访问量

本人实在博客的底部添加网站的访问量的，所以就打开_includes/footer.html文件，然后在这个文件的末尾会看到theme by的字符串，我们要添加的代码就是在这个字符串上面进行添加，添加完后的代码如下：

<!--添加访问统计-->
	  <p  class="theme-by text-muted">
	  <!--script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
	-->
	<!-- script pointing to busuanzi.js -->
	<script src="\{\{ site.baseurl /}/}/js/busuanzi.pure.mini.js"></script>
	  <span id="busuanzi_container_site_pv">
    本站访问量<span id="busuanzi_value_site_pv"></span>次</span>
	 </p>
	 
          <!-- Please don't remove this, keep my open source work credited :) -->
    <p class="theme-by text-muted">
      Theme by
      <a href="https://deanattali.com/beautiful-jekyll/">beautiful-jekyll</a>
    </p>

网站访问人数显示效果

文章阅读量功能添加

打开_includes/header.html文件，找到这样的\{\% if include.type == "post" \%\}代码位置，将复制如下代码的到这个位置的下面。注意这里有两个位置需要添加代码。

<!--注意去掉反斜杠-->
 \{\% if include.type == "post" \%\}
		  <span class="post-meta">\{\{ page.date | date: "%Y-%m-%d, %A  " \}\}</span>
		  <!--script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
			</script>
			<!-- script pointing to busuanzi.js -->
			<span id="busuanzi_container_page_pv">
			阅读量<span id="busuanzi_value_page_pv"></span>次
			</span>
		  \{\% endif \%\}

怕有些同学不知道哪两个地方需要增加代码，现在把header.html整个文件的代码贴一下，以供参考：

<!-- TODO this file has become a mess, refactor it -->
\{\% if page.bigimg or page.title \%\}

\{\% if page.bigimg \%\}

  <div id="header-big-imgs" data-num-img=\{\% if page.bigimg.first \%\}\{\{ page.bigimg.size /}/}\{\% else \%\}1\{\% endif \%\}
    \{\% for bigimg in page.bigimg \%\}
	  \{\% assign imgnum = forloop.index \%\}
	  \{\% for imginfo in bigimg \%\}
	    \{\% if imginfo[0] \%\}
		  data-img-src-\{\{ imgnum /}/}="\{\{ imginfo[0] | relative_url /}/}"
		  data-img-desc-\{\{ imgnum /}/}="\{\{ imginfo[1] /}/}"
		\{\% else \%\}
		  data-img-src-\{\{ imgnum /}/}="\{\{ imginfo | relative_url /}/}"
		\{\% endif \%\}
	  \{\% endfor \%\}
    \{\% endfor \%\}
  ></div>
\{\% endif \%\}

<header class="header-section \{\% if page.bigimg \%\}has-img\{\% endif \%\}">
	
\{\% if page.bigimg \%\}
<div class="big-img intro-header">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="\{\{ include.type /}/}-heading">
          <h1>\{\% if page.title \%\}\{\{ page.title /}/}\{\% else \%\}<br/>\{\% endif \%\}</h1>
		  \{\% if page.subtitle \%\}
		    \{\% if include.type == "page" \%\}
            <hr class="small">
            <span class="\{\{ include.type /}/}-subheading">\{\{ page.subtitle /}/}</span>
			\{\% else \%\}
			<h2 class="\{\{ include.type /}/}-subheading">\{\{ page.subtitle /}/}</h2>
			\{\% endif \%\}
		  \{\% endif \%\}
		  
		  \{\% if include.type == "post" \%\}
		  <span class="post-meta">\{\{ page.date | date: "%Y-%m-%d, %A  " /}/}</span>
		  <!--script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
			</script>
			<!-- script pointing to busuanzi.js -->
			<span id="busuanzi_container_page_pv">
			阅读量<span id="busuanzi_value_page_pv"></span>次
			</span>
		  \{\% endif \%\}
        </div>
      </div>
    </div>
  </div>
  <span class='img-desc'></span>
</div>
\{\% endif \%\}
<div class="intro-header no-img">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="\{\{ include.type /}/}-heading">
          <h1>\{\% if page.title \%\}\{\{ page.title /}/}\{\% else \%\}<br/>\{\% endif \%\}</h1>
		  \{\% if page.subtitle \%\}
		    \{\% if include.type == "page" \%\}
            <hr class="small">
            <span class="\{\{ include.type /}/}-subheading">\{\{ page.subtitle /}/}</span>
			\{\% else \%\}
			<h2 class="\{\{ include.type /}/}-subheading">\{\{ page.subtitle /}/}</h2>
			\{\% endif \%\}
		  \{\% endif \%\}
		  
		  \{\% if include.type == "post" \%\}
		  <span class="post-meta">\{\{ page.date | date: "%Y-%m-%d, %A  " /}/}</span>
			<span id="busuanzi_container_page_pv">
			阅读量<span id="busuanzi_value_page_pv"></span>次
			</span>
		  \{\% endif \%\}
        </div>
      </div>
    </div>
  </div>
</div>
</header>


\{\% else \%\}
<div class="intro-header"></div>
\{\% endif \%\}

文章阅读量效果展示

如需转载，请添加链接地址：https://zoharandroid.github.io 。