Hexo主题 —— NexT优化

Hexo主题 —— NexT优化

首先,必须要说明的是,关于NexT主题的所有设置与功能都能在《NexT主题官方文档》中找到。本文只是记录下我采用的设置。


主题配置文件_config.yaml

Hexo安装根目录下的_config.yaml文件负责的是整个Hexo的属性配置,而主题目录下也有/theme/_config.yaml文件,负责单个主题的属性配置,NexT主题的配置文件就在Hexo/themes/next/目录下。


Scheme主题选择

theme/_config.yaml文件中的scheme目录下选择自己喜欢的主题即可。
Muse 是NexT的默认版本,黑白主调,大量留白。
Muse

Mist 是NexT的紧凑版本,整洁有序。
Mist

Pisces 是双栏设计,头像、签名等被移到左边单独作为一栏,个人最喜欢。
Pisces


文内链接形式

未修改时,文内链接颜色和普通文本没有区别:
link origin
为了突出区别性,我们在themes/next/source/css/_common/components/post/post.styl文件中添加下列的代码:

1
2
3
4
5
6
7
8
9
10
.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;
}
}

修改后的文内链接是蓝色,鼠标放上去会变为红色:
link new


菜单设置

theme/_config.yaml文件中的menu目录下:home属性代表主页,about属性代表个人信息,tags属性代表标签,categories属性代表目录,archives属性代表归档…… 通过修改对应的属性,可以修改页面的展示信息,即左侧的菜单栏:
menu


网站图标设置

将图片(png或jpg格式,不是favicon.ico)放在themes/next/source/images里,然后修改主题配置文件theme/_config.yamlfavicon属性,将smallmediumapple_touch_icon都配置为/images/imgPath就可以了,其他字段都注释掉。

1
2
3
4
favicon:
small: /images/db3.png
medium: /images/db3.png
apple_touch_icon: /images/db3.png


启用RSS订阅博客更新

什么是RSS?
RSS(Really Simple Syndication,简易信息聚合)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者。发布一个RSS文件后,这个RSS Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。
RSS目前广泛用于网上新闻频道,blog和wiki,主要的版本有0.91, 1.0, 2.0。使用RSS订阅能更快地获取信息,网站提供RSS输出,有利于让用户获取网站内容的最新更新。网络用户可以在客户端借助于支持RSS的聚合工具软件,在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。

  1. 安装hexo-generator-feed插件
    npm install hexo-generator-feed --save

  2. 在站点的配置文件_config.yaml文件中配置RSS feed
    _config.yaml文件末尾添加:

1
2
3
4
5
6
7
feed:  
type: atom
path: atom.xml
limit: 0

plugins:
- hexo-generator-feed

  1. 修改主题配置文件theme/_config.yaml的rss属性为:rss: /atom.xml

  2. 使用RSS

运行hexo g,如果提示INFO Generated: atom.xml,且在Hexo/public/目录下生成了atom.xml文件,则说明RSS设置成功。
运行hexo d,如果服务器对应的目录hexo下也有了atom.xml文件,则说明部署也成功了。
这样你的博客就可以被别人订阅了,点击主页的RSS按钮,会显示如下页面:
RSS
iOS可以在App Store搜索SSReader,下载后配置www.dragonbaby308.com/atom.xml即可。


打赏

theme/_config.yaml文件中的Reward(Donate)目录下,传入打赏图片,可以展示打赏信息:

1
2
3
4
5
6
7
8
# Reward (Donate)
reward_settings:
enable: true
animation: true
comment: 没办法,要恰饭的嘛
reward:
wechatpay: https://tva1.sinaimg.cn/large/007rAy9hgy1g3b8vqnvnrj30u014q0w6.jpg
alipay: https://tva1.sinaimg.cn/large/007rAy9hgy1g3b8wjrpzgj30p011iaco.jpg


首页文章折叠

theme/_config.yaml文件auto_excerpt目录下的enable改为true即可。
auto_excerpt


回到顶部按钮显示百分比

1
2
3
4
5
6
7
back2top:
# 回到顶部按钮
enable: true
# true,按钮显示在侧边栏;false,按钮显示在右下角
sidebar: false
# 按钮上显示百分比
scrollpercent: true

如图:
back2top


文章添加阴影

未添加阴影时,文章之间的分隔不是很明显:
no shadow
themes/next/source/css/_custom/custom.styl文件中添加如下代码:

1
2
3
4
5
6
7
8
9
// Custom styles.
// 为文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

效果如图:
shadow


头像

修改theme/_config.yaml文件下的avatar属性,可以使用本地图片,或是在avatar: url:属性中传入网络图片。


社交链接

修改theme/_config.yaml文件下的social属性,按照格式设置即可:

1
2
3
social:
GitHub: https://github.com/DragonBaby308 || github
Bilibili: https://space.bilibili.com/24837083 || bilibili


友情链接

修改theme/_config.yaml文件下的links属性,按照格式设置即可:

1
2
links:
让我帮你百度一下: http://lab.mkblog.cn/lmbtfy/


Local Search本地搜索

  1. 首先,安装hexo-generator-searchdb,在根目录下执行:
    npm install -g hexo-generator-searchdb --save

  2. 在站点配置文件_config.yaml中添加如下内容:

    1
    2
    3
    4
    5
    search:
    path: ./public/search.xml
    field: post
    format: html
    limit: 10000

  3. 将主题配置文件theme/_config.yaml文件中local_search标签下的enable改为true。 Local Search


不蒜子统计UV(访客数)和PV(访问量)

将主题配置文件theme/_config.yaml文件中busuanzi_count标签下的enable改为true。配置如下:

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
# 访客数
site_uv: true
# 访问量
site_pv: true
# 文章阅读次数
page_pv: true


动态背景

首先将动态背景所需要依赖的js下载到themes/next/source/lib目录下,然后将主题配置文件theme/_config.yaml文件中canvas标签下的对应特效改为true即可启用。 如,我需要使用Canvas-nest动画,则需要首先git clone https://github.com/theme-next/theme-next-canvas-nest Hexo/themes/next/source/lib/canvas-nest,将js下载到本地,然后再修改主题配置文件theme/_config.yaml文件中canvas_nest标签下的enable为true。

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
# canvas-nest  鼠标静止不动,会有线条聚集
git clone https://github.com/theme-next/theme-next-canvas-nest Hexo/themes/next/source/lib/canvas-next

# three_waves 波浪
# canvas_lines
# canvas_sphere
git clone https://github.com/theme-next/theme-next-three Hexo/themes/next/source/lib/next-three

# canvas-ribbon 彩虹效果,只支持Pisces
git clone https://github.com/theme-next/theme-next-canvas-ribbon Hexo/themes/next/source/lib/canvas-ribbon

canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines

three_waves: true
canvas_lines: true
canvas_sphere: true

canvas_ribbon:
enable: true
size: 300
alpha: 0.6
zIndex: -1


加载条效果

首先通过git clone https://github.com/theme-next/theme-next-pace Hexo/themes/next/source/lib/page命令,将加载条所需要依赖的js下载到Hexo/themes/next/source/lib目录下,然后将主题配置文件theme/_config.yaml文件中pace标签改为true,在pace_theme中选用对应主题即可启用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pace: true
# pace_theme: pace-theme-big-counter 右上角百分比数字
# pace_theme: pace-theme-bounce 右上角弹球
# pace_theme: pace-theme-barber-shop 理发店蓝白加载条,从左滑到右
# pace_theme: pace-theme-center-atom 屏幕正中,原子样式的圆形加载条
# pace_theme: pace-theme-center-circle 屏幕正中,圆形转圈加载条
# pace_theme: pace-theme-center-radar 屏幕正中,雷达形状
# pace_theme: pace-theme-center-simple 屏幕正中,进度条
# 右上角转圈
pace_theme: pace-theme-corner-indicator
# pace_theme: pace-theme-fill-left 从左到右
# pace_theme: pace-theme-flash 右上角有一个小圈圈,其他特效没看出来
# pace_theme: pace-theme-loading-bar 屏幕正中间进度条
# pace_theme: pace-theme-mac-osx 斑马纹?
# pace_theme: pace-theme-minimal 啥也没有


本文结束标记

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>

接着在themes/next/layout/_macro/post.swig文件中,post-body后,添加如下代码:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

最后在theme/_config.yaml文件末尾添加:

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

效果如图:
pageend


版权声明

  1. theme/next/layout/_macro/目录下添加文件my-copyright.swig

    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
    {% if page.copyright %}
    <div class="my_post_copyright">
    <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

    <!-- JSsweetalert 可修改路径 -->
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
    </p>
    <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
    </div>
    <script>
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
    clipboard.on('success', function(){
    swal({
    title: "",
    text: '复制成功',
    icon: "success",
    showConfirmButton: true
    });
    });
    });
    </script>
    {% endif %}

  2. theme/next/source/css/_common/components/post/目录下添加文件my-post-copyright.styl

    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
    39
    40
    41
    42
    43
    44
    45
    .my_post_copyright {
    width: 85%;
    max-width: 45em;
    margin: 2.8em auto 0;
    padding: 0.5em 1.0em;
    border: 1px solid #d3d3d3;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #b5b5b5;
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #a3d2a3;
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }

  3. 修改theme/next/layout/_macro/post.swig文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {#####################}
    {### END POST BODY ###}
    {#####################}

    # 添加下面这段
    {% if not is_index %}
    {% include 'my-copyright.swig' %}
    {% endif %}

    {% if theme.wechat_subscriber.enable and not is_index %}
    {% include '../_partials/post/wechat-subscriber.swig' %}
    {% endif %}

  4. 修改theme/next/source/css/_common/components/post/post.styl文件,在最后一行新增:@import "my-post-copyright";

  5. 修改Hexo/scaffolds/post.md,默认显示版权信息

    1
    2
    3
    4
    5
    6
    7
    ---
    title: {{ title }}
    date: {{ date }}
    tags:
    categories:
    copyright:
    ---

效果如图:
copyright


Livere / Valine评论区

首先,访问Livere官网,注册→登录→安装,会得到一个data-id
data-iddata-id复制粘贴到theme/_config.yaml文件的livere_uid属性即可。效果如图:
Livere

加入Livere评论区成功后,不要忘了访问https://www.livere.com/insight/communite修改评论区样式、设置邮件提醒、配置登陆方式,别像我一样笨比 - - ,一直没有配置邮件提醒,都不知道有小伙伴访问了博客,留下了疑问……

Livere有一个坑爹的地方在于,你每次修改帖子后,原本的评论就没了……而且它的显示很有问题,很多时候可以在后台看到评论,但是页面看不到。
所以我投靠了Valine,不过Valine也有坑,如果你不交钱,它可能会停你的服务器,这样你就没法收到评论通知邮件了。而且评论通知的功能还不是很稳定


可以参考https://www.nhtzj.com/3315416634/,对于如何配置Valine-Admin、如何通过crond定时任务防止停机,都写得很详细。

  • 访问LeanCloud官网注册一个账号,创建应用,然后在设置 -> 应用Keys获取App IDApp Key,然后在主题配置文件中配置:

1
2
3
4
valine:
enable: true
app_id: xxx
app_key: xxx

  • 最后要记得在LeanCloud -> 设置 -> 安全中心 -> web安全域名中将自己的域名加进去

QQ邮箱设置SMTP授权码

Valine-Admin设置站长邮件通知时踩了一个坑:更改环境变量均需要重启LeanCloud容器后才生效,注意一下!


Live2d 看板娘

  1. 安装hexo-helper-live2d

在博客根目录下,执行npm install hexo-helper-live2d --save

  1. 修改站点配置文件或主题配置文件

官方已有的看板娘名称请点这里查看,部分看板娘的模型预览请看CSDN某博客
我修改的是站点配置文件Hexo/_config.yaml,添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
model:
# 填写你所需要的看板娘名称
use: live2d-widget-model-haruto
display:
position: right
width: 150
height: 300
mobile:
show: true

  1. 通过npm安装依赖的看板娘文件

npm install live2d-widget-model-name,其中name是你选择的官方看板娘的名字,如我选择的是haruto,则为npm install live2d-widget-model-haruto
重新运行hexo clean && hexo d -g则可在主页看到了。
haruto


fancybox:图片显示

1
2
cd Hexo/themes/next/source/lib
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

next/_config.yml中搜索fancybox,将false改为true

fb


添加(随机)背景图片

1
2
3
body {
background-image:url(https://dragonbaby308.oss-cn-hangzhou.aliyuncs.com/hexo/sakura.jpg);
}

  • 如果希望每次访问站点时显示随机背景图片的话,可以将上述代码改为:

1
2
3
4
5
6
7
//为文章添加随机背景图片
body {
background-image:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}


友情链接

抄袭自https://blog.enjoytoshare.club/

  1. hexo new page links,会生成source/links目录
  2. themes/_config.yml中的menu属性下添加:

1
2
# links是目录名,/links/是目录名,link是fontawesome的图标名称
links: /links/ || link

  1. themes/languages/zh-CN中的menu属性下添加:

1
2
# 改属性用于翻译,将links翻译成友链
links: 友链

  1. 修改source/links/index.md

1
2
3
4
5
6
7
8
9
---
title: 友情链接
date: 2019-09-27 20:23:59
author: DragonBaby308
type: links
comment: false
---

欢迎交换友链!

  1. /theme/next/layout目录下,新建links.swig

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
{% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}

<div id="links">
<style>
.links-content{
margin-top:1rem;
}

.link-navigation::after {
content: " ";
display: block;
clear: both;
}

.card {
width: 300px;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;

}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 236px;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="links-content">
<div class="link-navigation">

{% for link in theme.mylinks %}

<div class="card">
<img class="ava" src="{{ link.avatar }}"/>
<div class="card-header">
<div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div>
<div class="info">{{ link.info }}</div>
</div>
</div>

{% endfor %}

</div>
{{ page.content }}
</div>
</div>

{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}

  1. 修改/themes/next/layout/page.swig

1
2
3
4
5
6
7
# 找到:#}{{ __('title.schedule') + page_title_suffix }}{# 这一段代码,在后面加
#}{% elif page.type === 'links' and not page.title %}{#
#}{{ __('title.links') + page_title_suffix }}{#

# 找到:{% include 'schedule.swig' %} 这一段代码,在后面加
{% elif page.type === 'links' %}
{% include 'links.swig' %}

  1. /themes/_config.yml中添加友链:

1
2
3
4
5
6
7
8
9
mylinks:
- nickname: DragonBaby's Blog #友链名称
avatar: https://dragonbaby308.oss-cn-hangzhou.aliyuncs.com/hexo/db3.png #友链头像
site: http://www.dragonbaby308.com/ #友链地址
info: 苏宁不破产不改网名。 #友链说明
- nickname: 青果先生 #友链名称
avatar: https://raw.githubusercontent.com/wugenqiang/picGo/master/pictures/003.jpg #友链头像
site: https://blog.enjoytoshare.club #友链地址
info: Sometimes your whole life boils down to one insame move. #友链说明


在线联系:DaoVoice

抄袭自https://blog.enjoytoshare.club/

  1. http://www.daovoice.io/注册,如果没有邀请码,可以填我的:b3d33e2b。注册成功后记住自己的appid

如果想及时回复可以绑定微信:

  1. themes/next/layout/_partials/head/head.swig中找个位置添加:

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}

  1. themes/_config.yml中添加:

1
2
3
4

# DaoVoice
daovoice: true
daovoice_app_id: #你的app_id

  1. 接下来你留言,我微信就能收到啦


修改正文区域的宽度

抄袭自https://blog.enjoytoshare.club/

themes/next/source/_variables/custom.styl中添加:

1
2
3
4
// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 1050px


改图标

抄袭自https://blog.enjoytoshare.club/
#

themes/next/layout/_macro/post.swig中搜索rel="tag">,将#修改为<i class="fa fa-envira"></i>
效果如下图:


去掉顶部黑线

抄袭自https://blog.enjoytoshare.club/

  • themes\next\source\css\_custom\custom.styl中添加:

1
2
//去除顶部黑线
.headband {display:none;}


点击头像返回主页

抄袭自https://blog.enjoytoshare.club/

  • themes\next\layout\_macro\sidebar.swig修改:

1
2
3
4
5
6
7
# 找到img class="site-author-image"标签,在其外部添加<a href="/"></a>

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


3-D标签云

抄袭自https://blog.enjoytoshare.club/

  • npm install hexo-tag-cloud@^2.* --save
  • next/layout/_macro/sidebar.swig修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 找到aside标签,在上方添加:

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width=100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}

# </div>
# </aside>

  • 效果如图:

设置文章封面图片

抄袭自https://blog.enjoytoshare.club/

  • \themes\next\layout\_macro\post.swig中加以下代码:

1
2
3
4
5
6
7
8
9
# {% if is_index %}标签后

{% if post.summary_img %}
<div class="out-img-topic">
<img src={{ post.summary_img }} class="img-topic">
</div>
{% endif %}

# {% if post.description and theme.excerpt_description %}标签前

  • 在帖子头部加summary_img: url,即可显示文章封面图片


目录全展开

  • 默认情况NexT主题的目录是不展开的:

  • next/_config.yml中搜索toc,将expand_all属性从false改为true

  • numbertrue改为false,可以去掉默认编号,使用自己设置的编号。

会造成点击目录无法跳转、目录中使用链接无法显示等一系列问题,不好用。- -


文章置顶

https://blog.csdn.net/qwerty200696/article/details/79010629


gulp:静态资源压缩,加速部署

Hexo魔改到一定程度后,加上帖子多了,感觉每次部署都得几分钟,打开网页也变慢了,所以通过gulp对静态资源进行压缩。

  1. 通过npm安装gulp

1
2
npm install gulp -g --unsafe-perm
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

  1. Hexo根目录下新建gulpfile.js文件:

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
39
40
41
42
43
44
45
46
47
48
49
50
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

// 压缩html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});


// 压缩css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
return gulp.src('./public/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin(
[imagemin.gifsicle({'optimizationLevel': 3}),
imagemin.jpegtran({'progressive': true}),
imagemin.optipng({'optimizationLevel': 7}),
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', gulp.parallel(
'minify-html','minify-css','minify-js','minify-images'
));

  1. 以后部署的时候通过hexo clean && hexo g & gulp & hexo d就会根据gulpfile.js中的配置,对/public目录中的静态资源文件进行压缩。

prefetch脚本加速

抄袭自https://i.kurumi.ink/2019/06/16/7/

prefetch技术是一项预加载技术,当用户有意向访问某个页面之前,浏览器首先对此页面进行预加载,当用户真正点击链接后,会从预加载的缓存中直接读取页面内容,缩短页面的加载时间。

  • 访问https://instant.page得到一段JS脚本,这段脚本会根据用户鼠标在链接上的停留时间进行判断,当达到65ms,用户有一半的概率会打开此链接,instant.page会对此页面进行预加载:

1
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

  • 将这段JS代码放在/theme/next/layout/_layout.swig</body>之前。
  • 如果觉得访问国外的脚本速度慢,可以存储在本地或者CDN上进行引用,我使用的是别人CDN上的脚本:

1
<script src="https://cdn.zrahh.com/js/instantclick-1.2.2.js" type="module"></script>


SEO:搜索引擎优化(Search Engine Optimazation)

  1. 安装插件,用于自动生成站点地图,其中sitemap.xml用于给Google爬虫爬取,baidusitemap.xml用于给Baidu爬虫爬取:

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

  1. 在站点配置文件Hexo/_config.yml中,添加如下配置:

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

  1. Hexo/source目录下创建robots.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
User-agent: *
Allow: /
Allow: /home/
Allow: /about/
Allow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Disallow: /categories/

Sitemap: http://www.dragonbaby308.com/sitemap.xml
Sitemap: http://www.dragonbaby308.com/baidusitemap.xml

  1. 修改主题配置文件/theme/_config.yml,开启SEO,并添加关键词:

1
2
3
seo: true

keywords: "DragonBaby308"

  1. 验证网站(以Baidu为例,Google同理):登陆百度站长平台用户中心 -> 站点管理 -> 添加网站,我选择的是文件验证,下载验证文件放在/source目录下:

  1. 做完这些后,记得hexo clean && hexo d -g部署一波,保证现在自己在线的网站有sitemap.xmlbaidusitemap.xmlrobots.txt以及站点验证文件,顺便完成站点认证。
  2. 然后再次登陆谷歌搜索控制台百度站长平台,在数据引入 -> 链接提交 -> sitemap中提交自己的sitemap.xml/baidusitemap.xml,比如我在百度的sitemap地址就是:www.dragonbaby308.com/baidusitemap.xml

-------------本文结束感谢您的阅读-------------

本文标题:Hexo主题 —— NexT优化

文章作者:DragonBaby308

发布时间:2019年05月23日 - 11:56

最后更新:2020年01月15日 - 23:12

原始链接:http://www.dragonbaby308.com/hexo-theme-next/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

急事可以使用右下角的DaoVoice,我绑定了微信会立即回复,否则还是推荐Valine留言喔( ఠൠఠ )ノ
0%