Hexo主题hexo-theme-yilia-plus配置流程
迪丽瓦拉
2024-02-03 09:52:08
0

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

1. 主题的应用与配置

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

theme: yilia-plus

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

2. 目录导航配置

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

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

接着在根目录 blog_config.yml 里添加配置:

jsonContent:meta: falsepages: falseposts:title: truedate: truepath: truetext: falseraw: falsecontent: falseslug: falseupdated: falsecomments: falselink: falsepermalink: falseexcerpt: falsecategories: falsetags: true

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;
});

添加后完整的 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}});
};

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

---
title: This is title
date: 2022.11.20 11:33
tags: Others
description: This is description
top: true
---

4. 左侧栏添加时钟

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



{{ date }}

{{ time }}

5. 代码块样式修改

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

相关内容