浮生猎趣

ls *.fun

Octopress博客发布后的基本配置、继续阅读、自动打开、代码高亮、插入图片、分类标签、修改样式

| Comments

基本配置

修改_config.yml，格式为：配置项: + 空格 + 参数，空格不能少。

标题、副标题、作者、侧边栏等

编辑_config.yml，修改url:、title、sub_title、author, default_asides的对应参数。

修改日期格式

编辑_config.yml的date_format，格式定义见这里

如想显示为：2013-12-02, Mon，则改为：

date_format: "%F, %a"

继续阅读

如果正文太长，不希望在首页直接显示完整内容，可以在适当的位置加上一句<!--more-->，后面的内容就会被按钮Read on→所替代，点击继续阅读。

运行命令后自动打开文件、预览

修改Rakefile，运行指定命令后打开文件编辑，或者打开浏览器预览。见博客：基于 Octopress－ 配置篇（Mac，Xcode 4.3.1，Ruby 1.9.3）

new_post后自动打开对应的markdown文件

在Rakefile中定义：

1

editor = "vi"

然后在new_post命令后面添加：

1
2
3

  if #{editor}
    system "#{editor} #{filename}"
  end

preview之后自动调用浏览器打开预览页面

在preview命令后面添加：

1

  system "sleep 2; open http://localhost:#{server_port}/"

代码高亮

作为一个面向黑客的博客系统，如果不支持代码高亮就说不过去了。Octopress默认使用pygment这个语法高亮插件。

Mac/Linux应该已经包含了该模块。

如果是Windows，需要安装Python，并且使用easy_install安装pygments模块。

  1. 安装Python；
  2. 安装easy_install；
  3. 添加%Python%\Scripts到环境变量，%Python%是Python的安装目录；
  4. 安装pygements：easy_install pygments

在Markdown源文件里，插入代码有多种方法，这里只介绍简单的三种。

1.四个空格缩进

对于四个空格开头的语句，Markdown输出到html时会自动用<pre>和<code>标签包起来，当作代码块显示。需要注意的是，代码块前面必须要有一行空行。不过这样是不会有关键字高亮的，只是背景是代码高亮的背景而已。如下：

std::string hi("Hello world!");

2.前后用三个反引号““`”包含

反引号设定代码高亮比较简单灵活，可以指定代码标题、语言、链接等等。格式如下：

``` [language] [title] [url] [link text]
 Hello world
```

高亮效果：

1

Hello world

3.codeblock代码块

这个效果与三个反引号的效果类似，只是写法不如反引号简便。格式如下：

{ % codeblock [title] [lang:language] [url] [link text] %}
code snippet
{ % endcodeblock %}

高亮效果：

HelloWorld.js 
1

    alert('Hello world!')

Octopress还支持引用Github上的gist，见官方文档。

插入图片

将图片放到octopress/source/images/下，然后在Markdown文件中直接引用即可。也可以直接引用网络上的图片。

为了方便管理，可以在images下对自己添加的图片建立目录区分，比如：images/2013/12。

语法与插入超链接类似：

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")
  • 半角叹号
  • 半角方括号，里面放图片的替代文字
  • 半角圆括号，里面放图片的网址，后面可选地加上文字。

添加分类

此节参考了这篇文章：为octopress添加分类(category)列表

rake new_post生成的markdown文件中包含了categories:，在后面加上[分类名]就可以指定该文章的分类。下面说的是怎么使得分类能在博客侧边栏显示。

添加category_list插件，保存下面的代码到octopress/plugins/category_list_tag.rb:

category_list_tag.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)

增加到侧边栏

保存以下代码到source/_includes/custom/asides/category_list.html

category_list.html
1
2
3
4
5
6

<section>
  <h1>Categories</h1>
  <ul id="categories">
    { % category_list %}
  </ul>
</section>

修改_config.yml的default_asides

1

default_asides: [custom/asides/category_list.html]

添加标签

见为octopress添加tag Cloud

修改样式

见Octopress主题样式修改

让搜索引擎收录你的博客

有了自己的博客，当然希望博文的内容能被大家搜索到。但是刚开始，搜索引擎不一定抓取了你的博客，想要尽快让引擎收录，直接提交你的博客网址到各大搜索引擎即可。然后等待网络蜘蛛抓取吧，生效时间不定的。

可能遇到的问题

  • rake preview后看不到最新效果。解决方法：检查一下Markdown文件是不是有无法解析的语句。最容易发生的是，引用了代码片段，但是使用了pygement无法解析的语言；又或者代码片段内部含有代码高亮的关键字，如{ %。
  • 侧边栏布局混乱，跑到博客底部。也是代码解析出错引起的，同上。定位出问题的代码很简单，用二分法剪切markdown文件，保存，查看预览，看看是不是还有问题，逐步缩小范围就可以看出是哪一句引起的了。
原文作者： lslin
原文链接： http://blog.lessfun.com/blog/2013/12/05/config-the-octopress-blog-after-deployed/
版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

发表评论