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_ymldefault_asides添加custom/asides/flickr.html


5.在文章中引用照片

在markdown文章裏使用flickr裏的照片時,只需要在flirk分享頁面將生成的分享代碼拷貝到markdown文章中即可。如下圖:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章