博客主题魔改篇(汇总)

概述

相信有很多小伙伴在选择了自己的主题，并且在官方文档的指导下配置了自己的主题后，仍然对其中的有些方面不太满意，但是又不想换主题的时候，那么config的配置已经不能满足你了，让我们从源文件下手，对其进行大刀阔斧的改革吧！

想要修改源文件，那么需要先了解你所选的主体架构，以下均已hexo-theme-matery为例，请根据你的主题进行对应，并且尽量选择使用人数多且文档完善的主题，否则修改会十分困难，如果你是高手的话就当我这句话没说。

（注：这里只是大致提了一下，想更详细的了解可以看看《hexo-theme-matery美化》和《hexo博客搭建全过程》）

├── languages  语言文件，用于国际化（不是很重要，除非你想向全球推广）
├── layout     页面模板文件，决定了网站内容的呈现方式
├── scripts    Hexo 脚本（这是matery没有的，但是部分主题有）
└── source     主题资源文件，包括页面样式，脚本，字体等

博客的目录结构如下：

- node_modules
- public
- scaffolds
- source
    - _data
    - _posts
    - about
    - archives
    - categories
    - friends
    - tags
- themes

node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。

我们平时写文章只需要关注source/_posts这个文件夹就行了。

1.layout

• 

每一个ejs对应的同名page的布局，例：contact是文章的布局，也有主题使用的article在_partial里的，一般如下：

模板	用途	回调
index	首页
post	文章	index
page	分页	index
archive	归档	index
category	分类归档	archive
tag	标签归档	archive

注：文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略

2.scripts

注：部分主题在source\js

3.source

1.推荐插件

这里只讲了安装和简单的配置，想知道完整的使用教程可以跳转这篇《hexo插件推荐及简明使用教程》文章

代码高亮

从 Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持，本主题对此进行了改造支持。

如果你的博客中曾经安装过 hexo-prism-plugin 的插件，那么你须要执行 npm uninstall hexo-prism-plugin 来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并将 prismjs.enable 的值设置为 true，主要配置如下：

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

中文链接转拼音

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

博主选择的是hexo-abbrlink 插件，因为感觉拼音有点傻，而且这个配置可选项比较多
安装命令如下：

npm install hexo-abbrlink --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

# abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     enable: true  #true(default)
     depth:        #3(default)
     over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.

文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

添加emoji表情支持

本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

添加 RSS 订阅支持

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

添加视频

hexo-tag-mmedia 是 MonoLogueChi 自用的一个媒体插入插件，在添加部分功能后发布给大家使用。

已支持的平台

• Aplayer

• Meting

• Dplayer

• Bilibili

  未来可能支持

  • YouTube
  • ArtPlayer

安装

npm install hexo-tag-mmedia --save

此插件与以下插件冲突

• hexo-tag-aplayer
• hexo-tag-dplayer
• hexo-tag-bilibili

如有安装，使用前请卸载。

npm uninstall hexo-tag-aplayer
npm uninstall hexo-tag-dplayer
npm uninstall hexo-tag-bilibili

config.yml

如果不需要自定义设置，不需要修改 _config.yml ，直接使用即可

mmedia:
  aplayer:
    cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
    default:
  meting:
    cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
    api:
    default:
  dplayer:
    cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
    style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
    hls_cdn: https://cdn.jsdelivr.net/npm/hls.j/dist/hls.min.js
    dash_cdn: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
    shaka_dash_cdn: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
    flv_cdn: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
    webtorrent_cdn: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
    default:

使用

代码：

演示效果：

YOUTUBE

也可以等hexo-tag-mmedia插件支持

npm install hexo-tag-youtube-responsive --save

添加音乐

npm install hexo-tag-cplayer --save

添加像这样的代码到你的文章中。cplayer 将会生成在那里。

{% cplayer [autoplay] [yaml|cson|json] %}
# type your config here
{% endcplayer %}

SEO优化

npm install hexo-generator-seo-friendly-sitemap --save

sitemap:
    path: sitemap.xml

文章加密

npm install --save hexo-blog-encrypt

_config.yml

# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

添加看板娘

安装模块:

npm install --save hexo-helper-live2d

试试 yarn add hexo-helper-live2d, 据说高能的yarn会比垃圾npm少很多麻烦呢。 Yarn

_config.yml

live2d:
	enable: true
	scriptFrom: local
	model:
		use: live2d-widget-model-z16 #模型选择
	display:
		position: left  #模型位置
		width: 150       #模型宽度
		height: 300      #模型高度
	mobile:
		show: false      #是否在手机端显示

用法

有三种方法添加模块名

a. live2d_models子目录名称

1. 在您博客根目录下创建一个 live2d_models 文件夹.
2. 在此文件夹内新建一个子文件夹.
3. 将你的 Live2D 模型复制到这个子文件夹中.
4. 将子文件夹的名称输入 _config.yml 的 model.use 中.

b. 相对于博客根目录的自定义路径

您可直接输入相对于博客根目录的自定义路径到 model.use 中.

示例: ./wives/wanko

c. npm 模块名

npm install live2d-widget-model-z16

d. 你的CDN

如果你是没有CDN会死星人,直接将 .model.json 的url地址输入 model.use.

添加追番页面

npm install hexo-bilibili-bangumi --save

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

bangumi:
  enable: true
  path:
  vmid:
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  loading:
  metaColor:
  color:
  webp:
  progress:

• enable: 是否启用
• path: 番剧页面路径，默认bangumis/index.html
• vmid: 哔哩哔哩番剧页面的 vmid(uid),如何获取？
• title: 该页面的标题
• quote: 写在页面开头的一段话，支持 html 语法，可留空。
• show: 初始显示页面：0: 想看, 1: 在看, 2: 看过，默认为1
• loading: 图片加载完成前的 loading 图片
• metaColor: meta 部分(简介上方)字体颜色
• color: 简介字体颜色
• webp: 番剧封面使用webp格式(此格式在safari浏览器下不显示，但是图片大小可以缩小 100 倍左右), 默认true
• progress: 获取番剧数据时是否显示进度条，默认true

2.魔改

官方功能增强

在官方的基础上进行修改。

修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

修改为如下代码，则有60种随机图

<% if (theme.banner.enable) { %>
<script>
    // 每天切换 banner 图.  Switch banner image every day.
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getMinutes() + '.jpg';
    $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
</script>

添加樱花特效

CDN版

然后在 /themes/matery/layout/layout.ejs 中添加如下代码：

 <% if (theme.sakura.enable) { %>
     <script type="text/javascript">
     //只在桌面版网页启用特效，更换了链接，樱花数量变少
var windowWidth = $(window).width();
if (windowWidth > 768) {
	document.write('<script src="https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.2/js/sakura/sakura-reduce.js"><\/script>');
}
     </script>
 <% } %>

可以修改src的js文件名来改变樱花的数量

文件名	说明
sakura-small.js	少量樱花
sakura-reduce.js	樱花相对原效果减少 1/4
sakura-original.js	樱花数量不变（原效果）
sakura-half.js	樱花相对原效果数量减半

对于想安静阅读并且保持樱花效果的，这里推荐的是第一种少量 sakura-small.js 或第二种减半 sakura-half.js

本地版

在 /themes/matery/source/js 新建文件 sakura.js，并添加如下代码

Download Now,然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：

<% if (theme.sakura.enable) { %>
    <script type="text/javascript">
    //只在桌面版网页启用特效
    var windowWidth = $(window).width();
    if (windowWidth > 768) {
        document.write('<script type="text/javascript" src="/js/sakura.js"></script>');
    }
    </script>
<% } %>

在主题配置文件_config.yml中配置:

# 页面樱花飘落动效
sakura:
  enable: true

添加雪花特效

CDN版

然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：

<% if (theme.xuehuapiaoluo.enable) { %>
    <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script src="https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/xuehuapiaoluo.js"><\/script>');
        }
    </script>
<% } %>

cdn链接可以替换为如下的或自己的：

github:

jsdelivr:https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/xuehuapiaoluo.js

gitee:https://gitee.com/xuexizhe6/guke/raw/master/js/xuehuapiaoluo.js

coding:

本地版

在 /themes/matery/source/js 新建文件 xuehuapiaoluo.js，并添加如下代码

Download Now

然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：

<% if (theme.xuehuapiaoluo.enable) { %>
    <script type="text/javascript">
    //只在桌面版网页启用特效
    var windowWidth = $(window).width();
    if (windowWidth > 768) {
        document.write('<script type="text/javascript" src="/js/xuehuapiaoluo.js"></script>');
    }
    </script>
<% } %>

在主题配置文件_config.yml中配置:

# 页面雪花飘落动效
xuehuapiaoluo:
  enable: true

相信看了以上的示例,聪明的读者已经学会如何做一个

代码雨: https://www.cnblogs.com/zhengbin/p/5023640.html

添加鼠标点击出现文字特效

CND版

然后在 /themes/matery/layout/layout.ejs 中添加如下代码：

<% if (theme.wenzi.enable) { %>
    <script src="https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/wenzi.js"></script>
<% } %>

cdn链接可以替换为如下的或自己的：

github:

jsdelivr: https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/wenzi.js

gitee:https://gitee.com/xuexizhe6/guke/raw/master/js/wenzi.js

coding:

在主题配置文件_config.yml中配置:

本地版

<% if (theme.wenzi.enable) { %>
    <script src="/js/wenzi.js" type="text/javascript"></script>
<% } %>

添加鼠标点击烟花爆炸效果

CND版

然后在 /themes/matery/layout/layout.ejs 中添加如下代码：

<% if (theme.fireworks.enable) { %>
    <canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;"></canvas>
    <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script type="text/javascript" src="/js/fireworks.js"></script>
<% } %>

cdn链接可以替换为如下的或自己的：

在主题配置文件_config.yml中配置:

本地版

CND版

然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：

cdn链接可以替换为如下的或自己的：

github:

jsdelivr:

gitee:

coding:

在主题配置文件_config.yml中配置:

本地版

添加标签页题目效果

<script type="text/javascript">
    var OriginTitile = document.title,
    st;
    document.addEventListener("visibilitychange", function () {
        document.hidden ? (document.title = "主人，你竟然抛弃了我(；′⌒`)", clearTimeout(st)) : (document.title =
            "主人回来啦٩(๑>◡<๑)۶ ", st = setTimeout(function () {
                document.title = OriginTitile
            }, 3e3))
    })
</script>

更换鼠标样式

CDN版

<% if (theme.cursor.on){ %>
    <style>
        body{
            background: #3f3f3f;
            cursor: url(<%- config.root %><%- theme.cursor.cursor_0 %>), url("<%- config.root %><%- theme.cursor.cursor_1 %>"), auto;
        }
    </style>
<% } %>

cdn链接可以替换为如下的或自己的：

github:

jsdelivr:

gitee:

coding:

本地版

3.优化

SEO优化

网站推广是一个比较烦人的事情，特别是对于专心搞技术的来说，可能就不是很擅长，那么怎么才能让别人知道我们网站呢？也就是说我们需要想办法让别人通过搜索就可以搜索到博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

1.1 让百度收录你的站点

---

首先要做的就是让各大搜索引擎收录你的站点，我们在刚建站的时候各个搜索引擎是没有收录我们网站的，在搜索引擎中输入site:<域名>,如果如下图所示就是说明我们的网站并没有被百度收录。我们可以直接点击下面的“网址提交”来提交我们的网站

在填完网址选择完网站的类型之后需要验证网站的所有权，验证网站所有权的方式有三种：

• 文件验证。
• html标签验证
• CNAME解析验证（推荐使用）

其实使用哪一种方式都可以，都是比较简单的。

但是一定要注意，使用文件验证文件存放的位置需要放在sourc文件夹下，如果是html文件那么hexo就会将其编译，所以必须要在html头部加上的layout:false，这样就不会被hexo编译。（如果验证文件是txt格式的就不需要）

1.1.2 向百度提交链接

---

然后我们就可以将我们生成的sitemap文件提交给百度，还是在百度站长平台，找到链接提交，这里我们可以看到有两种提交方式，自动提交和手动提交，自动提交又分为主动推送、自动推送和sitemap

如何选择链接提交方式

1. 主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。
2. 自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。
3. sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。
4. 手动提交：一次性提交链接给百度，可以使用此种方式。

一般主动提交比手动提交效果好，这里介绍主动提交的三种方法

从效率上来说：

主动推送>自动推送>sitemap

1.1.1 验证网站所有权

---

登录百度站长搜索资源平台：http://zhanzhang.baidu.com， 只要有百度旗下的账号就可以登录，登录成功之后在站点管理中点击添加网站然后输入你的站点地址。

注意，这里需要输入我们自己购买的域名,不能使用xxx.github.io之类域名.因为github是不允许百度的spider（蜘蛛）爬取github上的内容的，所以如果想让你的站点被百度收录，只能使用自己购买的域名

1.2 让google收录你的站点

---

1.2.1 操作步骤

相比于百度，google的效率实在不能更快，貌似十分钟左右站点就被收录了，其实方法是和百度是一样的。

google站点平台：https://www.google.com/webmasters/

• 注册账号
• 验证站点
• 提交sitemap

1.2.2 提交 robots.txt:

robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目录下的 source 文件夹中，博客生成后在站点目录 /public/ 下。

我的 robots.txt 文件内容如下：

1.4 优化你的url

---

seo`搜索引擎优化认为，网站的最佳结构是**用户从首页点击三次就可以到达任何一个页面**，但是我们使用`hexo`编译的站点打开文章的`url`是：`sitename/year/mounth/day/title`四层的结构，这样的`url`结构很不利于`seo`，爬虫就会经常爬不到我们的文章，于是，我们需要优化一下网站文章`url

方案一：

我们可以将url直接改成sitename/title的形式，并且title最好是用英文，在根目录的配置文件下修改permalink如下：

url: https://sunhwee.com
root: /
permalink: :title.html
permalink_defaults:

方案二：

使用插件优化url

插件hexo-abbrlink实现了这个功能，它将原来的URL地址重新进行了进制转换和再编码。

安装hexo-abbrlink。

npm install hexo-abbrlink --save

Bash

配置博客根目录下的_config.yml文件。

# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

Yml

运行hexo clean和hexo g命令来重新生成文件看看，可以清楚的看到，URL结构成功变为了3层。

来源: 洪卫の博客
作者: 洪卫
文章链接: https://sunhwee.com/posts/6e8839eb.html#toc-heading-59
本文章著作权归作者所有，任何形式的转载都请注明出处。

1.5 其他seo优化

---

seo优化应该说是一个收益延迟的行为，可能你做的优化短期内看不到什么效果，但是一定要坚持，seo优化也是有很深的可以研究的东西，从我们最初的网站设计，和最基础的标签的选择都有很大的关系，网站设计就如我们刚刚说的，要让用户点击三次可以到达网站的任何一个页面，要增加高质量的外链，增加相关推荐（比如说我们经常见到右侧本站的最高阅读的排名列表），然后就是给每一个页面加上keyword和描述

在代码中，我们应该写出能让浏览器识别的语义化HTML，这样有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；并且对外链设置nofollow标签，避免spider爬着爬着就爬出去了（减少网站的跳出率），并且我们要尽量在一些比较大的网站增加我们站点的曝光率，因为spider会经常访问大站，比如我们在掘金等技术社区发表文章中带有我们的站点，这样spider是很有可能爬到我们中的站点的，so….

• 网站外链的推广度、数量和质量
• 网站的内链足够强大
• 网站的原创质量
• 网站的年龄时间
• 网站的更新频率（更新次数越多越好）
• 网站的服务器
• 网站的流量：流量越高网站的权重越高
• 网站的关键词排名：关键词排名越靠前，网站的权重越高
• 网站的收录数量：网站百度收录数量越多，网站百度权重越高
• 网站的浏览量及深度：用户体验越好，网站的百度权重越高

添加 nofollow 标签

给非友情链接的出站链接添加「nofollow」标签，nofollow 标签是由谷歌领头创新的一个「反垃圾链接」的标签，并被百度、yahoo 等各大搜索引擎广泛支持，引用 nofollow 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 nofollow 属性的任何出站链接，以减少垃圾链接的分散网站权重。

优化网站加载速度

---

3.1 优化图片加载

---

issue问题：
优化网站加载逻辑问题：图片最后加载，加入图片懒加载方法

hexo-lazyload-image的作用原理是讲你博客里面img标签的src属性替换为一个loading image，把真实的图片地址放在data-origin属性下面。然后当你的网页翻到那张图片时（也就是图片在窗口中完全可见时），他会有一段js用data-origin的内容替换src，打到懒加载的目的。

一般情况下懒加载和gallery插件会发生冲突，比如按照我上面所说，最终结果就会变成，可能只有第一张图片在gallery中打开是原图，右翻左翻都会是那张loading image，需要你掌握js，可以修改matery.js里面的内容，甚至可能换一个gallery，比如photosiwpe之类的

解决方法：修改/themes/matery/source/js中的matery.js文件

第103行：

$('#articleContent, #myGallery').lightGallery({
    selector: '.img-item',
    // 启用字幕
    subHtmlSelectorRelative: true,
    showThumbByDefault: false   //这句加上
});

后面加上：

$(document).find('img[data-original]').each(function(){
    $(this).parent().attr("href", $(this).attr("data-original"));
});

再装个插件，https://github.com/Troy-Yang/hexo-lazyload-image
在博客根目录配置.yml文件加入对应字段，如下：

# lazyload configuration  2019.08.23
lazyload:
  enable: true 
  onlypost: false
  loadingImg:     # eg ./images/loading.gif

Yml

好了，这样实现了博客网站的图片懒加载。

3.2 Gulp实现代码压缩

---

Gulp实现代码压缩，以提升网页加载速度。

1 首先我们需要安装Gulp插件和5个功能模块，依次运行下面的两条命令。

npm install gulp --save  #安装gulp
# 安装功能模块
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save

2 接下来在博客的根目录下新建gulpfile.js文件，并复制下面的内容到文件中。

var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function() {
  return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function() {
  return hexo.init().then(function() {
    return hexo
      .call("generate", {
        watch: false
      })
      .then(function() {
        return hexo.exit();
      })
      .catch(function(err) {
        return hexo.exit(err);
      });
  });
});

// 启动Hexo服务器
gulp.task("server", function() {
  return hexo
    .init()
    .then(function() {
      return hexo.call("server", {});
    })
    .catch(function(err) {
      console.log(err);
    });
});

// 部署到服务器
gulp.task("deploy", function() {
  return hexo.init().then(function() {
    return hexo
      .call("deploy", {
        watch: false
      })
      .then(function() {
        return hexo.exit();
      })
      .catch(function(err) {
        return hexo.exit(err);
      });
  });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function() {
  return gulp
    .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
    .pipe(gulpif(!isScriptAll, changed("./public")))
    .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
    .pipe(plumber())
    .pipe(
      gulpBabel({
        presets: [es2015Preset] // es5检查机制
      })
    )
    .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
    .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function() {
  var option = {
    rebase: false,
    //advanced: true,               //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
    compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
    //keepBreaks: true,             //类型：Boolean 默认：false [是否保留换行]
    //keepSpecialComments: '*'      //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
  };
  return gulp
    .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
    .pipe(gulpif(!isScriptAll, changed("./public")))
    .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
    .pipe(plumber())
    .pipe(cleancss(option))
    .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function() {
  var cleanOptions = {
    protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
    unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
  };
  var minOption = {
    collapseWhitespace: true, //压缩HTML
    collapseBooleanAttributes: true, //省略布尔属性的值  <input checked="true"/> ==> <input />
    removeEmptyAttributes: true, //删除所有空格作属性值    <input id="" /> ==> <input />
    removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
    removeComments: true, //清除HTML注释
    minifyJS: true, //压缩页面JS
    minifyCSS: true, //压缩页面CSS
    minifyURLs: true //替换页面URL
  };
  return gulp
    .src("./public/**/*.html")
    .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
    .pipe(plumber())
    .pipe(htmlclean(cleanOptions))
    .pipe(htmlmin(minOption))
    .pipe(gulp.dest("./public"));
});

// 压缩 public/uploads 目录内图片
gulp.task("compressImage", function() {
  var option = {
    optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
    progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
    interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
    multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
  };
  return gulp
    .src("./public/medias/**/*.*")
    .pipe(gulpif(!isScriptAll, changed("./public/medias")))
    .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
    .pipe(plumber())
    .pipe(imagemin(option))
    .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
  "build",
  gulp.series(
    "clean",
    "generate",
    "compressHtml",
    "compressCss",
    "compressJs",
    "compressImage",
    gulp.parallel("deploy")
  )
);

// 默认任务
gulp.task(
  "default",
  gulp.series(
    "clean",
    "generate",
    gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")
  )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

3 最后 hexo clean && hexo g && gulp && hexo d 就可以了。

注意，很可能你会运行到第三步，也就是运行gulp压缩命令时会报错，如图所示：

那是因为gulp安装的本地版本和hexo自带的版本不对应导致，第三步gulp压缩可以用下面命令强制使用本地版本：

node ./node_modules/gulp/bin/gulp.js

其他

如果你想更深入的进行代码的修改，建议先去学习一下ejs的基本语法，这对魔改非常有帮助！！

也可以看看这篇《ejs语法入门》

参考链接：

官方文档

Hexo+Github博客搭建完全教程（洪卫）

Hexo 博客主题个性化