hexo 美化

hexo 美化教程

1.更换主题

Hexo 默认的主题不太好看，不过官方提供了数百种主题供用户选择，可以根据个人喜好更换，官网主题点 这里 查看。这里介绍两个主题的使用方法，Next 和 Fluid，个人比较喜欢Fluid，后面章节的功能也是以 Fluid 为基础进行讲解的。

1.1 NexT 主题

安装主题

1
2
3
cd hexo-blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
12

使用 NexT 主题

打开 _config.yml 文件，该文件为站点配置文件

将主题修改为 next

1
theme: next

本地启动

1
2
hexo g -d
hexo s

1.2 Fluid主题

以下安装步骤摘自 Fluid官网

安装主题

下载 最新 release 版本 解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

1
2
theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

创建「关于页」

首次使用主题的「关于页」需要手动创建：

hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML
1234567

本地启动

1
2
3
hexo g -d
hexo s
12

浏览器访问 http://localhost:4000，`Fluid`主题风格页面如下

2. 基于fluid美化

2.1 背景全屏固定

注入背景容器

根目录新建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>`);

背景替换

source/js目录新建backgroundize.js

1
2
3
4
5
6
7
8
9
10
11
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)')

2.2 毛玻璃

透明背景

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

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

毛玻璃滤镜

css文件夹新建cloudedGlass.css

1
2
3
4
#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

2.3 添加滑入动画

添加js

source目录下新建js目录,新建scrollAnimation.js

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
const cards = document.querySelectorAll('.index-card')
if (cards.length) {
  document.querySelector('.row').setAttribute('style', 'overflow: hidden;')
  const coefficient = document.documentElement.clientWidth > 768 ? .5 : .3
  const origin = document.documentElement.clientHeight - cards[0].getBoundingClientRect().height * coefficient

  function throttle(fn, wait) {
    let timer = null;
    return function () {
      const context = this;
      const args = arguments;
      if (!timer) {
        timer = setTimeout(function () {
          fn.apply(context, args);
          timer = null;
        }, wait)
      }
    }
  }

  function handle() {
    cards.forEach(card => {
      card.setAttribute('style', `--state: ${(card.getBoundingClientRect().top - origin) < 0 ? 1 : 0};`)
    })
    console.log(1)
  }


  document.addEventListener("scroll", throttle(handle, 100));
}

添加css

source目录下新建css文件夹,新建scrollAnimation.css

1
2
3
4
5
6
7
8
9
10
.index-card {
  transition: all 0.5s;
  transform: scale(calc(1.5 - 0.5 * var(--state)));
  opacity: var(--state);
  margin-bottom: 2rem;
}

.index-img img {
  margin: 20px 0;
}

载入css与js

_config.fluid.yml

1
2
3
4
5
6
7
8
9
# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js: 
  - /js/scrollAnimation.js

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

2.4 代码块样式

文字选中样式

/source/css目录新建selection.css

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
::selection {
  background: #ffffff00;
  color: #f00;
}

.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

pre::selection, pre ::selection {
  background: #fff;
}

[data-user-color-scheme='dark'] pre::selection, [data-user-color-scheme='dark'] pre ::selection {
  background: #424858;
  color: #fff;
}

/* 标题,目录...不可选中 */
h1, h2, h3, h4, h5, h6, .line, footer, #toc, time, #subtitle.h2, .nav-link, .post-meta.mr-2, #busuanzi_container_page_pv, .note, .hover-with-bg {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

_fluid.config.yml引入selection.css

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

2.5 其他样式

#为注释掉的，若想启用，删除#即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
custom_js:
  #- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js # 动态彩带
  #- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/runtime.min.js # 运行时间
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js # 静态彩带
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.min.js # 动态黑色线条
  #- //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js # 小雪花飘落
   - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js #樱花飘落
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js # 鼠标跟随小星星
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js # 鼠标点击出字
   - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js #鼠标点击出爱心
   - /js/scrollAnimation.js

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
  #  - /css/comments.css
    - /css/cloudedGlass.css
    - /css/selection.css
    - /css/scrollAnimation.css
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css #鼠标指针
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css # 滚动条颜色
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css # 头部打字机颜色效果渐变

也可直接用我配置好的主题

https://www.123pan.com/s/WiS5Vv-mMJeh.html

3.预览

美化
#hexo
hexo 美化
https://tingfeng347.github.io/2024/02/14/hexo 美化/
作者
Tingfeng
发布于
2024年2月14日
许可协议