前言
配置完yilia后，发现缺少一些东西，百度之下，找到了特别喜欢的主题——next。跟大家分享配置经验。
- 首先，本文是根据我自己的博客配置而写的，并不全面，其他美化配置在文末提供了相应的参考链接。欢迎浏览我的博客：destiny'Note
- 其次，本文中有部分自己的改进方案，并非全部摘自他文
我的博客原文链接：hexo + next主题高级配置
一、主题下载
git clone https://github.com/iissnan/hexo-theme-next.git themes/next
在根目录_config.yml文件中：
theme: next
注意：所有配置文件内，每一项配置的冒号后面都要加上空格
二、综合设置
1. 语言设置
在根目录_config.yml文件中：
language: zh-Hans
编辑主题目录下language/zh-Hans.yml中英文的对应关系
2. 修改字体大小、样式
在主题目录配置文件下，查找font：
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
host:
# body元素的字体设置
global:
external: true
family: Lato
size: 18
# 标题的基础字体设置
headings:
external: true
family:
size: 30
# 文章字体设置
posts:
external: true
family: 18
# logo字体设置
logo:
external: true
family:
size: 30
# 代码块字体设置
codes:
external: true
family:
size: 13
把false改为true，并修改了size的数值，单位是像素。如有需要可自行改变字体。
另外提供一种方法，供会前端的小伙伴参考：
打开\themes\next\source\css\ _variables\base.styl文件，修改里面的字体大小
3. 主题选择
在主题配置文件中，查找scheme：
# 主题中的主题
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini
选择你喜欢的，去掉前面的#号，其他加上#号。即注释掉的意思。
4. 背景的设置
在主题配置文件中，查找canvas：
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: true
开启相应的背景，只要把对应的false设置为true，记得把其他都改为false
5. 修改内容区域宽度
Next 对内容的宽度的设定如下：
- 700px，当屏幕宽度 < 1600px
- 900px，当屏幕宽度 >= 1600px
- 移动设备下，宽度自适应
在主题目录下的 source\css_variables\custom.styl 文件，新增变量：
// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px
此方法不适用于 Pisces Scheme， Pisces Scheme 编辑themes\next\source\css\_schemes\Picses\_layout.styl文件，更改以下 css 选项定义值：
.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}
三、文章模块的美化
1. 文章中添加居中模块
文章的Markdown文件中写上：
优秀的人，不是不合群，而是他们合群的人里面没有你
{% fullimage /image-url, alt, title %}
{% fi /image-url, alt, title %}
2. 文章内链接样式美化
在主题目录下，将source/css/_custom/custom.styl文件修改如下：
// 文章内链接文本样式
.post-body a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
3. 文章内代码美化
- 行内代码
在主题目录下，将source/css/_custom/custom.styl文件修改如下：
//行内代码样式
code {
color: #c7254e;
background: #f9f2f4;
border: 1px solid #d6d6d6;
padding:1px 4px;
word-break: break-all;
border-radius:4px;
}
- 区块代码
在主题目录下，修改config.yml文件：
# 样式可选： normal | night | night eighties | night blue | night bright
highlight_theme: night
4. 文章结束语
- 添加模板文件
在主题目录下\layout\_macro中新建 passage-end-tag.swig文件,并添加以下内容：
{% if not is_index %}
-------------本文结束感谢您的阅读-------------
{% endif %}
- 导入模板文件
在\layout\_macro\post.swig文件中，找到：
{#####################}
{### END POST BODY ###}
{#####################}
在上面代码之前添加：
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
- 配置
在主题配置文件中添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
上述步骤是主题编写的基本步骤，值得参考。
5. 增强文章底部版权信息
- 增加文章md文件的头部信息中添加
copyright: true时，添加版权声明 - 增加文章标题、发布时间、更新时间等信息
在目录next/layout/_macro/下找到post-copyright.swig，进行部分修改：
{% if page.copyright %}
-
{{ __('post.copyright.link') + __('symbol.colon') }}
{{ post.permalink }}
-
{{ __('post.copyright.license_title') + __('symbol.colon') }}
{{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
{% endif %}
6. 自定义文章的默认头部信息
在根目录的/scaffolds/post.md文件中添加：
---
title: {{ title }}
date: {{ date }}
tags: #标签
categories: #分类
copyright: true #版权声明
permalink: 01 #文章链接，有默认值
top: 0 #置顶优先级
password: #密码保护
---
7. 文章加密访问（没有太大意义）
打开主题目录下layout/_partials/head.swig文件,在meta标签后面插入这样一段代码：
然后文章头部信息中添加password：
password: 你设置的密码
如果password后面为空，则表示不用密码。
8. 博文置顶
- 安装
hexo-generator-index插件
npm install hexo-generator-index--save
- 替换代码
把node_modules/hexo-generator-index/lib/generator.js内的代码替换为：
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};
- 设置top值
在文章头部信息中添加top 值，数值越大文章越靠前:
---
top: 100
---
9. 增强文章底部标签
修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 #换成
10. 修改打赏
- 修改文字与图片
# 打赏设置
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /assets/img/weixin.jpg
alipay: /assets/img/alipay.jpg
# bitcoin: /images/bitcoin.png
文字、图片位置可自行修改
- 字体不闪动设置
修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：
/* 注释文字闪动函数
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/
四、区块美化
1. 添加顶部加载条
在主题配置文件_config.yml中，找到pace并修改：
pace: true
pace_theme: pace-theme-minimal
加载条样式有许多，在你找到的位置中可自行更换
2. 主页文章添加阴影效果
打开/themes/next/source/css/_custom/custom.styl,添加：
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
3. 鼠标点击小红心的设置
将 love.js文件添加到主题目录的\source\js\src 下。找到 \layout\_layout.swing文件， 在文件的后面， body标签之前 添加以下代码：
4. 搜索功能
- 安装
npm install hexo-generator-searchdb --save
- 配置
在主题配置文件下，查找local_search:
local_search:
enable: false
trigger: auto
top_n_per_article: 1
enable修改为true
在根目录配置文件中，添加以下代码：
search:
path: search.xml
field: post
format: html
limit: 10000
5.页脚美化
- 隐藏网页底部powered By Hexo / 强力驱动
在主题配置文件_config.yml中修改：
copyright: false
- 添加文字或者链接
在主题目录下的layout/_partials/footer，查找powered-by：
{% if theme.copyright %}
{#
#}{{ __('footer.powered', 'Hexo') }}{#
#}
在上面代码之前添加你的文字，或者增加链接：
best for best!
百度
至于样式，这里不多介绍。需要了解html、css知识。
还可以设置访问量等信息，在文末参考文章中有介绍。
6. 侧边栏添加访问量等信息
- 获取不蒜子代码
在不蒜子上获取代码：
- 添加js文件
在主题目录下，找到\layout\_layout.swing文件， 在文件的后面，