像hackers一样写博客(二):Octopress设置与增加微博的侧边栏

一、配置文件说明(_config.yml):

1.Main Configs

 

url: http://yoursite.com       # blog 地址
title: Your name                  # blog 名称,出现在左上角
subtitle:                                # title下面的副标题
author:                                 #每篇文章的posted by
simple_search: http://google.com/search    #右边搜索框使用的搜索引擎
description:

 

2.Jekyll & Plugins

 

paginate: 10                 # 每页的文章数量,超过翻页
recent_posts: 5            # 右侧“最近发表”的模块里显示的文章数量
excerpt_link: "Read on &rarr;"  # 在文章中使用<!-- more -->,列表页将不再显示全文,而是显示“Read on”的链接,指向全文
default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.html]         # 用于配置侧边栏

 

二、追加新浪微博侧边栏

1.先到微博秀里面生成自己的微博秀嵌入代码。(找出最后的uid和verifier)

2.新建一个weibo.html放置到source/_includes/asides

 

{% if site.weibo_uid %}
<section>
  <h1>新浪微博</h1>
  <ul id="weibo">
    <li>
      <iframe 
        width="100%" 
        height="550" 
        class="share_self" 
        frameborder="0" 
        scrolling="no" 
        src="http://widget.weibo.com/weiboshow/index.php?width=0&height=550&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={{weibo_fansline}}&uid={{site.weibo_uid}}&verifier={{site.weibo_verifier}}">
      </iframe>
    </li>
  </ul>
</section>
{% endif %}

 

3.在_config.yml中增加相关的设定

 

# 其它内容....

default_asides: [asides/recent_posts.html, asides/weibo.html, asides/github.html]

# 其它内容....

# Weibo
# Please refer to http://weibo.com/tool/weiboshow to get your uid and verifier. 
weibo_uid:                  # 填入uid
weibo_verifier:           # 填入verifier
weibo_fansline: 0      # 粉丝显示多少行
weibo_show: true      # 是否显示最近微博内容
weibo_pic: true          # 是否显示微博中的图片
weibo_skin: 10          # 使用哪种配色风格,数字为从1开始的微博秀风格序号

# 其它内容....

4.重新发布后就可以看到相应的效果

 

 

备注:效果可以参看我的blog:http://caok.github.com/

原文来自:http://programus.github.com/blog/2012/03/03/add-weibo-sidebar-into-octopress/

 

有兴趣还可以增加“分享到微博”按钮

http://programus.github.com/blog/2012/03/04/share-weibo-button/

 

你可能感兴趣的:(Blog)