可以访问我的博客来查看效果, 上面有更详细教程: https://sandop.github.io/
一, 基本配置
在 Hexo 中有两份主要的配置文件, 其名称都是 _config.YAML. 其中, 一份位于站点根目录下, 主要包含 Hexo 本身的配置; 另一份位于主题目录下, 这份配置由主题作者提供, 主要用于配置主题相关的选项.
为了描述方便, 在以下说明中, 将前者称为 站点配置文件, 后者称为 主题配置文件.
1, 站点基本设置
在站点配置文件 即博客根目录下的_config.YAML 中
# Site
title: Sando 博客
subtitle: 代码日记
description: 寄杂志第
- keywords:
- author: Sando
- language: zh-Hans
- timezone:
2, 头像设置
2.1 设置头像
在站点配置文件 中新增 avatar, 值设置为头像的链接地址. 地址可以是网络地址, 也可以是本地地址(放置在 source/images/ 目录下)
- # 侧边栏头像设置
- avatar: /images/user.jpg
2.2 头像旋转动画
打开 \ themes\next\source\css_common\components\sidebar\sidebar-author.styl, 在里面添加如下代码:
- .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;
- /* 头像圆形 */
- border-radius: 80px;
- -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 1.0s ease-out;
- -moz-transition: -moz-transform 1.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);
- }
- }
3, 主题布局设置
在主题配置文件即在 next 主题目录下的_config.YAML 文件中将 scheme 设定为 Pisces, 可根据个人喜好设置成其他的值
- # Schemes
- #scheme: Muse
- #scheme: Mist
- scheme: Pisces
- #scheme: Gemini
4, 菜单项设置
在主题配置文件中的 menu 中设置, 增添一个 movies 注: 千万不要在这设置中文, 后面的值那是查找文件的地方! 如下
- menu:
- home: / || home
- about: /about/ || user
- tags: /tags/ || tags
- categories: /categories/ || th
- #archives: /archives
- #search: /search
- #schedule: /schedule/ || calendar
- #sitemap: /sitemap.xml || sitemap
- #commonweal: /404
- movies: /movies || film
这些配置都要与你主题目录下的 languages 文件中对应的 YAML 文档里配置相关联. 比如你在站点根目录中的配置文件设置 language 为 zh-Hans, 那么就要进入到主题目录下的 languages 文件中修改 zh-Hans.YAML, 这样才能显示出菜单项新增的中文内容
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
movies: 电影
5, 菜单项图标设置
在主题配置文件中对应的字段是 menu_icons. 格式为 item name:icon name, 其中 item name 与所配置的菜单名字对应, icon name 是 Font Awesome 图标的名字. 而 enable 可用于控制是否显示图标, 你可以设置成 false 来去掉图标.
- menu_icons:
- enable: true
- home: home
- about: user
- categories: th
- tags: tags
- archives: archive
- commonweal: heartbeat
- movies: film
新建的栏目 icon, 需要在 Font Awesome 图标库 http://fontawesome.io/icons/ 存在, 例如新建的 movies, 在图标库中查询选择 film 图标, 在主题配置文件的 menu_icons 中, 更改 movies: film
6, 侧栏位置设置
在主题配置文件中修改主题目录下 sidebar 的 position 值
- sidebar:
- # Sidebar Position, available value: left | right (only for Pisces | Gemini).
- position: left
- #position: right
7, 添加标签页面
前面通过修改 next 主题下的_config.YAML 文件中的 menu 选项, 可以在主页面的菜单栏添加标签选项, 但是此时点击标签, 跳转的页面会显示 page not found. 此时我们要新建一个页面 在 Git bush 中输入 hexo new page tags
在新建的 index.md 文件中添加 type: "tags"
- ---
- title: tags
- date: 2019-02-18 17:16:00
- type: "tags"
- ---
当要为某一篇文章添加标签, 只需在 blog/source/_post 目录下的具体文章的 tags 中添加标签即可
8, 侧边栏社交栏目
侧栏社交链接的修改包含两个部分, 第一是链接, 第二是链接图标. 两者配置均在 主题配置文件 中
(1)链接放置在 social 字段下, 一行一个链接. 其键值格式是 显示文本: 链接地址.
- # Social links
- social:
- GitHub: https://github.com/your-user-name
- Twitter: https://twitter.com/your-user-name
微博: http://weibo.com/your-user-name
豆瓣: http://douban.com/people/your-user-name
知乎: http://www.zhihu.com/people/your-user-name
# 等等
(2)设定链接的图标, 对应的字段是 social_icons. 其键值格式是 匹配键: Font Awesome 图标名称, 匹配键 与上一步所配置的链接的 显示文本 相同(大小写严格匹配), 图标名称 是 Font Awesome 图标的名字(不必带 fa- 前缀). enable 选项用于控制是否显示图标, 你可以设置成 false 来去掉图标. 其中 seoial_icons 节点中后面的值是 http://fontawesome.io/icons/ 中提供的图标的名称. 之后其他链接如推特, 微博等都可自行增减.
- # Social Icons
- social_icons:
- enable: true
- # Icon Mappings
- GitHub: GitHub
- Twitter: Twitter
微博: weibo
9, 显示当前浏览进度
主题配置文件 即 themes/*/_config.YAML 中 scrollpercent 更改为 true,b2t 改为 true 返回顶部及浏览进度显示在左侧 sidebar 之下, 改为 false 显示在右下角, 根据个人喜好自行设置.
sidebar:
# Sidebar Position - 侧栏位置(只对 Pisces | Gemini 两种风格有效)
position: left // 靠左放置
#position: right // 靠右放置
# Sidebar Display - 侧栏显示时机(只对 Muse | Mist 两种风格有效)
#display: post // 默认行为, 在文章页面 (拥有目录列表) 时显示
display: always // 在所有页面中都显示
#display: hide // 在所有页面中都隐藏(可以手动展开)
#display: remove // 完全移除
offset: 12 // 文章间距(只对 Pisces | Gemini 两种风格有效)
b2t: false // 返回顶部按钮(只对 Pisces | Gemini 两种风格有效)
scrollpercent: true // 返回顶部按钮的百分比
二, 个性化设置
1, 添加萌萌哒二次元看板娘
英文介绍 https://github.com/EYHN/hexo-helper-live2d 中文介绍
1.1, 安装插件
NPM install --save hexo-helper-live2d
1.2, 配置
请向根目录的 _config.YAML 文件或主题的 _config.YAML 文件中添加配置.
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-<你喜欢的模型名字>
display:
position: right
width: 150
height: 300
mobile:
show: true
模型连接 https://huaji8.top/post/live2d-plugin-2.0/ 配置详细介绍
1.3, 配置文件
配置文件有很多方法这里主要讲我使用的方法: 详情请参考如下:
英文介绍 https://github.com/EYHN/hexo-helper-live2d 中文介绍
1.3.1 在博客根目录下建文件夹 live2d_models;
1.3.2 再在 live2d_models 下建文件夹<你喜欢的模型名字>;
1.3.3 再在 <你喜欢的模型名字> 下建 JSON 文件:<你喜欢的模型名字>.model.JSON;
1.4, 安装模型
在命令行 (即 Git Bash) 运行以下命令即可:
NPM install --save live2d-widget-model-<你喜欢的模型名字> 模型安装 https://github.com/xiazeyu/live2d-widget-models
1.5, 查看结果
在命令行 (即 Git Bash) 运行以下命令, 在 http://127.0.0.1:4000 / 查看测试结果:
hexo clean && hexo g && hexo s
1.6, 更改模型
若更改模型请从第二步更改 model.use; 删除第三步原有文件, 重新创建, 安装模型, 查看结果
2, 实现 fork me on GitHub
2.1, 点击 这里 https://github.blog/2008-12-19-github-ribbons/ 挑选自己喜欢的样式, 并
2.2, 然后粘贴刚才复制的代码到 themes/next/layout/_layout.swig 文件中(放在
<div class="headband"></div>
的下面), 并把 href 改为你的 GitHub 地址
2.3, 若位置不对, 在 img 标签中修改
style="position:fixed;top:0;right:0"
3, 设置网站的图标 Favicon
在 EasyIcon https://www.easyicon.net/ 或者 Iconfont https://www.iconfont.cn/ 中找一张 (32*32) 的 ico 图标, 并将图标名称改为 favicon.ico, 然后把图标放在 / themes/next/source/images 里, 并且修改主题配置文件 :
4, 首页文章添加阴影效果
打开 \ themes\next\source\css_custom\custom.styl, 向里面加入:
// 文章内容添加边框阴影
.post {
margin-top: 0px;
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);
}
5, 网站顶部加载条
修改主题配置文件 (_config.YAML) 将 pace: false 改为 pace: true 就行了, 你还可以换不同样式的加载条, 如下图:
6, 统计文章阅读量
通过 leanCloud 统计您网站的文章阅读量 1. 注册 LeanCloud https://leancloud.cn/ , 并创建一个你自己的应用; 2. 点击图片右上角的设置图标进入应用界面; 3. 到此, 你的应用创建成功, 继续表的创建, 创建表, 并将表的名字命名为: Counter 4. 打开设置 -> 应用 key 获取 App ID 和 App Key; 5. 最后打开主题配置文件: themes/*/_config.YAML;
- leancloud_visitors:
- enable: true
- app_id: #你的 app_id
- app_key: #你的的 app_key
6. 完成配置并重新编译. 到此您已经成功设置了阅读量的统计
7, 文章加密访问
打开 themes->next->layout->_partials->head.swig 文件, 在以下位置插入这样一段代码:
- <script>
- (function(){
- if('{{ page.password }}'){
- if (prompt('请输入文章密码') !== '{{ page.password }}'){
- alert('密码错误!');
- history.back();
- }
- }
- })();
- </script>
然后在文章上写上 password: ****, 如下:
8, 修改链接 URL
编辑 站点配置文件下的 _config.YAML 文件, 修改其中的 permalink 字段: permalink: :category/:title/
9, 文章置顶
9.1 安装插件
NPM uninstall hexo-generator-index --save NPM install hexo-generator-index-pin-top --save
9.2 在需要置顶的文章中加上 top 即可, 数值越大文章越靠前
- ---
- title: 'GitHub + Hexo 搭建自己博客(二) Next 主题配置'
- date: 2019-02-19 15:35:40
- tags: [hexo,GitHub]
- categories: blog,hexo,next
- top: 10
- ---
9.3 设置置顶标志
打开:/themes/*/layout/_macro/post.swig, 定位到 < div class="post-meta">标签下, 插入如下代码:
- {% if post.top %}
- <i class="fa fa-thumb-tack"></i>
- <font color=7D26CD > 置顶</font>
- <span class="post-meta-divider">|</span>
- {% endif %}
10, 隐藏网页底部 powered By Hexo / 强力驱动
打开 themes/next/layout/_partials/footer.swig, 使用 <!-- --> 隐藏之间的代码即可, 或者直接删除.
11, 实现统计功能
1. 在根目录下安装 hexo-wordcount, 运行: NPM install hexo-wordcount --save 2. 然后在主题配置文件中, 配置如下:
- # 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
12, 网站底部字数统计
1. 在根目录下安装 hexo-wordcount, 运行: NPM install hexo-wordcount --save 2. 然后在 / themes/next/layout/_partials/footer.swig 文件尾部加上:
- <div class="theme-info">
- <div class="powered-by"></div>
- <span class="post-count">博客全站共 {{ totalcount(site) }} 字</span>
- </div>
13, 添加 http://README.md 文件
每个项目下一般都有一个 http://README.md 文件, 但是使用 hexo 部署到仓库后, 项目下是没有 http://README.md 文件的.
在 Hexo 目录下的 source 根目录下添加一个 http://README.md 文件, 修改站点配置文件 _config.YAML, 将 skip_render 参数的值设置为 skip_render: README.md
14, 修改文章底部的那个带 #号的标签
修改模板 / themes/next/layout/_macro/post.swig, 搜索 rel="tag">#, 将 # 换成
15, 添加 RSS
1. 站点根目录下安装插件, NPM install --save hexo-generator-feed; 2. 在站点配置文件_config.YAML 中, 添加如下内容:
- # Extensions
- ## Plugins: http://hexo.io/plugins/
- plugins: hexo-generate-feed
3. 然后再主题配置文件中配置 rss;
rss: /atom.xml
4. 配置完之后运行: hexo clean && hexo g && hexo s; 5. 重新生成一次, 你会在./public 文件夹中看到 atom.xml 文件. 然后启动服务器查看是否有效, 之后再部署到 GitHub 中
16, 点击出现桃心效果
1. 在路径 / themes/*/source/JS/src 里面新建 love.JS 文件并将代码复制进去;
- ! 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()
- }(Windows, document);
2. 在 \ themes\*\layout\_layout.swig 文件末尾</body > 之前添加
- <!-- 页面点击小红心 -->
- <script type="text/javascript" src="/js/src/love.js">
- </script>
3. 我选择的是社会主义核心价值观的特效, 因为我们都是社会主义接班人!!
- (function() {
- var T_color = "";// 字体颜色, 你不设置就是随机颜色,
- var T_size = [10,20];// 文字大小区间, 不建议太大
- var T_font_weight = "bold";// 字体粗斜度 -->normal,bold,900
- var AnimationTime = 1500;// 文字消失总毫秒
- var Move_up_Distance = 388;// 文字移动距离, 正数代表上移, 反之下移
- var a_index = 0;
- $("html").click(function(e){
- var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
- var $i = $("<span/>").text(a[a_index]);
- a_index = (a_index + 1) % a.length;
- var x = e.pageX,y = e.pageY;
- var x_color = "#" + ('00000' + (Math.random() * 0x1000000 <<0).toString(16)).substr(-6);//-->随机颜色
- //console.log(x_color);
- if(T_color.length>=4){
- x_color = T_color;
- }
- var x_size = Math.random()*(T_size[1]-T_size[0]) + T_size[0];
- x_size += "px";
- $i.CSS({
- "z-index": 99999,
- "top": y - 20,
- "left": x,
- "position": "absolute",
- "font-weight": "bold",
- "font-size":x_size,
- "color": x_color
- });
- $("html").append($i);
- $i.animate({"top": y-Move_up_Distance,"opacity": 0},AnimationTime,function() {
- $i.remove();
- });
- });
- })();
17, 修改文章内链接文本样式
1. 修改文件 themes\*\source\CSS\_common\components\post\post.styl, 在末尾添加如下 CSS 样式,:
- // 文章内链接文本样式
- .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;
- }
- }
18, 在文章末尾添加 "本文结束" 标记
1. 在路径 \themes\*\layout\_macro 中新建 passage-end-tag.swig 文件, 并添加以下内容:
- <div>
- {% if not is_index %}
- <div style="text-align:center;color: #ccc;font-size:14px;">------------- 本文结束 < i class="fa fa-paw"></i > 感谢您的阅读 -------------</div>
- {% endif %}
- </div>
2. 打开 \ themes\*\layout\_macro\post.swig 文件, 在 post-body 之后, post-footer 之前添加如下代码(post-footer 之前两个 DIV)
- <div>
- {% if not is_index %}
- {% include 'passage-end-tag.swig' %}
- {% endif %}
- </div>
3. 打开主题配置文件(_config.YAML), 在末尾添加:
- # 文章末尾添加 "本文结束" 标记
- passage_end_tag:
- enabled: true
4. 完成以上设置之后, 在每篇文章之后都会添加如此效果图
19, 自定义鼠标样式
打开 themes/*/source/CSS/_custom/custom.styl , 在里面写下如下代码:
// 鼠标样式
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
}
:active {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
}
20,Canvas 背景
在主题配置文件中, 找到 Canvas 配置项, 可以应用 NNext 自带的 Canvas 特效
想要更改颜色和数量? 修改文件:/themes/next/source/lib/canvas-nest/canvas-nest.min.JS, 修改参考
21, 修改内容区域的宽度
编辑主题的 source/CSS/_variables/custom.styl 文件, 新增变量:
// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px
但是此方法不适用于 Pisces Scheme, 对于 Pisces Scheme, 需要同时修改 header 的宽度,.main-inner 的宽度以及 .content-wrap 的宽度. 例如, 使用百分比(Pisces 的布局定义在
source/CSS/_schemes/Picses/_layout.styl
中)
.header{ width: 60%; }
.container .main-inner { width: 60%; }
.content-wrap { width: calc(100% - 260px); }
超过一定宽度后(一行内文字太多导致换行跨度太大), 阅读体验不好, 我调整的宽度为 60%, 各位可以自行测试进行调整
22, 打赏功能
1. 准备支付宝和微信二维码, 存放在 themes/*/source/images 2. 在主题配置文件 (_config.YAML) 中进行设置
# Reward
reward_comment: 谢谢请我吃辣条!
- wechatpay: /images/wechatpay.PNG
- alipay: /images/alipay.jpg
3. 修复图片闪动 bug, 修改 next/source/CSS/_common/components/post/post-reward.styl, 注释 wechat:hover 和 alipay:hover
23, 配置 Valine 评论系统
1.Valine 是一款基于 Leancloud 的快速, 简洁且高效的无后端评论系统; 2. 获取 Leancloud 的 App ID 和 App KEY, 上面第六步设置中已经介绍了获取方法; 3. 打开主题配置文件: themes/*/_config.YAML;
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 在这里说点什么吧... # comment box placeholder
avatar: identicon # 评论表头样式 /mm/identicon/monsterid/wavatar/retro/hide
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
4. 其他相关配置和邮件提醒方式可查看 Valline 详细配置官网
24, 添加搜索功能
1. 在根目录下安装 hexo-generator-searchdb 插件, NPM install hexo-generator-searchdb --save; 2. 站点配置文件中添加以下字段
search:
path: search.xml
field: post
format: HTML
limit: 10000
3. 编辑主题配置文件启用本地搜索
# Local search
local_search:
enable: true
25, 不蒜子访问统计
1. 编辑 主题配置文件 themes/*/_config.YAML 中的 busuanzi_count 的配置项即可;
- busuanzi_count:
- # count values only if the other configs are false
- enable: true
- # custom uv span for the whole site
- site_uv: true
- site_uv_header: <i class="fa fa-user"></i>
- site_uv_footer:
- # custom pv span for the whole site
- site_pv: true
- site_pv_header: <i class="fa fa-eye"></i>
- site_pv_footer:
- # custom pv span for one page only
- page_pv: true
- page_pv_header: <i class="fa fa-file-o"></i>
- page_pv_footer:
2. 找到主题调用不蒜子的 swig 文件 \ themes*\layout_third-party\analytics\busuanzi-counter.swig 3. 更改域名
把原有的:
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
域名改一下即可:
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
26, 添加 404 公益界面
1. 在根目录下输入 hexo new page 404; 2. 打开刚新建的页面文件, 默认在 Hexo 文件夹根目录下 /source/404/index.md; 3. 将文件名 index.md 改为 404.HTML; 4. 在文件中写入内容, 这里使用的是腾讯公益;
---
title: 404 Not Found: 该页无法显示
- toc: false
- comments: false
- permalink: /404
- ---
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8" />
- <title>
- 404
- </title>
- </head>
- <body>
- <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
- homePageName="返回首页" homePageUrl="https://sandop.github.io">
- </script>
- </body>
- </HTML>
5. 将返回首页的链接更改为自己的链接.
27, 网页代码压缩
网上有很多相关的博文, 常规的做法是使用 gulp 来进行压缩, 但是没有成功, 所以更换为 hexo-neat 压缩插件进行.
1. 站点根目录下安装插件 NPM install hexo-neat --save; 2. 修改站点配置文件, 在末尾添加以下代码;
- # hexo-neat
- # 博文压缩
- neat_enable: true
- # 压缩 HTML
- neat_html:
- enable: true
- exclude:
- # 压缩 CSS
- neat_css:
- enable: true
- exclude:
- - '**/*.min.css'
- # 压缩 JS
- neat_js:
- enable: true
- mangle: true
- output:
- compress:
- exclude:
- - '**/*.min.js'
- - '**/jquery.fancybox.pack.js'
- - '**/index.js'
3. 执行 hexo clean && hexo g && hexo s 查看效果.
来源: https://juejin.im/post/5c6d20b151882562934c9962