【像黑客一样写博客之九】微博访客

原创 2013年11月22日 08:30:27

原创作品,转载请标明http://blog.csdn.net/jackystudio/article/details/16877431


这节介绍如何往边栏添加新浪微博和进行访客统计。


1.新浪微博


1.1.创建微博页面

进入Octopress\source\_includes\custom\asides,创建weibo.html,添加如下代码

[html] view plaincopy
  1. {% if site.weibo_uid %}  
  2. <section>  
  3.   <h1>Sina Weibo</h1>  
  4.   <ul id="weibo">  
  5.     <li>  
  6.       <iframe   
  7.         width="100%"   
  8.         height="450"   
  9.         class="share_self"   
  10.         frameborder="0"   
  11.         scrolling="no"   
  12.         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}}">  
  13.       </iframe>  
  14.     </li>  
  15.   </ul>  
  16. </section>  
  17. {% endif %}  


1.2.设置微博参数

进入Octopress目录,打开_config.yml,添加如下代码

  1. # Weibo  
  2. # Please refer to http://weibo.com/tool/weiboshow to get your uid and verifier.   
  3. weibo_uid: 1307211523          #WeiBo uid  
  4. weibo_verifier: 3619ee9c        #WeiBo verifier  
  5. weibo_showfans: false            #showfans  
  6. weibo_fansline: 0                    #fansline  
  7. weibo_show: true                    #show weibo  
  8. weibo_pic: true                        #show pic  
  9. weibo_skin: 10                        #skin  
这里的uid和verifier是我自己的,替换成你的就行了,至于其他参数的含义,请参照http://weibo.com/tool/weiboshow


1.3.添加到边栏

同样在_config.yml,在default_asides一栏中添加

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

1.4.生成页面,推送

  1. rake generate  
  2. rake deploy  
这里没有预览是因为新浪微博秀在预览中看不到,只能deploy后看到,并且要第一次要刷新才看得到。

打开主页http://geekjacky.github.io/,如下




1.5.推送source分支

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

2.访客统计

访客统计的代码有很多,Octopress内置了google的统计,当然也可以选用百度等等,这里采用的是Flag Counter的代码,就是很熟悉的上面布满小国旗的那种。

官网在此http://flagcounter.com/


2.1.获取代码

进入官网,选取你要的款式,获取代码。


2.2.创建flag_counter页面

进入Octopress\source\_includes\custom\asides,创建flag_counter.html,添加如下代码,中间部分替换成你获取的代码

[html] view plaincopy
  1.  {% if site.flag_count %}  
  2. <section>  
  3. <h1>Visitor</h1>  
  4. <div>  
  5.     <p></p>  
  6.     <center>  
  7.     <a href="http://info.flagcounter.com/3pF8"><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>  
  8.     </center>  
  9. </div>  
  10. </section>  
  11. {% endif %}  

2.3.设置开关

进入Octopress目录,打开_config.yml,添加如下代码

  1. #flag_count  
  2. flag_count: true  


2.4.添加到边栏

同样在_config.yml,在default_asides一栏中添加

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

2.5.生成页面,推送

  1. rake generate  
  2. rake preview  
  3. rake deploy  
打开页面http://geekjacky.github.io/,如下




2.6.推送source分支

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


当然Octopress还有很多插件,使用原理也都差不多,可以参见Octopress的github wiki:https://github.com/imathis/octopress/wiki/3rd-party-plugins

版权声明:本文为博主原创文章,未经博主允许不得转载。

【像黑客一样写博客之四】发表博文

Octopress结合Github搭建博客是很酷,但是别忘了初衷是写博文,可不要本末倒置了。 1.发表博文 1.1.新建博文 使用如下命令新建博客文章 [cpp] view pla...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月17日 09:40
  • 3273

【像黑客一样写博客之一】环境搭建

原谅我又不务正业了,最近在Github上利用Octopress框架搭建了一个博客,所有的东西都可以DIY,感觉还是蛮酷的。这里把整个搭建过程分享一下。 当然第一步还是环境的搭建,有没有搞错?写个博客还...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月14日 15:23
  • 5607

【像黑客一样写博客之五】博客克隆

很多情况下我们需要在不同电脑之间维护同一个Octopress博客,那应该怎么在一台新的电脑上获取你的Octopress克隆呢? 1.环境配置 安装msysgit,Ruby,DevKit,这里就...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月18日 09:21
  • 3422

【像黑客一样写博客之十】域名绑定

相信很多人都有自己的域名,而github帮你提供了免费的空间。让你的域名直接转到github.io是个不错的注意。假设通过之前9篇文章,你已经初步建立起一个github.io的博客了。 1....
  • jackyvincefu
  • jackyvincefu
  • 2013年11月23日 08:52
  • 7188

【像黑客一样写博客之八】分类标签

给文章分类和添加标签是博客必不可少的功能,方便了信息的快速攫取。 1.添加分类 1.1.添加分类插件 进入Octopress\plugins目录,新建category_list_tag.rb文...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月21日 08:36
  • 3639

【像黑客一样写博客之七】分享功能

Octopress自带的分享代码是推特,脸书和Google+,这里改用国内的加网分享,添加方式和评论相似。 1.获取分享代码 进入http://www.jiathis.com,选择样式,点击获...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月20日 08:30
  • 3165

【像黑客一样写博客之六】评论功能

博客怎么能少了评论呢?虽然Octopress自带了disqus评论系统,但是登录需要使用推特,脸书,Google+等帐号登录,你懂的,所以这里会对评论进行更换。。。 这里我只能降降逼格了,使用国内的...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月19日 09:01
  • 3309

【像黑客一样写博客之三】配置博客

Octopress Push到Github之后,就可以对博客进行一些个性化配置了,这里先介绍一些基本配置。 1.基本配置 博客的基本配置文件在Octopress目录下的_config.yml。...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月16日 08:10
  • 13807

【像黑客一样写博客之二】发布博客

本地环境配置完毕后就可以把Octopress推到Github上了。 1.新建Github仓库 仓库名字必须是username.github.com,其中username是你的github用户名...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月15日 08:20
  • 3866

像 geek 一样写博客

在 Github 上利用 Octopress 框架搭建了一个博客,所有的东西都可以 DIY,感觉还是蛮酷的。这里把整个搭建过程分享一下。当然第一步还是环境的搭建。...
  • u011986449
  • u011986449
  • 2015年06月14日 22:32
  • 766
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【像黑客一样写博客之九】微博访客
举报原因:
原因补充:

(最多只允许输入30个字)