jekyll 介绍

  • Jekyll 是一个为博客设计的静态网站生成器.
  • Jekyll 是一个基于文件的内容管理系统(CMS).
  • 它使用 Ruby 编写,通过 Markdown 和 Liquid 模板生成内容。

有了 Jekyll 这类静态博客生成工具,只需要一个静态 HTTP Server。 甚至,在有了 GitHub Pages 后,连服务器资源都可以省去。 当然,静态网站的好处不止是节省资源,还有安全、速度、扩展性等考虑。

jekyll 版本

最新的是 3.3 

版本不一样 使用命令也不太一页

jekyll new SITENAME(名字自取) 快速构建一个全新的 Jekyll 站点

3.2.0 版发布后,Jekyll 支持了 jekyll new-theme 指令,可以方便的创建自己的主题,并且发布到 RubyGems。 有兴趣自制主题的 geeks,可以贡献出自己的主题。

gems 中的 jekyll: 含jekyll各种依赖版本..

YML 标记语言

为了更好地表征 Jekyll 相应的配置,需要通过某种标记语言来说明,常见的就是 Json、xml 等等。而这里采用的是 yml 标记语言。 yml 使用 – 作为表示文档开始,…是结束的标志, 任何一个缩进的表格,表示从属关系, - 则表示同级别的列表关系。

jekyll 结构简介

自己要做的事情: 根目录下:增加下面文件/文件夹 文件:

  • index.html // 主页
  • about.html // 关于页面 有的好
  • contact.html // 联系烈面 也建议有一个.

文件夹: 

  • _includes/
    • header.html
    • footer.html
  • _layouts/
    • default.html

只要你建立了_include文件夹

Misc

  • .md文件标题的 date 不能超过当前时间.

    比如设置成2020年.这篇文章就不会显示到网页上…

css文件和scss文件都需要放到css文件夹中,scss在build的时候会自动编译为对应的 css文件,都可以直接在html中include。如果将scss文件放到sass文件夹中,必须被css 目录下的scss文件import才会被编译生效。

主题包含: 布局文件 包含文件 样式表.

常用变量:

jekyll 会遍历整个网站 来处理需要处理的文件. 任何有 yaml 头信息的文件都是要处理的对象 对于这样的文件: jekyll 会通过 liquid 模板工具来生成一系列的数据:

  • 全局变量

  • 全站变量

数据文件

可以用 liquid 模板 自定义数据… Jekyll 支持从 data 目录下的 YAML、JSON 和 CSV 载入数据,注意 CSV 文件必须包含表头行。

这个强大的特性可以帮你避免模板中的重复,并能在不修改 config.yml 的情况下设置网站特定的选项。_  _date 目录用于储存jekyll 生成的附加数据…. 这些文件可以使用 .yml、.yaml、.json、csv 扩展名,并可通过 site.data 访问。

博文链接 post url

{% post_url 2010-07-21-name-of-post %}

title

也就是网页标签

这个是分 默认页面 和 post 页面的.

默认页面是 site.title 博客页面是 page.title 在 default.html 下测试 只能获取到 site标题 因为 default 是默认主页… 没有 文章标题….

jekyll 原理 / 结构

可以把 markdown、textlie等模板语言转化成HTML

还能像PHP/Django框架那样使用模板,它能引入模板, 其default.html模板相当于Django的base.html模板。其工程结构:

|-- _config.yml  
|-- _includes  
|-- _layouts  
|   |-- default.html  
|   `-- post.html  
|-- _posts  
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile  
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile  
|-- _site  
`-- index.html  






_config.yml:配置文件,主要用于设置基本信息和效果
_includes:存放可复用的小模块,方便通过  include file.ext 调用,此命令调用includes中的file.ext文件
_layouts:模板文件的存放位置,这里的模板需要通过YAML front matter来定义
_posts:动态内容,一般博客正文存放在这个文件夹,命名有严格的规定:2016-04-15-artical-title.MARKUP,MARKUP就是你所使用标记语言的文件后缀名,根据_config.yml中设定的链接规则,所以可以灵活修改,文章的日期和标记语言后缀你与文章的标题是独立的
_site:jekyll生成的最终文档,可以放在.gitignore文件中忽略它

Jekyll Themes

Jekyll 主题在支持 RubyGems 前,需要通过复制来实现。很简单粗暴,就是把已经做好的 _config.yml, _includes, _layouts 和相关静态文件一起复制到自己的目录中。 Jekyll 原生支持 sass,并且也可以通过插件形式使用 Less 等其它的 CSS 预处理器。 官方目前没有主题分享的网站,第三方主题资源分享网站还算比较丰富,甚至已经有了不少付费的主题。不过,这些网站都还没有迁移成 RubyGems。 3.2.0 版发布后,Jekyll 支持了 jekyll new-theme 指令,可以方便的创建自己的主题,并且发布到 RubyGems。有兴趣自制主题的 geeks,可以贡献出自己的主题。


用 include 拆分你的页面结构.

先建立 include 文件夹.

博客布局: 上中下. layout 中. 使用 {\{content}\} 读取中间这部分的内容.

中间的部分 又可以分成左右布局. 侧边栏 命名 aside. 我们可以通过{\% include aside.html %\}的方式来读取我们设置在 include 文件夹里面的文件。

YAML jekyll重要部分. yaml 是一种直观的. 能够被电脑识别的数据序列化格式.

容易阅读. 容易和脚本语言 交互…

特定页面 配置特定内容. 每个页面都可以参照第一点来 “拆”。页面的头部,底部都是公用的,写在 defalt.html 里面。

每个不同的页面有不同的展现方式,在通过include “聚” 回来的时候,就会发现一个 defalut.html是不够的,因为侧边栏不同呀,页面展示效果不用呀等多种原因(虽然你可以确保风格一致)。

恩,你可以很愉快地在 layouts 里面添加尽可能多的不同的布局。但那样管理和组织起来比较麻烦。

所以你可以使用 YAML 为你的页面添加特定的 “钩子”,然后在 default.html 页面通过判断来输出相对的内容。例如我在 contact.html 页面写上这样的钩子isContact: true,然后我在为 contact 页面配置侧边栏的时候,我可以为其配置特定的内容,例如通过下面的代码配置出我的相片

//为了避免代码被编译,我在这里的 Jekyll 语法中间加上反斜干

  {% if(page.isContact) %}
    <section class="violet-photo">
      <img src="xxxx.jpg" alt="xxx" />
    </section>
  {% else %}
    <p>No Photo<p>
  {% endif %}

为文章详细页添加最新文章列表,但不包括本文章 默认的配置文件里面的内容最好不要改动,在使用插件的时候,假如你将safe设置为true,那么可能你的插件就无法完成正常的任务。 但有些还是需要自定义的,例如permalink,用来自定义url的格式,这对固定链接有重要作用。我们也可以定义全局 title, url, feed, description等。最终都会以site.xxx来调用。

灵活地为页面配置 CSS 和 Javascript

Jekyll 博客,可能有很多不同的页面,展现、交互等形式都可能不同。

我们除了可以通过第三点讲过的 ”钩子” 方法来达到目的之外,还有另外的一种方法,为我们的页面配置不同的 CSS 和 Javascript 。

首先,在 default.html 页面的头部和底部写上另一种形式的 “钩子“。如下:

  //一般,我们将 CSS 放在头部
  {% for css in page.css %}
    <link rel="stylesheet" href="{{ css }}" type="text/css" />
  {% endfor %}

  //一般,我们将 Javascript 放在底部
  {% for js in page.javascript %}
    <script type="text/javascript" src="{{ js }}" ></script>
  {% endfor %}

其次,在我们的特定页面,在文件的头部 YAML 部分添加属于该页面的 CSS 或者 Javascript 链接。

javascript:

  • /javascript/jquery.js
    • /javascript/violet.js

Jekyll入门参考网站: 阮一峰的教程

Jekyll 搭建中小型Blog或项目主页的最佳选项之一
Jekyll 是一个静态站点生成器.也可以看作一个转换器(.md → .html)
作用: Markdown文本(.md) → 后台转换成→ 网页(.html)

  1. 无数据库 (wordpress 是有数据库的.)
  2. 无CMS 内容管理系统
  3. 快速 只处理 文字/图片/社交图片.
  4. 极小的
  5. 提供了模板、变量、插件等…来生成整个网站。

jekyll 基本流程:
2016-05-15-blog-seo-baidu.md →Jekyll编译后→
2016/05/15/blog-seo-baidu.html.
我们实际在网站上访问的结果也就是这个 HTML 文件,而不是对应的的 Markdown 文件。

Jekyll 帮你标准化文档结构,文档样式,文档过程。 剩下就是提升自己的知识了。

优点: 

  • 在.md文件里加几行特定格式的头部代码: jekyll 就能把.md 转换成 .html
  • 安全: 因为没有 CMS / 数据库 /PHP 所以没有安全漏洞.

缺点:

  • 它不适合大型网站,因为没有用到数据库.
  • 每运行一次都必须遍历全部的文本文件,网站越大,生成时间越长。
  • 它生成的是静态网页,添加动态功能必须使用外部服务,比如评论功能就只能用disqus。

DataFiles

Jekyll 虽然无法像动态网站程序一样读取数据库,但它提供了一种读取静态数据的方式:Jekyll Data Files。

我们可以在 Jekyll Data Files 中使用 YAML, JSON 或 CSV 格式的文件,实现类似动态配置的效果。这些数据会被解析成变量 site.data.your_data 在 Liquid 模板中使用。

Jekyll文件类型

其他静态文件:

反正就是不包含 yaml头信息的文件. 比如 图片. pdf …等等..

MD文件

HTML文件 (静态网页)

除了写 psot 你还可以添加 静态网页. 记得 给网页添加 头文件信息. 类似.md 任何.html 文件 都可以用 include 来引入你需要的.. 网页也可以当成 博客. 类似 md文件.

网站的根目录. 或者根目录自己建个文件夹. 每个文件夹里面放index.md 或者 index.html

jekyll 一旦运行服务. 生成的网页就够就是固定的了!!!!

能利用的 只是文件的路径.

仔细看 site 目录下的 文件结果.

生成全部分类. 和全部标签很简单….. 但是你想要某个 分类下的 标签列表的话… 就只能自己写脚本了.

  1. 先列出全部标签名称. for…..
  2. 把这个所有标签 进行筛选…
  3. 列出符合的标签.

标签数组的 last 元素 里面有所有该标签的文章?

预定变量

Post的 预定义变量:

也就是头文件中 可以自己定义的..

  • date
  • category / categoreies
  • tags

变量使用

所有变量都是一个 树节点. 比如 page 就是当前页的根节点.

其中全局根结点有:

site: _config.yml 中配置的信息
page: 页面的配置信息,包括 YAML 中定义的变量
content: 用在模板文件中,该变量包含页面的子视图,用于引入子节点的内容;不能在 post 和 page 文件中使用
paginator: 分页信息,需要事先设定 site 中的 paginate 值,参考 Pagination

Page Post 变量 必须明白:

  • page 是当前页.是单个元素
  • posts 是所有文章,是数组

所有的文章只能在 循环遍历中 才能正常输出. 应为文章有很多很多….

post 变量 只存在在 for 遍历循环中 如果你想 获取当前 page/post 的变量. 请用page 变量…

文章分类标记

使用category或者categories 都可以!!!!

categories,这个属性接受一个数组

---
layout: MyTemplate
title: Category Sample
categories: [test, sample]
---

网页动态标题

在主页就显示 主页的标题 在文章页 就显示文章的标题

<title>
  {% if page.title %}
{{ page.title }}
  {% else %}
{{ site.title }}
  {% endif %}
</title>

配置URL链接

默认配置是 date /:categories/:year/:month/:day/:title.html 

已经建好的链接类型

  • date: /:categories/:year/:month/:day/:title.html
  • pretty: /:categories/:year/:month/:day/:title/
  • none: /:categories/:title.html

默认主题

Jekyll 主题含有主题默认的布局文件、包含文件和样式表,但您可以使用自己站点的内容去覆盖它们。

举个例子,如果您选择使用一个具有 page 布局的主题,您能通过在 \_layouts 文件夹下创建一个属于自己的 page 布局文件(例如 \_layouts/page.html)来覆盖当前主题的布局。



在下列文件夹中,Jekyll 会优先查看您站点中的内容,然后查看主题的默认内容:
• /assets
• /_layouts
• /_includes
• /_sass

主题的布局文件和包含文件起到的作用,与它们在 Jekyll 站点中时无异。
请将布局文件放置在 /_layouts 文件夹中,同时将包含文件放置在您主题的 /_includes 文件夹中。

样式表

您主题的样式表应当放置在您主题的 _sass 文件夹中。就像在制作您的 Jekyll 站点时那样。 通过使用 @import 指令,用户能将您主题中的样式包含到他的样式表中

附加截图

主题是一种视觉形象化的表达。为了向用户展示您主题的样式,您可以在主题的仓库(repository)中包含一个 /screenshot.png 的截图。因为在那儿您可以便捷地修改相关内容。同时,您也可以在主题的文档中附上主题的相关截图。

分类方法

知识管理是非常重要的.

大多blog 都支持 按照 分类和标签 对文章进行组织.这是信息管理的有效手段.

分类 最好事先规划好. 标签 可以随时添加…. 其实也就是个 导航栏目.

规范/模板 工具 技术 理论

域: 业务领域 术: 解决方案 技: 技术研究 阵: 技术应用 法: 方法手段 器: 工具使用 杂: 杂七杂八

二级标签

每篇文章都设置: 栏目 categories + 类型 tags 两个标签 categories 栏目 是 一级目录.
tags 类型是二级目录 tags 下面的 具体文件名 是三级目录 具体内容是 四级别目录.

 ---
layout: default
title: 代码
name: code
tags: [js,html,css,PHP,C,C++,opencv,Node.Js,jekyll]
  ---

这里的 name 和 tags 是二级分类的关键.

{% for post in site.categories[page.name] %}
  <li class="acticle-box {{post.tags[0]}}">
{{ post.tags[0] }}                     /*类型
{{ post.title }}                       /*标题     
{{ post.date | date_to_string }}       /*日期
{{ post.excerpt }}                     /*简要  
<a class="readmore" href="{{ site.baseurl }}
{{ post.url }}">继续阅读</a>
  </li>
{/% endfor /%}

首先根据categories来过滤文章,这里的page.name就是上文说初始化的变量。这样就可以遍历取出所有categories为code的文章。

注意在上面我已经在每个li元素的class上加上了文章对应的tags,这使得接下来根据tags过滤变得简单。我们先输出此栏目下的所有tags。用两层循环来比较tags是否属于当前的栏目(categories),是就输出。当前栏目的所有可能标签存在page.tags中,也就是一开始我们在文件头声明的tags数组。

{% for tags in site.tags %}
{% for pagetag in page.tags %}
  {% if pagetag == tags[0] %}
    {{ tags | first }}             /*标签名称
    {{ tags | last | size }}       /*属于该标签的文章数量
  {% endif %}
{% endfor %}
{% endfor %} 

当点击某个类型(tags)时候我们就用js把所有li元素隐藏,只让class拥有对应tags的元素显示,这样便实现了我们要的二级导航效果。