熟悉的陌生人Jekyll
文章加载中
返回文章
文章加载中
看似平淡无奇的2月突然急转直下，上个月还只是才思枯竭罢了，这个月就是才思枯竭 + 时间紧迫。
但还是想跟自己说一句，不能把写博客变成自己的一种负担，还是要开开心心地写才能有好的效果。
今天就来学习一下Jekyll。自己的博客就是用Jekyll写的，但因为之前都是拿来现有的theme一用就好，没有真的去了解过。现在就来一起学习一下。
Jekyll是什么？
当然按照以往惯例是要先给出官方定义:
Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.
来简单的翻译一哈，提取关键信息出来：
首先要来科普一下里面的几个概念
static site: 直接把当前所要渲染的东西呈现到用户的浏览器上的界面。没有后端。
markup language: 是标记语言的意思，即在文本中加入一些说明符号来指示排版要求，字体大小，位置等。通过标记语法，使普通文本内容具有不同的格式。markdown就是一种标记语言，html也是。
- 是一个
静态的网页生成器 - 这里的
take姑且意译成针对，即是针对你最喜欢的标记型语言(恕我浅薄，本文主要以markdown为主)里的文本 - 那这个
静态怎么体现呢？其实就是写好layout文件，把对应的.md文件按照layout所制定的规则进行转换，就可以"制造"出静态的界面(.html)。 - 你可以扭转界面的外观和感觉，也可以改变其对应的url，数据在界面的展示效果等等。
其实可以用这张图来简单说明一下：
你在.md文件中写好自己的markdown内容，然后通过规定的layout的文件，进行转换，最终生成有独特样式的html文件。
话不多说创建项目
当然我们在创建项目之前要做一些准备工作来满足Jekyll的环境需求。
准备工作
首先我们要先安装Ruby
Mac是自动集成了Ruby的。
如果提示Ruby环境的报错大家可以自行谷歌度娘一下ruby安装或者点击这里
其实事实是我老早就装过了，忘记怎么装了
然后我们来安装Jekyll
$ gem install --user-install bundler jekyll然后你就可以查看自己的版本
$ jekyll -v进入正题
我们先来创建一个项目
$ jekyll new-theme my-theme
可以看到目录结构是这个样子。
接下来我们先运行项目，看看效果是什么。
首先我们需要先install 对应的依赖。有点类似于npm，jekyll也有自己依赖的包管理机制。
$ bundle install
但是遇到了这个问题
这个因为gem.specific文件中有不支持的内容
修改掉即可。
安装成功是这个样子。
然后启动！
$ bundle exec jekyll serve
打开http://127.0.0.1:4000/
这样项目就算搭建完成了。芜湖！
Jekyll是怎么工作的？
首先要看看什么是Liquid
我们不是在讨论Dota2战队(逃
当然我们要在这里系统的学习Liquid是一件费时的事情，我们只需要了解Liquid是什么，和它的一些关键的特性就足够了，我们的目的是能用它来写一个Jekyll的简单模版。
这是Liquid官方仓库对Liquid的定义。
Liquid is a template engine
其实大家如果写过Express就应该了解过ejs，这个Liquid和ejs非常相似。模版引擎我用大白话说一下就是在对应的地方填写好变量，这个时候就能把这个文件当成一个模版，变量的不同就能复用同样结构的一个文件。有那么一丢丢像抽离出来的一个function。
变量用{{ }}所包裹
{% raw %}
<h1>{{ title }}</h1>
{% endraw %}逻辑判断或者循则是这么写
{% raw %}
<ul id="products">
{% for product in products %}
<li>
<h2>{{ product.name }}</h2>
Only {{ product.price | price }}
{{ product.description | prettyprint | paragraph }}
</li>
{% endfor %}
</ul>
{% endraw %}动手来写一段Liquid
我们在刚搭建的环境中先创建一个_layouts的目录，用来存放我们不同的layout文件。
// 新建一个_layouts文件夹，然后在该文件夹下创建home.html
|- other folder...
|- _layouts <--here
|
|-home.html <--here
|- _posts
|- ...
然后我们在根目录下再创建一个index.html作为博客的入口文件。
// 新建一个_layouts文件夹，然后在该文件夹下创建home.html
|- other folder...
|- _layouts
|- _posts
|- ...
|- index.html <-- here
入口文件的内容很简单，只需要指明自己使用的是哪个模版即可。值得注意的一点是根目录可能有一个index.markdown的文件，和这个index.html的文件是类似作用，我们将其删掉即可。
// index.html
---
layout: home
title: Home
---然后我们制定好了首页的layout文件是哪一个，接下来就要具体去编写这个layout文件了。
{% raw %}
<div>
{% for post in site.posts %}
<div>
<div>{{ post.date | date: "%B %d, %Y" }}</div>
<div>{{ post.title }}</div>
</div>
{% endfor %}
</div>
{% endraw %}这里是比较重要的一环，把这里大概弄懂基本对Liquid就没什么难度了。
- 顶部的
---所包裹的内容是配置内容，规定了home.html这个layout要使用default.html的layout。对没错，layout之间也可以互相引用。 - 我们用到了一个
for循环来循环把我们的每篇博客循环展示在首页上。 site.posts | post.date | post.title是Jekyll内置的一个filter或者说是变量。点这里看详情。- 所以我这段代码就是在
首页上循环_posts文件夹中的post，把他们的date和title展示在首页。
可以看到红框中是我们循环出来的一片博客的日期和标题(创建项目自带的)
但是我不想要默认的Header和Footer，这个时候我们也可以去自定义。
自定义主页的全部
在_layouts文件夹里创建一个default.html
然后让我们的home.html引用这个layout作为其自身的layout。
没错，layout还能引用别的layout
---
layout: default
---
{% raw %}
<div>
{% for post in site.posts %}
<div>
<div>{{ post.date | date: "%B %d, %Y" }}</div>
<div>{{ post.title }}</div>
</div>
{% endfor %}
</div>
{% endraw %}然后我们来编辑一下default.html。
{% raw %}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
{{ content }}
</main>
</body>
</html>
{% endraw %}然后发现界面变成这个样子了
这样看只剩下我们刚才写好的渲染内容，默认的东西都没了。
现在我们可以改动一下default.html来定义自己的header和footer
这时候我们需要再在根目录下创建一个_includes文件
|- other folder...
|- includes <--here
|
|- header.html <--here
|- footer.html <--here
|- ...
我们来自定义自己的header
<header>
This is github.com/hanqizheng header
</header>然后是自己的footer
<footer>
This is github.com/hanqizheng footer
</footer>可以看到现在我有自己的Header、Content、Footer了，但是太tm丑了！！！！
如何给自己的博客界面添加样式呢？
既然是学习新东西，我们来写一下sass。
其实。。。sass和css基本一摸一样。。。
我们先来修改一下Header的样式
补充：
这个修改样式那叫个坑啊...
首先, 我们来写一下header的样式
// _sass/windranger/header.scss
.header {
height: 70px;
color: black;
font-size: 25px;
border-bottom: 1px solid #cccccc;
display: flex;
align-items: center;
justify-content: center;
font-weight
然后我们需要在_config.yml中添加一条关于scss的配置。
sass:
sass_dir: _sass
style: compressed
最后需要在header中link进来我本最终需要的那个最终的样式文件，而这个文件在哪里呢？我们还没有创建，先来创建一下assets文件夹。
|- other folder...
|- assets <--here
|
|- main.scss <--here
|- ...
这个文件中只需要一句话
@import 'tale';这个时候我们就去link进来
<!-- _includes/header.html -->
<header>
<!-- CSS -->
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
<div class="header">github.com/hanqizheng header</div>
</header>这个时候样式就起作用了
总结
Jekyll我们只要接触过github pages就一定听说过。但是平时拿来直接用却很少关注过他是怎么写的。
但现在我们明白可以通过写Liquid来生成对应的博客模版页面，可以有多个模版，模版也能互相套用。
然后我们可以写scss来美化界面的样式。
但归根结底，大概流程就是下方这个图：
所以看完这篇博客的你是不是如下图呢？
