Hexo-NexT(v7.0+)主题配置

注意:本文的NexT主题版本为7.1.2

一、获取NexT

1、下载最新 release 版本

通常情况下请选择 stable 版本。推荐不熟悉的用户按此方式进行。

这种方式将仅提供最新的 release 版本(其中不附带 .git 目录)。因此,将来你将不可能通过 git 更新这一方式安装的主题。

为了能不丢失你的自定义配置,你可以使用独立的配置文件(例如 数据文件)并下载最新版本到旧版本的目录中(或者下载到新的主题目录中并修改 Hexo 配置中的主题名)。

二、站点配置

1、设置hexo的next主题

找到theme后修改为:

1
theme: next #配置成刚下载的next主题

2、配置hexo网站相关信息

1
2
3
4
5
6
7
8
# Site
title: #网站标题
subtitle: #网站副标题
description: #描述,介绍网站的
keywords: #网站的关键字
author: #博主姓名
language: zh-CN #语言 zh-CN 是简体中文
timezone: UTC #时区

注意:博客框架默认的语言是英文,前往/themes/next/languages,查看当前NexT版本简体中文对照文件的名称是zh-Hans还是zh-CN。这里是zh-CN

3、设置hexo永久链接

1
2
3
4
5
6
7
url: https://dta0502.github.io/
root: /
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
permalink_defaults:

4、nofollow标签的使用

减少出站链接能够有效防止权重分散,hexo有很方便的自动为出站链接添加nofollow的插件。

首先安装hexo-autonofollow插件:

1
npm install hexo-autonofollow --save

再在外层_config.yml中添加配置,将nofollow设置为true:

1
2
3
4
5
# 外部链接优化
nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- 'yousite'

这样,例外的链接将不会被加上nofollow属性。

三、主题配置

1、配置hexo中的about,tag,categories,sitemap菜单

默认菜单只开启了首页和归档,hexo所有图标均来自fontawesome。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#菜单设置为 菜单名: /菜单目录 || 菜单图标名字
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
sitemap: /sitemap.xml || sitemap
commonweal: /404/ || heartbeat

menu_settings:
icons: true #显示图标
badges: true #显示统计信息

2、手动生成hexo菜单对应文件

新菜单开启后是没有对应文件的,所以要手动生成about,tags,categories和404页面,这里我们将404替换成腾讯的公益页面

新建about页面

1
2
cd hexo
hexo new page about #about就是普通的布局一般用来介绍站点信息和博主信息等

新建一个tags页面

1
hexo new page tags

找到tags文件 hexo/source/tags/index.md 编辑它,在头部修改为

1
2
3
4
5
6
---
title: 标签
date: 2019-06-29 11:35:42 #时间随意
type: "tags" #类型一定要为tags
comments: false #提示找个页面不需要评论,后续评论插件那里会详细介绍
---

新建一个categories页面

1
hexo new page categories

找到categories文件 blog/source/categories/index.md 编辑它,在头部修改为

1
2
3
4
5
6
---
title: 文章分类
date: 2018-10-15 00:03:57
type: "categories"
comments: false
---

新建一个404页面

1
hexo new page 404

找到404文件 blog/source/404/index.md 编辑它,内容全部替换成如下

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script>
</body></html>

3、配置hexo本地搜索

本地搜索的原理

对于动态网站来说,可以通过 php 实现。但是,GitHub博客是静态网站,用不了 php。

NexT 主题实现这个功能,用了 Hexo 的拓展包 hexo-generator-searchdb,它预先生成了一个文本库search.xml,然后传到了网站里面 。在本地搜索的时候,NexT直接用javascript调用了这个文件,从而实现了静态网站的本地搜索。

设置过程

安装插件:

1
npm install hexo-generator-searchdb --save

主题配置文件如下:

1
2
3
4
5
local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: false

站点配置文件新添加如下代码:

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

4、设置hexo中的rss订阅

安装插件:

1
npm install hexo-generator-feed --save

刷新主页就可以看到rss。

5、配置hexo站点的footer信息

底部footer可以开关显示hexo版权,theme版权,还有建站时间等个性化配置

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
since: 2018 #建站开始时间
icon:
name: user #设置 建站初始时间和至今时间中间的图标 默认是一个'小人像'更改user为heart可以变成一个'心'
animated: true
color: "#808080" #更改图标的颜色 红色为 '#ff0000'
powered:
enable: true #是否开启hexo驱动
version: true #是否开启hexo版本号
theme:
enable: true #是否开启theme驱动
version: true #是否开启主题版本号
custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> #这里的底部标识是为了添加coding page服务时的版权声明 打开注释就可以看到底部有一个 hosted by coding pages

6、配置hexo中next主题样式选择

next一共提供了4种首页样式,按照自己喜好选择一个,切记选择一个其他主题后其他的主题之前一定要加上#

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

7、头像信息设置

1
2
3
4
5
avatar:
url: /images/avatar.jpg #设置头像资源的位置
rounded: false #开启圆形头像
opacity: 1 #不透明的比例 0 就是完全透明
rotated: false #开启旋转

8、社交信息和友链配置

这里和菜单设置格式一样 社交名字: 社交url || 社交图标 ,图标信息还是fontawesome

1
2
3
4
5
6
7
8
social: 
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
Google: https://plus.google.com/yourname || google

social_icons:
enable: true #显示社交图标
icons_only: false #只显示图标的开关

友链配置

1
2
3
4
5
6
7
# Blog rolls
links_icon: link #友链的图标 参考上文
links_title: Links #友链的title 比如你可以更改为 友情链接
links_layout: block #友链摆放的样式,按块 一行一个
#links_layout: inline #按线摆放,一行很多个 切记 同时只能一种样式
links:
Title: http://example.com/ #友链的地址

9、首页文章不展示全文显示摘要

1
2
3
4
5
6
7
8
9
scroll_to_more: true  #点击阅读全文后是否跳到<!--more-->标记处,设为false时点击阅读全文可以从头阅读

save_scroll: false #自动保存每篇文章或页面上一次滚动的地方

excerpt_description: true #自动在首页对文章进行摘要描述作为前言文本

auto_excerpt: #是否自动截取摘要
enable: false #设置为true则自动截取150字当做首页摘要
length: 150 #自动截取的字数

10、首页文章属性

1
2
3
4
5
6
7
post_meta:
item_text: false # 设为true 可以一行显示 文章的所有属性
created_at: true #显示创建时间
updated_at:
enabled: true #显示修改的时间
another_day: true #设true时 如果创建时间和修改时间一样则显示一个时间
categories: true #显示分类信息

11、页面阅读统计

1
2
3
4
5
6
7
8
busuanzi_count:
enable: false #设true 开启
total_visitors: true #总阅读人数 uv数
total_visitors_icon: user #阅读总人数的图标
total_views: true #总阅读次数 pv数
total_views_icon: eye #阅读总次数的图标
post_views: true #开启内容阅读次数
post_views_icon: eye #内容页阅读数的图标

12、字数统计、阅读时长

安装插件:

1
npm install hexo-symbols-count-time --save

主题配置信息如下:

1
2
3
4
5
6
symbols_count_time:
separated_meta: true # false 会显示一行
item_text_post: true # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
item_text_total: true #底部footer是否显示字数统计属性文字
awl: 4 #计算字数的一个设置,没设置过
wpm: 275 #一分钟阅读的字数

站点配置新增如下:

1
2
3
4
5
6
7
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

13、内容页里的代码块新增复制按钮

1
2
3
4
codeblock:
copy_button:
enable: false #增加复制按钮的开关
show_result: false #点击复制完后是否显示 复制成功 结果提示

14、配置微信,支付宝打赏

1
2
3
4
5
# Reward
reward_comment: #打赏描述
wechatpay: /images/wechatpay.png #微信支付的二维码图片地址
alipay: /images/alipay.png #支付宝的地址
#bitcoin: /images/bitcoin.png #这个是设置比特币的

15、相关文章推荐

安装推荐文章的插件

1
npm install hexo-related-popular-posts --save

主题配置信息如下:

1
2
3
4
5
6
7
8
9
10
related_posts:
enable: true
title: 相关文章推荐 # 属性的命名
display_in_home: false #false代表首页不显示
params:
maxCount: 5 #最多5条
#PPMixingRate: 0.0 #可以看github上 这个相关度介绍
#isDate: true #是否显示 日期
#isImage: false #是否显示配图
isExcerpt: false #是否显示摘要

16、文章原创申明

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: false
post: true # 将false改为true即可显示版权信息
language:

17、背景动画设置

Canvas-nest风格

进入theme/next目录,执行命令:

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

实际上就是将一个显示动效的js文件clone到对应目录。

这时将配置文件_config.yml中的canvas_nest: false改为canvas_nest: true才能真正生效。

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

18、添加Google统计

访问Google Analytics,需要登录,按照提示填写网站信息开通GA服务,获取统计ID。

编辑主题配置文件, 找到关键字google_analytics , 删除注释#并填写获取到的统计ID。

1
2
3
4
# Google Analytics
google_analytics:
tracking_id:
localhost_ignored: true

19、Google Search Console

该版本已经集成了HTML标记的验证方式。

  • 查看原标记,将其中content字段引号内的内容拷贝出来
  • 修改主题配置文件。搜索google_site_verification,将上述拷贝的内容复制在该值后面。
1
2
3
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification: uW8bwgMGUwIA01nPfItoty1rmtmmuVkOVTeS9O0nAUg

四、参考

赞赏一杯咖啡
0%