欢迎移步我的个人博客阅读。
1. 参考
Hexo官方文档
Next官方文档
Hexo+Next主题优化
2. 环境
Node.js
Git
安装Hexo：npm install -g hexo-cli
3. Hexo命令
- 生成文档：
hexo init - 运行网页：
hexo s - 生成网页：
hexo g - 清除网页：
hexo clean - 部署博客：
hexo d
4. Hexo配置
4.1 网站信息
title: LIVE_下一秒
subtitle:
description:
keywords:
author: FanJun
language: zh-Hans
timezone:
4.2 网站链接
url: http://fanjunblog.top
4.3 代码高亮
highlight:
enable: true
line_number: true
auto_detect: true
4.4 主题选择
theme: next
部署设置
部署插件：npm install hexo-deployer-git --save
deploy:
type: git
repo: https://github.com/fjgjp/fjgjp.github.io.git
branch: master
5. Next配置
5.1 主题选择
搜索关键字scheme，将需用启用的 scheme 前面注释#去除即可。
5.2 菜单设置
- 开启菜单
搜索关键字menu，去掉#注释，顺序可改。导航: /nav || calendar 工具: /tools || sitemap categories: /categories/ || th archives: /archives/ || archive about: /about/ || user - 创建文件
在Git bath中输入hexo n page nav创建文件，并打开。
其余类似。title: 个人导航 date: 2018-12-25 16:39:45 type: "nav" comments: false
5.3 去除目录自弹出
搜索关键字display: remove，去除前面的#同时给display: post加上#。
5.4 开启阅读全文
搜索关键字auto_excerpt，将false改为true，字数可改。
5.5 开启浏览进度
搜索关键字scrollpercent，将false改为true。
5.6 去除底部强力驱动
在next/layout/_partials/footer.swig，删除或注释以下部分。
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} — {#
#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}
5.7 页脚文字居中
在next/layout/_partials/footer.swig中的copyright标签加入以下文字。
<div class="copyright" style="text-align:center;line-height:50px">
5.8 字数统计
安装插件：npm install hexo-wordcount --save
然后在next/layout/_partials/footer.swig文件©之前加入以下内容。
<span class="post-count">博客共{{ totalcount(site) }}字</span>
5.9 网站Logo
把图标放在/themes/next/source/images里，搜索favicon修改。
favicon:
small: /images/head.ico
medium: /images/head.ico
5.10 文章末尾添加“本文结束”
在路径next/layout/_macro中新建passage-end-tag.swig文件,并添加以下内容。
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
{% endif %}
</div>
接着打开themes/next/layout/_macro/post.swig文件，在END POST BODY下面添加以下内容。
{#####################}
{### END POST BODY ###}
{#####################}
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打开主题配置文件 _config.yml,在末尾添加以下内容。
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
5.11 内容区域宽度
在next/source/css/_variables/custom.styl中添加以下内容。
// 修改成你期望的宽度
$content-desktop = 55%
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px
5.12 超链接样式
在next/source/css/custom/custom.styl中加入以下代码。
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
border-bottom: none;
}
}
5.13 本地搜索
安装插件：npm install hexo-generator-searchdb --save
在站点配置文件末尾添加以下代码。
search:
path: search.xml
field: post
format: html
limit: 10000
在主题配置文件中搜索Local search启用。
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
5.14 行内代码样式
在next/source/css/custom/custom.styl中添加以下代码。
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
margin: 2px 0;
padding: 2px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
