computer

在octopress上引入相片流

linpx

Nov 10, 2012 • 6 min read

我一直很想在博客上能够多一项小功能，就是照片流。这样我就可以把flickr上的照片一连串的全部共享出来，或者有次出行了，拍了些照片，只要把博文地址微博给朋友，就可以上来浏览了。没错，就是和以前msn博客上的相册是一个道理。只是换到了octopress后，这些都得自己动手整。很繁琐，不过弄好了的话，还是有成就感的。

设立相册的可能性

当然是可能的了，要不这篇博客就没有意义了。

我本人是不会任何编程，也不是学计算机的，所以很多时候，我知道这样去尝试可能可以，至于要问我为什么可以，对不起，实际上我这里给出的编码啥意思，自己也不明白。只要能得到想要的结果，知其然而不知其所以然，也挺好，不是？

我这里引用的代码是fancybox,做好后会有这样的效果。很显然，对于一个超小众的octopress博客平台来说，想使用另一个超小众的的相片流代码，一定得找成功的先例。实际上，平台比较出名的slash主题已经支持了fancybox，不过并未给出如何设置。于是，我找到了这篇文章Integrating Photos Into OctoPress Using FancyBox and Plugin。写得非常好，以至于我在第一次rake generate就成功了，而并未出现我期待的解析错误。

操作步骤

我这里就直接给从操作步骤了，想要理解为何的同学，还是移步到引文链接去看看吧。

第一步，把photos_tag.rb文件放到plugins/文件夹去。
{% codeblock %}
git clone git://gist.github.com/2631877.git #文件在2631877文件夹中
{% endcodeblock %}

第二步，在source/_includes/custom/head.html 文件底部加入如下内容
{% codeblock %}

{% fancyboxstylefix %}

{% endcodeblock %}

第三步，在sass/custom/_styles.scss追加如下内容
{% codeblock %}
/* FancyBox Galleries */
$rad: 6px;
ul.gallery {
border: thin solid gray;
-webkit-border-radius: $rad;
-moz-border-radius: $rad;
border-radius: $rad;
text-align: center;
padding: 5px;
li {
display: inline;
padding: 5px;
}
}
{% endcodeblock %}

第四步，从这里开始就是微调了。如果看过原文的话，会发现相册流是不直接支持flickr的网址的，任何网址在使用时，都会在前方默认加上网站地址，我的情况是，会出现诸如http://colors4.us/farm9.staticflickr.com... 等没有意义的网址。这一步的解决方法，对我来说可以用，但不完美，我个人妥协了。可以在_config.yml中加入如下内容：
{% codeblock %}
photos_prefix: https://farm
{% endcodeblock %}
这样做就如同设立了歌permlink一样，规定死了打头网址的内容，后面我们在博文中输入相册照片地址http://farm9.staticflickr.com/8198/8171602168_1788957e3c_m.jpg 时，只需输入8198/8171602168_1788957e3c_m.jpg 即可。

但是如果常用flickr的朋友就会发现，这里有个前提，就是所有的相片的网址，都必须在farm9这个网址段上。我个人来说，使用时间够长，我照片网址从farm1到farm9都有，设死了的话就没有办法套用其他网址段的照片了。我做了很多次试验，发现只要后面那段数字正确，前面的网址段变化的数字不会产生影响，或者直接说http://farm9.staticflickr.com/8198/8171602168_1788957e3c_m.jpg 等于http://farm1.staticflickr.com/8198/8171602168_1788957e3c_m.jpg 。

其实我突然想到，这个flickr不同服务器的问题。实际上，我只需在_config.yml上登记http://farm即可，剩下在博文中输入9.staticflickr.com/8198/817160...即可完美解决该问题。这样的结果就是可以自由调整服务器的数字1~9，而不用担心会不会突然链接被重置。哈哈，我太厉害了。

第五步，这里介绍实例，请一定注意看井号后面的说明。如果只展示一张的话，可在博文中插入如下内容：
{% codeblock %}
[% photo 9.staticflickr.com/8198/8171602168_1788957e3c_b.jpg default 这里输入照片的名字 %] #把句子前后的中括号改成大括号，因为它本身放入博文就可执行了
{% endcodeblock %}

如果展示相册流的话，则插入如下内容：
{% codeblock %}
[% gallery %] #把本行句子前后的中括号改成大括号
9.staticflickr.com/7120/7698203656_ae8ae99ed3_b.jpg: pic1 #thumb pic默认为7698203656_ae8ae99ed3_m.jpg，刚好和flickr对应
9.staticflickr.com/3504/3997360729_cdaf975b63_z.jpg[9.staticflickr.com/3504/3997360729_cdaf975b63_m.jpg]: pic2 #可以自己设定thumb pic置于中括号内
9.staticflickr.com/6182/6150404978_10c5d6b9c5_b.jpg: pic3
9.staticflickr.com/7278/7714113508_3c28b8eaa0_b.jpg: #可以不起名字，但是一定不能省略冒号
3.staticflickr.com/2511/3976228983_a670a644b4_o.jpg[3.staticflickr.com/2511/3976228983_5ef14d2ca5_m.jpg]: pic5
9.staticflickr.com/4142/4782988086_065998b9af_b.jpg: pic6
[% endgallery %] #把本行句子前后的中括号改成大括号
{% endcodeblock %}