Hexo-NexT主题样式美化-动画设置

本文主要介绍Hexo-NexT主题的几个动画设置:页面动画、页面加载条动画、阅读进度条动画、页面背景动画、图片弹出效果(fancybox)。

  • 主题版本:NexT-7.1.2

页面动画

这里的动画指的是加载页面时,每一部分元素(标题、文章主体等等)加载的效果。NexT提供了多种样式,读者可以自己尝试。

下面是一个参考设置,当enable: true时开启页面动画:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Use velocity to animate everything.
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

页面加载动画(顶部加载进度条)

页面加载动画指的是刚访问页面,各元素还没有加载完成时,显示的加载进度动画。NexT提供了多种样式,读者可以自己尝试。

下面是一个参考设置:

1
2
3
4
5
6
pace: true
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
pace_theme: pace-theme-minimal

注意:这个加载动画需要安装依赖,地址:Progress bar for NexT

  • 方法1:安装文件
1
2
3
4
5
# 进入主题目录
cd themes/next

# 从GitHub下载依赖文件
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  • 方法2:启用CDN

我们可以在主题配置文件_config.yml中修改:

1
2
3
vendors:
pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.min.css

顶部阅读进度条

我们可以在主题配置文件_config.yml中进行修改:

1
2
3
4
reading_progress:
enable: true
color: "#37c6c0"
height: 2px

注意:这个阅读进度条动画需要安装依赖,地址:Reading Progress for NexT

  • 方法1:安装文件
1
2
3
4
5
# 进入主题目录
cd themes/next

# 从GitHub下载依赖文件
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress
  • 方法2:启用CDN

我们可以在主题配置文件_config.yml中修改:

1
2
vendors:
reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1/reading_progress.min.js

页面背景动画

NexT 主题提供了多种背景动画配置:

  • three 的动画是线和点的组合,随鼠标位置的移动而变化。
  • canvas_nest 是自由移动的线条,当你的鼠标移动时,线条汇聚在你的鼠标位置上,形成多边形。
  • canvas_ribbon 是随鼠标点击而变化颜色的彩带。

我们只需要修改主题配置文件_config.yml即可使用,比如我们想用canvas_nest背景动画,只需要设置enable: true即可:

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
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: false
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
enable: false
size: 300
alpha: 0.6
zIndex: -1

注意:这些页面背景动画需要安装依赖

  • 方法1:安装文件
1
2
3
4
5
6
7
8
9
10
11
# JavaScript 3D library:
cd themes/next
git clone https://github.com/theme-next/theme-next-three source/lib/three

# Canvas-nest:
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

# Canvas_ribbon:
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon
  • 方法2:启用CDN

我们可以在主题配置文件_config.yml中修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
vendors:
# JavaScript 3D library:
three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js

# Canvas-nest:
canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js

# Canvas_ribbon:
canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js

个人认为在站点中添加动态背景并没有实际的意义,只会凭空增加页面内存占用及 CPU 消耗

图片弹出效果-fancybox

fancybox的特性:

  • 允许我们用鼠标和键盘上的四个方向键切换图片
  • 可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放了
  • 支持缩略图和按钮帮助导航

NexT主题已经内置了fancybox的支持,我们只需要在主题配置文件_config.yml中进行简单配置即可启用:

1
fancybox: true

注意:启用fancybox需要安装依赖,地址:fancyBox 3 for NexT

  • 方法1:安装文件
1
2
3
4
5
# 进入主题目录
cd themes/next

# 从GitHub下载依赖文件
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
  • 方法2:启用CDN

我们可以在主题配置文件_config.yml中修改:

1
2
3
vendors:
fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道