抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

初始化

安装hexo并且配置主题volantis

1. 安装hexo并初始化

1
2
3
4
5
npm i hexo

mkdir ./blog
cd ./blog
hexo init

2. 下载主题并修改hexo主题

1
2
3
4
5
6
7
8
git init
# 加入volantis 6.0主题
git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis
# 如果是volantis 5.8主题可以使用npm命令
# npm i hexo-theme-volantis

vim _config.yaml
# 修改 theme: volantis

3. 创建分页

除归档(archives/)能自动创建外,其他分页都需要手动创建

1
2
3
4
5
6
7
hexo new page "about"
hexo new page "categories"
hexo new page "tags"
hexo new page "friends"
mkdir source/_data
touch source/_data/friends.yml
touch source/404.md
  1. 关于页

    source/about/index.md
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    layout: docs
    seo_title: 关于
    bottom_meta: false
    sidebar: []
    valine:
    placeholder: 有什么想对我说的呢?
    ---
  2. 分类页

    source/categories/index.md
    1
    2
    3
    4
    5
    ---
    layout: category
    index: true
    title: 所有分类
    ---
  3. 分类页

    source/tags/index.md
    1
    2
    3
    4
    5
    ---
    layout: tag
    index: true
    title: 所有标签
    ---
  4. 友链页

    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: # 描述
  5. 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 相关内容

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Site
title: 小TiD笔记
subtitle: 一个有想法的博客
description: 小tid笔记,记录各种技术性文章,为大家提供简单、有效的、易上手的各种技术和便捷功能,有问题随时欢迎留言提问
keywords: TiD,小tid,小tid笔记,tidnotes,技术,wordpress,前端,js
author: TiDra
language:
- zh-CN
- en
- zh-HK
- zh-TW
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.tidnotes.top

# 新增以下内容
# 网站图标,更多尺寸等图标请使用 import 方式批量导入
favicon: /custom/logo.svg

关于一键部署

如需自动提交到git/github

  1. 安装git插件

    1
    npm install hexo-deployer-git --save
  2. 配置 _config.yml

    _config.yml
    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
    type: git
    repo: https://github.com/Tidra/tidra.github.io.git
    branch: master
  3. 部署站点

    1
    hexo clean && hexo deploy

修改主题前

1. 配置文件说明

_config.yml 用于修改全站配置, _config.volantis.yml 用于修改主题内容(该文件优先级最高)

1
touch _config.volantis.yml

2. 自定义内容注入

  1. 可以通过 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
  1. 自定义样式、代码统一存放在 source/custom 方便管理,后面引用只需要用 /custom/文件名 就可以检索到对应的文件
1
mkdir source/_volantis

主题设置

主题设置内容在 _config.volantis.yml ,具体每项配置可以查看安装主题目录下的 _config.yml ,在根目录上的配置会覆盖主题目录以及根目录下的 _config.yml 配置

1. 导航栏(Navigation Bar)

导航栏开了暗黑模式,可以到插件部分查看。

_config.volantis.yml
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
# 注意事项:建议规范全站路径 URL 最后带一个 "/" 例如 "about/"
navbar:
visiable: auto # always, auto
logo: # choose [img] or [icon + title]
img: /custom/logo.svg # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/[email protected]
icon:
title:
menu:
- name: 主页
icon: fa-solid fa-rss
url: /
- name: 更多
icon: fa-solid fa-ellipsis-v
rows:
- name: 分类
icon: fa-solid fa-folder-open
url: categories/
- name: 标签
icon: fa-solid fa-tags
url: tags/
- name: 归档
icon: fa-solid fa-archive
url: archives/
- name: hr # 分割线
- name: 友链
icon: fa-solid fa-link
url: friends/
- name: 关于
icon: fa-solid fa-info-circle
url: about/
- name: 暗黑模式
icon: fa-solid fa-circle-half-stroke
toggle: darkmode
search: 直接找找...

2. 网站与文章封面(Cover)

_config.volantis.yml
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
cover:
height_scheme: half # full, half
layout_scheme: dock # blank (留白), search (搜索), dock (坞), featured (精选), focus (焦点)
display:
home: true
archive: true
others: false
background: /custom/bg.jpg
logo: # /custom/logo.svg
title: '小TiD笔记'
subtitle: '一个有想法的网站'
search: '- 搜搜有意思的 -' # search bar placeholder
features:
- name: 博客
icon: #
img: volantis-static/media/twemoji/assets/svg/1f4f0.svg # https://gcore.jsdelivr.net/gh/twitter/[email protected]/assets/svg/1f4f0.svg
url: /
- name: 归档
icon: #
img: volantis-static/media/twemoji/assets/svg/1f5c3.svg # https://gcore.jsdelivr.net/gh/twitter/[email protected]/assets/svg/1f5c3.svg
url: archives/
- name: 友链
icon: #
img: volantis-static/media/twemoji/assets/svg/1f516.svg # https://gcore.jsdelivr.net/gh/twitter/[email protected]/assets/svg/1f516.svg
url: friends/

3. 侧边栏(Sidebar)

这里开启了字数统计、访问统计、音乐三个插件

由于这里已开启访问统计,所以 页脚 处不能再引用 info 以及 analytics ,否则会显示不出来

_config.volantis.yml
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
sidebar:
position: right # left right
# 主页、分类、归档等独立页面
for_page: [blogger, category, tagcloud, webinfo, music]
# layout: docs/post 这类文章页面
for_post: [toc]
# 侧边栏组件库
widget_library:
# ---------------------------------------
# blogger info widget
blogger:
class: blogger
display: [desktop, mobile] # [desktop, mobile]
avatar: /custom/avatar.jpg
shape: circle # circle, rectangle
url: /about/
title: TiDra
subtitle:
jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails.
social:
- icon: fa-solid fa-envelope
url: mailto:[email protected]
- icon: fab fa-github
url: https://github.com/Tidra/
- icon: fa-solid fa-headphones-alt
url: /
# ---------------------------------------
# toc widget (valid only in articles)
toc:
class: toc
display: [desktop, mobile] # [desktop, mobile]
sticky: true
header:
icon: fa-solid fa-list
title: 本文目录
list_number: false
min_depth: 2
max_depth: 5
# ---------------------------------------
# music
music:
class: music
display: [desktop, mobile] # [desktop, mobile]
# ---------------------------------------
# category widget
category:
class: category
display: [desktop] # [desktop, mobile]
header:
icon: fa-solid fa-folder-open
title: 文章分类
url: /categories/
# ---------------------------------------
# tagcloud widget
tagcloud:
class: tagcloud
display: [desktop, mobile] # [desktop, mobile]
header:
icon: fa-solid fa-tags
title: 热门标签
url: /tags/
min_font: 14
max_font: 24
color: true
start_color: '#999'
end_color: '#555'
# ---------------------------------------
# webinfo widget
webinfo:
class: webinfo
display: [desktop]
header:
icon: fa-solid fa-award
title: 站点信息
type:
article:
enable: true
text: '文章数目:'
unit: '篇'
runtime:
enable: true
data: '2020/01/01' # 填写建站日期
text: '已运行时间:'
unit: '天'
wordcount:
enable: true
text: '本站总字数:' # 需要启用 wordcount
unit: '字'
visitcounter:
enable: true
siteuv:
text: '本站访客数:'
unit: '人'
sitepv:
text: '本站总访问量:'
unit: '次'
lastupd:
enable: true
friendlyShow: true # 更友好的时间显示
text: '最后活动时间:'
unit: '日'

4. 文章布局(Article Layout)

_config.volantis.yml
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
# 文章布局
article:
body:
# 文章顶部信息
# 从 meta_library 中取
top_meta: [author, category, date, counter, wordcount]
# 文章底部信息
# 从 meta_library 中取
bottom_meta: [updated, tags, share]
# ----------------
# 文章页脚组件
footer_widget:
# ----------------
# 参考资料、相关资料等 (for layout: post/docs)
references:
title: 参考资料
icon: fa-solid fa-quote-left
# 在 front-matter 中:
# references:
# - title: 某篇文章
# url: https://
# 即可显示此组件。
# ----------------
# 文章推荐 (for layout: post/docs)
# 推荐算法需要依赖中文分词工具,nodejieba只支持中英文 npm i nodejieba -S
recommended_article:
enable: false
layout: ["post", "docs"]
title: 推荐阅读
icon: fa-solid fa-bookmark
max_count: 6
placeholder_img: https://gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg
# 不展示文章推荐
# front-matter 使用 skip_recommended_article: true 关闭
# 不在以下文件夹文章中展示文章推荐 根目录是source/
skip_dirs:
- wiki/
# ----------------
# 相关文章,需要安装插件 (for layout: post)
# npm i hexo-related-popular-posts
related_posts:
enable: false
title: 相关文章
icon: fa-solid fa-bookmark
max_count: 5
# 设为空则不使用文章头图
placeholder_img: https://gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg
# ----------------
# 版权声明组件 (for layout: post)
copyright:
enable: false
permalink: '本文永久链接是:'
content:
- '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
- permalink
# 自定义版权组件:精细到文章的版权声明
custom: false # 开启后替代上方内容的版权显示
customData:
default: type1 # 默认授权声明
#############################
# 你可以在文章的 front-matter 覆盖默认版权声明
# 配置示例(均可选):
# copyright:
# type: type3 # 当前文章版权声明类型
# author: 张三 # 本文作者
# ref: # 原文出处
# title: # 原文出处 - 标题
# url: # 原文出处 - 链接
#############################
rules:
type1:
text: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh#" target="_blank">CC BY-NC-SA 4.0</a>
desc: 署名-非商业性使用-相同方式共享 4.0 国际。
type2:
text: 禁止转载引用
desc: 除非获得原作者的单独授权,任何第三方不得转载!
type3:
text: 原作许可协议
desc: 本文转载自他站,转载或引用本文时,请遵守原作许可协议!
type4:
text: 来自互联网
desc: 本文来自互联网,未知来源,侵权请联系删除。
type5:
text: 允许规范转载
desc: 转载请保留本文转载地址,著作权归作者所有!
type6:
text: 允许付费转载
desc: 您可以联系作者通过付费方式获得授权。
# 还能自行添加更多
# ----------------
# meta library
meta_library:
author:
avatar: /custom/avatar.jpg
name: TiDra
url: /

5. 评论(Comments)

使用giscus作为评论

  1. 该仓库是 公开的 ,否则访客将无法查看 discussion。
  2. giscus app 已安装,否则访客将无法评论和回应。
  3. Discussions 功能已在你的仓库中启用。
  4. 前往 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
    22
    comments:
    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)

_config.volantis.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
site_footer:
layout: [social, license, copyright]
social:
- icon: #fa-solid fa-rss
url:
# or
- img: /common/logo.svg
url: /
# or
- avatar:
url:
# site source
source: https://github.com/Tidra/tidra.github.io/
# analytics using busuanzi
analytics: >
<span>本站总访问量为 <span id='busuanzi_value_site_pv'><i class="fa-solid fa-loader fa-spin fa-fw" aria-hidden="true"></i></span> 次</span>
<span>访客数为 <span id='busuanzi_value_site_uv'><i class="fa-solid fa-loader fa-spin fa-fw" aria-hidden="true"></i></span> 人</span>
# site copyright
copyright: '[Copyright © since 2024 小TiD笔记](/)'
# You can add your own property here. (Support markdown, for example: br: '<br>')
br: '<br>'

7. 自定义样式(Custom css)

_config.volantis.yml
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
custom_css:
gap:
h2: 48px # Spacing above H2 (only px unit)
h3: 24px # Spacing above H3 (only px unit)
h4: 16px # Spacing above H4 (only px unit)
p: 1em # Paragraph spacing between paragraphs
line_height: 1.5 # normal, 1.5, 1.75, 2 ...
fontsize:
root: 16px
h1: 1.5rem # 不推荐用在文章中
h2: 1.5rem
h3: 1.25rem
h4: 1.125rem
h5: 1rem
h6: 1rem
list: .9375rem
meta: .875rem
code: .875rem
footnote: .78125rem
fontfamily:
logofont:
fontfamily: 'LiuJianMaoCao, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
name: 'LiuJianMaoCao'
url: https://gcore.jsdelivr.net/gh/inkss/common@1/fonts/canva/LiuJianMaoCao.woff2
weight: normal
style: normal
bodyfont:
fontfamily: '"OPPO Sans Medium", UbuntuMono, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
name: 'OPPO Sans Medium'
url: /custom/OPPOSans-Medium.woff2
weight: normal
style: normal
codefont:
fontfamily: 'consolas, Menlo, UbuntuMono, Monaco'
# name: 'Monaco'
# url: volantis-static/media/fonts/Monaco/Monaco.ttf # https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
# weight: normal
# style: normal

8. 自定义右键菜单(Rightmenu)

_config.volantis.yml
1
2
3
### 自定义右键
rightmenus:
enable: true

9. SEO相关

_config.volantis.yml
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
############################### Open Graph ############################### > start
# https://ogp.me/
# https://hexo.io/zh-cn/docs/helpers#open-graph
open_graph:
image: /custom/log.svg
twitter_card: summary # summary_large_image , summary
#twitter_id:
#twitter_site:
############################### Open Graph ############################### > end

############################### Structured Data ############################### > start
# SEO 入门文档: https://developers.google.com/search/docs
# https://schema.org.cn/
# 结构化数据用于更改搜索结果的显示效果
# 目前内置的结构化数据: blogposting, breadcrumblist, organization, person, website
# 目前内置的富媒体搜索结果: 路径(面包屑导航), 徽标(Logo), 站点链接搜索框(SearchAction)
# https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
# 富媒体搜索结果测试: https://search.google.com/test/rich-results
structured_data:
enable: true
# 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js
data:
person:
sns:
- https://github.com/Tidra
logo:
path: /custom/log.svg
width: 192
height: 192
############################### Structured Data ############################### > end

插件(Plugins)

插件全部都在标签 plugins:

1. 搜索(Search)

6.0默认开启

  1. 需要先安装插件

    1
    npm i hexo-generator-json-content
  2. 如需配置,如下

    _config.volantis.yml
    1
    2
    3
    search:
    enable: true
    service: hexo

2. 暗黑模式

普通使用

_config.volantis.yml
1
2
3
4
plugins:
# 暗黑模式 darkmode
darkmode:
enable: true

增加自定义过度动画

  1. 开启jquery

    _config.volantis.yml
    1
    2
    3
    plugins:
    # jquery
    globalJquery: true
  2. 新增js文件 source/custom/darkmode.js

    source/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
    85
    function 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})
  3. 新增css文件 source/custom/darkmode.css

    source/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)
    }
  4. 在头部引入自定义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. 字数统计需要先安装统计插件

    1
    npm i hexo-wordcount
  2. 开启字数统计、访问统计

    _config.volantis.yml
    1
    2
    3
    4
    5
    6
    7
    8
    plugins:
    # 字数统计
    wordcount:
    enable: true

    # 访问统计
    busuanzi:
    enable: true

4. 音乐模块

_config.volantis.yml
1
2
3
4
plugins:
# 音乐模块
aplayer:
enable: true

自定义样式

基础样式变更

  1. 通用模式

    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%);
    }
  2. 暗黑模式

    source/_volantis/dark.styl
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // logo颜色
    .logo {
    filter: hue-rotate(320deg) !important;
    }

    // 评论区
    // 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魔改教程

  1. 在volantis的配置文件里修改 subtitle

    _config.volantis.yml
    1
    2
    3
    4
    5
    ############################### Cover ############################### > start
    cover:
    ...
    subtitle: <div id="binft"></div>
    ...
  2. 以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
    63
    var 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'));

评论