Hexo-Yilia进阶笔记

详细版本见我的个人博客：Hexo-Yilia进阶笔记

一、GitHub下载Yilia主题

$ cd /d/document/GitHub/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

也可以直接去GitHub上下载zip文件，然后解压放在theme文件夹下面。

二、分类的构建

1、添加categories链接

打开yilia/_config.yml文件，menu处做出以下修改：

menu:
  主页: /
  分类: /categories
  归档: /archives

2、分类页面的构建

• 新建categories页面

hexo new page categories

该命令在source目录下生成一个categories目录，categories目录下有一个index.md文件。

• 修改categories/index.md为：

---
title: 文章分类
date: 2018-06-11 10:13:21
type: "categories"
comments: false
---

• 生成html

hexo g
hexo s

访问 http://localhost:4000/categories/ ，即可看到categories页面，只不过现在的页面只有标题。

3、修改 yilia 主题

修改yilia\source\main.0cf68a.css，将下面的内容添加进去：

category-all-page {
    margin: 30px 40px 30px 40px;
    position: relative;
    min-height: 70vh;
  }
  .category-all-page h2 {
    margin: 20px 0;
  }
  .category-all-page .category-all-title {
    text-align: center;
  }
  .category-all-page .category-all {
    margin-top: 20px;
  }
  .category-all-page .category-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .category-all-page .category-list-item-list-item {
    margin: 10px 15px;
  }
  .category-all-page .category-list-item-list-count {
    color: $grey;
  }
  .category-all-page .category-list-item-list-count:before {
    display: inline;
    content: " (";
  }
  .category-all-page .category-list-item-list-count:after {
    display: inline;
    content: ") ";
  }
  .category-all-page .category-list-item {
    margin: 10px 10px;
  }
  .category-all-page .category-list-count {
    color: $grey;
  }
  .category-all-page .category-list-count:before {
    display: inline;
    content: " (";
  }
  .category-all-page .category-list-count:after {
    display: inline;
    content: ") ";
  }
  .category-all-page .category-list-child {
    padding-left: 10px;
  }

4、多层分类

新建yilia/layout/categories.ejs，输入：

<article class="article article-type-post show">
  <header class="article-header" style="border-bottom: 1px solid #ccc">
  <h1 class="article-title" itemprop="name">
    <%= page.title %>
  </h1>
  </header>

  <% if (site.categories.length){ %>
  <div class="category-all-page">
    <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
    <%- list_categories(site.categories, {
      show_count: true,
      class: 'category-list-item',
      style: 'list',
      depth: 2,
      separator: ''
    }) %>
  </div>
  <% } %>
</article>

5、修改自己的文章

---

title: HTML入门笔记

copyright: true
date: 2018-11-23 21:07:15

toc: true
tags: [HTML,前端]
categories: [前端,HTML]
---

三、yilia下的_config.yml完善

subnav中添加github、知乎、mail等链接。

smart_menu处去掉friends：

smart_menu:
  innerArchive: '所有文章'
  friends: false
  aboutme: '关于我'

aboutme处添加自己的介绍：

aboutme: 东南大学在读研究生

四、点击所有文章提示缺失模块

1、问题

点击所有文章提示缺失模块

2、解决办法

• 确保node版本大于6.2
• 在博客根目录（注意不是yilia根目录）执行以下命令：npm install hexo-generator-json-content --save
• 在hexo的blog根目录_config.yml里添加配置（保持格式，不要改动任何空格缩进），关掉hexo s之后执行hexo g重新生成：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

五、头像/图标设置

1、存放位置

头像、图标图片的存放位置是/themes/yilia/source/下任意位置，可以自己新建一个文件夹存放，我存放在assets文件夹下。

2、配置设置

配置文件为/themes/yilia/_config.yml。

• 设置头像为配置文件中avatar一项
• 设置图标为配置文件中favicon一项

由于设置路径的根目录/themes/yilia/source/，因此，我的头像存放的地址是/themes/yilia/source/assets/me.png，设置则为avatar: /assets/me.png。

图标同理。

六、添加评论

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。

主页：https://github.com/gitalk/gitalk/blob/master/readme-cn.md

gitalk 需要添加的部分主页有详细介绍，这里只谈针对yilia需要的改动。

1、创建gitalk.ejs

在你的hexo目录/theme/yilia/layout/_partial/post/目录下创建gitalk.ejs并写入如下内容：

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
var gitalk = new Gitalk({
  clientID: '<%=theme.gitalk.clientID%>',
  clientSecret: '<%=theme.gitalk.clientSecret%>',
  repo: '<%=theme.gitalk.repo%>',
  owner: '<%=theme.gitalk.owner%>',
  admin: ['<%=theme.gitalk.admin%>'],
  id: md5(window.location.pathname),
  distractionFreeMode: <%=theme.gitalk.distractionFreeMode%>
})

gitalk.render('gitalk-container')
</script>

2、修改article.ejs

在你的hexo目录/theme/yilia/layout/_partial/article.ejs文件中最后一行“<% } %>”之前添加如下内容：

<% if(theme.gitalk.enable && theme.gitalk.distractionFreeMode){ %>
      <%- partial('post/gitalk', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

3、添加配置文件

在yilia的配置文件_config.yml中gitment配置下面添加如下配置文件

#6. Gitalk
gitalk: 
  enable: true    #用来做启用判断可以不用
  clientID: 'your clientID'    #Github上生成的
  clientSecret: 'your clientSecret'   #同上
  repo: git_comment    #评论所在的github project
  owner: findtheonlyway    #github用户名
  admin: erbiduo    #可以初始化评论issue的github账户名称
  distractionFreeMode: true

七、侧边栏添加音乐

1、网易云音乐外链播放器生成

登录网页版网易云音乐，打开一首歌，点击 “生成外链播放器”。

2、侧栏添加背景音乐

打开/hexo/themes/yilia/layout/_partial/left-col.ejs文件，把音乐HTML代码粘贴进去，可以添加样式，改变大小，这是我的代码：

<nav class="header-nav">
    <div class="social">
        <% for (var i in theme.subnav){ %>
            <a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
        <%}%>
    </div>

    <!--音乐播放插