Hexo主题hexo-theme-yilia-plus配置流程

本文首先向主题作者 github@JoeyBling 表示衷心地感谢！
作者 Github：JoeyBling，主题：hexo-theme-yilia-plus。

1. 主题的应用与配置

本文博客的根目录为 blog，首先将主题文件夹放入 blog/themes 中，然后在 blog/_config.yml 文件中找到 theme，修改为：

theme: yilia-plus
1

然后按自己的需要配置 blog/themes/yilia-plus 中的 _config.yml 文件即可。

2. 目录导航配置

首先需要确保 Node.js 版本大于 6.2，然后在博客根目录 blog 中执行以下命令：

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

接着在根目录 blog 的 _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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 文章置顶功能配置

修改根目录 blog 下的 node_modules/hexo-generator-index/lib/generator.js 文件，需要添加以下代码：

posts.data = posts.data.sort(function(a, b) {
  if(a.top && b.top) {
      if(a.top == b.top) return b.date - a.date;
      else return b.top - a.top;
  }
  else if(a.top && !b.top) {
      return -1;
  }
  else if(!a.top && b.top) {
      return 1;
  }
  else return b.date - a.date;
});
1
2
3
4
5
6
7
8
9
10
11
12
13

添加后完整的 generator.js 文件代码如下：

'use strict';

const pagination = require('hexo-pagination');
const { sort } = require('timsort');

module.exports = function(locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);

  sort(posts.data, (a, b) => (b.sticky || 0) - (a.sticky || 0));

  posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) {
        if(a.top == b.top) return b.date - a.date;
        else return b.top - a.top;
    }
    else if(a.top && !b.top) {
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date;
  });

  const paginationDir = config.pagination_dir || 'page';
  const path = config.index_generator.path || '';

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

配置好后在需要指定的文章中添加 top 属性即可，例如：

---
title: This is title
date: 2022.11.20 11:33
tags: Others
description: This is description
top: true
---
1
2
3
4
5
6
7

4. 左侧栏添加时钟

在 blog/themes/yilia-plus/layout/_partial 目录下的 left-col.ejs 文件中添加代码：

<br>
<div style="position:absolute; bottom:120px left:auto; width:100%;height:50%">
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
  	<div id="clock" style="font-family: 'Share Tech Mono', monospace;color: #ffffff;text-align: center;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(50%, 50%);transform: translate(-50%, -50%);color: #4B8CE1;text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);">
      		<p style="margin: 0;padding: 0;letter-spacing: 0.1em;font-size: 15px;">{{ date }}p>
      		<p style="margin: 0;padding: 0;letter-spacing: 0.01em;font-size: 38px;">{{ time }}p>
  	div>
	<script>
		var clock = new Vue({
			el: '#clock',
			data: {
				time: '',
				date: ''
			}
		});

		var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		var timerID = setInterval(updateTime, 1000);
		updateTime();
		function updateTime() {
			var cd = new Date();
			clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
			clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + week[cd.getDay()];
		};

		function zeroPadding(num, digit) {
			var zero = '';
			for (var i = 0; i < digit; i++) {
				zero += '0';
			}
			return (zero + num).slice(-digit);
		}
	script>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

5. 代码块样式修改

根据 blog/themes/yilia-plus/source-src/css/highlight.scss 文件中的内容相应地修改 blog/themes/yilia-plus/source/main.a5fda8.css 文件即可。