NexT(v7.0+)美化（一）

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 3.8k 阅读时长 ≈ 3 分钟

本文章基于 Next v7.7 版本编辑， 自定义文件与主题文件分离是个好的实践，这样可以在不修改任何主题原始代码的情况下加入自定义内容。所有 CSS 修改都使用 custom_file_path

顶部阅读进度条

在博文页面顶部添加 Reading Progress 进度条，表示阅读进度，Next 主题已内置配置文件

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块到 source/lib 文件夹

1
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml，搜索 reading_progress 定位到�-corner-indicator

  • pace-theme-fill-left
  • pace-theme-flash
  • pace-theme-loading-bar
  • pace-theme-mac-osx
  • pace-theme-minimal

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块到 source/lib 文件夹

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml，搜索 pace 定位到如下代码

1
2
3
4
5
6
7
8
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
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-flash

将 pace 设置为 true
将 pace_theme 设置为上面 Themes list 中的一种，主题样式可以在 PACE 查看

升级

切换到安装目录

1
cd themes/next/source/lib/pace

更新

1
git pull

动态背景

Next 主题默认提供了三种动态背景

Canvas-nest此功能已从 V7.7.2 中移除

我选用的是这个背景，比较好玩

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml 修改下列代码

1
2
3
4
5
6
7
8
9
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: true # 是否在手机上显示
  color: "255,51,51" # RGB颜色设置
  opacity: 0.5 # 线条透明度
  zIndex: -1 # 显示级别
  count: 160 # 线条的数量，越多越卡

如果想使用 CDN 加速的话需要设置

1
2
3
4
vendors:
  ...
  canvas_nest: //cdn.jsdelivr.net/gh/theme-next/[email protected]/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/[email protected]/canvas-nest-nomobile.min.js

升级

切换到安装目录

1
cd themes/next/source/lib/canvas-nest

更新

1
git pull

JavaScript 3D library

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml 修改下列代码，有三种风格可选，将一种设置为 true 即可

1
2
3
4
5
6
7
8
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: true
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

升级

切换到安装目录

1
cd themes/next/source/lib/three

更新

1
git pull

Canvas-ribbon

安装

切换到 Next 主题文件夹

1
cd themes/next

安装模块

1
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

修改配置文件

打开 Next 主题路径下的配置文件 _config.yml 修改下列代码

1
2
3
4
5
6
7
8
9
10
# 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: true # 是否开启
  size: 300 # 宽度
  alpha: 0.6 # 透明度
  zIndex: -1 # 显示级别

升级

切换到安装目录

1
cd themes/next/source/lib/canvas-ribbon

更新

1
git pull

网站标题崩溃欺骗

在网页标题中添加崩溃欺骗效果，离开页面后标题会更改，切换回来后会恢复正常，用来忽悠人效果不错

安装

1
npm install theme-next/hexo-next-title

设置

在站点或主题的配置文件 _config.yml 下添加。

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
# Change title and favicon when window is hidden and visible.
title_change:
  enable: false

  # Enabling this feature on non-desktop devices may not be a good choice, but it depends on you.
  onmobile: false

  # Enable random title or not.
  # Basically `random: true` means you have several titles to display and `random: false` means you have only one title to display.
  # When `random: true`, YOU MUST FOLLOW the format which has been commented in two title options below.
  # When `random: false`, please fill in the same line of the title option, like `title: one title`.
  random: false

  # Restore the original title after the specified time in milliseconds.
  timeout: 2019

  # Options when window is hidden.
  hidden:
    favicon: /images/favicon-32x32-next.png
    title:
      #- 404
      #- φ(*￣0￣)
      #- Waiting for you.

  # Options when window is visible.
  visible:
    favicon: /images/favicon-32x32-next.png
    title:
      #- 200
      #- (✿◡‿◡)
      #- Welcome back!