[前端]Jekyll 01 从基础聊起

这一系列文章致力于讲清楚Jekyll的基本结构与使用方法

Steven-Zhl 头像
[前端]Jekyll 01 从基础聊起

当你翻到这篇文章的时候，相信你对Jekyll已经有一定了解了，所以多余的话就不说了，直接开始聊吧。

当前使用的Jekyll博客是我基于H5模板改的，算是大概搞清了Jekyll的大致结构，因此我觉得我应该有资格聊一聊Jekyll吧。

环境配置

(1) Linux/MacOS

  • 在Linux/MacOS上配置Jekyll的环境是非常简单的，且全程用包管理器完成。大体就是：
    • 安装Ruby和RubyGems
    • 安装Jekyll和Bundler
  • 这是官网的安装向导：Jekyll Installation

(2) Windows

  • 在Windows上配置就要麻烦一些，主要原因是需要用安装程序(RubyInstaller)来提供Ruby环境，并且需要MSYS2提供编译环境(ruby也是基于C的一门高级语言)。
  • 官网的安装向导为：Jekyll on Windows

其实具体怎么配置的我也忘了

Jekyll的文件结构

好了，现在假设你已经完全配置好了Ruby、RubyGems和Jekyll，检验方式就是在默认终端查看版本号。分别输入ruby -v、gem -v和jekyll -v，如果都能显示版本号，那么表示你的环境大概配置好了。

  • 无论你是新建一个项目(cd进入后jekyll new .)，还是直接clone一个现成的项目，它们的文件结构都差不太多，大概是这样的：

    ├── .jekyll-cache/ # Jekyll的缓存文件，通常会加入.gitignore中，不会上传到远程仓库
├── _draft/ # 用于存放草稿，即没写完的文章，文件名格式为YYYY-MM-DD-Title.md，不过也可以没有，没写完的不上传就好了嘛
├── _data/ # 用于存放数据文件，如json、yml等，但不是强制的....
├── _includes/ # 用于存放模板文件，通常会被_layouts引用
├── _layouts/ # 用于存放模板文件，通常会被_posts引用
├── _posts/ # 用于存放文章，文件名格式为YYYY-MM-DD-Title.md
├── _site/ # 用于存放编译后的页面，通常会加入.gitignore中，不会上传到远程仓库
├── assets/ # 网页中的静态资源，如图片、css、JS等，但并不是强制的
├── _config.yml # Jekyll的配置文件，必须放在根目录中，记录各插件的配置以及作者自己定义的一些变量
├── Gemfile # 记录项目所依赖的gem包，相比之下没有Gemfile.lock详细，但这个文件是必须的
├── Gemfile.lock # 记录项目所依赖的gem包的版本号，但它是自动生成的，版本问题有时就是删掉它以解决，有时它也会加入.gitignore中
├── about.md # 一个约定俗成的习惯，通常这里写的是作者信息
├── index.html # 网站的首页，即输入网站根域名后显示的页面
└── 404.html # 网站的404页面
  • 这里面的文件或文件夹和这个不完全一样也没关系，因为Jekyll的可定制性还蛮高的，大致就是如此。
  • 其中有几个路径的作用我一开始很不明白，因此我想着重讲一下。

(1) _includes

  • 在聊这个之前，我想先从HTML的结构说起。

  • HTML是一种xml形式的标记语言，这意味着它高度结构化。举个例子，大多数博客类网页(如知乎、博客园、Github Wiki)的HTML都大概都是这种结构：

    <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <!-- 此处通常引用一些样式表 -->
  </head>
  <style>
    /* 此处通常定义一些css中无法顾及到的样式 */
  </style>
  <body>
    <header>
      <!-- 此处通常是网页的头部，比如导航栏、标题等 -->
    </header>
    <main class="main">
      <!-- 此处通常是网页的主体内容，占据最大的篇幅 -->
    </main>
    <footer>
      <!-- 此处通常是网页的尾部，比如版权信息、备案号等 -->
    </footer>
    <!-- 此处通常引用或定义一些js脚本之类的 -->
  </body>
  • 可以发现，一个HTML是由多个部分组成的，如上述的<head>、<header>、<footer>(我们通常称其为“元素/element”)。而绝大部分的代码内容都与博客内容无关，它们负责的是网页的基本框架，即“什么内容长什么样，在哪里”。
  • 这些东西相较于博客内容来说没那么重要，但它们又应当在每篇博客中都存在，这时我们自然能想到“要是能直接调用就好了”，当然是可以的。只需要事先定义好每个元素，然后在需要的时候引用就好了。定义方式就是将元素写在一个html文件中，并将其保存在_includes文件夹中，然后在需要的时候直接引用即可。

    “引用”靠的是Liquid模板的语法，这个不算基础内容了，之后再聊吧(挖坑+1)。

  • 所以，总结一句话就是_includes文件夹中存放页面的装饰性元素，如导航栏、页脚等，但通常只存放html片段，如果是css、js、图片文件之类的，则通常存放在assets文件夹中。

(2) _layouts

  • 上面，我们已经将html中，与博客内容无关的框架预先定义成了一个个部件，并且能在需要的时候直接调用，那_layouts又是干嘛的？
  • 如果_include中的东西相当于函数声明；那_layouts就相当于定义一个类。在_layout中，每种布局其实就是把HTML代码、_include中的东西再组合起来，形成一个封装程度更高的模板。这就很像类：规定了属性和方法，但属性值(文章内容)仍不确定，只有实例化之后才知道各属性的值是什么。
  • 我们实际写文章的时候，文章开头有一段meta信息(官网称为“Front Matter”)，为这篇文章做一些基本标注。其中，layout就是指定这篇文章的布局，即使用哪个模板。比如我这篇文章就是layout: post。

事实上_includes和_layouts是Jekyll项目里最重要且必须包含的两个目录。

(3) _posts

  • _posts目录存放的是你的文章，通常是markdown，所以文件后缀名通常也就是.md或.markdown
  • 在这个文件夹中，文章的文件名是有要求的，即必须是YYYY-MM-DD-Title.md这种格式。但说来好笑的是，文章的Front Matter中也有日期和标题等信息，而且大多数时候用的是那个而不是文件名的这个，所以显得这个要求很多余。

(4) _site

  • 这个文件夹中存放Jekyll转换完成后的完整的网页结构，也就是说，你在浏览器上访问的其实只是这里的HTML
  • 不需要手动修改这里的文件，即使修改了也会在下次转换时覆盖掉。
  • 这个文件夹通常也会加入.gitignore中，不会上传到远程仓库，GitHub Pages为了尽量保证安全，通常是提取你仓库中的文件，在他们的服务器上将Markdown转换成HTML。