隐藏
Hexo-NexT主题自定义配置高阶教程 | Bill Yang's Blog

路终会有尽头，但视野总能看到更远的地方。

0%

Hexo-NexT主题自定义配置高阶教程

发表于 更新于 分类于 Valine：

说明

声明

本教程面向Hexo，NexT主题v6.x~v7.2.0进行优化。
若使用的是v7.3.0或更高版本，本文会有特殊提示，请注意。
其他主题或NexT版本或不能直接套用，需要自行修改。
搜索插件推荐使用local-search。

阅读须知

这是一篇高阶教程，阅读前需要了解以下内容。

  • 清晰地了解Hexo文件的目录架构。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .
    ├── .deploy          #部署文件夹
    ├── public           #html源码，hexo g生成
    ├── scaffolds        #模板
    ├── scripts          #扩展脚本
    ├── source           #文章源码
    |   ├── _drafts      #草稿
    |   └── _posts       #文章
    ├── themes           #主题
    |   ├── next         #NexT主题
    ├── _config.yml      #博客配置
    └── package.json     #应用程序数据

  • 清晰地了解NexT主题的目录架构。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    ├── .github                #github信息
    ├── languages              #多语言
    |   ├── _en.yml            #默认语言
    |   └── zh-CN.yml          #简体中文
    |   └── zh-TW.yml          #繁体中文
    ├── layout                 #布局，根目录下的*.swig文件是对主页，分页，存档等的控制
    |   ├── _custom            #可以自定义的模板，覆盖原有模板
    |   |   ├── head.swig      #文首样式
    |   |   ├── header.swig    #头部样式
    |   |   ├── sidebar.swig   #侧边栏样式
    |   ├── _macro             #可以自定义的模板，覆盖原有模板
    |   |   ├── post.swig      #文章模板
    |   |   ├── reward.swig    #打赏模板
    |   |   ├── sidebar.swig   #侧边栏模板
    |   ├── _partial           #局部的布局
    |   |   ├── head           #头部模板
    |   |   ├── search         #搜索模板
    |   |   ├── share          #分享模板
    |   ├── _script            #局部的布局
    |   ├── _third-party       #第三方模板
    |   ├── _layout.swig       #主页面模板
    |   ├── index.swig         #主页面模板
    |   ├── page               #页面模板
    |   └── tag.swig           #tag模板
    ├── scripts                #script源码
    |   ├── tags               #tags的script源码
    |   ├── marge.js           #页面模板
    ├── source                 #源码
    |   ├── css                #css源码
    |   |   ├── _common        #*.styl基础css
    |   |   ├── _custom        #*.styl自定义局部css
    |   |   └── _mixins        #mixins的css
    |   ├── fonts              #字体
    |   ├── images             #图片
    |   ├── js                 #javascript源代码
    |   └── lib                #引用库
    ├── _config.yml            #主题配置文件
    └── README.md              #说明文件

NexT主题v7.3.0版本将所有自定义custom文件转移至Hexo目录source/_data/...中。

  • 简单了解css，swig语法与js语法。

Next主题v7.3.0须知

使用NexT主题v7.3.0版本的用户请在blog/themes/next/_config.swig中将以下片段：

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

根据下文所需要改动的自定义文件取消引用对应内容，并在blog/source/_data/...中添加改动内容。

准备工作

jQuery库引入

目的

部分js库需要用到jQuery，为了运行这些js，需要引用jQuery。

方法

在blog/themes/next/_config.swig找到并修改为如下内容：

1
2
3
4
5
6
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 3.4.1
  jquery: https://code.jquery.com/jquery-3.4.1.min.js

为了保险，我们再在head中引用一下，本人引用库习惯放在head.swig而非header.swig中。

在blog/themes/next/layout/_custom/head.swig中添加以下内容：

1
2
3
<!-- jquery -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

如果无法访问，可以使用：

1
2
3
<!-- jquery -->

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

自定义配置

在博客打字时添加粒子特效

效果

可在本博客的评论框或搜索框中尝试打字。

添加js文件

点击下载activate-power-mode.js

将文件放置在blog/themes/next/source/lib/activate-power-mode/activate-power-mode.js

引用js文件

在blog/themes/next/layout/_custom/head.swig中添加以下内容： 

1
2
3
4
5
6
7
8
9
<!-- 打字礼花及震动特效 -->

<div id="append_parent"></div><div id="ajaxwaitid"></div>
<script type="text/javascript" src="/lib/activate-power-mode/activate-power-mode.js"></script>
<script>
	POWERMODE.colorful = true;
	POWERMODE.shake = false;
	document.body.addEventListener('input',POWERMODE);
</script>

进阶配置

其中POWERMODE.shake是震动效果，修改为true可开启，POWERMODE.colorful是粒子颜色，修改为false可配置为单色。

修改博客背景

将背景图片放置在blog/themes/next/source/images/background.jpg

在blog/themes/next/source/css/_custom/custom.styl中添加以下内容： 

1
2
3
4
5
6
7
8
9
10
// background

body {
  background-image:url(../images/background.jpg);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:cover;
}

进阶教程

若想要博客背景与浏览器大小同步缩放，可以将上述代码修改为：

1
2
3
4
5
6
7
8
9
10
// background

body {
  background-image:url(../images/background.png);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:100% 100%;
}

博客内容透明化

NexT主题的博客文章均是不透明的，这样读者就不能好好欣赏背景图片了，下面的方法可以使博客内容透明化：

在blog/themes/next/source/css/_custom/custom.styl中添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// page-opacity

.content-wrap {
  opacity: 0.85;
}

.sidebar {
  opacity: 0.85;
}

.header-inner {
  background: rgba(255,255,255,0.85);
}

.popup {
  opacity: 0.9;
}

其中content-wrap是文章内容的透明度设置，sidebar是侧边框的透明度设置，header-inner是菜单栏的透明度设置，popup是搜索框（local-search）的透明度设置。

可以修改上面的数字来自定义透明度。

注意其中header-inner不能使用opacity进行配置。
因为header-inner包含header.swig中的所有内容。
若使用opacity进行配置，子结点会出很多问题。

修改local-search加载图标

在blog/themes/next/layout/_third-party/search/localsearch.swig中寻找：

1
<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>

将其修改为：

1
<i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw margin-bottom"></i>

更多选择可以参考这里。

使用NexT主题v7.3.0版本的用户请在blog/themes/next/source/js/local-search.js中执行以上修改。

修改Markdown分割线样式

Markdown自带的分割线比较难看，现在我们将其修改为简洁的分割线。

效果

修改样式

在blog/themes/next/source/css/_common/scaffolding/base.styl中寻找：

1
2
3
4
5
6
7
background-image: repeating-linear-gradient(
  -45deg,
  white,
  white 4px,
  transparent 4px,
  transparent 8px
);

将这一段引用掉即可。

评分系统设置

在blog/themes/next/_config.yml中寻找：

1
2
3
4
rating:
  enable: false
  id:     #<app_id>
  color:  fc6423

在这里获得id，即为左上角的数字：

将enable改为true，将id填入。

然后在侧栏找到rating的setting：

这里可以作各种设置。
推荐将投票方式改为ip投票，因为这个平台提供的账号投票基本不面向国内。

live2d看板娘

见这里

Hitokoto一言

见这里

相关文章
姥爷们赏瓶冰阔落吧~