Octopress 使用笔记

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
Li Shaocheng. Published under BY-NC-SA
Comments
Write a Comment