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

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

说明

声明

本教程面向Hexo,NexT主题v6.x~7.x进行优化。
其他主题或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 #说明文件
  • 简单了解css,swig语法与js语法。

准备工作

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: 2.1.3
jquery: https://code.jquery.com/jquery-2.1.3.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-2.1.3.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>

更多选择可以参考这里

修改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看板娘

这里

本篇文章有用吗?有用还不快点击!
0%