在 github pages 上搭建好 octopress 博客之后，博客的基本功能就能使用了。如果想自己定制也是没问题的，octopress 有较详尽的官方文档，原则上有问题求助官方即可：octopress-help。官方没有包纳的也可以去询问 stackoverflow。 当然，中文的看起来总会省事儿点。我做了如下一些总结;)

不会 ruby 的童鞋特别注意：配置_ config.yml 的过程中特别注意，配置项『:』后要留空格，否则会报错。

另外，一些『土方法』可能并不利于程序的维护可扩展，有空再仔细研究，大家将就着用吧;).

0.安装第三方主题

之所以把这一点标记为 0，是因为在博主刚刚经历了博客主题的更新后，惨烈的发现需要重新配置包括评论、百度统计在内的不少东西。

应该是自己在做定制化的过程中乱修改源码（这是一种很不可取维护方式，使软件难以持续扩展）造成的，又或者 octopress 框架本身对定制化扩展的支持比较弱（对 ruby 不熟，对 octopress 也一知半解，我不确定是不是这个原因）。

简而言之，初接触 octopress 的朋友们，建议先安装第三方主题，再参考以下定制方法。

我使用的第三方主题是『whitelake』。

安装过程很简单:

1

2

3

4

$ cd octopress

$ git clone https://github.com/gehaxelt/CSS-WhiteLake.git .themes/whitelake

$ rake install['whitelake']

$ rake generate

注意，执行rake install['whitelake']之后，直接使用rake preview浏览网页会遇到很多瑕疵，rake generate之后再rake preview就没问题了。

更多第三方插件和主题资源，参见官方 repo 的 wiki.

1.装饰边栏

以增加豆瓣展示框为例。参加正反反长大哥的博客 How to Embed Douban-Show in Your Octopress Site

2.增加评论和分享功能

虽然 octopress 内置的 disqus 评论系统很不错，但在国内的使用并不普及。相比之下，友言、多说等第三方评论则更接地气，可以利用到微博、人人等 SNS 账号。

2.1 友言

本博客采用了友言。首先注册友言的账号，如果不注册，虽然也能实现评论功能，但没有后台管理整个站点的评论会十分纠结。注册完成之后，选择获取代码，将这串代码贴入相应的位置，即可实现第三方评论。

在路径$OCTOPRESS/source/_includes/post/上创建文件youyanandjiathis.html，功能代码放入其中。

2.2 加网

分享方面，本博客使用了加网。注册后，在更多高级自定义功能中，可能自定义不同的分享按钮，生成代码后，也将生成的代码贴入$OCTOPRESS/source/_includes/post/youyanandjiathis.html中。

现在，youyanandjiathis.html 的样子如下(需要注意，自己使用时，uid 显然是不一样的啦)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!-- JiaThis Button BEGIN -->

<div class="jiathis_style_32x32">

  <a class="jiathis_button_qzone"></a>

  <a class="jiathis_button_tsina"></a>

  <a class="jiathis_button_tqq"></a>

  <a class="jiathis_button_weixin"></a>

  <a class="jiathis_button_renren"></a>

  <a href="http://www.jiathis.com/share?uid=1814751" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>

  <a class="jiathis_counter_style"></a>

</div>

<script type="text/javascript">

var jiathis_config = {data_track_clickback:'true'};

</script>

<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=xxxxxx" charset="utf-8"></script>

<!-- JiaThis Button END -->

<!-- UY BEGIN -->

<div id="uyan_frame"></div>

<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=xxxxxxxx"></script>

<!-- UY END -->

2.3 将功能增加到博客中

功能代码已经都在 youyanandjiathis.html 中了，接下来是让 blog 使用到这些功能代码。

首先在_ config.yml 中增加开关：

1

2

#comment and share

comment_and_share: true

然后在$OCTOPRESS/source/_includes/post/sharing.html中的，根据开关comment_and_share 引入对应的功能代码post/youyanandjiathis.html，类比于默认实现中的<facebook_like>部分。代码如下（使用时，先去掉反斜杠）：

1

2

3

  \{\% if site.comment_and_share \%\}

      \{\% include post/]youyanandjiathis.html \%\}

  \{\% endif \%\}

2.4 友言验证

另外，需要在友言的后台处理评论，甚至做一些定制化处理，需要通过友言的验证。详情在友言的管理员后台可见。

3.定制域名

如果你拥有自己的域名，可以 CNAME 到 github pages 上。以我的配置为例（我的域名为biaobiaoqi.me）。

1.在 octopress 的 source 目录下创建 CNAME 文件，并输入新域名：biaobiaoqi.com

2.在域名管理中，创建或修改 A 记录，指向 207.97.227.245 这个地址。

3.创建 CNAME 记录，www.biaobiaoqi.com -> biaobiaoqi.github.com

这一过程可能需要好几天才能生效，请耐心等待:)

4.让博客中连接在新窗口打开

由于 markdown 不支持这一语法，如果要自己用 html 标签实现，又有些违背了 markdown 以内容为重的立意。

参考博文《在 Octopress 中为 markdown 的超链接加上 target=”_blank”》，可以通过将如下代码添加到 {OCTOPRESS_HOME}/source/_includes/custom/head.html 文件末尾来实现：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<script type="text/javascript">

function addBlankTargetForLinks () {

  $('a[href^="http"]').each(function(){

      $(this).attr('target', '_blank');

  });

}

$(document).bind('DOMNodeInserted', function(event) {

  addBlankTargetForLinks();

});

</script>

5.列表的排版

默认情况，所有文字的排头会对齐，但如果有列表项的情况下也如此，列表头就会冲出文章的主体区块了。

在 octopress/sass/custom/_layout.scss 文件中找到#$indented-lists: true 行，去掉#注释即可。

1

$indented-lists: true


6.404ERROR 页面

在 ocotopress/source 目录下，增加 404.markdown，并做出自定义的呃编辑。本博客使用了腾讯公益 404，推荐大家使用，为社会贡献一分正能量。公益 404

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

---

layout: page

title: "404 Error"

date: 2013-4-21 02:35

comments: false

sharing: false

footer: false

---

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>

7.在侧边栏增加标签云(tag cloud)

octopress 默认只有分类，没有标签。这对于博文的组织和管理很不友好。有人开源出了自己定制的 tag 生成和 tag cloud 展现的代码，可以引入到自己的博客中来。

详细操作参见博文：《为 octopress 添加 tag Cloud》。不过博文中没有讲解标签云的 UI 配置参数的使用，为了让 UI 适应页面，请参考原作者的官方说明:octopress-tag-cloud。我所实践出的较合理的参数值如下

1

2

#注意，下面一行的 escape 反斜杠在正常使用时需要去掉

\{\% tag_cloud font-size: 70-180%, limit: 15, order: rand, style: para  { &nbsp }\%\}

如果想将文章分类（category）也放在侧边栏，可以参考这篇博文：《Octopress - Category List Plug-in》

8.在顶栏增加标签云页面 tab

1.生成新网页

1

rake new_page["tag-cloud"] #在 octopress/source/中将生成 tag-cloud/文件夹

2.在顶栏增加新页面

修改source/_includes/custom/navigation.html

1

2

3

4

5

6

7

8

<ul class="main-navigation">

  <li><a href="/">首页</a></li>

  <li><a href="/blog/categories/tech/">技术</a></li>

  <li><a href="/blog/categories/life/">生活</a></li>

  <li><a href="/blog/categories/book/">读书</a></li>

  <li><a href="/tag-cloud/">标签云</a></li>

  <li><a href="/about">关于</a></li>

</ul>

在需要的位置增加<li><a href="/tag-cloud/">标签云</a></li>。如此一来，可以在网页顶栏看到『标签云』一栏了。不过此时，点击进入，页面为空。

3.修改标签云页面内容。

修改octopress/source/tag-cloud/index.markdown，增加标签云执行脚本。

1

2

3

4

5

6

7

8

9

10

11

12

13

---

layout: page

title: "标签云"

date: 2013-07-10 02:53

comments: true

sharing: true

footer: true

---

#注意，代码中的 escape 反斜杠在正常使用时需要去掉

#另外，这几个语句不能使用换行。在我的测试环境下，使用换行后，最终的页面上对换行进行了错误的解码，给增加了一个<code>标签，造成了错误的显示。

<ul class="tag-cloud">\{\% tag_cloud font-size: 90-210%, limit: 1000, style: para \%\}</ul>

9.博客末尾增加原文链接、版权等

最近发现有其他小网站未经授权直接 copy 我的博客内容，在违章的末尾加上版权、原文链接变得很有必要了。

详情参见博客《为 octopress 每篇文章添加一个文章信息》。

值得注意的是，插件代码中如下几行需要去掉缩进和换行符。原因跟第 8 节所讲一样，换行符引起了错误的解码，造成了错误的显示。

1

2

3

4

5

6

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>]

最后，kevin 没有提及的是，为了做好美化，还需要增加一段针这块区域的 css：

编辑sass/custom/_style.scss，在末尾增加如下内容：

1

.post-footer{margin-top:10px;padding:5px;background:none repeat scroll 0pt 0pt #eee;font-size:90%;color:gray}

这样，原文链接和版权信息就能很好的和正文内容分离开了。

10.给中英文之间加空格

参见博文《给中英文间加个空格》。

特别注意 ruby 文件的编码：复制博文中的代码时，需要去掉前几行的描述性注释，让#encoding:UTF-8语句暴露在.rb 文件的第一句。否则，rake generate时，会报错无法识别\p{Han}。

Tips

既然是个博客站点，就算是 web 产品啦，可以考虑下 SEO。推荐博文《Octopress 中的 SEO》

 原文地址：http://biaobiaoqi.github.com/blog/2013/07/10/decorate-octopress/
 版权声明：自由转载-非商用-非衍生-保持署名| Creative Commons BY-NC-ND 3.0

定制Octopress的更多相关文章

  1. Mac环境下Octopress个人博客搭建

    一直想弄一个漂亮一点的个人博客,之前一直用的博客园,对主页的能自定义内容实在不满意,终于下定决定,找到了Octopress这个适合我的解决方案,以下过程都是自己一步一步记录下来的,希望对大家有帮助. ...

  2. 我的octopress配置

    在github上用octopress搭建了自己的blog,octopress号称是"专门给黑客打造的博客(A blogging framework for 把hackers)",使 ...

  3. octopress第三方插件：博文同步工具syncPost

    为了增加外链等考虑,独立博客往往有将博文同步到其他博客社区的需求.自己人肉黏贴的方式笨拙.重复,对于程序猿而言,着实不可取. 我在 github 上找到了 syncPost 这个针对 octopres ...

  4. ASP.NET Core应用的错误处理[3]：ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”

    DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMi ...

  5. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  6. 标准产品+定制开发:专注打造企业OA、智慧政务云平台——山东森普软件，交付率最高的技术型软件公司

    一.公司简介山东森普信息技术有限公司(以下简称森普软件)是一家专门致力于移动互联网产品.企业管理软件定制开发的技术型企业.公司总部设在全国五大软件园之一的济南齐鲁软件园.森普SimPro是由Simpl ...

  7. Gradle 实现 Android 多渠道定制化打包

    Gradle 实现 Android 多渠道定制化打包 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近在项目中遇到需要实现 Apk 多渠道.定制化打包, Google .百度查找了一些资料, ...

  8. Xamarin+Prism小试牛刀：定制跨平台Outlook邮箱应用(后续)

    在[Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用]里面提到了Microsoft 身份认证,其实这也是一大块需要注意的地方,特作为后续补充这些知识点.上章是使用了Microsof ...

  9. Django admin定制化，User字段扩展[原创]

    前言 参考上篇博文,我们利用了OneToOneField的方式使用了django自带的user,http://www.cnblogs.com/caseast/p/5909248.html , 但这么用 ...

随机推荐

  1. 【Codeforces Round #299 (Div. 2) B】Tavas and SaDDas

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次取出最小的数字,在后面加上一个4或一个7就好; 会发现最后的数字很少的. [代码] #include <bits/stdc ...

  2. JAVA一些基础概念

    Java (计算机编程语言) Java是一门面向对象编程语言,不仅吸收了C++语言的各种长处,还摒弃了C++里难以理解的多继承.指针等概念.因此Java语言具有功能强大和简单易用两个特征. Java语 ...

  3. MongoDbHelper 帮助类(下)

    对MongoDbHelper帮助类进行了一下整合,但是代码中一个方法需要将string类型转化为BsonValue类型一直出错.所以欢迎留言指正 using System; using System. ...

  4. Altium Designer的pcb上添加文字说明

  5. 切换根控制器UIApplication 主屏幕UIScreen 读取文件资源NSBundle

    //主屏幕设为webView CGRect frame = [UIScreen mainScreen].applicationFrame; UIWebView *webView = [[[UIWebV ...

  6. 23、V4L2应用编写及各个ioctl涉及结构体说明分析

    常用的结构体在内核目录include/linux/videodev2.h中定义 struct v4l2_requestbuffers  //申请帧缓冲,对应命令VIDIOC_REQBUFSstruct ...

  7. 9、基于Linux的v4l2视频架构应用编写

    Linux系统中,视频设备被当作一个设备文件来看待,设备文件存放在 /dev目录下,完整路径的设备文件名为: /dev/video0 . 视频采集基本步骤流程如下: 打开视频设备,设置视频设备属性及采 ...

  8. 【topcoder SRM 702 DIV 2 250】TestTaking

    Problem Statement Recently, Alice had to take a test. The test consisted of a sequence of true/false ...

  9. VMware Workstation 12 安装mac os x 10.11

    本人近期在学习iOS开发,由于初学,购买设备有点太昂贵了点.和我有意向想法的朋友能够看看在这篇文章.在虚拟机里装MAC os系统. 第一步:准备 VMware Workstation 12版本号 ma ...

  10. Oracle列加密

    加密函数 create or replace function encrypt_des(p_text varchar2, p_key varchar2) return varchar2 isv_tex ...