Hexo NexT主题博客的个性化配置

摘要：
记录自己使用Hexo-next主题博客过程中的的一些配置。

文章置顶

在要置顶的文章Front-matter中加入top: true

打开：\hexo\themes\next\layout\_macro\post.swig ，定位到<div class="post-meta">
在其下方添加代码段：
1
2
3
4
5
6
7
{### 置顶 ###}
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=5d2b90>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}
{### 置顶 ###}

更改行内代码样式

打开：\hexo\themes\next\source\css

新建文件夹：_custom

打开_custom文件夹，新建文件：custom.styl
打开custom.styl，添加如下代码：
1
2
3
4
code {
    color: #5d2b90;
    background: rgba(245, 240, 250, 1);
}
如果想要更改边距，边框等等可以加上：
1
2
3
4
5
code {
    color: #5d2b90;
    margin: 2px;
    border: 1px solid #06a2e4;
}
打开：\hexo\themes\next\source\css\main.styl

在末尾加上一行：@import "_custom/custom.styl";

侧边栏目录高亮颜色

打开：\hexo\themes\next\source\css\_variables\base.styl
定位到：
1
2
// Colors
// colors for use across theme.
在其下方添加颜色：
1
2
3
$purple       = #7D26CD;
$purple-bright= #a442ff;
 $purple-vs    = #5d2b90;
定位到：$sidebar-highlight =，修改为$purple-vs

头像边框宽度

打开：\hexo\themes\next\source\css_variables\base.styl

定位到：$site-author-image-border-width = 2px;

修改为0px

文章主体文字行高

打开：\hexo\themes\next\source\css_variables\base.styl

定位到：$line-height-base = 2;

修改为1.6

页面加载进度条

定位到目录cd /hexo/themes/next

安装进度条依赖：theme-nexr-pace
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

打开安装目录cd themes/next/source/lib/three，执行更新：git pull

打开：\hexo\themes\next_config.yml
定位到：
1
2
pace:
  enable: false
设置成true

配置Google Analytic

GoogleAnalytic改版又适逢hexo-NexT主题更新，故配置过程有所变化，然而网上教程大多过时了。现详细记录一下自己配置Google Analytic的过程：

打开https://analytics.google.com/analytics并登陆自己的谷歌账号

根据步骤注册一个Analytics account，并且拿到自己的MEASUREMENT ID。MEASUREMENT ID就是tracking_id。

拿到MEASUREMENT ID之后，定位到目录：\hexo\themes\next\layout_partials\header，创建一个文件header.swig。如果你用了其他主题，大概位置也是这里，但是文件后缀可能不一样，文件名形如header.xxx。可以自行验证，如果打开文件和下方代码不同则不是我们要找的。在新版NexT主题配置过程中，该文件需要我们手动创建。
打开文件，填入一下代码（MEASUREMENT ID换成自己的）：
1
2
3
4
5
6
7
8

<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'MEASUREMENT ID');
</script>
打开：\hexo\themes\next\_config.yml ，定位到：
1
2
3
custom_file_path:
  #head: source/_data/head.swig
  #header: 
在header后添加刚才创建的文件路径，并且取消本行注释：header: T:\Blog\root\hexo\themes\next\layout\_partials\header\header.swig
定位到：
1
2
3
#Google Analytics
 google_analytics:
   tracking_id:
在tracking_id:后填上自己的MEASUREMENT ID

部署完毕

修复Pjax导致的图片显示异常

在官方对Pjax插件的说明中，我们可以看到其明确表示启用Pjax插件必须配合文章中的图片使用绝对路径才能让图片正常显示：
https://theme-next.js.org/docs/third-party-services/external-libraries
“Please use the absolute path of the image or Hexo asset_img tag in your posts, otherwise the images may fail to load during Pjax refresh.“
我们使用hexo-asset-image插件后，执行hexo new "new title"新建文章后，会在文章所在_post目录下同时新建一个与文章同名的目录。当需要插入图片时，只需将图片放入该目录中，并且在文章内引用图片即可。

在使用Pjax之前，我们的引用方式为：
![picture name in post](new title/image.jpg)

使用Pjax后，需要改为绝对路径：
![picture name in post](image.jpg)

设置点击头像回到主页

打开hexo\themes\next\layout_partials\sidebar\site-overview.swig

定位到:

1 2	<img class="site-author-image" itemprop="image" alt="{{ author }}" src="{{ url_for(theme.avatar.url) }}">

更改为:

<a href="/">
  <img class="site-author-image" itemprop="image" alt="{{ author }}"
    src="{{ url_for(theme.avatar.url) }}">
</a>

更改标题悬浮颜色

打开：\hexo\themes\next\source\css_common\components\post\post-header.styl
定位到：.posts-expand .post-title-link {，在其下方：
1
2
3
4
&:hover::before {
  transform: scaleX(1);
  visibility: visible;
}
下面添加：
1
2
3
&:hover{
   color:$purple-vs;
}
这里的颜色$purple-vs在\hexo\themes\next\source\css\_variables\base.styl定义。

更改超链接悬浮颜色

打开：\hexo\themes\next\source\css\_variables\base.styl

定位到：

// Global link color.
$link-color                   = $black-light;
$link-color-dark              = $grey-light;
$link-hover-color             = $black-deep;

将$link-hover-color值更改为$purpl-vs

更改导航悬浮颜色

打开：..\hexo\themes\next\source\css\_variables\base.styl
定位到：
1
2
$sidebar-nav-color                    = $grey-dim;
$sidebar-nav-hover-color              = $whitesmoke;
更改sidebar-nav-hover-color的值为purple-vs

自定义字体

今天，我给自己的博客换上了 衬线（serif)字体，没想到效果这么好。
中文字体：Noto Serif SC (思源宋体)
英文字体：Maitree (跟宋体绝配)
要想中英文字体同时更改，需要在两个地方设置。首先设置全局字体为Maitree，再单独修改中文字体为思源宋体。
步骤：
修改全局英文字体：

打开：\hexo\themes\next\_config.yml ，定位到：
1
2
font:
  enable: false
将enable: false改为true。
定位到：
1
2
3
4
global:
  external: true
  family: Lato
  size: 1
将family: Lato改为Maitree。

修改中文字体：

打开：..\hexo\themes\next\source\css\_variables\base.styl

定位到：
$font-family-chinese = "PingFang SC", "Microsoft YaHei";

修改为："Noto Serif SC";

打开：..\hexo\themes\next\layout\_partials\header\header.swig

文末添加：
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap" rel="stylesheet">
打开：..\hexo\themes\next\_config.yml ，定位到：
1
custom_file_path:
head行修改为：

head: ..\hexo\themes\next\layout\\_partials\header\header.swig

版权声明引用样式更改

打开：\hexo\themes\next\source\css\_common\components\post\post-copyright.styl

修改颜色从$red为$purple-vs，其中，$purple-vs在
\hexo\themes\next\source\css\_variables\base.styl中定义。

引用Note颜色更改

在Markdown中使用Note时：

whatever

会在文章中插入块引用。
更改引用边框颜色：

打开：..\hexo\themes\next\source\css\_variables\base.styl
定位到：
1
2
// Primary
$note-primary-border        = #6f42c1;
更改颜色值为：#5d2b90

更改引用背景色：

在上文基础上更改$note-primary-bg值为: var(--card-bg-color);
该颜色为版权声明块背景色，这样可让二者相互适配。

更改分割线样式

打开：..\hexo\themes\next\source\css\_common\scaffolding\base.styl

定位到：

1 2	hr { background-image: repeating-linear-gradient(-45deg, $grey-lighter, $grey-lighter 4px, transparent 4px, transparent 8px);

修改为：

1	background-image: linear-gradient(0deg, $purple-vs, $purple-vs 1px, transparent 1px, transparent 1px);`

更改Tabs选项卡样式

更改上边缘颜色为紫色

打开：..\hexo\themes\next\source\css_common\scaffolding\tags\tabs.styl
定位到：
1
border-top: 3px solid $orange;
修改为：
1
border-top: 1px solid $purple-vs;
更改选项卡高度
定位到
1
2
3
4
a {
      border-bottom: initial;
      display: block;
      line-height: 1.8;
更改line-height: 1.8;为line-height: 1.4;

文章末尾版权声明url问题记录

在HeXo站点配置文件_config.yml下如果将 url 设置成github page的域名类似 xxx.github.io，那么文章末尾自动生成的版权声明会出现url拼接异常。
这个时候只需要将url设置成自定义域名即可。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: eetoa.github.io
url: https://accepted.org.cn