JS一分鐘在github+Jekyll的博客中添加訪問(wèn)量功能的實(shí)現(xiàn)
一分鐘在github+Jekyll博客中添加訪問(wèn)量功能
前言
不會(huì)還有小伙伴不知道,github+Jekll是可以搭建自己的個(gè)人博客吧???
如果大家覺(jué)得csdn的blog不夠高大上,或者私密性不好,不能抒發(fā)一些情感,那么可以搭一個(gè)github的博客,只需一小時(shí)即可,詳見(jiàn)大佬的博文:
一小時(shí)搭建github博客:http://www.dhdzp.com/article/138946.htm
另附我的個(gè)人博客鏈接: https://dongguanting.github.io/.
如果大家覺(jué)得我搭建的不錯(cuò),歡迎fork我的博客為框架。
我這篇其實(shí)是在github+jekll框架下,加入了一個(gè)瀏覽量統(tǒng)計(jì)功能,相當(dāng)于大佬博客的進(jìn)一步優(yōu)化,這樣也能讓大家看到多少人瀏覽了自己,增添成就感。
一、Jekll是什么
1. Jekll是軟件簡(jiǎn)介
Jekyll 是一個(gè)簡(jiǎn)單的免費(fèi)的Blog生成工具,類(lèi)似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一個(gè)生成靜態(tài)網(wǎng)頁(yè)的工具,不需要數(shù)據(jù)庫(kù)支持。但是可以配合第三方服務(wù),例如discuz。最關(guān)鍵的是jekyll可以免費(fèi)部署在Github上,而且可以綁定自己的域名。
Jekll的快速安裝指令:
gem install jekyll jekyll new my-awesome-site cd my-awesome-site jekyll serve # => Now browse to http://localhost:4000
Jekyll 具有許多的主題可以選擇,也有很多插件可以安裝,都只需要在文件_config.yml中寫(xiě)明即可,但是訪問(wèn)量統(tǒng)計(jì)的相關(guān)插件實(shí)在少,另一個(gè)大佬說(shuō)可以通過(guò)leancloud的api實(shí)現(xiàn)該功能,但是注冊(cè)十分繁瑣,總是登不上,所以我就找到了一個(gè)十分簡(jiǎn)便的方法,那就是使用不蒜子增加 Jekyll 博客訪問(wèn)量統(tǒng)計(jì)。
二、不蒜子
1. 不蒜子簡(jiǎn)介:
“不蒜子” 是一款極簡(jiǎn)的網(wǎng)頁(yè)計(jì)數(shù)器,可以很方便的統(tǒng)計(jì)博客的總訪問(wèn)量和訪問(wèn)次數(shù)。
“不蒜子” 與百度統(tǒng)計(jì)谷歌分析等有區(qū)別:“不蒜子” 可直接將訪問(wèn)次數(shù)顯示在您在網(wǎng)頁(yè)上(也可不顯示);對(duì)于已經(jīng)上線一段時(shí)間的網(wǎng)站,“不蒜子” 允許您初始化首次數(shù)據(jù)
2. 官網(wǎng)入口
鏈接: http://busuanzi.ibruce.info/.
3. 使用方法
首先,打開(kāi)index.html,在文中合適位置添加以下代碼:
<span id="busuanzi_container_site_pv"> 本站總訪問(wèn)量<span id="busuanzi_value_site_pv"></span>次 </span>
兩行代碼,搞定計(jì)數(shù)?。。?br />
我直接放在index.html文件的末尾,效果如下:

這就出現(xiàn)了我的博客訪問(wèn)量為2,是不是非常簡(jiǎn)單。
同時(shí)根據(jù)需求也可將此代碼加入到post.html的合適位置,這可以實(shí)現(xiàn)分頁(yè)的訪問(wèn)量。
4. 個(gè)性化
也可以更加美觀,完整一點(diǎn):
本站總訪問(wèn)量<span id="busuanzi_value_site_pv"></span>次 本站訪客數(shù)<span id="busuanzi_value_site_uv"></span>人次 本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
或者個(gè)性化一些(我就用的底下這個(gè)):
Total <span id="busuanzi_value_site_pv"></span> views. 您是xxx的第<span id="busuanzi_value_site_uv"></span>個(gè)小伙伴 <span id="busuanzi_value_page_pv"></span> Hits
效果如下:

總結(jié)
是不是很不錯(cuò)! 如果有幫助請(qǐng)點(diǎn)贊,收藏吧!
歡迎來(lái)看我的個(gè)人blog:https://dongguanting.github.io/.
到此這篇關(guān)于JS一分鐘在github+Jekyll的博客中添加訪問(wèn)量功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)github+Jekyll添加訪問(wèn)量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用js實(shí)現(xiàn)控件的隱藏及style.visibility的使用
用js控制控件的隱藏,使用style.visibility實(shí)現(xiàn) ,具體代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-06-06
ImageZoom 圖片放大鏡效果(多功能擴(kuò)展篇)
上一篇ImageZoom已經(jīng)對(duì)圖片放大效果做了詳細(xì)的分析,這次在ImageZoom的基礎(chǔ)上進(jìn)行擴(kuò)展,實(shí)現(xiàn)更多的效果。2010-04-04
單行 JS 實(shí)現(xiàn)移動(dòng)端金錢(qián)格式的輸入規(guī)則
這篇文章主要介紹了單行 JS 實(shí)現(xiàn)移動(dòng)端金錢(qián)格式的輸入規(guī)則,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05
如何使用json在前后臺(tái)進(jìn)行數(shù)據(jù)傳輸實(shí)例介紹
需要把這些輸入寫(xiě)入數(shù)據(jù)庫(kù),這里就用到j(luò)son傳入,先看一下后臺(tái)如何生成要傳輸?shù)臄?shù)據(jù),感興趣的朋友可以參考下,希望可以幫助到你2013-04-04
前端頁(yè)面適配之postcss-px-to-viewport實(shí)現(xiàn)步驟
postcss-px-to-viewport是一個(gè)PostCSS插件,它可以將px單位轉(zhuǎn)換為視口單位(vw、vh?或?vmin),這篇文章主要給大家介紹了關(guān)于前端頁(yè)面適配之postcss-px-to-viewport的實(shí)現(xiàn)步驟,需要的朋友可以參考下2024-03-03
使用PBFunc在Powerbuilder中支付寶當(dāng)面付款功能
這篇文章主要介紹了使用PBFunc在Powerbuilder中支付寶當(dāng)面付款功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10

