Hexo+NexT主题配置备忘

发表于 分类于 阅读次数： 本文字数： 3.5k 阅读时长 ≈ 12 分钟

2016年即将过去，在此整理一下hexo博客自己的改动，生命不息，折腾不体。我喜欢折腾，更享受用hexo写博。

NexT主题安装使用

本地环境

自行安装 git 和 Node.js 不会的可百度，安装方法一堆。

安装Hexo

Git 和 Node.js 都安装好后,首先创建一个用于存放博客文件的文件夹，如 blog，然后进入 blog 文件夹，下面开始安装并使用 Hexo。
右键选择 Git Bash Here，弹出 Git Bash 窗口；执行命令：

1
2
$ npm install -g hexo-cli
$ hexo init

安装完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中 _config.yml 文件用于存放网站的配置信息，你可以在此配置大部分的参数； scaffolds 是存放模板的文件夹，当新建文章时，Hexo 会根据 scaffold 来建立文件； source 是资源文件夹，用于存放用户资源， themes 是主题文件夹，存放博客主题， Hexo 会根据主题来生成静态页面。

在 Git Bash 终端执行命令：

1
2
$ hexo g
$ hexo s

Hexo将 source 文件夹中的Markdown 和 HTML 文件会被解析并放到 public 文件夹中， public 文件夹用于存放静态博客文件，相当于网站根目录。
至此博客雏形基本完成，在浏览器中访问 http://localhost:4000/ ，就可以访问本地博客了。

使用NexT主题

在 Git Bash 终端执行以下命令：

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

打开站点配置文件 _config.yml，找到 theme 字段，并将其值更改为 next 。

1
theme: next

NexT主题是我用过的唯一的一款Hexo主题，界面简约，功能齐全且多样，响应式设计，电脑，手机访问效果很好。

在 Git Bash 终端执行命令 hexo s ，在浏览器中访问 http://localhost:4000/ ，可以看到默认的NexT-Muse主题。

我喜欢双栏的故使用 NexT.Pisces 主题，修改主题配置文件 _config.yml的 Schemes 字段的值为：

1
scheme: Pisces

Next主题宽度调节

现在一般都用宽屏显示器，博客页面两侧留白太多，调整一下宽度。 请参考下边最新修改方法：2018-8-28方法。
打开 \themes\next\source\css\_common\components\post\post-expand.styl 文件，找到

1
@media (max-width: 767px)

改为

1
@media (max-width: 1080px)

打开 \themes\next\source\css\ _variables\base.styl 文件，找到

1
2
3
$main-desktop                   = 960px
$main-desktop-large             = 1200px
$content-desktop                = 700px

修改 $main-desktop 和 $content-desktop 的数值：

1
2
3
$main-desktop                   = 1080px
$main-desktop-large             = 1200px
$content-desktop                = 810px

Next.Mist 主题的文章宽度至此改完了。如果你用的是 Next.Pisces，还需要继续修改。
打开 \themes\next\source\css\_schemes\Pisces\_layout.styl 文件，将第 4 行的 width改为1080px ，修改后如下：

1
2
3
4
.header {
  position: relative;
  margin: 0 auto;
  width: 1080px;

记录一下我常用的细节改动，参考了许多博友的设置，并不是我的原创。参考网站，会在文章最底部列出，以示谢意。
6.0版新版 NexT.Gemini主题，可以在主题配置文件中设置max_content_width: 65%即可设置宽度。

最新修改方法：2018-8-28 \next\source\css\_variables custom.styl 文件里添加：

1
2
3
$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px')
$content-desktop-large        = 1160px
$content-desktop-largest      = 65%

请参考下边最新修改方法：2019-7-10方法。
\next\source\css\_variables\Pisces.styl 文件里修改72%改为60%：

1
$content-desktop-largest      = 60%

修改文章内链接文本样式

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
修改文件 themes\next\source\css\_common\components\post\post.styl ，添加如下css样式：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式。

文章底部的那个带#号的标签

文章底部的那个带#号的标签，比如#NexT，可以把#换成图标吗，怎么设置?
修改模板 layout/_macro/post.swig，搜索 rel="tag">#{{ tag.name }}，将 # 换成 <i class="fa fa-tag"></i>

首页展示文章动画效果和图片放大镜效果关闭哪改？

文章动画效果关闭：主题配置里 Motion: 改为 false

关闭图片放大镜效果: 主题配置里 fancybox: 改为 false

hexo背景动态效果和心心

博客背景动态效果图和点击小红心效果的相关设置。
把 js 文件 love.js 和 particle.js 放在 \themes\next\source\js\src 文件目录下
更新 \themes\next\layout\_layout.swig 文件，在末尾（在前面引用会出现找不到的bug）添加以下 js 引入代码：

1
2
3
4
<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js"></script>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

想设置动画线条颜色可改为：

1
<script type="text/javascript" color="255,0,0" opacity="0.3" count="99" src="particle.js"></script>

就能显示红色。或者用：

1
<script type="text/javascript" src="/js/src/particles.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>

两个JS下载为：

1
2
https://coding.net/u/aixiu/p/download/git/blob/master/love.js
https://coding.net/u/aixiu/p/download/git/blob/master/particle.js

hexo NexT主题首页title的优化

更改 index.swig 文件，文件路径是 your-hexo-site\themes\next\layout ，将下面代码

1
{% block title %} {{ config.title }} {% endblock %}

改成

1
{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}

这时候你的首页标题会更符合网站名称 - 网站描述这习惯。
进阶，做了 seo 优化，把关键词也显示在 Title 标题里，可改成

1
{% block title %} {{ theme.keywords }} - {{ config.title }} - {{ theme.description }} {% endblock %}

注意：别堆砌关键字，整个标题一般不超过 80 个字符，可以通过chinaz的seo综合查询检查。

每篇文章末尾统一添加“本文结束”标记

新建 passage-end-tag.swig 文件

在路径 \themes\next\layout\_macro 中添加 passage-end-tag.swig 文件，其内容为：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------本文结束 <i class="fa fa-paw"></i> 感谢阅读------</div>
    {% endif %}
</div>

修改 post.swig 文件

在 \themes\next\layout\_macro\post.swig 中， post-body 之后， post-footer 之前添加如下代码（post-footer之前两个DIV）：

1
2
3
{% if theme.passage_end_tag.enabled %}
  {% include 'passage-end-tag.swig' %}
{% endif %}

在主题配置文件中添加字段

在主题配置文件 _config.yml 中添加以下字段开启此功能：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

version:”8.0.1” 版本修改方案 by 2020-11-2

此方法可控制显示位置

新建 post-end-tag.njk 文件

在路径 \themes\next\layout\_partials\post 中添加 post-end-tag.njk 文件，其内容为：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------本文结束 <i class="fa fa-paw"></i> 感谢阅读------</div>
    {% endif %}
</div>

修改 post.swig 文件

在 \themes\next\layout\_macro\post.njk 中， `` 之后， `