實踐：爲jekyll構建的博客添加基礎功能

經過github默認構建工具生成的博客功能仍是很是單薄的，因此就須要作點後期工做添加一些常見的功能，例如：搜索、評論、訂閱和歸檔頁面。

構建工具

寫了一個簡單的Makefile來作自動構建的工做：

all: css js site

css:
    @sqwish stylesheets/styles.css

js:
    @cat javascripts/respond.js javascripts/common.js | uglifyjs > javascripts/main.min.js

site:
    @jekyll --rdiscount

watch:
    @jekyll --rdiscount --server --auto

.PHONY: css

這樣我在vim調用:make命令就完成壓縮合並資源文件和本地部署文件的任務了。

圖標

使用了One div上面的幾個css樣式，這樣能夠減小圖片文件的請求數量，加快響應時間，不過如今圖標在移動設備的Chrome上顯示有點大，暫時還沒解決。

訂閱功能

訂閱有兩種：一種是rss，一種是atom，都是從githab上面找的模板。

---
layout: none
---
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>{{ site.name }}</title>
        <description>{{ site.description }}</description>
        <link>{{ site.url }}</link>
        <atom:link href="{{ site.url }}/feed.xml" rel="self" type="application/rss+xml" />
        {% for post in site.posts limit:10 %}
            <item>
                <title>{{ post.title }}</title>
                <description>{{ post.content | xml_escape }}</description>
                <pubDate>{{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }}</pubDate>
                <link>{{ site.url }}{{ post.url }}</link>
                <guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
            </item>
        {% endfor %}
    </channel>
</rss>

注意這裏有使用部分_config.xml裏的變量

---
layout: nil
title : Atom Feed
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

 <title>{{ site.title }}</title>
 <link href="{{ site.url }}/atom.xml" rel="self"/>
 <link href="{{ site.url }}"/>
 <updated>{{ site.time | date_to_xmlschema }}</updated>
 <id>{{ site.url }}</id>
 <author>
   <name>{{ site.author.name }}</name>
   <email>{{ site.author.email }}</email>
 </author>

 {% for post in site.posts %}
 <entry>
   <title>{{ post.title }}</title>
   <link href="{{ site.url }}{{ post.url }}"/>
   <updated>{{ post.date | date_to_xmlschema }}</updated>
   <id>{{ site.url }}{{ post.id }}</id>
   <content type="html">{{ post.content | xml_escape }}</content>
 </entry>
 {% endfor %}
</feed>

注意這裏有使用部分_config.xml裏的變量

搜索和評論服務

搜索用的google:

<form class="search" method="GET" action="https://www.google.com.hk/search">
  <input type="text" name="as_q" class="search-query" placeholder="Search">
  <input type="hidden" name="as_sitesearch" value="chemzqm.me">
</form>

樣式是由angularjs.org借鑑過來的（感謝），另加了動畫和陰影。

評論用的是Disqus（由於沒有找到國內提供靜態頁面評論服務的提供商）

function _load(src, callback){ //load script file async
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.src = src;
  script.onload = callback;
  document.getElementsByTagName('HEAD')[0].appendChild(script);
}
_load('http://{{site.disqus_name}}.disqus.com/embed.js');

注意這裏有使用部分_config.xml裏的變量

站點地圖

建立站點地圖索引文件能夠有效的幫助搜索引擎找到你的文章, 具體用法請參考google的文章, sitemap能夠支持多種格式，我這裏仍是用的xml：

---
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    {% for post in site.posts %}
    <url>
      <loc>{{ site.url }}{{ post.url }}</loc>
        <lastmod>{{ post.date | date_to_xmlschema }}</lastmod>
        <changefreq>monthly</changefreq>
    </url>
    {% endfor %}
</urlset>

定製頁面

寫了兩個分類的頁面，一個是按時間分類的 archive.html，另外一個是按tag分類的 tags.html. 兩個頁面模板代碼差很少，例如tags.html：

---
layout: default
title: 按標記歸檔
---


<ul id="tagbox" class="clearfix">
{% for tag in site.tags %} 
  <li><a href="{{ BASE_PATH }}/tags.html#{{ tag[0] }}-ref">
    {{ tag[0] | join: "/" }} <span>{{ tag[1].size }}</span>
  </a></li>
{% endfor %}
</ul>



{% for tag in site.tags %} 


<h2 id="{{ tag[0] }}-ref">{{ tag[0] | join: "/" }}</h2>




<ul>
    {% assign pages_list = tag[1] %}  
    {% for node in pages_list %}
      {% if node.title != null %}
        {% if group == null or group == node.group %}
          {% if page.url == node.url %}
          <li class="active"><a href="{{ BASE_PATH }}{{node.url}}" class="active">{{node.title}}</a></li>
          {% else %}
          <li><a href="{{ BASE_PATH }}{{node.url}}">{{node.title}}</a></li>
          {% endif %}
        {% endif %}
      {% endif %}
    {% endfor %}
  </ul>


{% endfor %}

配置文件

name: jack's blog

author:
  name: Qiming Zhao
  email: chemzqm@gmail.com
  github: chemzqm

description: blog of jack(chemzqm)
#google analysis track id
track: UA-22751097-2 
disqus_name: zqm
url: http://chemzqm.me
markdown: rdiscount
pygments: true

其中前面的參數用作變量，可在其它文件中使用{{ site.name }}來引用。後面兩個是jekyll運行參數，具體請參考官方文檔

儘管使用jekyll來擴展功能不像wordpress中安裝插件那樣的方便，可是代碼的加入和編寫的過程徹底可控，沒必要理會操做數據庫的繁瑣操做，同時liquid模板的可讀性相比php要高的多，結果就是管理者在修改的時候有章可循，很大程度下降了維護的成本。

若是你感興趣，能夠到github上下載本站的最新源代碼