First of all, this article would like to express my heartfelt thanks to the theme author github@JoeyBling!
Author Github: JoeyBling , theme: hexo-theme-yilia-plus .
1. The application and configuration of the theme
The root directory of the blog in this article is blog, first put the theme folder blog/themesinto , and then blog/_config.ymlfind it in the file theme, modify it to:
theme: yilia-plus
Then configure the files blog/themes/yilia-plusin _config.yml.
2. Directory Navigation Configuration
First, you need to ensure that the Node.js version is greater than 6.2, and then execute the following command blogin :
npm i hexo-generator-json-content --save
blogThen _config.ymladd the configuration in the root directory:
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
3. Article top function configuration
To modify the file blogin node_modules/hexo-generator-index/lib/generator.js, you need to add the following code:
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;
});
The complete generator.jsfile is as follows:
'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
}
});
};
After configuration, add topattributes , for example:
---
title: This is title
date: 2022.11.20 11:33
tags: Others
description: This is description
top: true
---
4. Add a clock to the left column
Add the code to the file in blog/themes/yilia-plus/layout/_partialthe directory :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>
5. Code block style modification
Just modify the file accordingly according to the content in blog/themes/yilia-plus/source-src/css/highlight.scssthe file blog/themes/yilia-plus/source/main.a5fda8.css.