Hexo-yilia个人博客配置

前言

刚接触搭Hexo是在Crossin的编程教室的建免费博客
接触的hexo 主题也是yilia。并且很喜欢这个主题。经过多方收集整理的hexo yilia配置，仅供参考

查看所有文件，提示缺失模块

# 缺少模块。
# 1、请确保node版本大于6.2
# 2、在博客根目录（注意不是yilia根目录）执行以下命令:

npm i hexo-generator-json-content --save

# 3、在根目录_config.yml里添加配置：
# 在全局配置文件_config.yml进行配置

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

配置图片资源

添加图片资源文件夹。 路径为 themes/yilia/source/下，可添加一个 /assets/images/ 文件夹，里面存放图片资源即可

配置文件中直接引用即可。路径为 themes/yilia/_config.yml，找到如下即可

# 头像图片
avatar:  /assets/images/head.jpg
# 网页图标
favicon:  /assets/images/head.jpg

文章如何显示摘要

在你 MD 格式文章正文插入 <!-- more -->

增加菜单

hexo new page "archives"
hexo new page "about"
hexo new page "categories"

修改 themes/yilia/_config.yml

menu:
  主页: /
  分类: /categories
  归档: /archives
  关于: /about

编辑hexo/source/about/index.md

categories配置

本节就实现多层分类的显示效果，具体操作如下：

编辑hexo/source/categories/index.md

1、修改categories/index.md为：

---
title: 文章分类
date: 2019-07-29 10:13:21
type: "categories"
layout: "categories"
comments: false
---

指定layout为categories，渲染时就会使用categories.ejs进行渲染。

2、新建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: 3,
      separator: ''
    }) %>
  </div>
  <% } %>
</article>

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

category-all-page {
    margin: 30px 40px 30px 40px;
    position: relative;
    min-height: 70v