Hexo-Fluid美化

Hexo-Fluid美化

提示：我美化后发现博客加载变卡了，文章渲染变慢了，请自行选择。

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

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

清山的博客
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"

---

背景固定与毛玻璃底页

原文来自：Hexo Fluid主题背景固定(ES6改写版)与毛玻璃底页 这里稍微进行修改

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

---

美化代码块

这里推荐青山博主的方法HexoFluid主题代码块样式修改

---

打字机美化

1. 在source/css目录下新建gradient.css

/* 打字机效果 - 亮蓝青渐变，加粗，适中字号，无阴影无动画 */
#subtitle {
    /* 优化渐变：角度 120deg，颜色更鲜亮 */
    background: linear-gradient(
        120deg,
        #44ccff,  /* 更亮的蓝 */
        #66eeff,  /* 淡蓝 */
        #00ffcc,  /* 亮青 */
        #00ccaa   /* 深青 */
    );
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 字号比 1.2em  */
    font-size: 1.2em;   /* 可再微调，如 1.25em */

    /* 加粗 */
    font-weight: bold;

    user-select: none;
}

#subtitle:before {
    background-color: rgba(0, 0, 0, 0);
}

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

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

---

友链美化

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

---

首页文章滑入动画：

这里推荐一个青山博主的方法Hexo fluid主题首页添加文章滑入动画

---

其他

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

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

 

完结撒花！

鸣心/Write