jekyll使用手册

作者: 李佶澳   转载请保留:原文地址   发布时间:2017/05/15 17:00:59

说明

这里使用的jekyll版本是3.6.2。

Quick Start

系统要安装有ruby。

替换源:

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/

安装:

gem install bundler
gem install jekyll
gem install jekyll-paginate

创建:

jekyll new my-awesome-site
cd my-awesome-site

注意,如果jekyll new my-awesome-site卡住一直没有结束。可能是因为它调用bundler安装依赖包时卡住。 这时候直接键入control+c停止,进入目录中手动安装依赖的ruby包。

目录中已经有文件,结构如下:

├── 404.html
├── Gemfile
├── _config.yml
├── _posts
│   └── 2017-12-22-welcome-to-jekyll.markdown
├── about.md
└── index.md

Gemfile中描述了依赖的软件包,可以运行bundler show,按照提示用gem安装缺失的ruby包。

例如:

gem install minima
gem install jekyll-feed

之后执行下面的命令,启动本地预览:

bundle exec jekyll serve

默认地址是http://localhost:4000

修改theme

jekyll 3.6.2默认使用了一个名minima的模版:

$ cat Gemfile | grep minima
gem "minima", "~> 2.0"

$ cat _config.yml  |grep minima
theme: minima

如果要修改theme,按照Overriding theme defaults中给出的步骤进行。

首先执行bundle show minima,找到minima的路径。

$ bundle show minima
/Users/lijiao/.rvm/gems/ruby-2.4.1/gems/minima-2.1.1

这个目录中存放的就是minima的theme文件:

$ ls /Users/lijiao/.rvm/gems/ruby-2.4.1/gems/minima-2.1.1
LICENSE.txt README.md   _includes   _layouts    _sass       assets

目录结构如下:

├── LICENSE.txt
├── README.md
├── _includes
│   ├── disqus_comments.html
│   ├── footer.html
│   ├── google-analytics.html
│   ├── head.html
│   ├── header.html
│   ├── icon-github.html
│   ├── icon-github.svg
│   ├── icon-twitter.html
│   └── icon-twitter.svg
├── _layouts
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
├── _sass
│   ├── minima
│   │   ├── _base.scss
│   │   ├── _layout.scss
│   │   └── _syntax-highlighting.scss
│   └── minima.scss
└── assets
    └── main.scss

只需要在站点目录中创建同名的目录以及目录下的文件,即可覆盖minima中的文件。

可以将整个minima目录中的文件复制到站点目录中,然后自由修改。

cp -rf  $(bundle show minima)/* .

或者自己创建,逐个编辑。

排版模板: _layout

touch  home.html category.html item.html

页面组件: _include

touch header.html footer.html

数据文件: _data

touch nav.yml

素材文件: assets

mkdir css images js

Sass文件: _sass

页面内容:_posts

页面分类:Collections

Jekyll插件

输出花括号

参考jekyll 如何转义字符

{% raw %}
	这里的花括号不会被jekyll解析。
{% endraw %}

如果还要输出raw,可以用下面的方式:

{% assign openTag = '{%' %} 
{{ openTag }} raw %} 
{{ openTag }} endraw %}

即用openTag代替{ %

调整图片大小以及设置图片位置

<span style="display:block;text-align:center">![左耳朵耗子耗子陈皓的极客时间专栏]({{ site.imglocal}}/geek/chenhao.jpeg){: width="250px" height="300px"}</span>

参考

  1. jekyll
  2. jekyll 如何转义字符
  3. liquid
  4. Overriding theme defaults

欢迎加微信,最好备注姓名和方向

QQ交流群

区块链实践互助QQ群:576555864

Kubernetes实践互助QQ群:947371129

Prometheus实践互助QQ群:952461804

API网关Kong实践互助QQ群:952503851

Ansible实践互助QQ群:955105412

Copyright @2011-2018 All rights reserved. 转载请添加原文连接,合作请加微信lijiaocn或者发送邮件: lijiaocn@foxmail.com,备注网站合作 友情链接: lijiaocn github.com