Hexo-Fluid美化

Fluid主题美化-让你的博客不再单调

起因很简单，单纯很闲，于是决定去找找美化方法，一找居然还真有，那就写一篇记录一下趴。

Last time：2024/5/18

注：本教程部分代码来源于网络，如有侵权请联系我删除，具体来源如下：

清山的博客
EmoryHuang’s Blog
还有一些找不到网址了，如有侵权请及时联系我删除

正文

自定义字体

这里推荐霞鹜文楷优点就不多说了，可以去百度。

1. 编辑fluid的配置文件，找到custom_css然后按照以下格式输入：

custom_css: 
    - https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css #调用字体

这个格式是为了方便多行调用，这里用的css是bootcdn的，速度杠杠的，一般不会跑路

2. 引用字体

在fluid配置里面搜font_family然后后面写 “LXGW WenKai Screen”

font_family:  "LXGW WenKai Screen"

 

背景固定与毛玻璃底页

原文来自：戳我跳转

1. 根目录下面新建一个scripts目录，随便命名一个js文件，这里取名为bg.js，输入代码如下：

const { root: siteRoot = "/" } = hexo.config;
hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
hexo.extend.injector.register("body_end",`<script src="${siteRoot}js/backgroundize.js"></script>`);

不需要引用，scripts目录hexo自动执行调用里面的js文件

2. source/js目录新建backgroundize.js，我对原文代码进行了修改，更加适配手机页面和电脑页面，请自行修改两个页面的不同的背景url，代码如下：

// 在手机端显示的背景图片链接
const mobileBgImageUrl = "url('')";

// 在电脑端显示的背景图片链接
const desktopBgImageUrl = "url('')";

// 在手机端设置背景图片
if (window.innerWidth < 768) {
  document.querySelector('#web_bg').setAttribute('style', `background-image: ${mobileBgImageUrl};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);
} else {
  // 在电脑端设置背景图片
  document.querySelector('#web_bg').setAttribute('style', `background-image: ${desktopBgImageUrl};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);
}

// 设置banner的背景图片为空
document.querySelector("#banner").setAttribute('style', 'background-image: none');

// 设置banner的.mask背景颜色透明
document.querySelector("#banner .mask").setAttribute('style', 'background-color: rgba(0,0,0,0)');

这里被上面的bg.js**调用了，所以不需要再到配置文件里面调用了。

3. _config.fluid.yml修改背景色为透明

# 主面板背景色
# Color of main board
board_color: "#ffffff80"
board_color_dark: "#00000080"

4. source/css目录新建glassbg.css输入以下代码：

#board {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

5. _config.fluid.yml调用

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css: 
  - /css/glssbg.css

以上内容如有侵权请联系删除

 

美化代码块

这位大佬写的很完美无瑕了，直接戳我跳转

 

打字机文字渐变与滚动条美化

在_config.fluid.yml中找到custom_css直接添加以下调用代码：

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css: 
    - https://jsd.cdn.zzko.cn/gh/EmoryHuang/[email protected]/scroll.css #滚动条
    - https://jsd.cdn.zzko.cn/gh/EmoryHuang/[email protected]/gradient.css #渐变打字机

注：上面css源域名地址是：cdn.Jsdelivr.net的，但是大陆无法访问，找到一个不错的替代jsd.cdn.zzko.cn，备案大陆镜像，速度杠杠的

 

友链美化

1. 新建个css文件，links.css，然后输入以下代码：

a.card-body.hover-with-bg {
  border-left: 5px solid #72ffb7;
  background: #00000080;
  color: #fff;
  box-shadow: 0 5px 10px #00000050;
  transition: all .5s;
}

a.card-body.hover-with-bg img {
  transition: all 5s;
  border: 2px solid #fff;
}

a.card-body.hover-with-bg:hover img{
  transform: rotate(1080deg);
}

.link-intro {
  color: #293239;
  font-weight: 600;
  font-family: auto;
}

a.card-body.hover-with-bg:hover {
  border-left-width: 15px;
  background-color: #fff;
}

2. 然后在_config.fluid.yml中找到custom_css添加以下调用代码：

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css: 
 - /css/links.css

首页文章滑入动画：

同样的，这位大佬写的非常优秀，戳我跳转

 

其他

你可以在_config.fluid.yml搜一下菜单毛玻璃效果，改为true，个人认为比较好看一点

改完背景以后可能字看不太清楚，可以调整自号颜色，这里不再赘述

完结撒花！

 

注：以上内容仅供学习交流使用，禁止用于非法目的。请自觉遵守法律规定。本网站所有内容仅限于学习交流和娱乐，任何非法用途均由使用者个人承担责任。

鸣心/Write