基于 Octopress 和 GitHub 的个人博客搭建——配置及第三方插件配置问题

首先说一下 octopress 主目录下的文件结构，我不会 Ruby，也没有完全搞懂这个每个文件的作用和结构，就引用一下这篇 Blog：Octopress博客搭建及目录结构 - 812lcl的博客
由于 octopress 更新了，这篇 Blog 里面讲的有些旧了，新的文件我就自己修改说明了。

├─ config.rb  #指定额外的compass插件
├─ config.ru
├─ Rakefile   #rake的配置文件,类似于makefile 添加Tag 功能后要自动在编辑每篇Blog 时自动在前面添加tags: 提示
├─ Gemfile    #bundle要下载需要的gem依赖关系的指定文件
├─ Gemfile.lock  #这些gem依赖的对应关系,比如A的x版本依赖于B的y版本
├─ _config.yml   #站点的配置文件
├─ public/    #在静态编译完成后的目录,网站只需要这个目录下的文件树
├─ _deploy/   #deploy时候生成的缓存文件夹,和public目录一样
├─ sass/      #css文件的源文件,过程中会compass成css
├─ plugins/   #放置自带以及第三方插件的目录,ruby程序
│   └── xxx.rb
└─ source/    #站点的源文件目录,public目录就是根据这个目录下数据生成的
   └─ _includes/
      └─ custom/      #自定义的模板目录,被相应上级html include
         └─ asides/   #边栏模板自定义模板目录
      └─ asides/      #边栏模板目录
      └─ post/        #文章页面相应模板目录
   └─ _layouts/       #默认网站html相关文件,最底层
   └─ _posts/         #新增以及从其它程序迁移过来的数据都存在这里
   └─ images/         #图片目录 可手动添加，添加后Blog 应用图片可直接从这个文件中引用
└─ README.markdown    #octopress 说明
└─ CHANGELOG.markdown    # octopress 更新说明

0. `_config.yml` 文件配置

主配置：

url: http: //lsdlab.github.io   # Blog url
title: NO MAN'S LAND   # Blog 名称
subtitle: Too fast to live, too young to die.    # 副标题
author: Chen Jian    # 作者
simple_search: https://www.google.com/search    # 网站内搜索
description: coding freak, Mac, IOS, Unix, Linux, Microshit, Major in SE.   # Blog 介绍，SEO 相关

目录及第三方插件配置：

root: /    # 主目录
permalink: /blog/:year:month:day:/    # 每篇Blog 的url
source: source    # 站点源文件，写作目录
destination: public    # rake generate 生成的静态页面文件夹
plugins: plugins    # 第三方插件目录
tag_dir: tags    # 添加 tags 功能后必须添加的配置语句
markdown: kramdown    # markdown 语法，我给改了，后面会说到
hlghlghter: pygments    # 源代码高亮
paginate: 6    # 每页显示的文章数目
paginate_path: "post/:num"   # 根据文章列表显示的URL
recent_post: 6   # 侧边栏显示的最近文章数目
except_link: "Continue Reading &rarr;"    # 继续阅读按钮
except_separator: "<!--more-->"    # 在markdown 中假如 <!--more--> 可截断文章在新页面中继续阅读
titlecase: false   # 转换每篇文章的 title 至 titlecase
default_asides: [custom/asides/about.html, asides/recent_posts.html, custom/asides/catagory_list.html, custom/asides/tags.html, asides/github.html]    # 侧边栏定制导入HTML 文件，这个取决于主题支不支持，我用的 whitespace 主题有 about 页面，文章分类和标签侧边栏，其实这还不是侧边栏，一栏居中自适应，三个 asides 都跑到页面底部去了。

下面就是第三方配置了，我只用了 GitHub还有 Twitter还有Google Analytics：

github_user: lsdlab
github_repo_count: 0
github_show_profile_link: true
github_skip_forks: true

twitter_user: lsd
twitter_tweet_button: true

google_anaytics_tracking_id:

在 navigation bar 右边会显示 GitHub 的图标和 RSS 订阅的图标，每个文章的全文右下方会显示 tweet 按钮，Google Anaytics 可以去申请一个 Tracking ID, 然后就能通过手机上的 Analytics 看到实时访问者，访问来源，访问量等等。

1. 文章分类功能

分类和标签是两种管理文件的方式，一种有序一种无序，有人喜欢我文件夹的管理方式，有人喜欢无序的标签。分类的方式得保证每一分文件都分好类了，分类也得是恰当的，但这个就会带来一个问题，不能保证每一个文件的分类都是恰当的，标签的出现恰好是解决了这个问题，不一定每一个文件都要分好类，都分恰当的了，分恰当了，那就太多类了，标签可以用来弥补这个缺点，无法快速准确分类的文件都用标签来标记，多标几个，方便以后查询使用。

首先在 /plugins 中新建一个 category_list_tag.rb, 粘贴下面一段代码：

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, 粘贴下面一段代码：

<section>
   <h1>Categories</h1>
   <ul id="categories">
       # 这个应该是花括号百分号 category_list 变量，我不能直接写，直接贴上来调用我的后台上的东西了，下面也有两个这样的变量
   </ul>
</section>

第三步是在 /_config.yml 中找到 default_asides: 后面按照你自己的顺序添加 custom/asides/category_list.html。到这里就完成了，然后还有一个问题就是中文目录名，我没有用过中文目录名，但是后来看到了这个 Octopress 精益修改 (5)，意识到还有一个中文的问题，怪不得看到有的人的文章 url 是中文拼音，目录也是这个道理。如果直接写成中文目录名称就会到时在目录列表里面不能链接到该分类的页面，需要在 /plugins/category_list_tag.rb 中找到 html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"，改成 html << "<li class='category'><a href='/blog/categories/#{category.to_url.downcase}/'>#{category} (#{posts_in_category})</a></li>\n"，这里就正式完成了，点击中文目录的话应该会看到 url 链接到目录的全拼拼音。

2. 文章标签功能

首先需要复制两个插件还有一些其他文件：
https://github.com/robbyedwards/octopress-tag-pages
https://github.com/robbyedwards/octopress-tag-cloud

octopress-tag-pages:
复制tag_generator.rb 至/plugins 下，tag_index.html 至/source/_layouts 下，tag_feed.xml 至/source/_includes/custom 下，一共三个文件。

octopress-tag-cloud:
复制 tag_cloud.rb 至 /plugins 下，就这一个文件。

第二步是添加下面的代码至 /source/_includes/custom/asides/tags.html

<section>
   <h1>Tags</h1>
   <ul class="tag-cloud">
       # 这个也是，花括号百分号 tag_cloud font-size: 120-210%, limit: 20, style: para
   </ul>
</section>

font_size 标签大小，limit 限定二十个，可以自己改。
最后一步是在 /_config.yml 中的 default_asides: 后添加 custom/asides/category_list.html，大功告成。

分类和标签功能都是参考的一个 Blog：
为octopress添加分类(category)列表
 为octopress添加tag cloud

就是一个单独的页面显示所有的 Tag，首先生成一个页面：

1	rake new_page["tag-cloud"] #在 `/source` 中生成一个 `/tag-cloud` 文件夹

打开添加：

1	<ul class="tag-cloud"># 花括号百分号 tag_cloud font-size: 120-210%, limit: 1000, style: para </ul>

然后是在增加一个新页面修改 /source/_includes/custom/navigation.html

<ul class="main-navigation">
   <li><a href="{{ root_url }}/">Blog</a></li>
   <li><a href="{{ root_url }}/blog/archives">Archives</a></li>
   <li><a href="/tag-cloud/">Tag Cloud</a></li>
</ul>

完成。这个是参考的定制Octopress 第八个功能。

全部整理好了，也不想加评论功能了，分享按钮什么的，有个 Tweet 按钮就差不多了，还有各种侧边栏，这个也得看主题，还是不要乱搞了，到时候主题看厌了想要换就要出问题了，这个就当是个笔记，以防除了问题要推倒重来，遇到各种问题还要再查资料，其实我来来回回推倒重来也有好几回了，差不多都记住了。

4. 参考链接

贴几个参考连链接：

0. _config.yml 文件配置

1. 文章分类功能

2. 文章标签功能

3. Tag Cloud 功能

4. 参考链接

0. `_config.yml` 文件配置