记录一下给博客折腾的东西

前置说明

Hexo 版本：7.3.0

Node 版本：22.13.0

主题：Solitude（Eureka 魔改版本）

自定义字体

可以看这篇文章

使用自定义字体

短链接

如果你的文章标题有中文，链接就会包含中文，复制下来会被 URL 编码，变得一团乱麻。
可以使用 hexo-abbrlink 来解决这个问题，可以看这篇文章

修改文章链接格式

Twikoo 评论系统

可以看 Twikoo 的官方文档，推荐使用 MongoDB+Netlify 部署

Netlify 部署

获取 envID 后，在 blog/_config.eureka.yml 中找到 comment 部分，对以下两项进行配置

1
2
3
4
comment:
  use: twikoo
twikoo:
  envId: 获取到的 envID

使用 Github Action 自动化部署

可以看这篇文章

Github Action自动化部署Hexo博客和Qexo管理后台

其中的 Qexo，实际使用后感觉用处不大，不建议整

关于 Action 自动化部署的部分有点问题

如果你的源码仓库中的主分支是 main 而不是 master，需要将 Action 代码中所有的 master 修改为 main，否则部署不会成功而是会创建出一个新的分支

同时代码中最后的 部署 部分需要 添加一行 git branch -M main，具体如下

1
2
3
4
5
6
7
8
9
10
- name: 部署
  run: |
    cd ./public
    git init
    git branch -M main
    git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
    git config --global user.email '${{ secrets.GITHUBEMAIL }}'
    git add .
    git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
    git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main:main

此外，你的源码中不能包含 .deploy_git 文件夹，不然自动化部署也不会成功

自定义 CSS

在 blog/theme/solitude/source/css/ 中添加文件 custom.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/* 使用自定义字体 */
@font-face {
  font-family: "FutureRoundSC Regular";
  src: url("../fonts/FutureRoundSC_Regular-subset.woff2") format("woff2");
  font-weight: 300;
}

@font-face {
  font-family: "FiraCode Nerd Font Mono";
  src: url("../fonts/FiraCodeNerdFontMono-Regular.woff2") format("woff2");
  font-weight: 300;
}

@font-face {
  font-family: "MiaoZi-GuoZhiTi";
  src: url("../fonts/MiaoZi-GuoZhiTi.woff2") format("woff2");
  font-weight: 300;
}

/* 修改引用块颜色 */
blockquote {
  background-color: var(--v1hz-quotebg);
  color: var(--efu-secondtext);
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 鼠标悬浮时浮动并亮起 */
blockquote:hover {
  transform: translateY(-5px); /* 浮动效果 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* 加强阴影 */
  background-color: var(--efu-highlightbg); /* 亮起效果 */
}

/* 图片基础样式 */
img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 悬浮时的上浮效果 */
img:hover {
  transform: scale(1.01); /* 放大 5% */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* 加强阴影效果 */
}

/* 行内代码样式 */
code:not([class*='language-']) {
  color: var(--efu-code-text) !important;
  background: rgba(15, 159, 255, 0.13) !important;
}

/* 让段落间距更大 */
.post-content p {
  margin-bottom: 13px;  /* 你可以改成 16px、24px 试试 */
}

/* 让标题和正文之间距离更大 */
.post-content h1, 
.post-content h2, 
.post-content h3 {
    margin-top: 30px;
    margin-bottom: 25px;
}

/* 一级标题居中 */
h1 {
  margin-left: 430px;
}

/* 加粗文本样式 */
strong {
  font-size: 1.07em; /* 比普通字体大一点 */
  color: #007bff
}

/* Phycat式的标题样式 */
[data-theme="dark"] {
  --header-text-color: #ffffff;
  --head-decorator-color: #8ba3f7;
  --h2-background-color: #8ba3f77a;
}

[data-theme="light"] {
  --header-text-color: #000000;
  --head-decorator-color: #78b1b8;
  --h2-background-color: #78b1b83b;
}

h1 {
  font-size: 1.8rem !important;
}

h2 {
  font-size: 1.2rem !important;
  width: fit-content;
  padding: 12.5px 12.5px;
  margin: 24px 0;
  border-radius: 6px;
  background: var(--h2-background-color); /* 渐变背景 */
  position: relative;
  overflow: hidden;
}

h3 {
  width: fit-content;
  margin: 20px 0;
  text-align: left;
  padding-left: 10px;
  border-left: 5px solid var(--head-decorator-color);
}

h4 {
  margin: 16px 0;
  padding-left: 16px; /* 预留空间给小圆点 */
  position: relative; /* 让伪元素相对 h4 定位 */
}

h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 确保居中 */
  width: 12px;
  height: 12px;
  background-color: var(--head-decorator-color);
  border-radius: 50%;
}

h5 {
  font-size: 0.9rem;
  margin: 20px 0;
  padding-left: 18px; /* 预留空间给小圆点 */
  position: relative; /* 让伪元素相对 h5 定位 */
}

h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 确保居中 */
  width: 10px;
  height: 10px;
  border: 2px solid var(--head-decorator-color); /* 空心圆 */
  background-color: transparent; /* 让它是空心的 */
  border-radius: 50%;
}

h6 {
  margin: 23px 0;
  font-size: 0.8rem;
  text-align: left;
}

h6::before {
  content: "-";
  color: var(--head-decorator-color);
  margin-right: 7px;
  display: inline-block;
  vertical-align: inherit;
}

标题样式来自 Typora 主题 Phycat

然后在 blog/_config.eureka.yml 下找到 extends ，作如下修改即可应用自定义 css

1
2
3
extends:
  head:
    - <link rel="stylesheet" href="/css/custom.css">