前言

这篇文章其实主要就是作为一个记录使用啦，顺便分享一下怎么魔改，其实我也在这上面踩了一个大坑的，所以我就想所有看到我这篇文章的人不要和我一样浪费那么多时间精力，所以教程会写得尽可能详细一点，大佬们不要瞧不起我哦！如果你感兴趣我是怎么踩坑的的话，可以看看原文-踩坑这一部分~

Tip：如果不小心把文件改坏了不知道怎么改回来的话可以去 Solitude 的 GitHub 仓库下载一份原文件替换上去哦！

CSS/JS引入

这是前置准备工作，后面所有基于CSS/JS的魔改都要依靠它的！一定要先准备好噢！

创建文件夹：

找到里面有 _post 文件夹的那个 source 文件夹（blog/source，不是blog/themes/solitude/source），在里面创建 js 和 css 文件夹。
创建css/js文件：

在 css 文件夹里面创建 custom.css 文件，在 js 文件夹里面创建 custom.js 文件。（这个文件也可以是其他名字，只要后缀名是 .css/.js 就行。）

引入css/js：

在主题配置文件（不是站点的）里面的扩展部分中引入（Solitude 主题是在第770行左右）。

css 文件在 head 引入，js 文件在 bottom 里引入。有的 js 要求在 head 引入，不然无法生效。

# --------------------------- start ---------------------------
# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="/css/custom.css">
  # Insert in body    
  # 插入到 body
  body:
    - <script defer pjax src="/js/custom.js"></script>
# --------------------------- end ---------------------------

引入多个文件可以直接往下复制粘贴多添加一行然后改一下文件名就行。

引用站外链接

如何添加 CSS/JS？

冰火之砺

更换全站显示字体

默认的字体（苹方）效果：

默认的字体（苹方）效果

月星楷的效果：

用月星楷的效果

霞鹜文楷的效果：

用霞鹜文楷的效果

打开网站：

打开以下网站：

引用站外链接

中文网字计划

提供便捷实用的全字符集中文渲染方案
选择字体：

找一个你喜欢的字体，进入详情页，下滑找到“通过链接嵌入”部分，复制以 <link rel='stylesheet' 开头的链接。

引入拓展：

在主题配置文件（不是站点的）里面的扩展部分的 head 中引入（Solitude 主题是在第770行左右）。

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiScreen/result.css' />

修改字体：

复制“通过链接嵌入”部分下面“限定字体使用区域”里面 font-family 的数值，在主题配置文件的（不是站点的）里面的字体部分的 font-family 中引入（Solitude 主题是在第370行左右）。

# Font
# 字体
font:
  font-size: 16px
  code-font-size: 16px
  # Global font
  # 全局字体
  font-family: "LXGW Bright SemiLight,PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif"
  # Code font
  # 代码字体
  code-font-family: 'LXGW Bright SemiLight，"monospace", monospace'

引用站外链接

solitude｜自定义站点字体

❖星港◎Star☆

H1，H2标题宽度修改

修改之前：

修改之后：

打开文件：

打开 themes/solitude/source/css/_layout 目录下面的 article-container.styl 文件，记得先备份一份噢！

替换代码：

把第181行至189行替换为以下代码：

h1
  font-size 1.5rem
  line-height 1.3
  padding-top 1rem
  padding-bottom 1rem

h2
  font-size 1.3rem
  line-height 1.3
  border-top 1px dashed var(--efu-theme-op)
  padding-top 1rem
  padding-bottom 1rem

引用站外链接

关于本站｜Solitude主题魔改内容

❖星港◎Star☆

添加评论协议

在评论区右上角就可以看到啦！

打开文件：

打开 themes/solitude/layout/includes/widgets/third-party/comments 目录下面的 comment.pug 文件，记得先备份一份哦！
替换代码：

在第32行后回车，添加以下代码：
1
2
3
a.plxycss(href="/comment/")
i.solitude.fas.fa-file-lines
span  评论协议
⚠️ 注意： 正确的格式应该是这样的（·代表空格）：

········a.plxycss(href=”/comment/“)（前面八个空格）
············i.solitude.fas.fa-file-lines（前面十二个空格）
············span  评论协议（前面十二个空格）

添加 css 格式：

在 custom.css 文件中（参见CSS/JS引入）添加以下代码：

/* 评论协议样式 */
a.plxycss {
  float: right;
  font-weight: bold;
  font-size: 20px;
}

添加协议条款：

运行hexo n page comment，在生成的 index.md 文件中添加协议条款。

如果你不知道写什么的话可以参照本站的评论协议模板（我用的是@叶泯希哥哥的）

<h1 style="text-align:center;">评论协议</h1>


<p style="text-align:right">协议最新更新时间为：2025-06-17</p>

-----

用户发言前，请认真阅读本条例。一经发言，即视为同意接受本条例；如不同意，请勿发言。

## 一、制定本条例的目的
本条例的目的在于为用户提供文明、理性、友善、高质量的信息分享和公共讨论的网络交流空间。评论服务，是指通过运营网络互动传播平台，供用户对本网站传播的各类信息发表评论意见的服务。

## 二、用户使用评论服务的规范
用户使用评论服务，不得逾越法律法规、社会主义制度、国家利益、公民合法权益、社会公共秩序、道德风尚和信息真实性“七条底线”；应尊重其他用户合法权益及公民个人隐私，尊重社会公序良俗，遵守国家法律法规。上文提及的国家法律法规，包括但不限于：<strong>《全国人民代表大会常务委员会关于维护互联网安全的决定》《全国人民代表大会常务委员会关于加强网络信息保护的决定》《最高人民法院最高人民检察院关于办理利用信息网络实施诽谤等刑事案件适用法律若干问题的解释》《互联网信息服务管理办法》《互联网新闻信息服务管理规定》以及《未成年人保护法》</strong>等。

## 三、用户身份信息的真实性
用户应当通过真实身份信息使用本网站的评论服务。对用户发表的评论，我们保留相应的管理权利。

## 四、用户评论内容的规范
用户在评论平台发表言论时，不得含有以下内容：

1. 反对宪法确定的基本原则的；
2. 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
3. 损害国家荣誉和利益的；
4. 煽动民族仇恨、民族歧视，破坏民族团结的；
5. 煽动地域歧视、地域仇恨的；
6. 煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；
7. 破坏国家宗教政策，宣扬邪教和迷信的；
8. 侮辱和歧视性别、年龄、种族、出身、国别、性取向、生理缺陷的；
9. 散布谣言，扰乱社会秩序、破坏社会稳定的；
10. 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
11. 侮辱或诽谤他人，侵害他人合法权益的
12. 对他人进行暴力恐吓、威胁，实施人肉搜索的；
13. 未获得未满18周岁未成年人法定监护人的书面同意，传播该未成年人的隐私信息的；
14. 散布污言秽语，损坏社会公序良俗的；
15. 侵犯他人知识产权的；
16. 散布非法商业广告，或类似的商业招揽信息；
17. 使用本网站常用语言文字以外的其他语言文字评论的；
18. 与所评论的信息毫无关系的；
19. 所发表的信息毫无意义的，或刻意使用字符组合以逃避技术审核的；
20. 法律、法规和规章禁止传播的其他信息。

## 五、违反承诺的处理措施
对违反上述承诺的用户，我们有权拒绝发布、删除评论、短期直至永久禁止发言等管理措施。同时，对涉嫌违法犯罪的言论将保存在案、并向有关政府部门如实报告。

## 六、举报不法传播活动
我们欢迎用户举报各类不法传播活动和违法有害信息，以共同维护文明、有价值的评论环境。

## 七、违反承诺的法律责任
若用户违反承诺、发布侵害第三人合法权益的信息而导致本网站被判决向被侵权人赔偿，我们保留依法向该用户追偿的权利。

## 八、用户提交内容的使用权利
用户提交的任何内容，本网站有权在世界范围内，利用媒体、已知或未知的技术，永久、免费、独家、再授权使用，包括复制、修改、改编、出版、翻译、创作衍生作品等。

添加网站运行时间

在页脚那里哦！

新建文件：

在blog/source/js文件夹（就是放自定义js的那个）新建 jz.min.js 文件。

输入内容：

在文件中输入以下内容：

document.addEventListener("DOMContentLoaded",(function(){const startTime=new Date("2025-04-13T00:00:00Z");function padZero(num){return num<10?"0"+num:String(num)}function calculateElapsedTime(start){const elapsedMilliseconds=new Date-start,totalSeconds=Math.floor(elapsedMilliseconds/1e3);return{days:Math.floor(totalSeconds/86400),hours:Math.floor(totalSeconds%86400/3600),minutes:padZero(Math.floor(totalSeconds%3600/60)),seconds:padZero(totalSeconds%60)}}function updateDisplay(){const{days:days,hours:hours,minutes:minutes,seconds:seconds}=calculateElapsedTime(startTime),runtimeElement=document.getElementById("runtime");runtimeElement&&(runtimeElement.textContent=`本站已萌萌哒运行${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒啦~`),requestAnimationFrame(updateDisplay)}updateDisplay()}));

可以修改代码中以下的内容：

1 2	Date("2025-04-13T00:00:00Z"); `本站已萌萌哒运行${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒啦~`

引入js：

在主题配置文件（不是站点的）里面的扩展部分的bottom 里引入（Solitude 主题是在第770行左右）。

# --------------------------- start ---------------------------
# Extend
# 扩展
extends:
  # Insert in body    
  # 插入到 body
  body:
    - <script defer pjax src="/js/jz.min.js"></script>
# --------------------------- end ---------------------------

在配置文件中添加：

在主题配置文件（不是站点的）里面的页脚部分的页脚信息文字里添加以下信息（Solitude 主题是在第580行左右）：
1
2
3
4
# 页脚信息文字
links:
- name: <span id="runtime"></span>
url: /info/ # 链接可以自定义

引用站外链接

主题魔改——Solitude主题

叶泯希

未添加成功的教程

就是记录一下我的小小遗憾啦~顺便做个备份，到时候技术进步了再来试试😝（主要是主题不一样不知道怎么改js）

前言

众所周知啊，Solitude主题留给我们魔改的空间还是蛮大的，因为要是不改的话原生solitude就一股半成品的味道（有可能是因为看多了大佬们的博客觉得原生的solitude很土？）而且很多哥哥们都在自己博客里面放出来了各种教程，怎么说，看完了有点心动了捏

于是!我又拿出了我的祖传看家本领，那就是:翻!家!

其实我在网站还没上线的时候就已经把青桔哥哥的博客翻了一遍了，他的博客里面超级多魔改的教程的，我本来是想先把这些搞完一部分再上线的，但是因为我当时自定义css没弄明白（后面会说），所以就没搞。前天终于把这个自定义css搞好了，所以说我终于能开始我的魔改之路啦！

OK，废话不多说，开搞!

自定义Css/js

这个地方真的是我的噩梦，因为我刚开始看青桔哥哥的教程的时候我看的是后面字体，日历那几篇，青桔哥哥正好没有写怎么引入css。他之前每篇文章都会写的，后面几篇估计是觉得我们都知道了就没有写，然后呢我又没有看他前面的几篇文章，所以说我截至到前天为止都还一直不知道自定义css居然是要引入的！

当然这也不能怪青桔哥哥啦，谁叫我自己没有认真把他的博客翻个底朝天的（是不是有一点不礼貌(≧∀≦)ゞ）

我刚开始的时候甚至都不知道自定义css要放在哪里，我还以为是放在solitude文件夹的sourse文件夹里面呢，因为blog文件夹下面不是有两个sourse文件夹嘛，一个在blog下面，一个在blog/themes/solitude文件夹下面，然后solitude文件夹下面的那个sourse文件夹里面又分了css，js，img三个文件夹，我就以为自定义css文件和blog/themes/soitude/sourse/css文件夹里面的其他css文件放在一起就好了，solitude主题会自动引用的（当时我也不知道这个东西要引入啊）。然后我不放心我还问了一下星港哥哥，他说只要放在sourse文件夹里面就行了，然后我就非常确信这个东西就是放在这的了。

blog文件夹下面的sourse文件夹

blog/themes/solitude文件夹下面的sourse文件夹

还是⟪论翻家翻到底的重要性⟫，星港哥哥博客里面也有写css文件放在哪你干嘛自己不看奥，也是醉了。

你绝对想不出来我为了解决这个问题想了多少种可能出问题的情况，实际上我也记不住有多少了，反正我能想起来的就有这么多

我是在本地看的，到时候部署到网站上看就好了（然而并没有）
css文件写错了（我真的一个字一个字看过了，没写错，我发誓）
自定义字体的css引用的字体文件太大了（不过确实挺大的，10.7MB呢）
配置文件写错了（但是我把备份的配置文件换过来也一样）
博客的文件夹里面反正就是有一个文件错了（我也不知道是哪个，所以我重新从头开始又搞了一个博客出来结果还是一样）
我的Solutude是从Gitee克隆的（但是我换了种方式之后也没用）
因为我的博客文件存在硬盘里（这个倒还真没试过把文件放到本地）
Git 没装插件（我去找了，没找到css的插件）
没清除coocies（清完了也没用）
浏览器的问题（用360浏览器也还是一样）
那就是我电脑上Git的问题（我换了台电脑也还是一样）

反正我各种办法都试过了，花了我保守估计得整整四五个小时，整得我都有一段时间都不想碰博客了，就是没想到去翻大佬们的博客（不是说好是祖传技能的吗）

然后后来我是上周三(今天周日)闲着没事翻Marice哥哥的博客的时候看到他在2023年写的一篇文章（他当时应该和我现在差不多大吧）如何自定义js/css之后才知道，原来这个东西是要放在blog的sourse文件夹下面的耶（终于看到了啊，真受不了了）。然后呢我去试，git页面终于有反应了，反馈了一个WARN说尝试创建xxx.css文件，但是那个已经存在了，于是我又去解决这个问题去了，其实那个东西完全可以不用管他的（星港哥哥都说了那个东西没什么大问题了你还要搞它干嘛）

到最后我又搞了一个小时还是没有搞好，我悬着的心终于死掉了。我想我干脆直接找叶泯希哥哥叫他帮我弄一下吧，然后第二天晚上我问了几个类似于css文件到底放哪这种我已经知道了的问题的时候准备说出“我给你十块钱你帮我远程看一下呗”的时候，他突然给我发了一张图片说css要这样引入，我才知道原来还要引入啊（不是Marice哥哥文章里面清清楚楚的写着怎么引入css你是没长眼睛吗）

反正最后终于是搞好啦，讲真的真不容易啊，主要是主题文档里面压根对这个一个字都没提（你看看又在找借口了）不管怎么样终于搞好啦，要不然默认的这个苹方字体我真的是看腻了，总之非常非常谢谢叶泯希和Marice两位哥哥啦！

自定义侧边栏卡片

日历、那年今日、来访者卡片

这几个卡片是我早就羡慕了，那么现在css搞好了，肯定要第一个把这几个加上啦！

来，3、2、1，上教程！

但是我发现了一个大问题。我明明css和js引入都是正确的啊，那年今日和来访者卡片里面的内容它就是显示不出来，我还以为是我这次又翻车了呢，但是日历那一块就是好好的呀（~~除了有亿点点错位~~）

我的卡片

结果我一看Marice新出的一篇文章才知道，原来青桔哥哥太久没更新，api失效了！

我赶紧去星港哥哥青桔哥哥的博客里面看看，他们的卡片也显示不出来，呼，那我就放心了。但是日历那个又是怎么回事啊！！！我在群里面问了也没有人回我呜呜呜

算啦，到时候再说吧，我到时候再找找其他大佬还有没有写这些侧边栏卡片的教程的，但是那个来访者卡片我是真的喜欢啊！在星港哥哥的博客里面看到的时候一眼就心动了。（青桔哥哥快点更新啊！！）

自定义字体

这个字体也算是我的噩梦之一了，我前面也写了我搞css到时候第一个就是搞的这个字体，毕竟字体是一个博客的灵魂嘛，字体不对劲整个博客也好看不到哪里去。默认的字体（苹方）效果 css弄好之后我本来是想通过css引入ttf格式的文件自定义字体的，但是这个东西我已经对它有心理阴影了，所以我就换了一种方式，就是直接通过extends引入。

我是在叶泯希哥哥的博客上先看到这个方法的，但是叶泯希哥哥只给了小米字体的链接，我换上去试了试，感觉和我的博客不太搭，用小米字体的效果所以我又翻了翻，找到了星港哥哥有一篇教程