Octopress添加Flickr侧边栏、在文章中引用Flickr照片

1.注册Flickr帐户，并在帐户里设置自己的Flickr网址。(这个网址与octopress的网址无关)

2. 新建 source/_includes/custom/asides/flickr.html，代码：

{% if site.flickr_user %}
<section class="flickr">
<h1>My Flickr</h1>
<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids "flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin: 0 9px 8px 0px;display: inline-block;}
</style>
<div id="flickr_badge_uber_wrapper"><div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count={{ site.flickr_count }}&display=latest&size=s&layout=x&source=user&user={{ site.flickr_user }}"></script>
</div></div>
<!-- End of Flickr Badge -->
</section>
{% endif %}

3.在_config.yml添加(注意修改成自己的id)

# Flick Badges
# Find your user id here: http://idgettr.com/ It should be something like "25711589%40N00".
flickr_user: 25711589%40N00
flickr_count: 6

4. 在_config_yml中default_asides添加custom/asides/flickr.html

5.在文章中引用照片

在markdown文章里使用flickr里的照片时，只需要在flirk分享页面将生成的分享代码拷贝到markdown文章中即可。如下图：