Solitude魔改记录（持续更新）

如何添加 CSS/JS？

冰火之砺

更换全站显示字体

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

默认的字体（苹方）效果

Mi-sans 的效果：

用Mi-sans 的效果

月星楷的效果：

用月星楷的效果

霞鹜文楷的效果：

用霞鹜文楷的效果

打开网站：

打开以下网站：

中文网字计划

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

选择字体：

找一个你喜欢的字体，进入详情页，下滑找到“通过链接嵌入”部分，复制以 <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添加来访者卡片

Solitude创建日历卡片

创建日历侧边栏卡片

Solitude

Solitude添加那年今日卡片

Tab 标签跳转页面

点击“添加侧边栏卡片”一节的“教程”标签即可预览

替换代码：

打开 themes/solitude/scripts/tags 目录下面的 tabs.js 文件，将整个文件替换为以下代码：

'use strict';

function postTabs([name, active], content) {
  // 定义正则表达式，用于匹配选项卡块
  const tabBlock = /<!--\s*tab (.*?)(?:\s*\[(.*?)\])?\s*-->\n([\s\S]*?)<!--\s*endtab\s*-->/g;

  // 使用 matchAll 来获取所有匹配的选项卡
  const matches = [...content.matchAll(tabBlock)];

  // 将一个字符串转换为数字，设置默认选中的标签索引
  active = Number(active) || 0;

  // 生成选项卡项函数
  const generateTabItems = (matches, name, active, parentId) => {
    return matches.map((match, tabId) => {
      // 捕获选项卡标题和图标
      const [tabCaption = '', tabIcon = ''] = match[1].split('@');

      // 获取可选的链接，如果有的话
      const link = match[2] ? match[2].trim() : '';

      // 渲染内容，使用 Hexo 的 Markdown 渲染引擎
      const postContent = renderMarkdown(match[3]);

      // 生成唯一的 id，用于对应选项卡内容区域
      const tabHref = `${parentId}-${tabId}`;

      // 处理图标 HTML
      const iconHtml = tabIcon ? `<i class="${tabIcon.trim()} tab solitude"></i>` : '';

      // 判断是否为活动状态（选中状态）
      const isActive = active === tabId ? ' active' : '';

      // 回到顶部按钮的 HTML
      const toTopButton = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>';

      // 根据是否存在链接来生成导航项
      return {
        nav: createNavItem(link, tabHref, iconHtml, tabCaption, isActive, ),
        // 选项卡的内容部分
        content: `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent}${toTopButton}</div>`
      };
    });
  };

  const renderMarkdown = (text) => {
    return hexo.render.renderSync({ text, engine: 'markdown' }).trim();
  };

  const createNavItem = (link, tabHref, iconHtml, tabCaption, isActive) => {
    const buttonContent = `${iconHtml}${tabCaption.trim() || `${name} ${tabHref}`}`;
    return link ? `
      <li class="tab${isActive}">
        <button onclick="location.href='${link}'" data-href="#${tabHref}" type="button">
          ${buttonContent}
        </button>
      </li>` : `
      <li class="tab${isActive}">
        <button type="button" data-href="#${tabHref}">
          ${buttonContent}
        </button>
      </li>`;
  };

  // 生成选项卡项
  const tabItems = generateTabItems(matches, name, active, name.toLowerCase().replace(/\s+/g, '-'));

  // 回到顶部按钮的 HTML
  const toTopButton = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>';

  // 创建完整选项卡结构（包含导航和内容）
  const createTabStructure = (tabItems) => {
    const tabNav = `<ul class="nav-tabs">${tabItems.map(item => item.nav).join('')}</ul>`;
    const tabContent = `<div class="tab-contents">${tabItems.map(item => item.content).join('')}</div>`;
    return { tabNav, tabContent };
  };

  // 获取生成的选项卡导航和内容
  const { tabNav, tabContent } = createTabStructure(tabItems);

  // 返回最终的选项卡 HTML 结构
  return `<div class="tabs" id="${name.toLowerCase().replace(/\s+/g, '-')}">${tabNav}${tabContent}</div>`;
}

// 注册自定义标签，以便在 Hexo 中使用
hexo.extend.tag.register('tabs', postTabs, { ends: true });
hexo.extend.tag.register('subtabs', postTabs, { ends: true });
hexo.extend.tag.register('subsubtabs', postTabs, { ends: true });

添加 css：

在自定义css文件最后粘贴：

 /* tab标签的链接跳转 */
.tab-to-top {
    position: relative;
    display: block;
    margin: 16px 0 0 auto;
    color: var(--efu-lighttext);
}
.tabs .nav-tabs .tab button {
  width: 100%;
  padding: 0 0.3rem;
  height: 100%;
  font-size: 14px;
}
.tabs .nav-tabs .tab.active {
  background: var(--light-grey);
}
.tabs .nav-tabs .tab.active i,
.tabs .nav-tabs .tab.active button {
  color: var(--efu-lighttext);
}
.tabs .nav-tabs .tab i {
  font-size: 14px;
  margin-right: 0.3rem;
}

添加代码：

在 themes/solitude/source/js/main.js 最后添加：

    const initCodeBlocks = (container) => {
  const { highlight } = GLOBAL_CONFIG;
  if (!highlight?.limit) return;
  const limit = highlight.limit;
  const syntax = highlight.syntax || 'prismjs';
  const selector = syntax === 'highlight.js' 
    ? 'figure.highlight' 
    : 'pre[class*="language-"]';
  container.querySelectorAll(selector).forEach(item => {
    item.style.maxHeight = `${limit}px`;
    item.style.overflow = 'hidden';
    if (item.scrollHeight > limit + 30 && !item.querySelector('.code-expand-btn')) {
      const btn = document.createElement('div');
      btn.className = 'code-expand-btn';
      btn.innerHTML = '<i class="solitude fas fa-angles-down"></i>';
      btn.onclick = () => {
        item.style.maxHeight = 'none';
        btn.remove();
      };
      syntax === 'highlight.js'
        ? item.querySelector('table').appendChild(btn)
        : item.parentNode.insertBefore(btn, item.nextSibling);
    }
  });
};
document.addEventListener('pjax:complete', () => {
  initCodeBlocks(document);
  document.addEventListener('click', handleTabClick);
});
const handleTabClick = (e) => {
  const tab = e.target.closest('.nav-tabs [data-href]');
  if (!tab) return;
  const targetContent = document.querySelector(tab.getAttribute('data-href'));
  targetContent.classList.add('active');
  setTimeout(() => initCodeBlocks(targetContent), 50);
};

document.addEventListener('DOMContentLoaded', () => {
  initCodeBlocks(document);
  document.addEventListener('click', handleTabClick);
});

使用方法：

{% tabs 唯一名称, [index] %}

<!-- tab [唯一Tab] [@icon] [链接] -->

任何内容（也支持内联标签）。

<!-- endtab -->

{% endtabs %}

示例：

{% tabs test, 1 %}

<!-- tab test @fas fa-book [https://test.com] -->

任何内容（也支持内联标签）。

<!-- endtab -->

{% endtabs %}

即刻短文使用 HTML 标签（<br>等）

🛡️ 这是我的网站哦！放心点~

即刻短文

柠檬星

修改 themes/solitude/layout/includes/page/brevity.pug 文件的第19行为：

1	p.datacont!= item.content

修改 themes/solitude/layout/includes/widgets/home/bbTimeList.pug 文件的第7行为：

1	\| #{item.content.replace(/<[^>]*>/g, '')}

自定义 link 标签

🛡️ 这是我的网站哦！放心点~

柠檬星 DeepSeek

我自己的DeepSeek

安装插件：

安装 psl 插件
1
npm install psl --save

添加文件：

在 themes/solitude/scripts/tags 新建link.js文件，在文件内输入内容：

'use strict';

const { parse } = require('psl');
// 定义不同域名对应的头像URL
const avatarMap = new Map([
  ['blog.lemonstar.me', '/img/avatar.png'],
  ['blog.hellofrom.cn', 'https://blog.hellofrom.cn/favicon.ico'],
  ['ai.lemonstar.me', 'https://ai.lemonstar.me/favicon.ico']
]);

// 定义白名单域名
const whitelist = new Set([
  'lemonstar.me',
  'blog.lemonstar.me',
  'ai.lemonstar.me',
  'jingyingying.hellofrom.cn',
  'hellofrom.cn',
  'blog.hellofrom.cn',
  'yangle-q.github.io',
  'hi.hellofrom.cn'
]);
// 获取URL的根域名
function getRootDomain(url) {
  try {
    const hostname = new URL(url).hostname;
    const parsed = parse(hostname);
    return parsed.domain || hostname;
  } catch {
    return url.split('/')[0]; // Fallback
  }
}

function link(args) {
  try {
    // 参数解析（支持转义逗号）
    const parsedArgs = args.join(' ')
      .split(/(?<!\\),/)
      .map(s => s.replace(/\\,/g, ',').trim());

    const [title = '', sitename = '', rawLink = ''] = parsedArgs;
    const link = rawLink.startsWith('http') ? rawLink : `https://${rawLink}`;

    // 域名处理
    const rootDomain = getRootDomain(link);
    const imgUrl = avatarMap.get(rootDomain) || 
                  `https://api.xinac.net/icon/?url=${encodeURIComponent(rootDomain)}`; //使用api获取网站的ico

    // 白名单校验
    const isSafe = whitelist.has(rootDomain) || rootDomain.endsWith('.418121.xyz');
    const tipMessage = isSafe 
      ? '🛡️ 这是我的网站哦！放心点~'
      : '⚠️ 这不是我的网站哦！我可不知道它安不安全';

    return `
<div class="liushen-tag-link">
  <a class="tag-Link" target="_blank" rel="noopener" href="${link}">
    <div class="tag-link-tips">${tipMessage}</div>
    <div class="tag-link-bottom">
      <div class="tag-link-left" 
          style="background-image: url(${imgUrl})"
          onerror="this.style.backgroundImage='url(/images/default-avatar.webp)'"></div>
      <div class="tag-link-right">
        <div class="tag-link-title">${hexo.extend.helper.get('escape_html')(title)}</div>
        <div class="tag-link-sitename">${hexo.extend.helper.get('escape_html')(sitename)}</div>
      </div>
      <i class="fa-solid fa-angle-right"></i>
    </div>
  </a>
</div>`;
  } catch (error) {
    console.error('Link tag error:', error);
    return `<div class="liushen-error">链接卡片生成失败：${error.message}</div>`;
  }
}

hexo.extend.tag.register('link', link, { ends: false });

在 themes/solitude/source/css/_tags 新建link.styl文件，在文件内输入内容：

  #content-inner
.tag-Link
  background var(--efu-secondbg)
  border-radius 12px !important
  display flex
  border 1px solid var(--style-border)
  flex-direction column
  padding 0.5rem 1rem
  margin-top 1rem
  text-decoration none !important
  color var(--efu-fontcolor)
  margin-bottom 10px
  transition background-color 0.3s, border-color 0.3s, box-shadow 0.3s

  &:hover
    border-color var(--style-border-hover)
    background-color var(--efu-main)
    box-shadow 0 0 5px rgba(0, 0, 0, 0.2)

  .tag-link-tips
    color var(--efu-fontcolor)
    border-bottom 1px solid var(--efu-gray)
    padding-bottom 4px
    font-size 0.6rem
    font-weight normal

  .tag-link-bottom
    display flex
    margin-top 0.5rem
    align-items center
    justify-content space-around

    .tag-link-left
      width 60px
      min-width 60px
      height 60px
      background-size cover
      border-radius 25%
      background-color var(--efu-card-bg)

    .tag-link-right
      margin-left 1rem

      .tag-link-title
        font-size 1rem
        line-height 1.2

      .tag-link-sitename
        font-size 0.7rem
        color var(--efu-fontcolor)
        font-weight normal
        margin-top 4px
        transition color 0.3s

      &:hover .tag-link-sitename
        color var(--efu-main)

    i
      margin-left auto
      color: var(--efu-fontcolor)

修改文件：

修改 themes/solitude/scripts/tags/link.js 文件的第6行到8行，13行到20行，将它们替换为你自己的内容
使用方法：
1
{% link 标题,描述,链接 %}

添加跳转提醒页面

点进去查看效果~

🛡️ 这是我的网站哦！放心点~

添加跳转提醒页面

柠檬星

安装插件：

1 2	npm install cheerio --save npm install hexo-safego --save

添加配置：

在站点配置文件末尾加上以下配置：

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  general:                        # 基本功能设置
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 从新窗口打开跳转页面
  security:                     # 安全设置
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 结构
      - 'data-fancybox'
  scope:                        # 容器与页面设置
    apply_containers:           # 应用的容器选择器
      - '#post'
    apply_pages:                # 应用的页面路径
      - "/2025/"
    exclude_pages:              # 排除的页面路径
  whitelist:                    # 域名白名单
    domain_whitelist:           # 允许的白名单域名，通过字符串匹配实现
      - 'lemonstar.me'
      - 'blog.lemonstar.me'
      - 'ai.lemonstar.me'
      - 'jingyingying.hellofrom.cn'
      - 'hellofrom.cn'
      - 'blog.hellofrom.cn'
      - 'yangle-q.github.io'
      - 'hi.hellofrom.cn'
  appearance:                   # 页面外观设置
    avatar: /img/avatar.png    # 跳转页面头像路径
    title: "准备跳转到下一个世界~"            # 跳转页面标题
    subtitle: "准备好了吗？注意安全哦！"         # 跳转页面副标题
    darkmode: false             # 是否启用深色模式
    countdowntime: 5           # 跳转页面倒计时秒数，如果设置为负数则为不自动跳转
  debug:                        # 调试设置
    enable: false               # 启用调试模式

安全跳转页面·插件版

LiuShens Blog'

未添加成功的教程

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

博客背景切换-页面版

Leonus

给主题侧边栏添加倒计时

梦爱吃鱼

前言

众所周知啊，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，上教程！

Solitude创建日历卡片

Solitude添加那年今日卡片

Solitude添加来访者卡片

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

我的卡片

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

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

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

自定义字体

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

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