小窝装修观察日记

¶· 观察记录 1 - 初始化搭建 | 2025.12.12

​ 没错我又回来搭建博客了(从去年12月弄到今年www)！本来5月份的时候用hexo-butterfly搭建了一个，但是后面接着又是高考然后又是开学，所以理所当然地忘记了()。不过没关系，现在又想起来这码事情了！(其实是敲了几天代码心血来潮想写写博客记录一下)

​ 这次换了一个更中意的Stellar主题，然后又得从头开始配置config文件，搞半天有些图标还没办法正常显示，属实是烦得飞起。

​ 明天要考四级了，一定要成功啊啊啊！

¶· 观察记录 2 - 图标、背景、杂七杂八的小功能 | 2025.12.14

​ 昨天考完了四级，理所当然地鸽子掉了一天(，不过还是有试着做了点东西，所以干脆合并到今天一起来写了！

¶- 首先是修好了网站图标显示异常的问题 -

1
2
3
4
5
6
7
8
9
10
11
12
13
14

menubar:
  columns: 5 # 一行多少个
  items: 
    - id: blog
      theme: '#1BCDFC'
      icon: solar:documents-bold-duotone
      title: 博客
      url: /

    - id: gaming
      theme: '#FA6400'
      icon: solar:gamepad-bold
      title: 游戏记录
      url: /gaming/

​ 一开始我从Yesicon兴冲冲地引入solar:gamepad-bold, cib:visual-studio-code这一类标签的时候，本来盼着会让自己地导航栏变得高级几分，结果不仅没有显示图标，反而变成了一坨文字挤在那小小的格子里，甚是丑陋。

​ 正当我百思不得其解的时候，我发现注释里面有写可以定义在icons.yml 文件中，于是我调用万能的资源管理器的搜索功能，发现这玩意的目录是/themes/stellar/_data/icons.yml：

1
2
3
4
5
6
7
8
9

# 小技巧
# - 如果更换了图标之后变得很大，请把原本的 class 复制到新的图标中
# - 如果更换了图标之后视觉轻微偏移，可以通过 style="xx" 来修正

solar:documents-bold-duotone: ... # 此处为省略的<svg></svg>标签，因为太长了就不放上来了，下同
solar:chat-square-like-bold-duotone: 
solar:planet-bold-duotone: 
solar:notebook-bookmark-bold-duotone: 
...

​ 虽然前面的小技巧我是一点都没看懂，不过我至少知道怎么从外部导入svg图标了，其中xxx:xxx是图标引用的名字，虽然怎么设置都可以，但是还是按照人家给的标准名称来写会好一点。冒号后面的东西就复制粘贴网站上有"<svg>"的那一坨东西就ok了。

​ 不过需要注意的是，据我观察，侧边栏的导航图标都是32*32px的，而侧边栏Footer的图标好像没有一个确切的大小，我就把尺寸计量换成em了，设定width和height都是1.2em。

​ 有了这些，我就美美地给侧边栏加上了游戏、学习、开发、友链这几个选项卡(虽然我还不会用)，Footer也美美加上了RSS、Github、网易云还有B站的链接~

​ Ψ(￣∀￣)Ψ

¶- 接下来就是背景图片还有网站图标的配置 -

​ 对于创造力低下的瓦塔西，找图或是画图什么的是绝对不可能的捏，于是我非常自然地用上了豆包sensei。

​ (顺便吐槽一句，Gemini是真逆天啊，我发一个对话不仅输出异常，还把我用Nano Banana的次数用掉了!）

​ (╯▔皿▔)╯

​ 话不多说，上图！

​ 网站图标的设置并不难，我直接用在线工具把直接png转svg就完成了，问题在于这个网站的背景配置。

​ 配置文件里是这么写的：

1
2
3
4
5
6
7

style:
  ...
  site:
    background-image: #'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.14/image/site-bg1@small.webp)'
    blur-px: 100px # 模糊半径
    blur-bg: var(--bg-a75) # 模糊颜色
    blur-sat: 300%

​ 我把background-image换成了我的图片以后，我发现这个背景被糊上了一层贼厚的模糊，而且这几个blur的参数我完全不会配置/(ㄒoㄒ)/~~

​ 最后我在Deepseek的帮助下也是明白了，

• blur-px所谓的模糊半径可以理解成模糊的厚度，我设置成了2px，有种毛玻璃的感觉
• blur-bg里这个var(–bg-a75)的颜色其实是一个预先配置好的变量，在themes/stellar/source/css/_defines/theme_base.styl有定义(真是找死我了(╯▔皿▔)╯)；
• 最后这个blur-sat是饱和度，虽然我感觉改动了以后的效果不是很明显，我还是按照Deepseek推荐的150%来改了。

​ 值得注意的是，Stellar文档里说了：

​ 事实证明确实没有完全适配，至少手机上是这样的，我想看后续能不能手动给移动端做个自适应(不知道得多久了ww，技术力太低了呜呜呜)

¶- 字体设置 -

​ 你知道的，我一直是霞鹜文楷的忠实粉丝，所以我的博客怎么可以没有它！

​ 在这之前，我一直采取的是把字体下到本地在通过不知道什么方式搞到页面上的(我记不得了)。这一回我懒了，干脆直接用霞鹜文楷的CDN了。

​ 至于怎么用呢：

1
2
3
4
5
6
7
8
9
10
11
12

inject:
  head:
    - ...
    - <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" media="all" />
  bottom:
  	- ...
  	
style:
  font-family:
    body: '"LXGW WenKai Screen", ...(省略)'
    code: '"JetBrains Mono", ...(省略)'
    codeblock: '"JetBrains Mono", ...(省略)'

​ 只要像上面这样，把字体的css文件通过inject导入到页面就可以用在style.font-family用它了。顺带一提，我code部分我强推JetBrains Mono，看起来真的很不错。

​ 还有一点，关于这个inject，我搜出来的是head导入的是在线/本地的.css文件，bottom导入的是在线/本地的.js文件，自定义js文件后面可能会用得到(当然现在是一点不会)。

¶- 其他杂七杂八的配置 -

​ 我从这位大大的blog中薅下来了文章前显示字数、侧边欢迎语、页面底部字数统计这些功能，虽然这里也有访问量和运行时间统计，不过我暂时没去看busuanzi的统计，所以就只从下面这位大大的教程里扒了运行时间统计的代码

​ 所有的操作都在里面写得很清楚啦，这里就不复制粘贴了()

¶- 今日总结 -

​ 不知不觉就弄了不少东西，码字也从23点码到了25时(bushi)，总之感觉收获非常丰富，这个博客也是越来越有模有样了

​ 闲暇之余，我去申请了一个萌国ICP备案，顺便看了看其他的民间备案，发现有些备案的站长还会时不时看看网站的更新情况，跟申请者们强调

​ 希望我能坚持下去吧。

​ 晚安！

¶观察记录 3 | 2025.12.15

​ 今天和同学到图书馆和数学大战三百回合，落败而归，于是晚上继续回来装修这个博客~

¶更新时间信息常驻

​ 首先是找到了updated可见性的设置位置，那么我就可以通过修改css样式让它常驻啦~

1
2
3
4
5
6
7
8
9

 div#post-meta
   span.sep:before
     content: '|'
// 这个就是控制更新日期样式的东东，:hover是控制鼠标悬停设置的玩意 
   span.updated 
     visibility: visible //这里默认是hidden，我改成了visible以实现默认显示
 &:hover
   div#post-meta span.updated
     visibility: visible

¶链接卡片API

​ 参考这个教程弄了一个api，不过有几点要注意的：

• 在Vercel上填写这个的这个HOSTS的Value中，第三个值要填写Vercel项目解析的域名。比如我按照教程fork并在Vercel上部署后，域名解析是api.abc.top，那么第三个值就填api.abc.top

• 第二点，感觉应该是原教程笔误了：

1
2
3

https://your-domain/api/v1?url=https://xaoxuu.com (意思是可以把your-domain换成你刚刚配置的东西然后输入到浏览器里)
	
> 例如: https://site-info-api.vercel.app/api/v1?url=https://xaoxuu.com

1
2

siteinfo:
	api: https://your-domain/api/v1?url=${href}

事实上，按照 your-domain/api/v1?url=${href} 这个写法是没法获取到网站信息的，需要把其中的"$"删去，即your-domain/api/v1?url={href}才能用。

¶Mathjax支持

​ 学了一天数学想记录一下自己的收获，让后就非常不幸地在LaTex公式的显示上载跟头了。

​ 我一开始调用latex公式的时候，渲染出来的字体小得可怜(比正文的字体还小)。我百思不得其解，于是便去求助了Deepseek，不过这一回D老师似乎没有帮上太多忙，我按照生成的css代码放到themes\stellar\source_custom.styl中，但是没有什么效果。

​ 于是我不得已代开F12开发者工具开始查看渲染latex公式的标签元素，发现是这么一个结构

1
2
3
4
5

<mjx-container class="MathJax" jax="SVG" display="true">
    <svg>
        ...
    </svg>
</mjx-container>

​ 根据我的惊世智慧(bushi)判断，<svg>标签渲染的是生成的数学公式，里面存储的都是矢量图的数据，我应该是没法改动的。那么我的视线就自然落到了这个<mjx-container>上，它指定了一个名叫MathJax的class。根据我看了Deepseek生成的那么多代码，这个class应该就是在css文件中用来指定样式的一个标签。那么我只要在themes\stellar\source_custom.styl中重新指定它的字体大小应该就可以了(事实上Deepseek也是这个思路，不过我当时没看懂代码里干了什么)

1
2
3
4
5
6
7

/* 调整 MathJax 渲染的所有数学公式 */
// 这段代码其实是deepseek生成的一大段中的一块，也是最主要的一块，一般来说只放这个就可以了
.MathJax {
  font-size: 2.0em !important;  // 改这个就可以指定公式字体大小了(em是相对大小值)， !important相当于把这个数值作为常量一样，防止其他地方误修改
  line-height: 1.0 // 顾名思义行内高度，我改这个时想缩短公式块与文字段落之间的高度空隙
  margin: 0.5em // 我搜了一下好像是元素的外边框的宽度参数
}

​ 这样子改就可以实现我想要的字体大小啦。

¶背景图片聚焦中心(响应式布局)

​ 这一段得感谢D老师，还有一个非常重要的功能：VSCode的查找功能(Ctrl+Shift+F) 这个功能帮我快速找到了背景的css代码，节省了成吨的时间orz。

1
2
3
4
5
6
7
8
9
10
11
12
13

body>.sitebg
  ...
  // 固定背景
  // 核心背景属性
  background-position: center center
  background-repeat: no-repeat
  background-size: cover
  // 桌面端使用固定背景
  background-attachment: fixed
  ...
  // 移动端优化：取消固定背景以提升性能
  @media screen and (max-width: $device-mobile-max)
    background-attachment: scroll

​ 有了这个设置，背景图就能在任意设备居中显示啦~

¶小bug修复：页脚长度溢出

​ 这个bug在手机上比较明显，经过F12排查，我发现是之前加的那个时间长统计的玩意把页脚那个元素拉长了：

1
2
3
4
5
6
7
8
9
10
11
12
13

// 页面底部字数统计
.post-count {
    scrollbar-width: none;
    color: var(--text-p2);
  }
.totalcount {
    color: var(--text-p2);
  }
.page-footer {
    text-align: center;
    margin: 0 auto;
    width: auto; // 这个位置，原来是100%，虽然不知道为什么但是就是会导致长度溢出，改成auto就没事了
}

¶小总结

​ 今天又是翻代码的一天qwq，不过对stylus还有html这些前端的东西开始有一点了解了，也实现了一些功能，开心~

​ 下一阶段就是文件目录管理和站内分类导航了！

​ 晚安！