Mac OS / 2016-12-10-13 / 上海图书馆 2F

准备工作 (基本环境搭建)

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

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

默认结构(自动生成的文件)简介

上面的命令 已经帮你建立了很多最基本的文件. 再增加几个文件 和 文件夹 就可以自定义主题了.  英文参考网站 

config.yml     配置文件
about.md       主页 右上角的 about链接.
genfile        pass 不管
genfile.lock   pass 不管
index.md       这个就是 默认主页,不要去编辑
post 文件夹
--2016-12-10-welcome-to-jekyll.markdown 自动生成的文章.
site文件夹
-- 根据各种配置生成的 可忽略整个文件夹..

一: 补全结构

要自定义主题,需要增加几个文件和文件夹

  1. 根目录创建两个文件夹 并创建响应的子文件: ├── _layouts # ”包含”关系: .md 头部一般会包含下面中的一个 模板文件 │ ├── default.html # default 默认的布局 不是主页!!! │ └── post.html # post页面 ├── _includes # 该目录下的片段是“被包含”的关系 │ ├── footer.html # 页脚html片段 │ ├── header.html # 页头html片段

  2. 根目录创建几个文件: index.html // 这是主页 必选 about.html // 关于页面 可选 contact.html // 联系页面 可选

各文件内容

header.html <!DOCTYPE html> <html> <head> </head> <body>

不管怎么样 反正 按这个格式就对了. doctpe html body 标签 都写上

都只有一半的标签.. 剩下的一半在 footer.html

footer.html </body></html>

default.html

这里就可以 自己设置 样式了

{% include header.html %} 
<nav>
<div class="nav-wrapper">
  <div class="container">
      <a href="#" class="brand-logo"> {{ site.title }} </a>      
  </div>
</div>
</nav> 
<div class="container">
 {{ content }} 
</div>
<footer class="page-footer">
  <div class="container">
<div class="row">
  <div class="col l6 s12">
<h5 class="white-text"> {{ site.title }} </h5>
<p class="grey-text text-lighten-4"> {{ site.description }} </p>
  </div>
  <div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
  <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
  <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
</ul>
  </div>
</div>
  </div>
  <div class="footer-copyright">
<div class="container">
© 2014 Copyright {{ site.name }} | All rights reserved.
</div>
  </div>
</footer> 
{% include footer.html %}

index.html

---
layout: default
---
{% for post in site.posts %}
<div class="row">
<div class="col s12 m6">
  <div class="card">
<div class="card-content">
  <span class="card-title">{{ post.title }}</span>
  <p>{{ post.excerpt }}</p>
</div>
<div class="card-action">
  <a href="{{ post.url | prepend: site.baseurl }}">
Read More
  </a>
</div>
  </div>
</div>
</div>
{% endfor %}

这就搭建成功了. 下面就要你自己写 css/js 来自定义了.