Hexo主题Next-优化整理

发表于 | 更新于: | 分类于 | 本文总阅读量 次
字数统计: 10.3k | 阅读时长 ≈ 48
优化Hexo主题Next

图片还没有哦

目录解析

默认目录结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json
deploy：执行hexo deploy命令部署到GitHub上的内容目录
public：执行hexo generate命令，输出的静态网页内容目录
scaffolds：layout模板文件目录，其中的md文件可以添加编辑
scripts：扩展脚本目录，这里可以自定义一些javascript脚本
source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
drafts：草稿文章
posts：发布文章
themes：主题文件目录
_config.yml：全局配置文件，大多数的设置都在这里
package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

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
├── .github            #git信息
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-Hans.yml      #简体中文
|   └── zh-tw.yml      #繁体中文
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _custom        #可以自己修改的模板，覆盖原有模板
|   |   ├── _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         #图片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道

站点配置文件

基础设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
title: TJL的博客
subtitle:
description: 学习笔记、知识笔记
keywords:
author: 游戏人生
language: zh-Hans
timezone:

title: 博客名字
subtitle: 副标题(有的主题会显示有的不会)
description: 主要用于SEO，建议包含网站关键词。
keywords: 关键词
author: 作者名字
language: 语言会对应的解析正在应用的主题中的languages文件夹下的不同语言文件。所以这里的名称要和languages文件夹下的语言文件名称一致
timezone: 时区(可不管) 地区/城市(例：亚洲/北京 用英文)

链接设置

1
2
3
4
5
6
7
8
9
url: http://www.tjl-myblog.cn
root: /
permalink: :title.html
permalink_defaults:

"url"：填写自己的站点链接。
"root"：设置根目录的位置。如果你的网站存放在子目录中，例如 http://yoursite.com/tjl-blog，则应该将你的 url 设为http://yoursite.com/tjl-blog 并把 root 设为 /tjl-blog/。
"permalink"：生成的链接的格式。可以改成自己喜欢的格式。规则也比较简单，标签前面要加英文冒号。
"permalink_defaults":  生成链接部分默认值

目录设置

1
2
3
4
5
6
7
8
9
10
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

目录不动即可

书写相关配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
    enable: true
    line_number: true
    auto_detect: false
    tab_replace:

"new_post_name"：新的博文的文件名
"default_layout:" 默认布局
"external_link：" 在新选项卡中打开外部链接
"filename_case: 0" #把文件名称转换为 (1) 小写或 (2) 大写
"render_drafts: false" 是否显示草稿
"post_asset_folder: false" #是否启动资源文件夹
"relative_link: false" #把链接改为与根目录的相对位址
"future: true " 不知道干什么的 默认即可
"highlight:" #代码块的设置，Hexo自带的代码高亮插件

分类标签设置

1
2
3
4
5
6
7
default_category: uncategorized
category_map:
tag_map:

"default_category"：如果没有设置分类，默认的分类选择。
"category_map"：用于映射分类的别名。
"tag_map"：用法和分类别名是一样

主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
theme: next 这里使用的是next主题 当然也有其他主题

theme 选择什么主题 next有三种样式在主题配置里可修改 `站点根目录/themes/next/_config.yml` 这里我使用的是Pisces

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes  # NexT 主题提供四种布局
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

#表示注释的意思

部署配置

1
2
3
4
5
6
7
8
9
10
11
12
deploy:
- type: git
repository: git@github.com:tangjialang/tangjialang.github.io.git
branch: master
- type: baidu_url_submitter
repo:

"deploy"：部署方式
"repository"：远程仓库
"branch"：分支

两个部署方式 有一个是推送百度链接的 后面文章会讲到

实用性优化

浏览页面的时候显示当前浏览进度

打开themes/next/_config.yml搜索关键字scrollpercent把false对划线true

1
2
# Scroll percent label in b2t button
scrollpercent: true

如果想把top按钮放在侧边栏，打开themes/next/_config.yml搜索关键字b2t，把false对划线true

1
2
3
4
5
# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true

添加标签、分类等页面

修改主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: / #首页
archives: /archives/ #档案
tags: /tags/ #标签
categories: /categories/ #分类
about: /about/ #关于
#sitemap: /sitemap.xml #站点地图
#commonweal: /404/ #公益

可根据自己的喜欢来设置显示哪一些 第一次设置需要新建一些页面

1
2
3
hexo new page tags 新建标签页面
hexo new page categories 新建分类页面
hexo new page about 新建关于页面

新建之后要对站点根目录/source/categories和站点根目录/source/tags的index.md标签和分类页面进行进行一些修改 不修改的话 后面文章在生成静态网页的时候标签和分类会出现问题 看不到的情况

1
2
分类页面 类型要改为`type: "categories"`
标签页面 类型要改为`type: 'tags'`

添加RSS

什么是RSS

首先安装 hexo-generator-feed插件。
再到站点根目录右键打开Git Bash，安装插件：$ npm install --save hexo-generator-feed

修改站点配置文件，在最后添加以下代码：

1
2
3
4
5
6
feed: # RSS订阅插件
type: atom
path: atom.xml
limit: 0

plugins: hexo-generate-feed

修改主题配置文件如下：

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

实现效果：图片消失啦

设置网站icon

主题配置文件中第一行代码就是网站icon设置，这里需要找到你喜欢的logo把它制作成ico格式然后改名favicon.ico，放到/themes/next/source/images下面即可。

1
2
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico # 网站logo

打赏

增加打赏配置

准备支付宝二维码alipay.jpg和微信二维码wechatpay.jpg
把两张图片放入themes/next/source/images中

修改next主题配置_config.yml

1
2
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.png

修复煽动bug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 注释文字闪动函数

    #wechat:hover p{

    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
    }

    #alipay:hover p{

    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
    }
*/

修改 next/source/css/_common/components/post/post-reward.styl

1
注释:wechat:hover和alipay:hover

博客文章宽度优化

Next.Mist 宽度优化

打开 \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.Pisces宽度优化

Next.Pisces宽度优化是在Next.Mist 宽度优化设置的前提下进行改动的
打开 \themes\next\source\css\_schemes\Pisces\_layout.styl 文件，将第 4 行的 width改为1080px ，修改后如下：

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

NexT.Gemini宽度优化

6.0 版新版 NexT.Gemini主题，可以在主题配置文件中设置max_content_width: 65%即可设置宽度。

在\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%

添加侧边栏社交链接

修改主题配置文件的社交链接和对应图标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
social:  # 添加你的社交账号链接
    GitHub: https://github.com/tangjialang || github
    E-Mail: mailto:1522848509t@gmail.com || envelope
    Google: https://plus.google.com/1522848509t || google
    YouTube: https://youtube.com/yourname || youtube
    Twitter: https://twitter.com/yourname || twitter
    CSDN: https://blog.csdn.net/weixin || superpowers
    简书: https://www.jianshu.com/u/89024bda3356 || book
social_icons: # 社交账号图标
    enable: true
    icons_only: false
    transition: false
    GitHub: github
    Twitter: twitter
    CSDN: superpowers
    简书: book
    微博: weibo
    知乎: zhihu

图标库
在库里面找到复制名字添加到后面即可
效果：图片消失啦

添加侧边栏友情链接

修改主题配置文件：

1
2
3
4
5
6
7
8
9
10
links_icon: link #图标库图标
links_title: 推荐阅读 #标题
links_layout: block #布局方式
links:
    Web前端导航: http://www.alloyteam.com/nav/
    创造狮导航: http://www.chuangzaoshi.com/code
    前端书籍资料: http://www.36zhen.com/t?id=3448
    掘金酱: http://e.xitu.io/
    V2EX: https://www.v2ex.com/
    印记中文: https://www.v2ex.com/

效果：图片消失啦

底部显示建站时间和图标修改

修改主题配置文件：

1
2
3
4
5
# Specify the date when the site was setup
since: 2018 # 建站年份

# icon between year and author @Footer
icon: heart 图标库图标

效果：图片消失啦

设置第三方JS库

在主题配置文件中设定成合适的 CDN 地址，此特性可以加速静态资源（JavaScript 第三方库）的加载

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
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
#    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 2.1.3
jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js

# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js
fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css

# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js

# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js

# Internal version: 4.6.2
# See: http://fontawesome.io/
fontawesome: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

# Internal version: 1
# https://www.algolia.com
algolia_instant_js:
algolia_instant_css:

# Internal version: 1.0.2
# See: https://github.com/HubSpot/pace
# Or use direct links below:
# pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
# pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

# Internal version: 1.0.0
# https://github.com/hustcc/canvas-nest.js
canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js

追加评论功能

NexT支持的第三方的评论系统有很多，不过不少已经关闭不再可用了，而且对于国内来说比较友好的现在应该就只有来必力，当然喜欢折腾的小伙伴可以尝试一下其他的或者自建评论系统。最简单可行的方案，也就是来必力。
获取来必力id：

登陆 来必力 注册获取。（这里要注意，这个韩国的系统注册啥的真的太慢了，所以要记住不要耐不住关闭页面或者狂刷新，耐心等待就好。闲慢的朋友可以自行备梯子哦 后面会更新相关梯子的教程）
注册后点击导航上边的安装，选择免费的city版本：点击现在安装后填入网站的一些信息就可以获取到安装代码，框中的就是你的来必力id：
图片消失啦
复制上边的id，在主题配置文件里面搜索livere_uid，在后面添加来必力id即可：

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: 你的来必力id

另外可以点击用户头像进入管理界面个性化你的评论系统
效果：图片消失啦

这里添加了之后要注意每篇文章的开头记得添加comments： 设置为true 表示开启评论功能 后面会讲到怎么利用 Hexo new 命令快捷创建文章格式

文章字数统计 阅读时长 文章访问量

在主题配置文件中，搜索wordcount，设置为下面这样就可以了

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
    item_text: true
    wordcount: true
    min2read: true
    totalcount: false #站内总字数 如果这里开启 下面的全站字数统计就不需要了
    separated_meta: true

再打开\themes\next\layout\_macro\post.swig文件，在leancloud-visitors-count后面位置添加一个分割符（空格即可）

再把不蒜子统计功能打开 主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 不蒜子统计功能
busuanzi_count:
# count values only if the other configs are false
enable: true #不蒜子统计总开关

# custom uv span for the whole site
# 效果：本站访客数12345人次
site_uv: false #上面已经开启所以不用设置为true
site_uv_header: <i class="fa fa-user"></i> 本站访客数
site_uv_footer: 12345次

# custom pv span for the whole site
# 效果：本站总访问量12345次（一般不开启这个）
site_pv: false #上面已经开启所以不用设置为true
site_pv_header: <i class="fa fa-eye"></i> 本站总访问量
site_pv_footer: 12345次

# custom pv span for one page only
# 效果：本文总阅读量12345次
page_pv: true #阅读次数开关
page_pv_header: <i class="fa fa-file-o"></i> 本文总阅读量
page_pv_footer: 12345次

统计站点访问量 字数统计

找到站点的themes/next/layout/_partials目录下的footer.swig文件。添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 新增访客统计代码 -->
<div class="busuanzi-count">
    <script async="" src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="site-uv">
    <i class="fa fa-user"></i>
    访问用户： <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人
    </span>
    <div class="powered-by"></div>
    <span class="site-uv">
    <i class="fa fa-eye"></i>
    访问次数： <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次
    </span>
    <!-- 博客字数统计 -->
    <span class="site-pv">
    <i class="fa fa-pencil"></i>
    博客全站共： <span class="post-count">{{ totalcount(site) }}</span> 字
    </span>
</div>
<!-- 新增访客统计代码 END-->

如果增加了 ‘ 新增访客统计代码’这个可以下面一步忽略 如果都设置的话会出现两个统计字数的

在/themes/next/layout/_partials/footer.swig文件endif %}前加上下面代码可以实现在站点底部统计全站字数：

1
2
3
<div class="theme-info">
<span class="post-count">Total Words:{{ totalcount(site) }}</span>
</div>

如果无法显示可能是hexo-wordcount插件没有安装，git bash在网站根目录安装一下就可以：$ npm install hexo-wordcount --save

Hexo博客解决不蒜子统计无法显示问题

增加版权信息

在目录themes/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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<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 %}

在目录themes/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;
}

修改themes/next/layout/_macro/post.swig在代码:

1
2
3
4
5
{% if theme.wechat_subscriber.enabled and not is_index %}
  <div>
    {% include 'wechat-subscriber.swig' %}
  </div>
{% endif %}

前面添加代码：

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

修改themes/next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

1
@import "my-post-copyright"

最后到站点根目录/scaffolds/post.md，在两个—中间增加一行(为的就是使用Hexo new 命令创建的文章自带版权模板)：

1
copyright: true

之后的每一篇文章都会自己加上版权信息，之前的文章也可以通过在文章对应的md文件头部加上以上代码添加版权信息

添加分享文章功能

这里我使用的是AddThis(因为他的样式让我觉得很棒 这里注册要使用梯子哦)
注册之后找到这里
图片消失啦
复制uid
在主题配置文件中搜索add_this_id，去掉前面的注释，添加上你的AddThis ID就可以了。

1
2
3
4
# Share  分享
#jiathis: true
# Warning: JiaThis does not support https. 博主实测支持https
add_this_id: 你的uid

样式配置图片消失啦
图片消失啦
然后就可以进行图标分享配置了 配置完之后要点激活工具就可以了

各种不同的样式看你们习惯啦 如果觉得不好的也可以使用其他分享工具 也比较多 这里就不讲解了 有兴趣的朋友可以百度试试哦

添加文章评分功能

通过widgetpack来给网站每篇文章添加评分系统，效果如下：

首先注册账号，添加新站点，填入网站名称和域名地址，点击添加：
图片消失啦

获取id：
图片消失啦
复制下来到主题配置文件中搜索widgetpack添加即可:

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
enable: true
id:  你的id
color:  fc6423

这里建议设置为按ip地址记录评分，比较方便(不用登陆即可评分 相当于ip替代了登陆这个工作)：
图片消失啦
图片消失啦

文章排序优先级设置

修改hero-generator-index插件，把文件node_modules/hexo-generator-index/lib/generator.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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
    __index: true
    }
});
};

在\scaffolds\post.md头部—中添加以下代码：

1
top: number

以后新建文章就可以给文章的top赋值，number越大优先级越高。

已经写好的文章在对应的md文件头部添加top：number即可

置顶图标

用上面的方法给文章置顶之后再给文章添加 sticky: true 即可实现置顶图标

修改图标大小 \themes\next\source\css\_custom\custom.styl 中添加一个css 既可设置他的大小 也可以更改颜色等信息

1
2
3
.post-sticky-flag{ //置顶图标的大小css
        font-size: 20px
}

添加站内搜索功能

这里使用的是Algolia
前往Algolia注册页面，注册一个新账户。可以使用GitHub或者Google账户直接登录，注册后的14天内拥有所有功能（包括收费类别的）。之后若未续费会自动降级为免费账户，免费账户总共有10,000条记录，每月有100,000的可以操作数。图片消失啦注册完成后，创建一个新的Index，这个Index将在后面使用。（有新手引导）

Index创建完成后，此时这个Index里未包含任何数据。接下来需要安装Hexo Algolia扩展，这个扩展的功能是搜集站点的内容并通过API发送给Algolia。前往站点根目录，执行命令安装：npm install --save hexo-algolia

找到新建的Index对应的Key复制下面的App ID和API Key
图片消失啦
同时修改权限:
在站点配置文件（注意是站点配置文件）末尾，新增配置代码：

1
2
3
4
5
6
7
#添加搜索
algolia:
    applicationID:
    apiKey:
    adminApiKey:
    indexName: #你的指数名字
    chunkSize: 5000

在站点根目录执行以下代码，更新Index(每次更新文章都需要执行一次)，即上传站点内容到algolia：

1
2
export HEXO_ALGOLIA_INDEXING_KEY='你的adminApiKey' (这里好像 = 号左右两边不能有空格 这里要注意)
hexo algolia

更改主题配置文件，搜索algolia_search：

1
2
3
4
5
6
7
8
9
# Algolia Search
algolia_search:
enable: true
hits:
    per_page: 10
labels:
    input_placeholder: 输入关键字
    hits_empty: "没有找到任何搜索结果: ${query}"
    hits_stats: "${hits} 找到约 ${time} 条结果"

顺序 hexo + clean --> hexo + g --> hexo + d --> export HEXO_ALGOLIA_INDEXING_KEY='你的adminApiKey' --> hexo algolia
如果按照新手指导创建的algolia指数没有用 就删除自己新建一个 一切默认即可 如果还是不行欢迎下方评论或联系我

在线联系

首先去DaoVoice注册。注册后就可以查看你的app_id:

复制app_id，打开/themes/next/layout/_partials/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
2
3
# Online contact
daovoice: true
daovoice_app_id: '你的id'

具体样式设计可以在 应用设置–>聊天设置后边改

给代码块添加复制功能

下载clipboard.js
下载第三方插件：clipboard.js,或者直接下载(右键另存为)。

保存文件到theme/next/source/js/src下 没有文件夹就创建文件夹。

在theme/next/source/js/src目录下创建clipboard-use.js添加内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) {
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '<span>复制</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

在theme/next/source/css/_custom/custom.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
//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

在themes/next/layout/_layout.swig文件中最后添加：

1
2
3
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

或者将clipboard.min.js和clipboard-use.js保存到类似七牛云上，通过引用也可（推荐）

设置默认文章格式

在/scaffolds/post.md下修改为以下代码 顺序可以改 这样每次用hexo new 的文章都会是这种格式开头的了(默认文章格式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
top: 0 #数值越大 排着越上面
title: {{ title }} #主题
keywords:  #关键字
description:  #描述
date: {{ date }} #时间
tags:  #标签
categories:  #分类
copyright:  #版权
comments:  #评论
password:  #密码
---
!()[]
<!-- more -->(阅读全文)

个性化优化

设置代码高亮主题

NexT 默认使用的是 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：

1
2
3
4
5
6
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
[Next官网有](http://theme-next.iissnan.com/theme-settings.html)

图片消失啦

设置字体

在主题配置文件中设置，例如：

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
font:
enable: true

# 外链字体库地址，例如 //fonts.googleapis.com (默认值)
host:

# 全局字体，应用在 body 元素上
global:
    external: true
    family: Monda

# 标题字体 (h1, h2, h3, h4, h5, h6)
headings:
    external: true
    family: Roboto Slab

# 文章字体
posts:
    external: true
    family:

# Logo 字体
logo:
    external: true
    family: Lobster Two
    size: 24

# 代码字体，应用于 code 以及代码块
codes:
    external: true
    family: PT Mono

设置小型代码块颜色

修改\themes\next\source\css\_variables\base.styl文件，修改$code-background和$code-foreground的值：

1
2
3
4
5
6
7
8
// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 13px
$code-font-size                 = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius             = 3px
$code-foreground                = $black-light
$code-background                = $gainsboro

文字增加背景色块

打开themes/next/source/css/_custom 下的 custom.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
46
47
48
49
50
51
52
53
54
55
56
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}

在你需要编辑的文章地方。放置如下代码

1
2
3
4
<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> 主题配置文件 </span>

效果：
图片消失啦

在文档中增加图标, Font Awesome

代码
单一使用：

1
2
<i class="fa fa-adjust fa-lg"></i> fa-表示图标的名字
<i class="fa fa-adjust fa-2x"></i> fa-可编辑大小

组合使用：

1
2
3
4
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span><i class="fa fa-adjust"></i>

效果：
单一使用：

1
2
<i class="fa fa-adjust fa-lg"></i> fa-表示图标的名字
<i class="fa fa-adjust fa-2x"></i> fa-可编辑大小

组合使用：

1
2
3
4
<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>

利用Font Awesome绘制下载样式

打开themes/next/source/css/_custom 下的 custom.styl 文件,添加属性样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}

在你需要编辑的文章地方。放置如下代码
<a id="download" href="下载链接"><i class="fa fa-download"></i><span> Download Now</span> </a>

利用Aplayer添加音乐播放器

首先将Aplayer源码下载到本地，解压后将dist文件夹复制到themes\next\source文件夹下
新建themes\next\source\dist\music.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
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: true, //自动播放
    audio: [
    {
        name: "PDD洪荒之力",
        artist: '徐梦圆',
        url: 'http://up.mcyt.net/?down/39868.mp3',
        cover: 'http://oeff2vktt.bkt.clouddn.com/image/84.jpg',
    },
    {
        name: '9420',
        artist: '麦小兜',
        url: 'http://up.mcyt.net/?down/45967.mp3',
        cover: 'http://oeff2vktt.bkt.clouddn.com/image/8.jpg',
    },
    {
        name: '风筝误',
        artist: '刘珂矣',
        url: 'http://up.mcyt.net/?down/46644.mp3',
        cover: 'http://oeff2vktt.bkt.clouddn.com/image/96.jpg',
    }
    ]
});

Aplayer 中文文档

打开themes\next\layout\_layout.swig文件，将

1
2
3
4
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

添加到<body itemscope ...>后面就行，即在<body></body>里面。
重新生成，访问页面，就能看到左下角的音乐播放器了

添加音乐：audio对应的便是音频文件，所以音乐播放器需要播放的音乐是需要自己进行相关信息（如歌曲链接、封面等）的配置。这里放一个mp3音乐外链网站搜索对应的音乐，然后复制url和右击封面图片链接粘贴到对应的位置上就行了。

左上角或右上角的Github样式

实现效果有两种(效果可点击样式链接查看这里就不演示效果图了)：
样式1
样式2
在喜欢的网站上复制其中的代码到themes/next/layout/_layout.swig文件中放在
<div class="headband"></div> 的下面，并把href改为你的github地址就好了

添加背景动画

NexT已经自带了多种背景动画效果，你只需要根据需求在主题配置文件修改其中一个为true即可 想要什么效果自己可以每个试试看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

其中之一实现效果：

图片消失啦

添加顶部加载条

在主题配置文件中搜索pace：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading. 加载条
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

这个也有多种主题选择，根据自己喜好选择修改即可

点击出现小爱心效果

在/themes/next/source/js/src新建clicklove.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
51
52
53
54
55
56
! function (e, t, a) {
    function n() {
        c(
            ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
        ), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--,
            d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y +
            "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale +
            ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function (e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function () {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame ||
            e.msRequestAnimationFrame || function (e) {
                setTimeout(e, 1e3 / 60)
            }
    }(), n()
}(window, document);

然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：<script type="text/javascript" src="/js/src/love.js"></script>

修改文章内链接文本样式

修改文件 \themes\next\source\css\_custom\custom.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;
    }
}

修改文章底部标签样式

修改/themes/next/layout/_macro/post.swig搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>
实现效果图:

图片消失啦

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

实现效果图:

图片消失啦
在路径 \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文件，在<div class="post-block"></div>中 末尾添加

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

位置可以根据自己喜欢调整(我的就是放在最后面的)，然后打开主题配置文件（_config.yml）,在末尾添加：

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

设置圆形头像以及旋转效果

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 头像圆形 */
  width:100px;
  height 100px; //设置宽高
  border-radius:50%; //圆角
  margin:10px auto
  overflow:hidden; //裁剪
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;

  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 2.0s ease-out;
  -moz-transition: -moz-transform 2.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

如果设置完之后出现名字没居中
图片消失啦
需要到themes\next\layout\_macro\sidebar.swig文件中找到site-author-name那一行修改为<p class="site-author-name" itemprop="name" style ="text-align: center;"></p>

文章添加阴影效果

打开\themes\next\source\css\_custom\custom.styl向里面加入：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .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);
  }

代码块自定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

隐藏网页底部powered By Hexo 强力驱动

打开themes/next/layout/_partials/footer.swig隐藏之间的代码即可，或者直接删除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 第一个地方 {% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div> 底部hexo 驱动字
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span> 底部hexo 驱动字 |
{% endif %}
-->

<!-- 第二个地方<div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div> 底部hexo 驱动字-->

文章加密访问

打开themes->next->layout->_partials->head.swig文件,在以下位置插入下面代码

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

然后在要加密的文章---中间添加password:xxx xxx就是你的密码 不写就没有密码

文章顶部显示更新时间

打开主题配置文件_config.yml，关键字搜索updated_at设置为true：

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: ture
  categories: true

编辑文章，增加关键字updated（下一个可以根据文章改变时间自动更改）

1
2
3
4
layout: layout
title: 关于
date: 2017-08-18 15:41:18
updated: 2017-09-05 20:18:54 #手动添加更新时间

崩溃欺骗

在新建themes\next\source\js\src新建文件crash_cheat.js代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/TEP.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

在themes\next\layout\_layout.swig文件最后添加如下代码

1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

博客性能优化

gulp压缩

如果你打开生成的public文件夹里面的html、css、js源文件，你就会发现里面有大段的空白，这些空白占据着一定的空间。gulp是一个基于Node.js的自动化构建工具，我们可以通过一些gulp插件实现对html、css、js、image等静态资源的高效压缩，通过压缩这些静态资源，可以减少请求的数据量从而达到优化博客访问速度的目的

首先安装gulp，执行以下命令：

1
npm install gulp

要实现gulp压缩需要安装以下五个模块：

1
2
3
4
5
gulp-htmlclean       // 清理html
gulp-htmlmin        // 压缩html
gulp-minify-css     // 压缩css
gulp-uglify         // 混淆js
gulp-imagemin     // 压缩图片

安装模块

1
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

安装的模块可以在根目录下的package.json文件里面看到。

1
2
3
4
5
6
"gulp": "^4.0.0",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^5.0.3",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.1",

添加gulpfile.js
进入博客根目录，新建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
51
52
53
54
55
56
57
58
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'))
});

//4.0以前的写法
//gulp.task('default', [
//  'minify-html', 'minify-css', 'minify-js'
//]);
//4.0以后的写法
// 执行 gulp 命令时执行的任务
// 会出现The following tasks did not complete: default, <anonymous> Did you forget to signal async completion?报错
// gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images', function () {
//     // Do something after a, b, and c are finished.
// }));

// 解决报错 2019-4-20号更新
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images', (done) => done()));

执行压缩（在每次生成部署的时候就要压缩一次）

1
gulp //执行压缩

gulp4.0报错 参考的第三个方案
还没有图片哦

在Hexo根目录打开命令行窗口
顺序总结为 hexo + clean --> hexo + g --> gulp --> hexo + d --> export HEXO_ALGOLIA_INDEXING_KEY='764398dfb571b51f25f584fd5f03944b'(你的adminApiKey 这个是我的) --> hexo algolia 如果没有添加搜索的后面两句可以省略 很久没使用可能需要用key来回执行export HEXO_ALGOLIA_INDEXING_KEY=’key’添加才会成功 如果还是不行则npm install --save hexo-algolia更新下algolia即可（推送搜索要翻墙） 不知道什么原因 Algolia不能在VSCode的终端输入命令。algolia如果搜索没有生效就挂梯子多执行几遍最后两步即可 2019-5-10因为 images 路径修改到了远程服务器，所以需要每次把 images 文件压缩zip移到服务器进行unzip进行解压，目前没有服务器image暂时看不见。

window 系统下安装了 gulp 后遇到 bash: gulp: command not found 这个问题的解决方法

或者重新安装一次gulp模块即可

待更新

全部参考如下:
hexo搭建个人博客–NexT主题优化
Hexo+NexT 主题配置备忘
hexo的next主题个性化教程：打造炫酷网站
HEXO +下一步个人博客主题优化
Hexo博客之速度优化
基于Hexo搭建个人博客优化之（五）压缩篇–gulp4.0压缩静态资源

本文标题:Hexo主题Next-优化整理

文章作者:游戏人生

发布时间:2019年01月23日 - 12:01

最后更新:2020年12月27日 - 12:12

原始链接:http://www.tjl-myblog.cn/Hexo主题Next-优化整理.html

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

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