准备工作 (环境搭建)

在桌面建立一个名叫 theme 的jekyll 项目

  1. 安装好jekyll .
  2. 终端 cd 桌面: jekyll new theme
  3. cd theme → bundle exec jekyll serve // 开启本地预览.
  4. 浏览器: http://127.0.0.1:4000/ 就能看到最简单的jekyll模板了.

Jekyll模板结构

之前的 jekyll new theme 已经帮你建好很多模板文件了.补充一些文件就可以了. 这个目录结构是自己设定的,也可以有不同的目录结构,具体看官网 ├── index.html ├── about.md ├── _config.yml # Jekyll核心配置文件 ├── feed.xml ├── Gemfile # Github Pages本地化的文件 ├── Gemfile.lock # Github Pages本地化的文件 ├── _sass │ ├── _base.scss # markdown对应的css │ ├── _layout.scss │ └── _syntax-highlighting.scss # 语法高亮对应的css ├── css │ └── main.scss # 其实就是css ├── _includes # 该目录下的片段是“被包含”的关系,可以是任何格式的文件,片段也可以include片段。 │ ├── footer.html # 页脚html片段 │ ├── header.html # 页头html片段 │ ├── head.html # html片段 │ ├── icon-github.html # html片段 │ ├── icon-github.svg # github图标 │ ├── icon-twitter.html # html片段 │ └── icon-twitter.svg # twitter图标 ├── _layouts # ”包含”关系: .md 头部一般会包含下面中的一个 模板文件 │ ├── default.html # default页面. http://127.0.0.1:4000/ 的主页. │ ├── page.html # page页面 │ └── post.html # post页面 ├── _posts │ └── 2016-08-24-welcome-to-jekyll.markdown └── _site # Jekyll最终生成的静态网站 ├── about │ └── index.html ├── css │ └── main.css # 如果不喜欢上面的那堆scss,那么复制这个过去就够了 ├── feed.xml ├── Gemfile ├── Gemfile.lock ├── index.html └── jekyll └── update └── 2016 └── 08 └── 24 └── welcome-to-jekyll.html

简化模板:

├── index.html
├── _config.yml       # Jekyll核心配置文件
├── feed.xml
├── Gemfile           # Github Pages本地化的文件
├── Gemfile.lock      # Github Pages本地化的文件
├── css
│   └── markdown.css    # 提取上面_site/css/main.css中设置html部分
│   └── highlight.css   # 提取上面_site/css/main.css中语法高亮部分
├── _includes
├── _layouts
│   └── post.html       # 文章页框架
├── _posts
│   └── 2016-08-24-welcome-to-jekyll.markdown

官网目录结构

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _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
├── .jekyll-metadata
└── index.html

layout 和 include 与普通页面的关系图:

配置文件: _config.yml

整个网站的 主要配置. 可以储存数据. title: Xu(config.title ) #自定义常量.网页书签名称 email: xx2610@gmail.com #你的邮箱.全局设置,一劳永逸. description: > # 箭头表示可以书写多行内容.直到下个标签 baseurl 网站描述,谷歌搜索有个.写一点吧. baseurl: “” # the subpath of your site, e.g. /blog. 这个很重要.不要随便改. url: “” # the base hostname & protocol for your site, e.g. http://example.com github_username: xujian # twitter_username: jekyllrb

Build settings . 下面是 jekyll设置.默认就可以.
markdown: kramdown          # markdown 引擎. 有很多引擎的..
theme: minima
gems:
jekyll-feed
exclude:
Gemfile
Gemfile.lock

域名配置 CNAME

github 给每个账户提供一个免费的Gitpages. (静态网站) 默认的网址是 用户名.github.io 如果你有自己的 域名. 如: 0214.help 想把 0214.help 作为你gitpages的 网址 就需要 新建这个CNAME文件. 里面只有一行内容 写上 0214.help 然后再去你购买域名的地方 设置下解析就可以了.

博客存放

博客 其实就是一堆.md文件而已. 把这些文件放到 _posts 文件夹下. jekyll 就能帮你把这个文件夹下的 每个.md 都解析成 .html 然后把这些.html放到 _site文件夹下. 你网页上看到的其实是.md解析之后的_site文件夹下的 .html

你可以用 .gitignore文件来 屏蔽一些文件.不上传到github. 下面是我的 .gitignore文件内容: _site/ // 这个是jekyll自动生成的.github 会自动生成.不需上传. _drafts/ // 这个是草稿. 不会帮你解析成html .DS_Store // 这个是Mac会自带生成的 没啥用 1.png // 测试 你放张图片进去.然后这里加上图片的文件名.然后git上传的时候 就会忽略这个文件.不上传

每篇 .md 文件头部都要加上一些 配置选项

这样jekyll 才能更好的解析. layout: post #必须: 这个博客的布局文件.布局可以有多种! title: 在Github上搭建自己的Jekyll博客 #必须: 博客标题 category: 工具 #必须: 博客分类 tags: Jekyll #必须: 博客标签 keywords: Jekyll,Github #可选: 自定义常量 description: #可选: 自定义常量

模板文件: 除了上面剩余的目录,基本都属于模板文件了

_includes   可以在模板中随时包含的文件
_layouts    布局文件,在博客头配置中可以选择
pages       站内固定的页面
public      公共资源,包括js,css,img等,还有我博客中调用的图片,我都放这里
index.html  站点的首页,整个站的入口文件
sitemap.txt 给搜索引擎看的,如何爬取这个站

创建自己的主题

布局文件 是整个主题最重要的文件 这些文件告诉jekyll 如何去形成一个 html 页面.

page.html 最基础的文件. 决定了 入口文件 index.html 的布局.

page.html 内容:

layout: base

<div class="row">
  <div class="col-md-12 aside3-title">
<br>
<h2 id="#identifier">{{ page.title }}</h2>
  </div>

  <div class="col-md-12 aside3-content">
<div id="page-content">
  {{ content }}
</div>
<hr>
  </div>
</div>

为什么 最上面有个 layout: base 呢. 因为 page.html 不是最基本的布局文件. 最基本的布局文件是 base.html

base.html 内容:

<!doctype html>
<html>
<head>
  {% include header.html %}
</head>
<body>
  <div class="container">
<div class="row">
  include navside.html 
  <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 aside3">
<div id="container">
  <div id="pjax">
{{ content }}
  </div>
</div>
  </div>
</div>
  </div>
  {% include footer.html %}
  include googleanalytics.html
</body>
</html>

base.html 就像一个 html 文件了.

  {% %}  这样的标签 就是模板文件. jekyll 其实也是借用了 Liquid这个模板系统的 *
标签功能解释:
{% include head.html %}   从\_includes中把header.html包含进来放在这里 亲测 ✔︎
{{ content }}               这句的作用是将继承这个Layout的文件中的代码,放在这里

现在回去看 page.html 应该能看懂了. 它就是把配置项下面的内容,填补到base.html中的{{ content }}处形成了一个文件。那么page.html中的{{ content }}做什么用呢?因为别人也可以以page.html来作为自己的布局文件。

index.html

~
layout: page
title: 首页
...

这里 page 作为布局文件. 
title 是干嘛用的? 其实是被header.html 中用到了.

header.html

<meta charset="utf-8">
<title>{{ page.title }} | {\{ site.title }}</title>
<meta name="author" content="">
{% if page.keywords %}
  <meta name="keywords" content="Jekyll,Github">
{% endif %}
{% if page.description  %}
  <meta name="description " content="">
{% endif %}
...

两对大括号用来 书写变量的. 通过在配置处.修改变量 或系统自定义的变量. 可以轻松修改一些元素或者内容.

图片

Mac 最方便的是 使用 iPic. 只要图片右键/或者 快捷键. 就可以把图片上传到某个云.然后自动给你生成链接! 你需要的只是等待几秒.然后粘贴在线图片链接就可以了

网页原型

要定制 blog 最好先设计出 网页原型: 用 html.css.js 来完成一个静态的网页. 这个原形只有三个页面: index.html article.html post.html

jekyll 模板跑起来了. 网页原型也有了. 怎么结合起来呢. 这就需要先了解jekyll博客系统.

Jekyll 博客系统

jekyll 是一个静态博客系统. 在服务启动前可写.在服务启动后只读. 一旦你启动了服务. 而且修改了 .md文件. 服务就会自动重启.使得修改后的内容能在网页上显示.

创建页面

方式一 某路径下添加xxx.html,访问地址为该路径/xxx.html 方式二 某路径下添加xxx/index.html,访问地址为该路径/xxx,无需后缀

front matter Yaml头信息

每个页面都可以有自己的头信息.可以覆盖config.yml里面的值

---
layout: post
title: 一步一步创建Jekyll主题
categories: \[jekyll github markdown rouge]
date: 2016-9-3 15:47:05
excerpt: ""   # 覆盖清掉文章的摘要
pid: ""       # 新建一个pid的字符串变量
---

site 变量

来自 config.yml配置文件和Jekyll内置变量,下面是常用的属性:

site.posts       从新到旧排序的posts文章列表集合
site.title
site.categories  以目录分类的文章列表Map{cate1:\[post1, post2], cate2:\[post3, post4]}
site.tags        同上,以tags分类的文章列表Map{tag1:\[post1, post2], tag2:\[post3,post4]}
site.XXX         config.yml配置文件中XXX: val的val值,val可以是字符串/数组/集合

page 变量

指代当前页面的变量,在index.html里使用page,page指的就是index.html这个页面,常用属性: page.content 页面源码(含有markdown/liquid等语句) page.title 页面标题 page.excerpt 页面摘要源码,可通过_config.yml配置摘要算法 page.url 页面的相对路径 page.date 页面的时间和日期 page.categories 页面的categories数组,linux/ruby/_posts/ruby.md文章会把linux和ruby加入categories, 和上面的site.categories不同! page.tags 页面的tags数组 page.path 页面的实际路径(源码路径)

liquid语法

jekyll 使用的是 Liquid 模板1

*1. 显示变量的值:   {{变量名}}*
如显示文章的标题:{{ page.title }}
如果要组成字符串,可以这样:"字符串头部{{ 变量名 }}字符串尾部"

*2. 使用变量的值 进行计算*
文章的标题计算 {% assign titleAndDate = page.title | append: page.date %}
assign x = y是声明一个变量并赋值,声明必须赋值!
xxx | append: "str"是Liquid语法中的Filter,可以理解为管道,也可以简单理解为对象|方法:参数
Filter可以连续执行:xxx | append: "str1" | append: "str2"

*3. if语句*
{% if site.title == "" %}
{% assign title = "A" %}
{% elsif site.title == "stepbystep" %}
{% assign title = "B" %}
{% else %}
{% assign title = "C" %}
{% endif %}


*4. for语句*
{% for post in site.posts %}
 {% assign title = post.title %}
 The post title is {{ title }}
{% endfor %}

*5. 访问 map的key 和 value*
像site.categories其实是一个map,访问分类是linux的文章集合有两种方式:
方式一: site.categories.linux即是分类为linux的posts列表
方式二: for cate in site.categories,cate[0]是linux,cate[1]是posts列表

我的主题设计

cateDiv:

每个分类是一个 a link. cateClicked 是被点击的分类名. 是个变量.

这里需要 每个分类 都需要设置一个 class 和 id class 是给激活用的. 不管那个按钮按下之后. 其他所有都要重新变成没有按过的样子…

什么都不需要设置,只需要在a 链接上 设置一个 onclick: 点击相应的分类 就执行一个分类过滤函数: catefilter(‘{cateClicked}’) 并传入 当前点击的分类名 当参数

tagDiv

给所有的 标签 都设置 class 和 id.

  • 一种class. 通过 class 隐藏所有的项目.
  • 两种id. 通过 id 显示你需要的 tags

原理: 先隐藏所有的class .再给符合条件di设置不隐藏 就达到目的

这里需要用到 cateDiv 里的一个变量.也就是 点击处的 类名: cateClicked

ul1: class name: tags-container id: all-tagsContainer ul2: class name: tags-container hidden id: cateClicked-container


这里还有 filenameDiv 需要的 onclick 设置:

3

tagDiv 是根据 tag 名字来显示隐藏的. 而不是更具 类名. 一个分类下可以有好多个 tag…

这里可以改. 改了的话… catefilter 传入的参数 只有个 大类名字. 无法…和 标签民来对应..

这问题 tag 和 filename 又是怎么解决的呢??


tagDiv onclick 是传入标签名字{{t}}.  id是: {{t}}-item
filenameDiv; 变动的DIV:                      id是 {{t}}-container  下面是再循环出 文件名.
tag.js 里面 显示隐藏的是 tag-container