微博訪客

這節(jié)介紹如何往邊欄添加新浪微博和進行訪客統(tǒng)計。

新浪微博

創(chuàng)建微博頁面

進入 Octopress\source_includes\custom\asides，創(chuàng)建 weibo.html，添加如下代碼

{% if site.weibo_uid %}  
<section>  
  <h1>Sina Weibo</h1>  
  <ul id="weibo">  
    <li>  
      <iframe   
        width="100%"   
        height="450"   
        class="share_self"   
        frameborder="0"   
        scrolling="no"   
        src="http://widget.weibo.com/weiboshow/index.php?width=0&height=450&fansRow={{site.weibo_fansline}}&ptype={% if site.weibo_pic %}1{% else %}0{% endif %}&speed=0&skin={{weibo_skin}}&isTitle=0&noborder=1&isWeibo={% if site.weibo_show %}1{% else %}0{% endif %}&isFans={% if site.weibo_showfans %}1{% else %}0{% endif %}&uid={{site.weibo_uid}}&verifier={{site.weibo_verifier}}">  
      </iframe>  
    </li>  
  </ul>  
</section>  
{% endif %}  

設(shè)置微博參數(shù)

進入 Octopress 目錄，打開 _config.yml，添加如下代碼

# Weibo  
# Please refer to http://weibo.com/tool/weiboshow to get your uid and verifier.   
weibo_uid: 1307211523          #WeiBo uid  
weibo_verifier: 3619ee9c        #WeiBo verifier  
weibo_showfans: false            #showfans  
weibo_fansline: 0                    #fansline  
weibo_show: true                    #show weibo  
weibo_pic: true                        #show pic  
weibo_skin: 10                        #skin  

這里的 uid 和 verifier是我自己的，替換成你的就行了，至于其他參數(shù)的含義，請參照http://weibo.com/tool/weiboshow

添加到邊欄

同樣在 _config.yml，在 default_asides 一欄中添加

default_asides: [..., custom/asides/weibo.html]   

生成頁面，推送

rake generate  
rake deploy  

這里沒有預(yù)覽是因為新浪微博秀在預(yù)覽中看不到，只能 deploy 后看到，并且要第一次要刷新才看得到。

打開主頁 http://geekjacky.github.io/，如下

http://wiki.jikexueyuan.com/project/github-page/images/deployblog.jpg" alt="" />

推送 source 分支

git add .  
git commit -m "添加新浪微博"  
git push origin source 

訪客統(tǒng)計

訪客統(tǒng)計的代碼有很多，Octopress 內(nèi)置了 google 的統(tǒng)計，當(dāng)然也可以選用百度等等，這里采用的是 Flag Counter 的代碼，就是很熟悉的上面布滿小國旗的那種。 官網(wǎng)在此http://flagcounter.com/

獲取代碼

進入官網(wǎng)，選取你要的款式，獲取代碼。

創(chuàng)建 flag_counter 頁面

進入 Octopress\source_includes\custom\asides，創(chuàng)建 flag_counter.html，添加如下代碼，中間部分替換成你獲取的代碼。

{% if site.flag_count %}  
<section>  
<h1>Visitor</h1>  
<div>  
    <p></p>  
    <center>  
    <a ><img src="http://s08.flagcounter.com/count/3pF8/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_12/viewers_3/labels_0/pageviews_1/flags_0/" alt="Flag Counter" border="0"></a>  
    </center>  
</div>  
</section>  
{% endif %}  

設(shè)置開關(guān)

進入 Octopress 目錄，打開 _config.yml，添加如下代碼

#flag_count  
flag_count: true  

添加到邊欄

同樣在 _config.yml，在 default_asides 一欄中添加

default_asides: [..., custom/asides/flag_counter.html]   

生成頁面，推送

rake generate  
rake preview  
rake deploy  

打開頁面 http://geekjacky.github.io/，如下

http://wiki.jikexueyuan.com/project/github-page/images/visitor.jpg" alt="" />

推送 source 分支

git add .  
git commit -m "添加flag_counter"  
git push origin source  

當(dāng)然 Octopress 還有很多插件，使用原理也都差不多，可以參見 Octopress 的github wiki：https://github.com/imathis/octopress/wiki/3rd-party-plugins