Hexo和NexT主题个性配置和优化

网站已经运行了一个多月,对于网站的折腾也一直没停,从开始对前端一窍不通,到现在对博客静态页面生成过程有一点点认识。这篇博文记录一下我对Hexo和NexT主题的一些配置和修改。

Hexo配置

Hexo的配置主要在Hexo根目录下的_config.yml文件里,称为站点配置文件,使用YAML语法。YAML 是一种简洁的非标记语言,基本规则如下:

  • 大小写敏感
  • 使用缩进表示层级关系
  • 禁止使用tab缩进,只能使用空格键
  • 缩进长度没有限制,只要元素对齐就表示这些元素属于一个层级
  • 使用#表示注释
  • 字符串可以不用引号标注

网站基本设置

打开_config.yml文件,最上面就是网站的基本信息设置:

1
2
3
4
5
6
7
# Site
title: # The title of your website
subtitle: # The subtitle of your website
description: # The description of your website
author: # Your name
language: # The language of your website
timezone:
  • title:网站标题
  • subtitle:网站副标题
  • description:用于SEO,告诉搜索引擎网站的简单描述
  • author:用于主题显示文章的作者
  • language:网站使用的语言,中文建议使用zh-CN
  • timezone:网站时区。Hexo 默认使用您电脑的时区。比如:Asia/Shanghai, Japan, 和 UTC 。

特别要注意英文冒号后要跟一个空格,否则设置不会生效!!!

网址设置

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/child
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
  • url:网址域名
  • root:网站根目录
  • permalink:文章的永久链接格式,默认::year/:month/:day/:title/
  • permalink_defaults:永久链接中各部分的默认值

Hexo中文章永久链接默认为:sitename/year/mounth/day/title,由于url层级过多爬虫不容易爬到文章,所以建议将文章永久链接缩简为:sitename/title,利于SEO。

写作设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
  • new_post_name:新文章的文件名称,默认:title.md
  • default_layout:预设布局,默认post
  • auto_spacing:在中文和英文之间加入空格,默认false
  • titlecase:把标题转换为 title case,默认false
  • external_link:在新标签中打开链接 ,默认true
  • filename_case:把文件名称转换为 (1) 小写或 (2) 大写,默认0
  • render_drafts:显示草稿,默认false
  • post_asset_folder:启动Asset文件夹,默认false
  • relative_link:把链接改为与根目录的相对位址,默认false
  • future:显示未来的文章,默认true
  • highlight:代码块的设置

启动Asset文件夹代表source文件夹中除了文章以外的所有文件,例如图片、CSS、JS文件等。如果文章中只有少量图片,那最简单的方法就是将它们放在source/images文件夹中,然后通过类似于下面的方法访问它们。

1
![](/images/image.jpg)

扩展设置

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
  • theme:当前主题名称。值为false时禁用主题
1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
  • deploy:部署部分的设置

这部分配置请参考使用Hexo搭建我的博客otuki.topHexo启动中的配置。

NexT配置

接下来就到了NexT主题的配置,在 themes/next/ 目录下也有一个_config.yml文件,里面包含了NexT主题的设置,成为主题配置文件。

NexT的安装

下载主题可以直接使用Git,简单方便。Git Bash下定位到Hexo站点目录下:

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

直接克隆仓库,之后可以使用git pull命令更新。

然后打开站点配置文件,找到theme字段,将值改为NexT。

选择Schema

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse
  • Mist
  • Pisces
  • Gemini

打开主题配置文件,找到Schemes部分,在要启用的Schemes前面将注释#去掉即可。

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

主菜单设置

打开主题配置文件,找到menu字段,格式是: Key: /link/ || icon。其中key字段不会在页面上直接显示,而是用来匹配相应的图标和翻译。

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

其中除了home和archives之外的页面需要手动创建。

菜单里目标所对应的图标和翻译均可修改,其中图标需访问http://www.fontawesome.com.cn找到图标的名字,修改icon部分,修改翻译则需要打开themes/next/languages下对应语言的配置文件,修改其中的翻译。以简体中文为例:

1
2
3
4
5
6
7
8
9
10
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404

修改其中的中文翻译即可更改页面上显示的文字。

侧边栏设置

侧边栏设置在主题配置文件中的sidebar字段。在默认情况下只会在文章有目录列表时显示,并位于右侧,修改position可更改出现的位置,修改display可更改出现的时机。

1
2
3
4
5
6
7
sidebar:
#position: left
position: right
display: post
#display: always
#display: hide
#display: remove

头像设置

打开主题配置文件找到avatar字段,将url值设置为头像的链接,这里的链接可以是完整的互联网url,也可以是站点内的地址,例如:

1
2
3
4
#互联网url:
http://example.com/avatar.png
#站内地址:
/images/avatar.png

之后还可以设置头像是否为圆形,头像的透明度(0-1),以及头像是否旋转。

图标设置

打开主题配置文件找到favicon字段,添加图标的地址。这里有小号,中号,apple touch,safari标签,安卓,微软浏览器六个不同的变量,可以存放六个不同的图标文件地址,以适用于不同场景。

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

页脚设置

在主题配置文件中的footer字段里,包含一些页脚显示的设置。

  • since:网站开始年份
  • icon:作者图标
  • powered:Hexo链接推广及版本
  • theme:主题链接推广及版本
  • beian:网站icp备案信息

版权声明

NexT主题配置文件中内置了知识共享署名4.0国际许可的设置。找到creative_commons字段,在license中设置共享类型即可,目前有以下几种类型:

1
2
3
4
5
6
7
8
9
10
11
12
#署名 
CC BY
#署名-相同方式共享
CC BY-SA
#署名-禁止演绎
CC BY-ND
#署名-非商业性使用
CC BY-NC
#署名-非商业性使用-相同方式共享
CC BY-NC-SA
#署名-非商业性使用-禁止演绎
CC BY-NC-ND

还可以设置是否在侧边栏和文章末尾显示:

1
2
sidebar: true
post: true

社交链接

NexT主题还包含了一些常用社交平台的链接设置:

1
2
3
4
5
6
7
8
9
10
11
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:youremail || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

紧跟着下面有链接图标的设置:

1
2
3
enable: true	#是否启用社交链接
icons_only: false #是否只显示图标
transition: false #是否有过渡效果

打赏功能设置

随着越来越多的平台支持打赏功能,NexT也加入了相应的代码:

1
2
3
4
5
6
reward:
enable: false
comment: thank you!
#wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

默认会让字体闪动,不太喜欢的话可以去除。打开 themes\next\source\css_common\components\post\post-reward.styl,将字体闪动部分的代码注释掉:

1
2
3
4
5
//#QR > div:hover p {
// animation: roll 0.1s infinite linear;
// -webkit-animation: roll 0.1s infinite linear;
// -moz-animation: roll 0.1s infinite linear;
//}

动态背景

目前NexT支持两类动态背景:canvas_nest和JavaScript 3D library。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: '255,255,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

# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

这两种动态背景都需要先克隆git仓库:

1
2
3
4
5
6
7
cd themes/next

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

#JavaScript 3D library
git clone https://github.com/theme-next/theme-next-three source/lib/three

然后再进行设置。

文章评论

NexT支持多款文章评论系统,如Disqus,畅言,Valine,LiveRe,Gitment,Gitalk等。这里以Valine为例。

首先,前往https://leancloud.cn注册用户并登录。然后创建应用,然后找到设置-应用Key,复制App ID和App Key。

打开主题配置文件,搜索valine,将App ID和App Key填入对应行,自定义placeholder的内容,这个内容会显示在评论框中。

访问统计

访问统计也有多种选择,不蒜子,百度统计,谷歌分析,leancloud等,其中不蒜子和leancloud是可以显示在页面上的。因为之前我使用leancloud的Valine评论系统,已经注册了leancloud的帐号,访问统计也使用leancloud好了。

首先前往leancloud登录,进入应用,如果没有的话需要先创建一个应用。然后点击“存储”,“创建Class”,名称为Counter。

如果使用了Valine评论系统,可以直接将Valine字段里的visitor设置为true即可。如果没有使用Valine,则需要前往设置-应用Key,复制App ID和App Key,填入leancloud_visitors字段里的app_id和app_key中。

1
2
3
4
leancloud_visitors:
enable: false
app_id:
app_key:

搜索功能

文章一多,想找出某篇文章就离不开搜索功能了。NexT内置本地站内搜索功能。

安装插件

1
npm install hexo-generator-searchdb --save

修改站点配置文件

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

修改主题配置文件

1
2
local_search:
enable: true

浏览进度设置

为了显示浏览的进度,修改主题配置文件

1
2
# Scroll percent label in b2t button.
scrollpercent: true

如果想把top按钮放在侧边栏,修改主题配置文件

1
2
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true

网站css设置

关于网站css部分,搞了好久才明白运作机制。强烈建议不要修改源代码,所有修改代码写在custom.styl里。变量写在 themes\next\source\css_variables\custom.styl里,其他设置写在 themes\next\source\css_custom\custom.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
26
27
28
29
30
31
32
33
34
35
36
37
// Custom styles.
//网站标题栏
.site-meta {
background: $blue;
}
// 页面背景色
//.container {
// background-color: rgba(0, 0, 0, 0.75);
//}
//背景图片
body{
background:url(/images/bg.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
//内容板块
.content-wrap {
background: rgba(255,255,255,0.6);
}
//菜单板块
.header-inner {
background: rgba(255,255,255,0.6);
}
//站点简介板块
.sidebar-inner {
background: rgba(255,255,255,0.6);
}
.sidebar {
background: rgba(255,255,255,0);
}
//footer字体颜色
.footer {
font-size: 16px;
color: $black-light;
}

外观这东西,不但需要css等知识,更需要有审美的眼光,我就不折腾了吧…


关于站点的配置,暂时先写这些,如果今后对站点配置有什么自认为不错的修改,会再来补充~~

但愿我的博文能对您有所帮助~