Hexo-Volantis主题优化
初始化
安装hexo并且配置主题volantis
1. 安装hexo并初始化
1 | npm i hexo |
2. 下载主题并修改hexo主题
1 | git init |
3. 创建分页
除归档（archives/）能自动创建外，其他分页都需要手动创建
1 | hexo new page "about" |
关于页
source/about/index.md 1
2
3
4
5
6
7
8---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
valine:
placeholder: 有什么想对我说的呢？
---分类页
source/categories/index.md 1
2
3
4
5---
layout: category
index: true
title: 所有分类
---分类页
source/tags/index.md 1
2
3
4
5---
layout: tag
index: true
title: 所有标签
---友链页
source/friends/index.md 1
2
3
4
5
6
7
8
9
10---
layout: friends # 必须
title: 友情链接 # 可选，这是友链页的标题
---
这里写友链上方的内容。
<!-- more -->
这里可以写友链页面下方的文字备注，例如自己的友链规范、示例等。友链的数据会读取
source/_data/friends.yml，文件格式如下：source/_data/friends.yml 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15- group: # 分组标题
description: # 分组描述
items:
- title: # 名称
avatar: # 头像
url: # 链接
screenshot: # 截图
keywords: # 关键词
description: # 描述
- title: # 名称
avatar: # 头像
url: # 链接
screenshot: # 截图
keywords: # 关键词
description: # 描述404页
source/404.md 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15---
cover: true
robots: noindex,nofollow
sitemap: false
seo_title: 404 Not Found
bottom_meta: false
sidebar: []
twikoo:
path: /404.html
placeholder: 请留言告诉我您要访问哪个页面找不到了
---
{% p logo center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}
配置站点信息
在 _config.yml 找到 # Site 和 # URL 相关内容
1 | # Site |
关于一键部署
如需自动提交到git/github
安装git插件
配置
_config.yml_config.yml
2
3
4
5
6
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/Tidra/tidra.github.io.git
branch: master部署站点
修改主题前
1. 配置文件说明
_config.yml 用于修改全站配置， _config.volantis.yml 用于修改主题内容（该文件优先级最高）
1 | touch _config.volantis.yml |
2. 自定义内容注入
- 可以通过
source/_volantis下的以下文件中修改样式、添加自定义脚本等，具体如下：
| 文件名 | 描述 |
|---|---|
| first.styl | 将样式以硬编码形式直接写入HTML |
| style.styl | 延迟异步加载样式 |
| dark.styl | 暗黑模式地强制覆盖样式 |
| darkVar.styl | 暗黑模式的CSS变量 |
| headBegin.ejs | <head> 标签开头注入自定义内容 |
| headEnd.ejs | <head> 标签末尾注入自定义内容 |
| header.ejs | 导航栏 .nav-main 末尾注入自定义内容 |
| topMeta.ejs | 侧边栏 #l_side 末尾注入自定义内容 |
| bottomMeta.ejs | topMetas 末尾注入自定义内容 |
| postEnd.ejs | 页尾注入自定义内容 |
| bodyBegin.ejs | <body> 标签开头注入自定义内容 |
| bodyEnd.ejs | <body> 标签末尾注入自定义内容 |
1 | mkdir source/_volantis |
- 自定义样式、代码统一存放在
source/custom方便管理，后面引用只需要用/custom/文件名就可以检索到对应的文件
1 | mkdir source/_volantis |
主题设置
主题设置内容在 _config.volantis.yml ，具体每项配置可以查看安装主题目录下的 _config.yml ，在根目录上的配置会覆盖主题目录以及根目录下的 _config.yml 配置
1. 导航栏（Navigation Bar）
导航栏开了暗黑模式，可以到插件部分查看。
1 | # 注意事项：建议规范全站路径 URL 最后带一个 "/" 例如 "about/" |
2. 网站与文章封面（Cover）
1 | cover: |
3. 侧边栏（Sidebar）
这里开启了字数统计、访问统计、音乐三个插件
由于这里已开启访问统计，所以
页脚处不能再引用info以及analytics，否则会显示不出来
1 | sidebar: |
4. 文章布局（Article Layout）
1 | # 文章布局 |
5. 评论（Comments）
使用giscus作为评论
- 该仓库是
公开的，否则访客将无法查看 discussion。 giscus app已安装，否则访客将无法评论和回应。Discussions功能已在你的仓库中启用。- 前往
giscus.app网站获取以下信息。_config.volantis.yml 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22comments:
title: <i class='fa-solid fa-comments'></i> 评论
subtitle:
service: giscus
# giscus
# https://giscus.app
# https://github.com/laymonage/giscus
giscus:
# 以下配置按照 yml 格式增删填写即可
repo: xxxxxxxxxxx
repo-id: xxxxxx
category: Announcements
category-id: xxxxxxxxxx
mapping: "pathname"
reactions-enabled: "1"
emit-metadata: "0"
lang: "zh-CN"
# 以上配置按照 yml 格式增删填写即可
theme:
light: "light"
dark: "noborder_dark"
6. 页脚（Site Footer）
1 | site_footer: |
7. 自定义样式（Custom css）
1 | custom_css: |
8. 自定义右键菜单（Rightmenu）
1 | ### 自定义右键 |
9. SEO相关
1 | ############################### Open Graph ############################### > start |
插件（Plugins）
插件全部都在标签 plugins: 下
1. 搜索（Search）
6.0默认开启
需要先安装插件
1
npm i hexo-generator-json-content
如需配置，如下
_config.volantis.yml 1
2
3search:
enable: true
service: hexo
2. 暗黑模式
普通使用
1 | plugins: |
增加自定义过度动画
开启jquery
_config.volantis.yml 1
2
3plugins:
# jquery
globalJquery: true新增js文件
source/custom/darkmode.jssource/custom/darkmode.js 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85function BackTOP() {
$("#btn").hide();
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$("#btn").fadeIn(200);
} else {
$("#btn").fadeOut(200);
}
});
$("#btn").click(function () {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
});
$(function () {
$("#say").click(function () {
$('body,html').animate({
scrollTop: $('html, body').get(0).scrollHeight
},
500);
return false;
});
})
}
$('#readmode').click(function () {
$('body').toggleClass('read-mode')
})
function SiderMenu() {
$('#main-container').toggleClass('open');
$('.iconflat').css('width', '50px').css('height', '50px');
$('.openNav').css('height', '50px');
$('#main-container,#mo-nav,.openNav').toggleClass('open')
}
function switchNightMode() {
$('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body")), setTimeout(
function () {
(volantis.dark.mode == "dark")
?
($("html").addClass("DarkMode"),
$('#modeicon').attr("xlink:href", "#icon-sun"))
:
($("html").removeClass("DarkMode"),
$('#modeicon').attr("xlink:href", "#icon-_moon")),
setTimeout(function () {
$(".Cuteen_DarkSky").fadeOut(1e3, function () {
$(this).remove()
})
}, 2e3)
}), 50
}
function checkNightMode() {
if ($("html").hasClass("n-f")) {
$("html").removeClass("day");
$("html").addClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-sun")
return;
}
if ($("html").hasClass("d-f")) {
$("html").removeClass("DarkMode");
$("html").addClass("day");
$('#modeicon').attr("xlink:href", "#icon-_moon")
return;
}
if (volantis.dark.mode == "dark") {
$("html").addClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-sun")
} else {
$("html").removeClass("DarkMode");
$('#modeicon').attr("xlink:href", "#icon-_moon")
}
}
BackTOP();
window.addEventListener('load', ()=>{
volantis.dark.push(()=>{
switchNightMode();
})
}, {once: true})新增css文件
source/custom/darkmode.csssource/custom/darkmode.css 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128#RightDownBtn {
position: fixed;
left: 1.875rem;
bottom: 1.875rem;
padding: 0.3125rem 0.625rem;
background: #fff;
border-radius: 0.1875rem;
transition: 0.3s ease all;
z-index: 1;
align-items: flex-end;
flex-direction: column;
display: -moz-flex;
display: flex;
float: right;
}
#RightDownBtn>a,
#RightDownBtn>label {
width: 1.5em;
height: 1.5em;
margin: 0.3125rem 0;
transition: .2s cubic-bezier(.25, .46, .45, .94);
}
/* font color */
.DarkMode #page,
.DarkMode #colophon,
.DarkMode #vcomments .vbtn,
.DarkMode .art-content #archives .al_mon_list .al_mon,
.DarkMode .art-content #archives .al_mon_list span,
.DarkMode body,
.DarkMode .art-content #archives .al_mon_list .al_mon,
.DarkMode .art-content #archives .al_mon_list span,
.DarkMode button,
.DarkMode .art .art-content #archives a,
.DarkMode textarea,
.DarkMode strong,
.DarkMode a,
.DarkMode p,
.DarkMode li,
.DarkMode .label {
color: rgba(255, 255, 255, .6);
}
.DarkMode #page,
.DarkMode body,
.DarkMode #colophon,
.DarkMode #main-container,
.DarkMode #page .yya,
.DarkMode #content,
.DarkMode #contentss,
.DarkMode #footer {
background-color: #292a2d;
}
.DarkMode strong,
.DarkMode img {
filter: brightness(.7);
}
/* sun and noon */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 88888888
}
.Cuteen_DarkSky {
background: linear-gradient(#feb8b0, #fef9db)
}
.Cuteen_DarkSky:before {
transition: 2s ease all;
opacity: 0;
background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed)
}
.DarkMode .Cuteen_DarkSky:before {
opacity: 1
}
.Cuteen_DarkPlanet {
z-index: 99999999;
position: fixed;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
transform-origin: center bottom
}
@-webkit-keyframes CuteenPlanetMove {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
@keyframes CuteenPlanetMove {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
.Cuteen_DarkPlanet:after {
position: absolute;
left: 35%;
top: 40%;
width: 9.375rem;
height: 9.375rem;
border-radius: 50%;
content: "";
background: linear-gradient(#fefefe, #fffbe8)
}在头部引入自定义js和css
source/_volantis/bodyEnd.ejs 1
2<script src="/custom/darkmode.js"></script>
<link rel="stylesheet" href="/custom/darkmode.css" type="text/css"/>
3. 字数统计和访问统计
字数统计需要先安装统计插件
1
npm i hexo-wordcount
开启字数统计、访问统计
_config.volantis.yml 1
2
3
4
5
6
7
8plugins:
# 字数统计
wordcount:
enable: true
# 访问统计
busuanzi:
enable: true
4. 音乐模块
1 | plugins: |
自定义样式
基础样式变更
通用模式
source/_volantis/style.styl 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// log大小
.logo {
width: 30px;
}
// 侧边栏-作者栏下的图标布局居中
.widget.blogger .content .social-wrapper {
justify-content: center;
-webkit-justify-content: center;
}
// 修改手机端侧边栏-作者栏下的字体颜色
@media screen and (max-width: 768px) {
.widget.blogger {
color: var(--color-text);
}
}
// 设置背景图片
body {
height: 100%; // 解决阅读进度条无法显示问题
background: url(/custom/bg.svg) no-repeat;
background-color: var(--color-site-body);
background-attachment: fixed;
background-size: auto 300px;
background-position: center bottom;
background-blend-mode: color-burn;
}
// 设置封面图片虚化
.cover-bg.lazyload.placeholder.loaded {
-webkit-mask-image: linear-gradient(to top, transparent, black 15%);
mask-image: linear-gradient(to top, transparent, black 15%);
}暗黑模式
source/_volantis/dark.styl 1
2
3
4
5
6
7
8
9
10
11
12
13
14// logo颜色
.logo {
filter: hue-rotate(320deg) ;
}
// 评论区
// main {
// --color-fg-default: #d9d9d9de;--color-canvas-default: #fff0;--color-canvas-subtle: #ffffff03;--color-canvas-inset: #00000030;--color-btn-primary-bg: #444;
// }
// block块颜色（包括代码、引用背景）
* {
--color-block: #43434336
}
首页动态诗词
参考 Volantis魔改教程
在volantis的配置文件里修改
subtitle_config.volantis.yml 1
2
3
4
5############################### Cover ############################### > start
cover:
...
subtitle: <div id="binft"></div>
...以defer方式引入以下js,注意把里面的诗词改成自己的
source/custom/binft.js 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63var binft = function (r) {
var isTransparent = true;
function getRandomColor() {
if(isTransparent){
isTransparent = false;
//此处修改字体颜色,最后的 0 和 1 不要改
return "rgba(255,255,255,0)"
}else{
isTransparent = true;
return "rgba(255,255,255,1)"
}
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var oneword = document.createElement("span");
oneword.textContent = "_"; // 此处是末尾字符,如果想用光标样式可以改为"|"
oneword.style.color = getRandomColor();
n.appendChild(oneword);
}
return n
}
function i() {
var t = wordList[c.skillI];
c.step ? c.step-- : (c.step = refreshDelayTime, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = showTotalWordDelayTime) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % wordList.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(maxLength, maxLength + c.prefixP) : Math.min(maxLength, t.length - c.skillP))), setTimeout(i, d)
}
var l = "",
//此处改成你自己的诗词
wordList = [
"有花堪折直需折,莫待无花空折枝.",
"闲居少邻并,草径入荒园.鸟宿池边树,僧敲月下门.",
"侯门一入深如海,从此萧郎是路人.",
"才见岭头云似盖,已惊岩下雪如尘.",
"人间万事消磨尽,只有清香似旧时.",
"日暮酒醒人已远,满天风雨下西楼.",
"落灯花,棋未收,叹新丰逆旅淹留.",
"软风吹过窗纱,心期便隔天涯.",
"迷惑失故路,薄暮无宿栖.",
"不见白头相携老,只许与君共天明.",
"晓迎秋露一枝新,不占园中最上春.",
"荷尽已无擎雨盖,菊残犹有傲霜枝.",
"春未绿,鬓先丝.人间别久不成悲.",
"江东子弟多才俊,卷土重来未可知.",
"莫听穿林打叶声,何妨吟啸且徐行.",
"在天愿作比翼鸟,在地愿为连理枝.",
].map(function (r) {
return r + ""
}),
showTotalWordDelayTime = 2,
refreshDelayTime = 1,
maxLength = 1,
d = 75,
c = {
text: "",
prefixP: -maxLength,
skillI: 0,
skillP: 0,
direction: "forward",
delay: showTotalWordDelayTime,
step: refreshDelayTime
};
i()
};
binft(document.getElementById('binft'));
喜欢这篇文章的人也看了
评论
匿名评论隐私政策
✅ 你无需删除空行，直接评论以获取最佳展示效果
