written by 812lcl posted at http://812lcl.github.io
在上一篇文章中,已经搭建起了octopress博客。使用的是默认的主题,样式 千篇一律,而且自带的一些功能和侧边栏并不适合国内的国情,得不到网络的支持, 如facebook、twitter、google plus和disqus等。所以还是有必要进行一下改造,打造 中国特色octopress博客的。
1. 第三方主题
首先,你先要选定的是博客使用的第三方主题,因为如果你已经进行了很多的网页设置 ,添加了很多的插件,再来改主题,你就要面临悲剧了,你会发现你已经配置好的东西 被替换掉了,这无疑会对你的热情带来打击。所以我们先来看看第三方主题。
你需要先找到自己喜欢的主题,之后可以在此主题上进行修改。 点击这里是一个主题网站,给出了不同主题的预览图,使用 该主题的博客和该主题的GitHub链接。选中你想要的,获得GitHub仓库地址,如下安装
这里我的博客在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
即可,如下:
2.3 微博秀
新浪微博是一个信息传播非常迅速的媒介,如果你热衷于微博,可以在侧边栏添加 自己的微博秀。首先需要获得自己的微博秀代码,链接为http://app.weibo.com/tool/weiboshow,进行相应的设置即可获得微博秀代码。
然后在source/_includes/custom/asides
创建weibo.html,添加如下代码,刚刚获得 的微博秀代码也要添加到相应位置:
最后在default_asides
中加入custom/asides/weibo.html
即可显示你的微博秀了。
2.4 豆瓣展示
你可以通过豆瓣读书、豆瓣电影、豆瓣音乐等多方面展示你自己,豆瓣也提供了类似 微博秀的展示方式,添加方法也类似。获得豆瓣收藏秀的链接http://www.douban.com/service/badgemakerjs,根据自己的喜欢进行设置
然后在source/_includes/custom/asides
创建douban.html,添加如下代码, 刚刚获得的代码添加到<div>
之间:
最后在default_asides
中加入custom/asides/douban.html
显示你的豆瓣展示。
2.5 访客地图
效果如我的博客右侧那个精美的3D旋转地球所示,它可以显示访客数量,访客来自的 地域,既有装饰作用,又有统计作用。它也有2D效果版,可以根据自己喜欢进行设置, 地址在这里,然后获得代码。
依然在source/_includes/custom/asides
创建earth.html,代码如下:
在default_asides
中加入custom/asides/earth.html
显示你定制的访客地图。
2.6 酷站博客
你有一些经常去的网站、博客,想推荐给大家,则可以在侧边栏加上一个“酷站博客” ,当然名字你自己取即可。
在source/_includes/custom/asides
创建blog_link.html,代码如下:
可以自行添加喜爱网站,然后在default_asides
中加入custom/asides/blog_link.html
。
看到这,你应该很熟悉添加侧边栏的流程了吧。
2.7 最热文章
Octopress Popular Posts Plugin是根据Google page rank计算,展示出权值最高的 文章,插件的项目主页为点击这里。
这个插件的安装与之前的方法不同,首先在Gemfile
中添加
gem 'octopress-popular-posts'
Gemfile
中的是bundle安装时安装的所有依赖的软件,然后用bundle安装
bundle install
执行命令,将插件拷贝到你的source目录,如下:
bundle exec octopress-popular-posts install
到这就安装完了,可以设置显示了,在_config.yml
中设置,增加下面一行:
popular_posts_count: 5 # Posts in the sidebar Popular Posts section
设置边栏显示文章数,最后在default_asides
中添加custom/asides/popular_posts.html
,即可显示出来。
这样就设置好了,同时建议将缓存的page rank文件添加进你的.gitignore
中
.page_rank
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到你博客的目录即可。
包含文件如下:
其中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目录
这样可以观看效果了,不过3D效果的标签云,对于不支持flash的浏览器无效,如safari
。
标签功能的实现,我参考了一下几篇文章:
2.9 相关文章功能
此功能即根据当前阅读的文章,分析博客中其他与此相近的文章,进行推荐的一个功能 ,在octopress wiki中推荐的第三方插件中有一个插件实现此功能,项目主页点击这里。该插件,利用octopress自带的LSI实现对文章分析分类,然后进行推荐,但当文章较多时分类过慢,它推荐 安装GSL来进行分类。我安装过这个功能,但不知道它是根据什么规则分类,而且之后 不知道安装了什么,之后每次分类都会出错。你可以自己尝试一下,项目主页都有 详细的步骤。
就在我想放弃这个功能的时候,我发现了它――related_posts-jekyll_plugin。 这个插件很简单,只需下载_plugins/related_posts.rb放在自己的plugins文件夹中, 然后在想添加相关文章推荐的地方添加如下语句:
我是在source/_layouts/post.html中加入的这些语句,这个html文件是打开博文时 的布局,我将相关文章添加在博文的结束处。
这个插件是根据文章的tag进行分类的,根据所有博文与本篇文章共同tag的多少依次 排序进行推荐,还是很简单有效的。
参考这里
3. 社会化评论与分享
3.1 友言和加网
octopress内置了disqus评论系统,不适合我国基本国情,所以需要用一些国内的第三 方评论系统,如友言、多说,可以以微博、人人、QQ等账号登陆发表评论,网站通过 验证后可以对评论进行分析,管理。
多说评论系统可参见为 Octopress 添加多说评论系统,不多做介绍。
我主要使用的是友言的一套评论系统及插件,分享使用的是加网JiaThis。首先注册 友言账号,否则无法进行后台管理。注册之后获得代码, 添加到source/_includes/post/share_comment.html
。 加网点击这里,定制自己喜欢的样式, 获得代码也添加到上述文件中。
share_comment.html文件中代码如下(每个人不同):
其中有一段代码注释掉了,那是我曾经添加的百度分享的代码,如果使用其他分享或 评论,代码也可以添加到这。
现在功能代码在share_comment.html中了,下面需要使其显示到博文的底部。
首先在_config.yml中添加开关:
然后在source/_includes/post/sharing.html
中添加如下代码:
最后需要使你的网站通过友言的验证,才可以进行后台管理,后台可以进行评论管理、 社交影响力分析、和评论栏的风格功能设置。
3.2 评论热榜和最新评论侧边栏
友言提供了多个嵌入式组件,如评论热榜、最新评论、评论计数等。我们可以将他们 做成侧边栏进行展示,或在首页文章列表中,显示每篇文章的评论数目。
首先在你的友言后台管理中找到安装设置->嵌入式组件
获得评论热榜和最新评论的 代码,分别创建source/_includes/custom/asides/uyan_hotcmt.html
和source/_includes/custom/asides/uyan_newcmt.html
,代码如下:
然后再_config.yml
的default_asides
中添加其路径即可显示在侧边栏中。
友言评论框、评论热榜、最新评论可以在后台进行设置,改变设置并不需要更改代码。
3.3 评论计数显示
友言提供评论计数功能,可以将每篇文章的评论数显示在博客首页相应文章题目旁。 实现方法为:在source/_includes/article.html
中
的后边填入嵌入组件中获得的评论计数的代码,需要修改其中一些内容
4. 为博文添加原文链接及声明
可以为你的每篇博文末尾加上原文链接,方法很简单,只需创建plugins/post_footer_filter.rb
,代码如下:
并可以针对这一区域的样式进行美化,在sass/custom/_style.scss
末尾增加下列内容:
.post-footer{margin-top:10px;padding:5px;background:none repeat scroll 0pt 0pt #eee;font-size:90%;color:gray}
尊重原创,此功能来源为octopress每篇文章添加一个文章信息。
5. 公益404
在source
目录下创建404.markdown,添加如下代码,即可实现公益404的功能,当你的网页出错找不到时,可以为公益尽一份力。
好了先写到这了,还有一些东西没写,等后续再写吧。
参考文章: