Hexo-基于LandScape创建自己的博客主题

摘要：拥有自己的Hexo博客主题。

1. 下载主题LandScape

1
git clone git@github.com:hexojs/hexo-theme-landscape.git themes/landscape

2. 管理主题源码

删除下载主题文件夹中的.git文件夹，并将主题文件夹重命名为space。
这样就可以基于在自己的git管理新主题啦。

3. 调用主题space

在文件_config.yml中找到增加配置

1
theme: space

4. 修改Banner

直接找到主题中的themes/space/source/css/images/banner.jpg文件，替换为自己的图片即可，命名保持不变。

5. 增加文章目录

5.1. 新建toc.ejs文件

在 space/layout/_partial 文件夹下，新建一个 toc.ejs 文件, 内容如下：

1
2
3
4
5
6
<% if (post.toc != false) { %>
    <div id="toc">
        <strong class="sidebar-title">目录</strong>
        <%- toc(post.content, {list_number : false}) %>
    </div>
<% } %>

5.2. 在post.ejs中调用

打开article.ejs文件, 找到以下代码<%- post.content %>，在上面增加toc代码，如下：

1
2
<%- partial('toc') %>
<%- post.content %>

5.3. 修改样式

打开themes/space/source/css/_partial/article.styl文件，增加以下代码：

1
2
3
4
5
6
7
8
9
10
11
#toc
  background-color #eee
  font-size 0.8em
  color color-link
  margin-top 3em
  padding 1em
  .toc
    margin-top 0
    margin-bottom 0
  .toc-item
    list-style none