主题的修改记录 | 唯一赫兹

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

前置说明

Hexo 版本：7.3.0

Node 版本：22.13.0

主题：Solitude（Eureka 魔改版本）

自定义字体

可以看这篇文章

使用自定义字体

短链接

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

修改文章链接格式

Twikoo 评论系统

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

Netlify 部署

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

comment:
  use: twikoo
twikoo:
  envId: 获取到的 envID

使用 Github Action 自动化部署

可以看这篇文章

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

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

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

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

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

- 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

添加如下内容

/* 使用自定义字体 */
@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

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