1.代码和语法高亮

除了 Markdown 语法的缩进方式,在 Octopress 中还多种方式可以在文章中嵌入代码并显示语法高亮:

  • 反引号代码块

语法

``` [language] [title] [url] [link text]
code snippet
```
  • 嵌入 Gist

Gist 是 Github 提供的一个代码管理功能。在 Gist 中新建的代码文件会获得一个 gist_id ,用下面的语法就可以在文章中嵌入相应的代码:

{ % gist gist_id [filename] % }

filename 是可选的,如果一个 gist_id 下有多个文件,可以依次嵌入。

  • include_code

include_code 用于在文章中导入代码文件。可以在 _config.yml 的 code_dir 设置文件路径,默认是 source/downloads/code 。

语法:

{ % include_code [title] [lang:language] path/to/file % }

例如,导入 source/downloads/code/test.js :

{ % include_code test.js % }

2.插入图片

github 提供的空间有限,图片最好使用外链。

Octopress 提供的插入图片的语法如下:

{ % img [class names] /path/to/image [width] [height] [title text [alt text]] % }

如果只输入图片的路径 (/path/to/image) ,图片会以左对齐的方式显示,其他可选参数可以控制图片的宽高和显示位置 (class names) 。

3.添加导航

以添加一个 About 页面为例:

  • 执行: rake new_page[blog/about] 在 source/blog/ 目录先生成 about 目录和 about/index.markdown 文件,默认的布局方式是 layout: page 。

  • 在 source/_includes/custom/navigation.html 文件中添加一行:

    		<li><a href="{{ root_url }}/blog/about">About</a></li>

4.布局

所有的页面布局文件都位于 source/_layouts 目录下,例如 post.html 是发布文章时默认的布局。

可以从已有的布局文件复制,然后修改,例如从 page.html 复制一份 about.html ,并修改,然后就可以在上面新建的 about/index.markdown 中设置 layout: about 。

5.侧边栏

Octopress 提供的侧边栏都位于 source/_includes/asides 目录下,例如:显示最近发表的 recent_posts.html ,显示 github 版本库的 github.html。我们新增的侧边栏最好放在 source/_includes/custom/asides 下。

假设我们新建了一个显示发布许可证的侧边栏:license.html,要将其显示在所有的页面需要修改 _config.yml 文件:

default_asides: [custom/asides/license.html]

default_asides 中添加的侧边栏会显示在所有布局的页面中,如果想要根据页面的布局显示不同的侧边栏,Octopress 提供了三个默认布局的设置变量:

blog_index_asides # blog 主页上显示的侧边栏
post_asides       # post 布局页面显示的侧边栏
page_asides       # page 布局页面显示的侧边栏

只要在相应的变量中添加侧边栏即可。

如果要新建了其他布局,如 about.html,只需在 _config.yml 文件中添加 about_asides 。

6.评论

Octproess 已经包含了支持 Disqus 的插件,只需做简单的设置即可使用:

  • 首先确保你已经注册了一个 Disqus 的账户,并将你的 Blog 的 URL 添加到 Disqus 。
  • 然后在 _config.yml 中设置 Disqus 账户的 short name , 并将其使能:

    # Disqus Comments
    disqus_short_name: exbob
    disqus_show_comment_count: true
    
  • 最后在每个 post 的头部设置允许评论:

    comments: true
    

7.分享

添加分享按钮的方式有很多,这里用的是 百度分享

  • 首先在百度分享中选择分享按钮的样式,并生成代码,例如:

    <!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
    	<a class="bds_qzone"></a>
    	<a class="bds_tsina"></a>
    	<a class="bds_tqq"></a>
    	<a class="bds_renren"></a>
    	<span class="bds_more">更多</span>
    	<a class="shareCount"></a>
    </div>
    <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=949520" ></script>
    <script type="text/javascript" id="bdshell_js"></script>
    <script type="text/javascript">
    	document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
    </script>
    <!-- Baidu Button END -->
  • 将上面的代码添加到 source/_includes/post/sharing.html 文件的中:

    <div class="sharing">
    
    { % if site.baidushare % }
    
    <!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
    	<a class="bds_qzone"></a>
    	<a class="bds_tsina"></a>
    	<a class="bds_tqq"></a>
    	<a class="bds_renren"></a>
    	<span class="bds_more">更多</span>
    	<a class="shareCount"></a>
    </div>
    <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=949520" ></script>
    <script type="text/javascript" id="bdshell_js"></script>
    <script type="text/javascript">
    	document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
    </script>
    <!-- Baidu Button END -->
    { % endif % }
    
    </div>
  • 最后,在 _config.yml 文件中添加 baidushare :

    		# baidu share
    		baidushare: true