Hexo + Fluid博客美化记录

简单的博客美化记录 今天折腾了一整天博客的美化，以及听对面工位上一对司马情侣聊了一下午家常

情侣的废话怎么这么多

美化清单

  1. 添加博客加载页面
  2. Github状态和活跃曲线
  3. mac风格代码块
  4. 艺术字签名
  5. 更换图床
  6. 遗留问题

添加博客加载页面

Fluid主题本身是不支持固定背景图的，强行固定会导致加载页面时明显观察到背景图“瞬移”，而且不适配移动端。

现在移动端我先不管了，这里通过添加加载页面的方式规避背景图瞬移的问题。

代码源自该实例

关于第一步，“在bodyBegin注入元素代码”，即把下面这段代码加到博客目录下的\Blogs\node_modules\hexo-theme-fluid\layout\layout.ejs的<body>开头的部分：

剩下的CSS和js代码分别添加到自定义CSS和js文件中即可。

Github状态和活跃曲线

项目地址：

复制粘贴到关于页即可。

mac风格代码块

参考：HexoFluid主题代码块样式修改

艺术字签名

参考链接

签名动画似乎与加载页面不兼容，我没有看到动画效果，所以把动画部分的代码去掉了。

对sign.css部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.svg {
    width: 100%;
    height: auto;
  }
  
  .svg path {
    stroke: white;
    stroke-width: 3pt;
    stroke-linecap: round;
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
    fill: none;
    fill-rule: nonzero;
    animation: stroke 25s forwards;
    -webkit-animation: stroke 25s forwards;
  }
  
  @keyframes stroke {
    to {
      stroke-dashoffset: 0;
    }
  }

width和height两个属性可以改为100%和auto，我经过尝试发现影响签名大小的主要还是Google Font to Svg Path的Size数值，所以不用纠结宽和高到底应该填多少了，直接自适应。这里Size取的是35。

sign.js:

1
2
3
4
5
6
7
8
9
10
11
const  navbarBrand  =  document.querySelector('.container a');

navbarBrand.innerHTML = `
  <object type="image/svg+xml" data="/img/banyee's Blog.svg"></object>
`;

// const  paths  =  document.querySelector('.container .navbar-brand .svg .g path')

// const  len  =  paths.getTotalLength()

// paths.style.setProperty('--l', len)

动画部分的代码已经被注释。另外，引入.svg文件时可以用上面的这种方法，先把svg文件下载到source目录下的一个img文件夹中，再引用，这样可以让代码看起来简洁一些。

更换图床

之前用的一直是imgur，国外的老牌免费图床网站，稳定安全可靠。但是被墙了，至于为什么被墙啊俺也不知道

鉴于国内用户无法访问托管在imgur上的图片，所以我打算换个图床

一开始打算打算使用腾讯COS存储，主要是冲着访问速度快+长期稳定去的虽然但是腾讯你什么时候死，跟着教程走了几步，到了要绑定域名的时候

本来想着来都来了，那就备案啊，然后备案强制实名认证😂

这时候我才意识到貌似国内的域名都要备案之后才能使用

然后我又尝试了SM.MS图床，这个图床的来历：

SM.MS诞生于互联网精神

然后我试着访问了主站

"Due to network issues, users from China Mainland are unable to access SM.MS, we have added an alternate domain name smms.app"

又被大陆墙了😂而且这个图床已经关闭了注册功能

最后我转向了路过图床。这个图床也是蛮幽默的，注册时如果挂着VPN，会马上触发安全机制：

😭

不过这个图床已经稳定运行了14年，最大支持10M的图片，同时具有全球 CDN 加速以确保高速、稳定。暂时就先用着这个好了。

向路过图床上传图片的时候也要求关闭VPN代理，所以最好的办法就是直接在clash新建规则，检测到imgse关键词就走直连

顺便一提我之前把adobe直接禁了，因为联网有盗版检测

老文章的图片就不迁移了，因为懒

遗留问题

我的文章页背景图为亮色，并且启用了毛玻璃效果，这样一来在黑夜模式下会显得很突兀。最理想的解决方法是设置文章页的背景可以随日夜模式动态切换，黑夜模式就切换为：

玉足🥰

今天对着这篇博客折腾了很长时间

fluid 全屏背景图随日夜模式切换和正文底页毛玻璃效果

结果失败了。具体体现为：只有在进入博客的一瞬间可以看到白天模式下的背景图，之后马上被黑夜模式的背景图覆盖；模式切换按钮不起作用；而且主页的背景图也被覆盖掉了。这和这个文章的博客的表现完全相同，推测最早这些代码是起作用的，但是现在失效了。

比较好的例子是这个博客，具体实现方式不明。这个问题留到以后再解决好了。

2025/4/21补充

今天收到了漫自由发来的邮件：

漫自由是我在找漫画资源时发现的网站，也是我见过的为数不多的专门对大陆用户表示欢迎的网站，喜提被墙名单+1

他现在新开辟了一个域名，大陆可访问，内容和原网址是完全相同的，不知道能坚持多久

Theme
Hexo + Fluid博客美化记录
http://example.com/2025/04/20/Fluid主题美化2/
作者
banyee
发布于
2025年4月20日
许可协议