安装NexT
在你的博客根目录
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
不同版本的NexT配置文件略有不同,本次使用的是hexo-theme-next-7.8.0版本。
建议下载nop++配合使用修改配置文件,使用快捷键Ctrl+F可快速定位到修改的地方。
配置文件有两个,一个是Hexo的,另一个是NexT的,名字都是_config.yml,下面“配置文件”非另行说明即默认为next文件下的配置文件。
启用主题
修改博客根目录里配置文件_config.yml的theme:next(注:将上一步克隆到本地的NexT文件拷贝到博客根目录的themes文件夹里,并改名为next)
主题设定
打开next里的配置文件_config.yml,修改下面即可选择不同的博客主题Muse、Mist、Pisces、Gemini(删除#)
# Scheme Settings
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
设置语言
博客根目录下的配置文件里的
language: zh-CN
设置菜单
menu:
home: / # 首页
archives: /archives # 归档(整理所有博客,按时间排列)
#about: /about # 关于
#categories: /categories # 分类(相当于一本书)比如:编程语言
tags: /tags # 标签(相当于书的目录)比如:C、C++、Python···
#commonweal: /404.html # 公益404
设置侧栏
修改配置文件里的sidebar.position 的值:
left - 靠左放置
right - 靠右放置
设置侧栏显示的时机,修改 sidebar.display 的值:post - 默认行为,在文章页面(拥有目录列表)时显示、always - 在所有页面中都显示、hide - 在所有页面中都隐藏(可以手动展开)、remove - 完全移除。
sideebar:
display: post
设置头像
avatar: http://example.com/avatar.png
头像文件位于next/source/images/ 目录下
设置作者昵称、站点描述
博客根目录下的配置文件
# Site
title: # 标题
subtitle: # 副标题
description: # 一句话描述
keywords: # 关键字
author: # 作者昵称
language: zh-CN # 语言
添加标签页面
在博客根目录下git bash here
$ hexo new page tags
会在博客根目录source文件夹下生成tags文件夹,修改里面的index文件:
---
title: 标签
date: # 默认值
type: "tags"
---
注:如果集成评论功能, 若需要关闭某篇文章的评论功能,可以在该文章里请添加 comments 并将值设置为 false,如果想要将分类页面的评论关闭就修改index文件,如:
---
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---
#### 添加分类页面
$ hexo new page categories
会在博客根目录source文件夹下生成categories文件夹,修改里面的index文件:
---
title: 分类
date: # 默认值
type: "categories"
---
关闭方法同上。
设置代码高亮主题
NexT 默认使用的是 白色的 normal 主题,可选的值有 normal,night, night blue, night bright, night eighties:
codeblock:
highlight_theme: night eighties
社交链接
更改配置文件
# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
微博: http://weibo.com/your-user-name
豆瓣: http://douban.com/people/your-user-name
知乎: http://www.zhihu.com/people/your-user-name
# 等等
可以从 Font Awesome:http://www.fontawesome.com.cn/faicons/#web-application 给上面的链接配上图标(不必带 fa- 前缀)。 enable 选项用于控制是否显示图标,你可以设置成 false 来不显示图标。
配置示例
# Social Icons
social_icons:
enable: true
# Icon Mappings
GitHub: github
Twitter: twitter
微博: weibo
开启打赏功能
主题配置文件中填入微信和支付宝收款二维码图片地址即可开启该功能。
reward_comment: # 自定义打赏界面内容坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image
站点建立时间
since: 2022
设置背景动画
NexT 自带两种背景动画效果
编辑主题配置文件,搜索canvas_nest或three_waves,根据您的需求设置值为true或者false即可:
canvas_nest 配置示例
# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画
three_waves 配置示例
# three_waves
three_waves: true //开启动画
three_waves: false //关闭动画
两种只能同时开启一种背景动画效果。
统计文章字数
安装hexo-symbols-count-time
$ npm install hexo-symbols-count-time --save
$ npm install eslint --save
配置文件修改
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
separated_meta: true # 是否另起一行(true的话不和发表时间等同一行)
item_text_post: true # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
item_text_total: false # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
awl: 4 # Average Word Length
wpm: 275 # Words Per Minute(每分钟阅读词数)
suffix: mins.
阅读时长 = 总字数 ÷ 平均阅读速度(275 wpm)
在此基础上,再给每一张图像 12 秒的时间。
注:wpm,全称为 Words per minute
随着平台的发展,越来越多的文章图文并茂。而原来的阅读时长是以漫画等「要看得比较久」的图片为基准,如果以原来的算法计算,那一篇包含 140 张图片的文章阅读时长会高达 87 分钟,这显然不合理。
因此,图片的读取时间修正为第一张 12 秒,第二张 11 秒,依次减少 1 秒到第 10 张之后,每张以 3 秒计算。
设置阅读时长的原因其实很好理解,这样用户就可以方便地把握阅读的时机 —— 是在等公交的时候看,还是先收藏起来一会儿再看。
当然,所有阅读时长的设置前提都是 —— 估算。
设置访客人数
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye
设置博客顶部加载条
# Progress bar in the top during page loading.
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal
(注:因为没有在云服务器上搭建,所以没有备份服务,如有备份需求,可酌情备份主题文件或博客内容,添加新功能时出了问题可溯流恢复,主题也可在新的博客直接使用,省去以后配置过程。)