hexo轻量级美化

发表于 更新于 分类于 ，

使用NexT主题对网站进行美化，拒绝无意义的插件，保留最干净的文档环境。

_config.yaml 站点基础配置

网站信息

1
2
3
4
5
6
7
8
9
10
11
# 网站标题
title: Deven's NoteBook
subtitle: ''
description: ''
keywords:
# 作者
author: Deven Zhou
# 语言，从cn修改为zh-CN
language: zh-CN
# 时区，修改为上海
timezone: 'Asia/Shanghai'

链接信息

链接信息用于配置当前网站的URL及文档定位URL信息

1
2
3
4
5
6
7
8
9
10
# 网站链接
url: https://devenzhou.github.io
# 文章链接规则
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
	# 是否移除index.html后缀
  trailing_index: true
  # 是否移除.html后缀
  trailing_html: 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
# 文章名称规则，建议根据日期进行管理
new_post_name: :year/:month/:day/:title.md
default_layout: post
titlecase: false
external_link:
  enable: true
  field: site
  exclude: ''
filename_case: 0
render_drafts: false
# 是否在创建文档的同时创建对应的静态资源文件夹
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  # 是否自动检测代码语言
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

GitHub部署

如果您不是使用的GitHub Page，则可以跳过此章节。

配置SSH免密登陆

进入GitHub SSH管理页面，添加SSH keys

安装deploy插件

1
2
3
4
# 进入hexo站点目录
$ cd hexo-site
# 安装git插件
$ npm install hexo-deployer-git --save

配置自动部署

1
2
3
4
5
6
7
8
9
10
deploy:
  type: git
  # 换成自己的github仓库地址
  repo: git@github.com:devenzhou/devenzhou.github.io.git
  # 分支
  branch: master
  message: 'update blob'
  # 提交修改的用户名及邮箱
  name: deven
  email: zttmax@126.com

NexT主题

NexT是一个高品质且优雅的Hexo主题，我们使用该主题简单的美化站点。

安装

1
2
$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

修改Hexo配置文件

修改_config.yaml文件，指定主题为next

1
theme: next

安装canvas-nest背景动画

Step1 →切换到Hexo目录

1
2
3
4
5
6
$ cd hexo-site
# 此文件夹下必须有`source`、`themes`以及一些其他文件
$ ls
scaffolds  source  themes  _config.yml  package.json
# 下载nest源码到next的lib文件夹下
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

Step2 →创建footer.swig文件

在source/_data目录下创建footer_swig文件，如果_data目录不存在，请手动创建。

footer_swig问价内容如下：

1
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="/lib/canvas-nest/canvas-nest.min.js"></script>

Step3 →修改Next配置文件

修改themes/next/_config.yaml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  # 指定刚刚创建的脚本
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

内容透明度调整

在source/_data目录下创建styles.styl文件，追加以下内容：

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
body {
  background:url(/images/pexels-asad-photo-maldives-1320674.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed; 
  background-size: cover;      
  background-position:50% 50%;
  padding-top: 10px;
}

/* 隐藏上方黑线 */
.headband {
  height: 0px;
}

/* 博客内容透明化
 文章内容的透明度设置 */
.content-wrap, .main-inner, .sidebar, .popup {
  opacity: 0.85;
}

/* 菜单栏的透明度设置 */
.header-inner {
  background: rgba(255,255,255,0.85);
}

修改next配置文件thmems/next/_config.yaml

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.njk
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

其他配置

以下所有配置均在themes/next/_config.yaml中

风格

next支持Muse、Mist、Pisces和Gemini风格，根据自己的喜好调整。

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

icon

选择自己喜欢的图片放入themes/next/source/images文件夹内，并替换掉small、medium对应的值。

1
2
3
4
5
6
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

菜单

新增Hexo页面

1
2
3
4
5
$ cd hexo-site
$ hexo new page 'about'
$ hexo new page 'tags'
$ hexo new page 'categories'
$ hexo new page 'archives'

执行以上命令后，会在source目录下产生对应名称的文件夹，修改对应文件夹下的index.md文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- about/index.md -->
---
title: about页面名称
date: 2021-04-15 20:51:54
type: about
---
<!-- archives/index.md -->
---
title: archives页面名称
date: 2021-04-15 20:51:54
type: archives
---
<!-- categories/index.md -->
---
title: categories页面名称
date: 2021-04-15 20:51:54
type: categories
---
<!-- tags/index.md -->
---
title: tags页面名称
date: 2021-04-15 20:51:54
type: tags
---

修改themes/next/_config.yaml启动以上页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

头像

挑选一张头像图片放入themes/next/source/images文件夹，并修改url

1
2
3
4
5
6
7
avatar:
  # 头像文件路径
  url: /images/avatar.gif
  # 是否使用圆形头像
  rounded: true
  # 是否启用头像转动
  rotated: false

tag图标

tag模型使用#作为前缀，可以修改配置启动tag图标

1
tag_icon: true

打赏

进入支付宝、微信获取收款码，存入themes/next/source/images并替换以下文件名称

1
2
3
4
5
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png