Jekyll-architecture

Jekyll 结构分析

1. Jekyll目录结构分析

Jekyll(发音/'dʒiːk əl/)是一个静态站点生成器,它会根据网页源码生成静态文件(纯HTML+CSS+JS)。它提供了模板、变量、插件等功能,所以实际上可以用来编写整个网站。Jekyll是基于Ruby语言开发的,因此安装Jekyll需要Ruby以及相关的组件,具体安装可以参考Jekyll的中文网站安装指南。使用Jekyll可以让我们尽量少的接触网站相关的知识的同时,搭建出漂亮的个人博客网站。本文采用自顶向下的方式来介绍Jekyll如何实现建站。

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是:你用你最喜欢的标记语言来写文章,可以是 Markdown, 也可以是 Textile, 或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置 URL 路径,你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现,最终生成的静态页面就是你的成品了。$^{[1]}$

一个基本的 Jekyll 网站的目录结构一般是像这样的:

 1.
 2├── _config.yml
 3├── _drafts
 4|   ├── begin-with-the-crazy-ideas.textile
 5|   └── on-simplicity-in-technology.markdown
 6├── _includes
 7|   ├── footer.html
 8|   └── header.html
 9├── _layouts
10|   ├── default.html
11|   └── post.html
12├── _posts
13|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
14|   └── 2009-04-26-barcamp-boston-4-roundup.textile
15├── _page
16|   |—— category.html
17|   |—— tags.html
18|   └── archive.html
19├── js
20|   └── main.js
21├── css
22|   └── main.css
23├── _site
24├── .jekyll-metadata
25└── index.html

更精确的说,目录是一个迭代包括的结构,大体来说,可以分为这几个部分:(请保持足够的屏宽来看这个插图)

 1    --------------     -----------------       ---------------  
 2    |   page YML |     |    _posts YML |       | index.html  |  --    --------------
 3    --------------     -----------------       ---------------    |<--| _config.yml|
 4        ^                     ^                      ^    |   --------------
 5        |_____________________|______________________|    |   --------------
 6                   |                      |                       |<--| js css sass|
 7                   |                      |                       |   --------------
 8           ------------------       ----------------              |
 9    |    _layouts    |<------|   _includes  |______________|
10           ------------------       ----------------                 
11  ^ YML  |                ^      |                    
12                |______|                |______|

其中,_includes文件中是常用代码快,可以被包含在模板(_layouts )中,用来组成模板。includes之间也快成互相包括,模板之间也可互相包括。最后页面( _posts,page,index.html)包含所需模板实现一个完整的页面。以Gaohaoyang的index.html为例(个人非常喜欢他改进的这个Theme)。这里就是使用了default模板,所有的内容都被放在的default模板的{{content}}里面。

 1index.html
 2---
 3layout: default
 4---
 5
 6<div class="page clearfix" index>
 7    <div class="left">
 8        <h1>Welcome to HyG's Blog!</h1>
 9        <small>这里记录着我的前端学习之路</small>
10        <hr>
11        <ul>
12    ....................中间省略.........................
13                   <ul  class="content-ul">
14
15                </ul>
16            </div> -->
17        </div>
18    </div>
19</div>
20<!-- <script src="{{ "/js/scroll.min.js " | prepend: site.baseurl }}" charset="utf-8"></script> -->
21<!-- <script src="{{ "/js/pageContent.js " | prepend: site.baseurl }}" charset="utf-8"></script> -->

这个是default.html模板。它包括了一些代码片段( head.html、header.html、footer.html、backToTop.html )这些都是在_includes文件夹中的内容,{{content}}表示如果有网页使用了这个模板,内容就会放在这个位置,比如上面index.html的内容就是替换了{{content}}的部分。这也解释了为什么index.html中没有常见的一些头信息。此外,这个模板还包含了一些公用的js文件(main.js、smooth-scroll.min.js)。

 1default.html
 2<!DOCTYPE html>
 3<html>
 4
 5  {% include head.html %}
 6
 7  <body>
 8
 9    {% include header.html %}
10
11        {{ content }}
12
13    {% include footer.html %}
14    {% include backToTop.html %}
15    <script src="{{ "/js/main.js " | prepend: site.baseurl }}" charset="utf-8"></script>
16    <script src="{{ "/js/smooth-scroll.min.js " | prepend: site.baseurl }}" charset="utf-8"></script>
17    <script type="text/javascript">
18      smoothScroll.init({
19        speed: 500, // Integer. How fast to complete the scroll in milliseconds
20        easing: 'easeInOutCubic', // Easing pattern to use
21        offset: 20, // Integer. How far to offset the scrolling anchor location in pixels
22      });
23    </script>
24    <!-- <script src="{{ " /js/scroll.min.js " | prepend: site.baseurl }}" charset="utf-8"></script> -->
25  </body>
26
27</html>

1.1Theme的包含结构

在这个Theme中,包含结构大致如下:

  • index.html-->default.html(包含head.html(网页的头信息)、header.html、footer.html、backToTop.html)
  • 0archives.html、1categoty.html、2tags.html (包含tag.html、category.html)-->default.html(包含head.html(网页的头信息)、header.html、footer.html、backToTop.html)
  • pages( e.g.3collections.md、4about.md )-->page.html(包括pageContent.js)-->default.html(包含head.html(网页的头信息)、header.html、footer.html、backToTop.html)
  • _posts(文章)-->post.html(包含tag.html、category.html、previousAndNext.html)-->default.html
  • _drafts(草稿)-->post.html(包含tag.html、category.html、previousAndNext.html)-->default.html

此外,还有一些js,css,sass文件。Jekyll的大体结构就是这样了。如果想了解每一个文件夹的具体内容可以参考Jekyll的中文文档:将纯文本转换为静态博客网站

2. 参考文献

[1] http://jekyllcn.com/docs/structure/