Jekyll 的机制、转换步骤和结构介绍

Jekyll 是一个转换器，用来生成网站，使用的是一种解释语言。

本文将从三个方面来介绍 Jekyll：机制、转换顺序（解释顺序）和项目的文件结构。在项目的文件结构中，将会讲述一下每个关键目录和文件的作用。

机制

Jekyll 通过在生成静态 HTML 输出时，渲染 Liquid、Markdown 和进行其他转换，从而将原始的一堆文本文件转换为静态网站。 所以Jekyll 的运行机制可以大致总结成：将使用 Jekyll 和 HTML、CSS 语句混合写成的源文件，转换成纯 HTML、CSS 语言文件，以此来生成静态网站。

因此，在工作流程上便是典型的“三步走”：

1. 设计、开发页面和调整配置文件；
2. 生成网站（使用jekyll build或jekyll server）；
3. 查看生成网站的效果。

转换顺序（解释顺序）

Jekyll 将按照以下顺序进行转换：

1. 通过查看你的文件来确定并赋予站点变量的值。站点变量有site、page等，官方文档为《Site VariablesPermalink》。
2. 处理页面文件的前事项中包含的的 Liquid 语句；
3. 将 Markdown 文件转换为 HTML 文件；
4. 将每个页面的内容放入 Layout 布局的

import { var1, obj } from './module1.js'; // import变量和下面声明变量重复
const { var1 } = obj // 解构对象出现也会出现变量重复
let var1 = [1,2,3]

import { var1 as var1FromImport, obj } from './module1.js';
const { var1: var1FromObj } = obj
let var1 = [1,2,3]

// Longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}

//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

// Longhand
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}

// Shorthand
let test = (x > 10) ? true : false;
//或者我们也可以直接用
let test = x > 10;
console.log(test);

let x = 300,
test2 = (x > 100) ? 'greater than 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

// Longhand
if (test1 !== null || test1 !== undefined) {
    let test2 = test1;
}

// Shorthand
let test2 = test1 || '默认值'; // || test1为任何假值（如0、false、空字符串等）时就返回
let test3 = test1 ?? '默认值'; // ?? 空值合并操作符 test1严格等于null或undefined
let test3 = test1 && '默认值'; 

const name = obj && obj.name;

const name = obj?.name ?? '默认值';

//Longhand 
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;

//Shorthand 
let [test1, test2, test3] = [1, 2, 3];

const hasCar = true
const people = {
  name: '张三',
  age: 18
}
if(hasCar){
  people.hasCar = true
}

const hasCar = true
const hasCarObj = hasCar ? {
  hasCar: true
} : {}
const people = {
  name: '张三',
  age: 18,
  ...hasCarObj
}

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(item => item % 2 === 0).map(item => item * 2);
// filteredArr : [4, 8]

const arr = [1, 2, 3, 4, 5];

const reducedArr = arr.reduce((acc, item) => {
  if (item % 2 === 0) {
    acc.push(item * 2);
  }
  return acc;
}, []);
// reducedArr: [4, 8]

标签中；

最后，将转换生成的内容放入指定的目录下。以_开头的目录将不会出现在生成文件中。

项目结构

一个 Jekyll 项目的文件结构应该大致如下：

.
├── _config.yml
├── _data
│   └── members.yml
├── _drafts
│   ├── begin-with-the-crazy-ideas.md
│   └── on-simplicity-in-technology.md
├── _includes
│   ├── footer.html
│   └── header.html
├── _layouts
│   ├── default.html
│   └── post.html
├── _posts
│   ├── 2007-10-29-why-every-programmer-should-play-nethack.md
│   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
│   ├── _base.scss
│   └── _layout.scss
├── _site
├── .jekyll-cache
│   └── Jekyll
│       └── Cache
│           └── [...]
├── .jekyll-metadata
├── assets
│   ├── css
│   └── image
└── index.html或者index.md（需要在前事项中进行说明）

下面依次来介绍一下每个文件夹和文件的作用：

1. _config.yml：项目配置文件。
2. _data：存放网站数据。Jekyll 将会自动加载此目录下的所有数据文件（后缀为.yml、.yaml、.json、.csv、.tsv），并且可以通过站点变量site.data访问这些文件。
3. members.yml：如果_data目录下有该文件，那么可以通过站点变量site.data.members访问文件内容。
4. _drafts：该目录下存放未发布的博客的草稿。这些文件的名称不写日期，格式为：title.MARKUP。 begin-with-the-crazy-ideas.md和on-simplicity-in-technology.md是存放在_drafts目录下的草稿。
5. _includes：该目录下存放的文件，由layout布局文件和帖子混合，以方便重用。比如导航栏等需要重复使用的源码。
6. footer.html：该文件便是用于重复使用的脚注源码。
7. header.html：该文件便是用于重复使用的眉头源码。
8. _layouts：该目录存储页面模板。
9. default.html是默认的页面模版，也就是网站中几乎每个页面都会重复的部分。
10. post.html是用在帖子页面的模板。
11. _posts：该目录存放的是帖子，搭配上post模板便可生成一个个帖子页面。该目录下的文件名应该按照YEAR-MONTH-DAY-title.MARKUP的格式，这样在记录标题的同时，还可以记录帖子的发布时间。 2007-10-29-why-every-programmer-should-play-nethack.md便表示的是 2007 年 10 月 29 日发布的一篇名为《why every programmer should play nethack》帖子。 2009-04-26-barcamp-boston-4-roundup.md便表示的是 2009 年 4 月 26 日发布的一篇名为《barcamp Boston 4 roundup》帖子。
12. _sass：该目录下用于存放 Sass 文件（Sass 是一个 CSS 扩展语言，后缀有三种，分别是.sass、.scss或.coffee），可以将其处理成单个的 CSS 文件。该目录也可以直接命名为css。
13. _base.scss是用于生成基础 CSS 的 Sass 文件。
14. _layout.scss是用于生成布局 CSS 的 Sass。
15. _site：该目录下便是默认生成的站点。
16. .jekyll-cache：保留例如jekyll serve时生成的页面和标记（例如 Markdown）的副本，以便更快推送服务。可以使用–disable-disk-cache选项，或者在17. _config.yml中使用disable_disk_cache: BOOL来不生成副本。
17. .jekyll-metadata：该文件帮助 Jekyll 跟踪上次构建之后，哪些文件没有被修改，哪些文件需要在下一次构建中重新生成。
18. assets：该目录下存放网站需要的 CSS、JS 和图像文件。
19. css：该目录下存放网站使用的 CSS 文件（这个和前面的_sass不同，这个和一般的网站 CSS 文件是一个东西）
20. image：该目录下存放网站使用的图像文件。
21. index.html或者index.md：这便是要生成的站点的首页面。

• ← Previous Post