个人博客主题美化

AI摘要：

博客框架：hexo

主题：Fluid

其他较好的hexo主题：butterfly next

Fluid主题美化参考

🔗Hexo博客Fluid主题魔改记录 - KEVIN’S BLOG (kevinchu.top)

🔗Hexo’s Fluid 主题私人定制（持续更新） - Eren の 宇宙船 (erenship.com)

🔗Hexo + Fluid 美化 | EmoryHuang’s Blog

🔗让你的 Hexo 博客更美观的 N 种配置（基于 Fluid 主题扩展） - 简书 (jianshu.com)

🔗Hexo-Fluid 博客美化和修改 | Kiyan’s Blog (kiyanyang.github.io)

🔗hexo博客fluid主题美化 - Gilgamesh’s Blog (gilgamesh-lzq.github.io)

🔗Hexo-Fluid博客主题美化 - Chen’s Blog (chen320.github.io)

经过美化的博客

🔗博客园美化：添加公告栏时钟控件 - Shu_HowZ - 博客园 (cnblogs.com)

Hexo自定义HTML，JS，CSS的一种引入方法

博客根目录scripts文件夹下新建任意名称js文件

body_end表示插入位置，default代表作用范围为全局

注入器（Injector） | Hexo

1
2
3
hexo.extend.injector.register('body_end', 
``, 
'default');

Hexo网页折叠块（Fluid主题自带）

hexo-fold/README_CN.md at master · AimTao/hexo-fold (github.com)

看板娘

配置博客：给你的hexo添加live2D看板娘 - 遗失的美好灬 - 博客园 (cnblogs.com)

加强版项目地址：stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform (github.com)

看板娘拖拽功能： https://github.com/pymastera/live2d-widget/pull/2/files

纯本地版：【live2D看板娘】为你的网站添加萌萌的二次元板娘，这都拿不下你？-CSDN博客

下载

下载 stevenjoezhang的项目，解压到本地博客目录的 themes/next/source 下，修改文件夹名为 live2d-widget（部署时记得把li ve2d-widget目录的.git删了），修改项目中的 autoload.js 文件，如下：

1
2
// const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

如果你的hexo加了URL前缀，就将前缀加入live2d_path

修改API

autoload.js下的第34行是填写了live2d模型的API，如果你在国内可能jsdelivr.netCDN不仅不能加速，还会减速，我们把他注释掉，然后使用fghrsh的API接口：live2d.fghrsh.net。或者你拥有自己的服务器，也可以自己搭建live2d API项目。

1
2
3
4
5
initWidget({
   waifuPath: live2d_path + "waifu-tips.json",
  apiPath: "https://live2d.fghrsh.net/api/",
  // cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/"
});

引入

每个主题引入不一样，具体请查询自己的主题文档，这里拿next举例

在/themes/next/layout/_layout.swig中,新增如下内容

1
<script src="/live2d-widget/autoload.js"></script>

引入jQuery和font-awesome。你的主题如果默认引入了，那请不要重复引入。2020年1月1日起，该项目不再依赖于 jQuery。

1
2
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

音乐播放器

部署API：imsyy/Meting-API: 🐳 Meting API 的容器化与部署 (github.com)

引入：xizeyoupan/MetingJS: :cake: A powerful plugin connect APlayer and Meting (github.com)

调整：Butterfly主题Aplayer播放器的美化与调整 | 定の栈 (saop.cc)

其他播放器

🎵明月浩空网-永久免费的HTML5网站音乐播放器 (myhkw.cn)

JS渲染

可以考虑延迟加载：defer，“延迟” 之意。这里的延迟，指的是延迟执行脚本，下载则不会被阻塞。可防止阻塞 HTML 的 DOM 构建

1
<script defer src="app.js"></script>

樱花特效：https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@3.0/index/web.js

鼠标移动小星星特效：https://static.kevinchu.top/blog/assets/js/stars.js

礼花打字特效：https://static.kevinchu.top/blog/assets/js/typing-effect.js

小雪花飘落效果：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js

鼠标点击出字（defer）：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js

鼠标点击爱心（defer）：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js

更多特效参考：Hexo-Fluid博客主题美化 - Chen’s Blog (chen320.github.io)

鼠标点击特效（烟花特效）：纯Javascript实现鼠标点击特效（烟花特效）_js鼠标点击效果-CSDN博客

网页背景线条：

/js/canvas-nest.js 存在问题

修改铺满全屏幕：修改style：display:block;position:fixed;top:0;left:0;right:0;bottom:0;

一言

1
2
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<div id="hitokoto">:D 获取中...</div>

悬挂的喵

参考博客园：博客园使用悬挂猫(上吊猫)置顶插件-CSDN博客，可实现快速返回顶部的功能

1
2
3
4
<!-- 悬挂的喵 -->
<script type="text/javascript" src="/js/szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="/css/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>

萌国备案

怎么添加萌备图标-综合版块-萌社区 (moe.one)

LOGO包位于 https://icp.gov.moe/moe-icon.zip

浏览器标题恶搞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//添加浏览器标题恶搞
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/favicon.png");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/img/favicon.png");
        document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

页面加载动画

🔗Hexo博客Fluid主题魔改记录 - KEVIN’S BLOG (kevinchu.top)

增加超过1s移除功能，需放于较前位置加载：

1
2
3
4
5
6
7
8
//移除加载动画
setTimeout(() => {
    const box = document.getElementById('loading');
    box.style.display = 'none';

    // 👇️ hides element (still takes up space on page)
    // box.style.visibility = 'hidden';
}, 1000); // 👈️ time in milliseconds

在themes\fluid\layout\_partials\路径下创建loading.ejs，内容参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<%
    play_time=theme.loading.play_time || 500
%>

<style type="text/css">
    @keyframes spin3D {
        from {
            transform: rotate3d(0.5, 0.5, 0.5, 360deg);
        }

        to {
            transform: rotate3d(0deg);
        }
    }

    #loading {
        height: 100%;
        background-color: #172d4781;
        backdrop-filter: saturate(100%) blur(10px);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        z-index: 99999999;
    }

    .spinner-box {
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
    }

    .leo {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

    .blue-orbit {
        width: 175px;
        height: 175px;
        border: 2px solid #1a91fa;
        animation: spin3D 3s linear .2s infinite;
    }

    .green-orbit {
        width: 135px;
        height: 135px;
        border: 2px solid #00ffdd;
        animation: spin3D 2s linear 0s infinite;
    }

    .red-orbit {
        width: 100px;
        height: 100px;
        border: 2px solid #d75151;
        animation: spin3D 1s linear 0s infinite;
    }

    .white-orbit-a {
        width: 70px;
        height: 70px;
        border: 1px solid #faf5f5;
        animation: spin3D 3s linear 0s infinite;
    }

    .white-orbit-b {
        width: 70px;
        height: 70px;
        border: 1px solid #faf5f5;
        animation: spin3D 1.5s linear 0s infinite;
    }

    .nucleus {
        width: 1px;
        height: 1px;
        border: 1px solid #ffffff;
        animation: spin3D 1s linear 0s infinite;
    }
</style>

<div id="loading">
    <div class="spinner-box">
        <div class="blue-orbit leo"></div>
        <div class="green-orbit leo"></div>
        <div class="red-orbit leo"></div>
        <div class="white-orbit-a leo"></div>
        <div class="white-orbit-b leo"></div>
        <div class="nucleus leo"></div>
    </div>
</div>

<script>
    (function () {
        const loaded = function () {
            window.onload = function () {
                const loader = document.getElementById("loading");
                loader.className = "fadeout";
                setTimeout(function () {
                    loader.style.display = "none";
                }, 
                <%- play_time %>
                );
            }
        };
        loaded();
    })();
</script>

修改themes\fluid\layout\layout.ejs文件，找到<body>标签，在其内部第一行插入下面代码：

1
2
3
<% if (theme.loading.enable) { %>
  <%- partial('_partials/loading.ejs') %>
<% } %>

修改主题配置文件_config.fluid.yml，添加loading动画的配置项：

1
2
3
4
5
# 加载动画
loading:
  enable: true
  # 动画时长，从动画开始播放计算，不包含页面加载时间，单位ms
  play_time: 500

CSS渲染

1
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css">

滚动条颜色：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css

头部打字机颜色效果渐变：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css“

1
2
3
#subtitle {
    background-size: auto !important;
}

增加以上css修改

更换鼠标指针样式 ：https://cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css“

文章标题修改：title.css

标题颜色,首行缩进,代码框表格框折叠:

hexo博客fluid主题美化 - Gilgamesh’s Blog (gilgamesh-lzq.github.io)

保证表格完全展开

1
2
3
4
5
6
7
8
/* 代码和表格设置最大高度，高度或宽度超出都不会显示在页面中，可以通过滚动条查看 */
figure table {
    padding: 0;
    word-break: initial;
    overflow-x: auto;
    max-height: 30em;
    overflow-y: auto !important;
}

黑暗模式作用域:

1
2
3
4
5
6
7
/* 黑暗模式作用域 */
[data-user-color-scheme='dark'] body{
    background-image: none;
}
[data-user-color-scheme='dark'] #board{
    background-image: none;
}

减小文字页边距

fluid主题本来中间文字框已经不大了，再加上边距，实际文字占宽度一半不到。这或许美观，但不实用。可以将页边距从10%改为5%，视觉上内容会充实许多。

1
2
3
4
.post-content{
  padding-left: 5%
  padding-right: 5%
}

行内代码颜色

默认的行内代码颜色和正文颜色是继承关系，且行内代码背景色也不明显，因此视觉上难以区分。但是配置文件中又没有对应选项可以修改，查阅 GitHub 的 Issue 发现，有人曾提供过一个解决方案。

打开路径 hewei2001/themes/fluid/source/css/_pages/_base 下的 base.styl 文件，找到 code 配置项，修改颜色为 #E05B35。

替换Mac风格代码块

在主题文件\source\css目录下新建样式文件，如macpanel.styl，内容参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px

修改主题配置文件_config.fluid.yml，找到custom_css配置项，引入刚刚新建的样式文件（此处引入.styl文件无需加后缀）：

1
2
custom_css:
  - /css/macpanel

继续修改_config.fluid.yml，找到code.highlightjs配置项，将代码高亮风格修改暗色风格（dark系列），如：

1
2
3
4
5
6
highlightjs:
  # 在链接中挑选 style 填入
  # Select a style in the link
  # See: https://highlightjs.org/static/demo/
  style: "github dark dimmed"
  style_dark: "dark"

注：如果选用其他代码高亮风格，有可能会造成代码背景是偏白色的，与黑色的Mac栏不搭。

Fluid专区

全屏背景 && 文章滑入动画

全屏背景：春草明年绿💔王孙归不归 (qingshaner.com)

文章滑入动画：春草明年绿💔王孙归不归 (qingshaner.com)

动画的js代码中cards变量有冲突，修改一个其他名字

只要新建两个文件就可实现背景固定

img

注入背景容器

根目录新建scripts文件夹,新建injector.js

1
2
3
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>`);

背景替换

1
2
3
4
5
6
7
8
9
10
11
12
source/js`目录新建`backgroundize.js
document
  .querySelector('#web_bg')
  .setAttribute('style', `background-image: ${document.querySelector('.banner').style.background.split(' ')[0]};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);

document
  .querySelector("#banner")
  .setAttribute('style', 'background-image: url()')

document
  .querySelector("#banner .mask")
  .setAttribute('style', 'background-color:rgba(0,0,0,0)')

毛玻璃

透明背景

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

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

毛玻璃滤镜

1
2
3
4
5
css`文件夹新建`cloudedGlass.css
#board {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

_config.fluid.yml引入

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

backdrop-filter兼容性不好,要结合背景图片适当调节背景色使无毛玻璃时也能展示内容

参考链接:

《背景固定 (AIGISSS)》

代码框表格框折叠

hexo博客fluid主题美化 - Gilgamesh’s Blog (gilgamesh-lzq.github.io)

页脚footer

添加网站运行时间

萌国备案：萌ICP备20240658号 (gov.moe)

Waline

实现贴图，自定义样式：Waline 美化教程 | 空想笔记 (fufu.ink)

导航栏标题添加霓虹灯特效

修改themes\fluid\source\css\_pages\_base\_widget\header.styl，在里面追加样式(注意缩进)：

1
2
3
4
5
6
7
8
9
10
11
.navbar-title
  outline none
  --c lightseagreen
  text-shadow 0 0 10px var(--c),0 0 20px var(--c),0 0 40px var(--c),0 0 80px var(--c),0 0 160px var(--c)
  animation animate 5s linear infinite

@keyframes animate{
  to{
      filter: hue-rotate(360deg)
  }
}

然后修改themes\fluid\layout\_partials\header\navigation.ejs，
找到对应导航栏标题的标签内容：
<strong><%= theme.navbar.blog_title || config.title %></strong>
给其添加上class属性，修改为：
<strong class="navbar-title"><%= theme.navbar.blog_title || config.title %></strong>

配色方案

最让人舒服的11种颜色RGB值和十六进制值_好看的颜色rgb-CSDN博客

一个好用的配色网站! 毒蘑菇 - 配色 (dumogu.top)

最让人舒服的11种颜色RGB值和十六[进制]
序号名称RGB十六进制
1豆沙绿(199, 237, 204)#C7EDCC
2银河白(255, 255, 255)#FFFFFF
3杏仁黄(250, 249, 222)#FAF9DE
4秋叶褐(255, 242, 226)#FFF2E2
5胭脂红(253, 230, 224)#FDE6E0
6青草绿(227, 237, 205)#E3EDCD
7海天蓝(220, 226, 241)#DCE2F1
8葛巾紫(233, 235, 254)#E9EBFE
9极光灰(234, 234, 239)#EAEAEF
10苹果绿(183, 232, 189)#B7E8BD
11豆沙绿-略暗(204, 232, 207)#CCE8CF

自定义字体

Web字体在线生成：Online @font-face generator — Transfonter

CSS免费在线字体格式转换器 CSS @font-face 生成器_font-face生成器-CSDN博客

两个实现了自定义字体的博客：

Hexo Fluid主题 添加自定义字体 - Largesse’s blog

Hexo’s Fluid 主题私人定制（持续更新） - Eren の 宇宙船 (erenship.com)

优化文章链接格式

参考：Hexo博客进阶之文章链接—自定义永久链接 | ITsuKiの博客小站 (ltski.com)

压缩静态资源

博客中有大量 HTML、CSS、JS 文件，这些文件为了阅读方便会加入许多回车和空行，但在页面解析时其实会浪费部分时间，此外如果有许多插图，也会拖慢网页加载，并占据 GitHub 仓库的存储空间。

目前有关插件有 gulp、hexo-neat、hexo-all-minifier。推荐采用集成度比较高的 hexo-all-minifier 来实现，由于在安装依赖包过程报错，本站最终采用了 hexo-neat。

1
2
$ npm install hexo-all-minifier --save  # 出现 npm ERR! code ELIFECYCLE 错误
$ npm install hexo-neat --save          # 换成这个后成功安装

之后在配置文件 hewei2001/_config.yml 中增加如下内容就行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# hexo-neat
## Docs: https://github.com/rozbo/hexo-neat
neat_enable: true
# 压缩 html
neat_html:
  enable: true
  exclude:
# 压缩 css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩 js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
相关教程 > Hexo
#Hexo #Fluid #主题
个人博客主题美化
https://blog.cngo.rr.nu/posts/5a77.html
作者
cngo
发布于
2024年7月8日
许可协议