jekyll 3.2 主题创建 大概流程:


一: 创建最基本的 jekyll 主题框架

jekyll new-theme my-material-theme

二: 创建 Includes 文件夹

创建 include 文件夹.这个文件夹可以包含一些 常用的代码文件: header.html / footer.html …..

  • 每篇博客都是一个静态网页.
  • 每个静态网页都有相同的 header footer.
  • 把这些常用的固定不变的代码 写到单独文件中. 然后在模板里引用.


The header must contain the doctype, <html>, and <head> tags. Inside the <head> tag, you must add all your CSS requirements, and <meta> tags. Accordingly, add the following code to the file:

<!DOCTYPE html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">

As you can see, I’m using a CDN to load the CSS of the Materialize framework. Note that I’ve opened \<body\> tag and not closed it. You’ll see why next.


Create a new file called footer.html inside the includes directory. 

The footer must contain all your <script> tags, and the closing tags for both <body> and <html>.

<script src=""></script>

三: 创建 Layout 文件夹

博客可以有很多不同的布局.每种布局 都是一个 文件…. 默认的 default.html 已经包含最基本的 博客内容了. 只要把 header.html foot.html 包含进去就差不多了…

Now that we’ve created a header and footer, we must create the layout that goes between them. You are free to use any layout you want.

Go to the layouts folder and open default.html. 

This file should already contain a content template. All you need to do is surround that with your layout. Here’s my layout, with a navbar, a simple container, and a footer:

{% include header.html %}
<div class="nav-wrapper">
  <div class="container">
      <a href="#" class="brand-logo"> {{ site.title }} </a>      
<div class="container">
 {{ content }} 
<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 class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
  <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>
  <div class="footer-copyright">
<div class="container">
© 2014 Copyright {{ }} | All rights reserved.
{% include footer.html %}

四: 创建主页

每个网站都有主页的…. 一般是 index.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 class="card-action">
          <a href="{{ post.url | prepend: site.baseurl }}">
            Read More
{% endfor %}