博客框架: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.net
CDN不仅不能加速,还会减速,我们把他注释掉,然后使用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';
}, 1000);
|
在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 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: "github dark dimmed" style_dark: "dark"
|
注:如果选用其他代码高亮风格,有可能会造成代码背景是偏白色的,与黑色的Mac栏不搭。
Fluid专区
全屏背景 && 文章滑入动画
全屏背景:春草明年绿💔王孙归不归 (qingshaner.com)
文章滑入动画:春草明年绿💔王孙归不归 (qingshaner.com)
动画的js代码中cards变量有冲突,修改一个其他名字
只要新建两个文件就可实现背景固定
注入背景容器
根目录新建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
|
custom_css: - /css/cloudedGlass.css
|
backdrop-filter
兼容性不好,要结合背景图片适当调节背景色使无毛玻璃时也能展示内容
参考链接:
《背景固定 (AIGISSS)》
代码框表格框折叠
hexo博客fluid主题美化 - Gilgamesh’s Blog (gilgamesh-lzq.github.io)
添加网站运行时间
萌国备案:萌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 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
|
neat_enable: true
neat_html: enable: true exclude:
neat_css: enable: true exclude: - '**/*.min.css'
neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/jquery.fancybox.pack.js' - '**/index.js'
|