{"componentChunkName":"component---node-modules-gatsby-theme-gine-blog-src-components-post-blog-post-js","path":"/posts/9fc882fdf9e84476ab25d24409a31b77","webpackCompilationHash":"abbc32fa0c65a814f292","result":{"data":{"siteConfig":{"title":"812lcl's Blog","commentDisqusShortname":"812lcl-notion-blog","commentOpen":true},"posts":{"public_date":"2013-10-26","name":"Octopress侧边栏及评论系统定制","tags":["Octopress","Ruby","HTML","Blog"],"html":"
在上一篇文章中，已经搭建起了octopress博客。使用的是默认的主题，样式千篇一律，而且自带的一些功能和侧边栏并不适合国内的国情，得不到网络的支持，如facebook、twitter、google plus和disqus等。所以还是有必要进行一下改造，打造中国特色octopress博客的。
1. 第三方主题
首先，你先要选定的是博客使用的第三方主题，因为如果你已经进行了很多的网页设置，添加了很多的插件，再来改主题，你就要面临悲剧了，你会发现你已经配置好的东西被替换掉了，这无疑会对你的热情带来打击。所以我们先来看看第三方主题。 你需要先找到自己喜欢的主题，之后可以在此主题上进行修改。点击这里是一个主题网站，给出了不同主题的预览图，使用该主题的博客和该主题的GitHub链接。选中你想要的，获得GitHub仓库地址，如下安装
$ cd blog\n$ git clone https://github.com/shashankmehta/greyshade.git ./themes/greyshade\n$ rake install['greyshade']\n$ rake generate\n
Plain Text
这里我的博客在blog文件夹中，以安装greyshade主题为例。你按照自己的情况进行更改。rake generate后可以通过rake preview访问http://localhost:4000预览新的主题样式，不满意可以更换其他主题。 ## 2. 侧边栏 侧边栏可以添加的插件很多，新浪微博、豆瓣等很多网站都有相应的插件，也可以到octopress的wiki页面寻找。
侧边栏在_config.yml中设置，添加进default_asides中，先后顺序代表显示的先后顺序，各个侧边栏插件代码放入相应的位置即可，自己添加的一般放入source/_includes/custom/asides，default_asides中默认从_includes之后路径开始写。 ### 2.1 最新文章 首先说一下主题中可用的插件。
asides/recent_posts.html是最近写的文章的一个展示，添加到default_asides中即可显示，在_config.yml中可以设置显示最近多少篇文章，recent_posts: 5，注意冒号后有空格。 ### 2.2 GitHub Repos asides/github.html则是GitHub repos的一个展示，可以直接到达你的GitHub页面，在_config.yml中设置你的Github账号，并设置为true即可，如下：
# Github repositories\ngithub_user: 812lcl #我的github\ngithub_repo_count: 0\ngithub_show_profile_link: true\ngithub_skip_forks: true\n
Plain Text
2.3 微博秀
新浪微博是一个信息传播非常迅速的媒介，如果你热衷于微博，可以在侧边栏添加自己的微博秀。首先需要获得自己的微博秀代码，链接为http://app.weibo.com/tool/weiboshow，进行相应的设置即可获得微博秀代码。
然后在source/_includes/custom/asides创建weibo.html，添加如下代码，刚刚获得的微博秀代码也要添加到相应位置：
<section><h1>新浪微博</h1><ul id=\"weibo\"><li><!-- 在此插入获得的微博秀代码 --></li></ul></section>\n
Plain Text
最后在default_asides中加入custom/asides/weibo.html即可显示你的微博秀了。 ### 2.4 豆瓣展示 你可以通过豆瓣读书、豆瓣电影、豆瓣音乐等多方面展示你自己，豆瓣也提供了类似微博秀的展示方式，添加方法也类似。获得豆瓣收藏秀的链接http://www.douban.com/service/badgemakerjs，根据自己的喜欢进行设置
然后在source/_includes/custom/asides创建douban.html，添加如下代码，刚刚获得的代码添加到<div>之间：
<section>\n <h1>My Douban</h1>\n <div>\n <!--添加到这-->\n </div>\n</section>\n
Plain Text
最后在default_asides中加入custom/asides/douban.html显示你的豆瓣展示。 ### 2.5 访客地图 效果如我的博客右侧那个精美的3D旋转地球所示，它可以显示访客数量，访客来自的地域，既有装饰作用，又有统计作用。它也有2D效果版，可以根据自己喜欢进行设置，地址在这里，然后获得代码。
依然在source/_includes/custom/asides创建earth.html，代码如下：
<section>\n <h1>访客地图</h1>\n <!--获得代码添加到这-->\n</section>\n
Plain Text
在default_asides中加入custom/asides/earth.html显示你定制的访客地图。 ### 2.6 酷站博客 你有一些经常去的网站、博客，想推荐给大家，则可以在侧边栏加上一个“酷站博客”，当然名字你自己取即可。
在source/_includes/custom/asides创建blog_link.html，代码如下：
<section>\n<h1>酷站博客</h1>\n<ul>\n <li>\n <a href=\"http://blog.jobbole.com/\">伯乐在线</a>\n </li>\n <li>\n <a href=\"http://www.csdn.net/\">CSDN</a>\n </li>\n <li>\n <a href=\"http://www.cnblogs.com/\">博客园</a>\n </li>\n <li>\n <a href=\"http://coolshell.cn/\">酷壳CoolShell</a>\n </li>\n <li>\n <a href=\"http://www.cnblogs.com/Solstice/\">陈硕</a>\n </li>\n</ul>\n</section>\n
Plain Text
可以自行添加喜爱网站，然后在default_asides中加入custom/asides/blog_link.html。
看到这，你应该很熟悉添加侧边栏的流程了吧。 ### 2.7 最热文章 Octopress Popular Posts Plugin是根据Google page rank计算，展示出权值最高的文章，插件的项目主页为点击这里。
这个插件的安装与之前的方法不同，首先在Gemfile中添加
gem 'octopress-popular-posts'\n
Plain Text
Gemfile中的是bundle安装时安装的所有依赖的软件，然后用bundle安装
bundle install\n
Plain Text
执行命令，将插件拷贝到你的source目录，如下：
bundle exec octopress-popular-posts install\n
Plain Text
到这就安装完了，可以设置显示了，在_config.yml中设置，增加下面一行：
popular_posts_count: 5 # Posts in the sidebar Popular Posts section\n
Plain Text
设置边栏显示文章数，最后在default_asides中添加custom/asides/popular_posts.html，即可显示出来。
这样就设置好了，同时建议将缓存的page rank文件添加进你的.gitignore中
.page_rank\n
Plain Text
2.8 3D标签云与标签列表
octopress默认的只支持category的分类，而并没有tag。category和tag分别代表有序/无序的知识点归纳。一篇文章只能属于一个category，但可以有多个tag。原来的plugin下只有category_generator.rb插件，实现category功能，在github上有两个插件帮助实现了tag生成和tag cloud功能插件1，插件2。但似乎并不支持中文，而category_generator.rb是支持中文的，所以我有样学样，改成了支持中文的，并且实现了3D标签云的，插件已经上传到github。clone到你博客的目录即可。
包含文件如下：
├─ plugins/\n │ ├─ category_generator.rb\n │ ├─ category_list.rb\n │ ├─ category_tag_cloud.rb\n │ ├─ tag_generator.rb\n │ └─ tag_list.rb\n └─ source/\n └─ _includes/\n └─ custom/\n └─ asides/\n ├─ category_cloud.html\n ├─ category_list.html\n ├─ tag_cloud.html\n └─ tag_list.html\n
Plain Text
其中category_generator.rb和tag_generator.rb定义了根据文章的category和tag标签分类存储文章的方法，category_tag_cloud.rb则可以定义了根据category或tag生成3D标签云的方法。category_list.rb和tag_list.rb实现了将所有文章的category和tag列出来的方法，其中category可以显示文章个数，tag根据此标签文章多少，大小随着改变。
四个HTML文件则是category和tag的列表和3D标签云的侧边栏实现。需要哪个，在default_asides中添加即可。
还有一点需要注意，在_config.yml中默认设置了category的目录，需自己加入tag目录
category_dir: blog/categories\ntag_dir: blog/tags\n
Plain Text
这样可以观看效果了，不过3D效果的标签云，对于不支持flash的浏览器无效，如safari。
标签功能的实现，我参考了一下几篇文章：
为octopress添加分类(category)列表
给 Octopress 加上标签功能
给octopress添加3D标签云
2.9 相关文章功能
此功能即根据当前阅读的文章，分析博客中其他与此相近的文章，进行推荐的一个功能，在octopress wiki中推荐的第三方插件中有一个插件实现此功能，项目主页点击这里。该插件，利用octopress自带的LSI实现对文章分析分类，然后进行推荐，但当文章较多时分类过慢，它推荐安装GSL来进行分类。我安装过这个功能，但不知道它是根据什么规则分类，而且之后不知道安装了什么，之后每次分类都会出错。你可以自己尝试一下，项目主页都有详细的步骤。
就在我想放弃这个功能的时候，我发现了它――related_posts-jekyll_plugin。这个插件很简单，只需下载_plugins/related_posts.rb放在自己的plugins文件夹中，然后在想添加相关文章推荐的地方添加如下语句： {% raw %}
<section>\n <h2>相关文章：</h2>\n <ul class=\"posts\">\n {% for post in site.related_posts limit:5 %}\n <li class=\"related\">\n <a href=\"{{ root_url }}{{ post.url }}\">{{ post.title }}</a>\n </li>\n {% endfor %}\n </ul>\n </section>\n
Plain Text
我是在source/_layouts/post.html中加入的这些语句，这个html文件是打开博文时的布局，我将相关文章添加在博文的结束处。
这个插件是根据文章的tag进行分类的，根据所有博文与本篇文章共同tag的多少依次排序进行推荐，还是很简单有效的。
参考这里
3. 社会化评论与分享
3.1 友言和加网
octopress内置了disqus评论系统，不适合我国基本国情，所以需要用一些国内的第三方评论系统，如友言、多说，可以以微博、人人、QQ等账号登陆发表评论，网站通过验证后可以对评论进行分析，管理。
多说评论系统可参见为 Octopress 添加多说评论系统，不多做介绍。
我主要使用的是友言的一套评论系统及插件，分享使用的是加网JiaThis。首先注册友言账号，否则无法进行后台管理。注册之后获得代码，添加到source/_includes/post/share_comment.html。加网点击这里，定制自己喜欢的样式，获得代码也添加到上述文件中。
share_comment.html文件中代码如下（每个人不同）：
<!-- JiaThis BEGIN -->\n<div class=\"jiathis_style_32x32\">\n <a class=\"jiathis_button_qzone\"></a>\n <a class=\"jiathis_button_tsina\"></a>\n <a class=\"jiathis_button_tqq\"></a>\n <a class=\"jiathis_button_weixin\"></a>\n <a class=\"jiathis_button_renren\"></a>\n <a href=\"http://www.jiathis.com/share?uid=*******\" class=\"jiathis jiathis_txt jtico jtico_jiathis\" target=\"_blank\"></a>\n <a class=\"jiathis_counter_style\"></a>\n</div>\n<script type=\"text/javascript\" src=\"http://v3.jiathis.com/code/jia.js?uid=1361705530382241\" charset=\"utf-8\"></script>\n<!-- JiaThis END -->\n\n<!-- Baidu Button BEGIN \n<div id=\"bdshare\" class=\"bdshare_t bds_tools_32 get-codes-bdshare\">\n <a class=\"bds_tsina\"></a>\n <a class=\"bds_qzone\"></a>\n <a class=\"bds_tqq\"></a>\n <a class=\"bds_renren\"></a>\n <a class=\"bds_t163\"></a>\n <a class=\"bds_hi\"></a>\n <span class=\"bds_more\"></span>\n <a class=\"shareCount\"></a>\n</div>\n<script type=\"text/javascript\" id=\"bdshare_js\" data=\"type=tools&amp;uid=6839808\" ></script>\n<script type=\"text/javascript\" id=\"bdshell_js\"></script>\n<script type=\"text/javascript\">\n document.getElementById(\"bdshell_js\").src = \"http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=\" + Math.ceil(new Date()/3600000)\n</script>\n Baidu Button END -->\n\n<!-- UY BEGIN -->\n<div id=\"uyan_frame\"></div>\n<script type=\"text/javascript\" src=\"http://v2.uyan.cc/code/uyan.js?uid=*******\"></script>\n<!-- UY END -->\n
Plain Text
其中有一段代码注释掉了，那是我曾经添加的百度分享的代码，如果使用其他分享或评论，代码也可以添加到这。
现在功能代码在share_comment.html中了，下面需要使其显示到博文的底部。
首先在_config.yml中添加开关：
# comment and share\ncomment_share: true\n
Plain Text
然后在source/_includes/post/sharing.html中添加如下代码： {% raw %}
{% if site.comment_share %}\n {% include post/share_comment.html %}\n{% endif %}\n
Plain Text
最后需要使你的网站通过友言的验证，才可以进行后台管理，后台可以进行评论管理、社交影响力分析、和评论栏的风格功能设置。
3.2 评论热榜和最新评论侧边栏
友言提供了多个嵌入式组件，如评论热榜、最新评论、评论计数等。我们可以将他们做成侧边栏进行展示，或在首页文章列表中，显示每篇文章的评论数目。
首先在你的友言后台管理中找到安装设置->嵌入式组件获得评论热榜和最新评论的代码，分别创建source/_includes/custom/asides/uyan_hotcmt.html和source/_includes/custom/asides/uyan_newcmt.html，代码如下：
<section>\n<h1>评论热榜</h1>\n<div id=\"uyan_hotcmt_unit\"></div>\n <script type=\"text/javascript\" src=\"http://v2.uyan.cc/code/uyan.js?uid=*******\"></script>\n</section>\n
Plain Text
<section>\n<h1>最新评论</h1>\n<div id=\"uyan_newcmt_unit\"></div>\n <script type=\"text/javascript\" src=\"http://v2.uyan.cc/code/uyan.js?uid=*******\"></script>\n</section>\n
Plain Text
然后再_config.yml的default_asides中添加其路径即可显示在侧边栏中。
友言评论框、评论热榜、最新评论可以在后台进行设置，改变设置并不需要更改代码。
3.3 评论计数显示
友言提供评论计数功能，可以将每篇文章的评论数显示在博客首页相应文章题目旁。实现方法为：在source/_includes/article.html中 {% raw %}
{% include post/date.html %}{{ time }}\n
Plain Text
的后边填入嵌入组件中获得的评论计数的代码，需要修改其中一些内容 {% raw %}
| <a href=\"{% if index %}{{ root_url }}{{ post.url }}{% endif %}#comments\" id=\"uyan_count_unit\" du=\"\" su=\"\">0条评论</a>\n <script type=\"text/javascript\" src=\"http://v2.uyan.cc/code/uyan.js?uid=*******\"></script>\n
Plain Text
4. 为博文添加原文链接及声明
可以为你的每篇博文末尾加上原文链接，方法很简单，只需创建plugins/post_footer_filter.rb，代码如下：
# post_footer_filter.rb# Append every post some footer infomation like original url# Kevin Lynx# 7.26.2012#require './plugins/post_filters'module AppendFooterFilterdef append(post)author = post.site.config['author']url = post.site.config['url']pre = post.site.config['original_url_pre']post.content + %Q[<p class='post-footer'>#{pre or \"original link:\"}<a href='#{post.full_url}'>#{post.full_url}</a><br/>&nbsp;written by <a href='#{url}'>#{author}</a>&nbsp;posted at <a href='#{url}'>#{url}</a></p>]endendmodule Jekyllclass AppendFooter < PostFilterinclude AppendFooterFilterdef pre_render(post)post.content = append(post) if post.is_post?endendendLiquid::Template.register_filter AppendFooterFilter\n
Plain Text
并可以针对这一区域的样式进行美化，在sass/custom/_style.scss末尾增加下列内容：
.post-footer{margin-top:10px;padding:5px;background:none repeat scroll 0pt 0pt #eee;font-size:90%;color:gray}\n
Plain Text
尊重原创，此功能来源为octopress每篇文章添加一个文章信息。
5. 公益404
在source目录下创建404.markdown，添加如下代码，即可实现公益404的功能，当你的网页出错找不到时，可以为公益尽一份力。
---\nlayout: page\ntitle: \"404 Error\"\ndate: \"2013-10-10\"\ncomments: false\nsharing: false\nfooter: false\n---\n<script type=\"text/javascript\" src=\"http://www.qq.com/404/search_children,js\" charset=\"utf-8></script>\n
Plain Text
好了先写到这了，还有一些东西没写，等后续再写吧。
参考文章：
定制Octopress
精美的3D旋转地球统计RevolverMaps
","slug":"9fc882fdf9e84476ab25d24409a31b77","keywords":["博客"]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"9fc882fdf9e84476ab25d24409a31b77"}}}