GitHub + Hexo搭建本身博客(二) Next主题配置

时间 2019-11-07

标签 github hexo 搭建本身博客主题配置栏目 Git 繁體版

原文原文链接

能够访问个人博客来查看效果，上面有更详细教程： sandop.github.io/javascript

1、基本配置

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 自己的配置；另外一份位于主题目录下，这份配置由主题做者提供，主要用于配置主题相关的选项。css

为了描述方便，在如下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。html

一、站点基本设置

在站点配置文件 即博客根目录下的_config.yml中java

# Site
title: Sando博客       
subtitle: 代码日记      
description: 寄杂志第
keywords:
author: Sando
language: zh-Hans
timezone:

复制代码

二、头像设置

2.1 设置头像

在站点配置文件 中新增avatar，值设置为头像的连接地址。地址能够是网络地址，也能够是本地地址（放置在source/images/ 目录下）jquery

#侧边栏头像设置
avatar: /images/user.jpg
复制代码

2.2 头像旋转动画

打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加以下代码：git

.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);
  }
}

复制代码

三、主题布局设置

在主题配置文件即在next主题目录下的_config.yml文件中将scheme设定为Pisces,可根据我的喜爱设置成其余的值github

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
复制代码

四、菜单项设置

在主题配置文件中的menu中设置，增添一个movies 注：千万不要在这设置中文，后面的值那是查找文件的地方！以下web

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文件中对应的yml文档里配置相关联。好比你在站点根目录中的配置文件设置language为zh-Hans，那么就要进入到主题目录下的languages文件中修改zh-Hans.yml，这样才能显示出菜单项新增的中文内容npm

menu:
 home: 首页
 archives: 归档
 categories: 分类
 tags: 标签
 about: 关于
 search: 搜索
 schedule: 日程表
 sitemap: 站点地图
 commonweal: 公益404
 movies: 电影
复制代码

五、菜单项图标设置

在主题配置文件中对应的字段是menu_icons。格式为item name：icon name，其中item name与所配置的菜单名字对应，icon name是Font Awesome图标的名字。而 enable 可用于控制是否显示图标，你能够设置成 false 来去掉图标。json

menu_icons:
 enable: true
 home: home
 about: user
 categories: th
 tags: tags
 archives: archive
 commonweal: heartbeat
 movies: film
复制代码

新建的栏目icon，须要在Font Awesome图标库存在，例如新建的movies，在图标库中查询选择film图标，在主题配置文件的menu_icons中，更改movies: film

六、侧栏位置设置

在主题配置文件中修改主题目录下sidebar的position值

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
 position: left
  #position: right
复制代码

七、添加标签页面

前面经过修改next主题下的_config.yml文件中的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中添加标签便可

八、侧边栏社交栏目

侧栏社交连接的修改包含两个部分，第一是连接，第二是连接图标。二者配置均在 主题配置文件 中

（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
复制代码

九、显示当前浏览进度

主题配置文件 即themes/*/_config.yml中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   //返回顶部按钮的百分比
复制代码

2、个性化设置

一、添加萌萌哒二次元看板娘

英文介绍中文介绍

1.一、安装插件

npm install --save hexo-helper-live2d

1.二、配置

请向根目录的 _config.yml 文件或主题的 _config.yml 文件中添加配置.

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

复制代码

模型链接配置详细介绍

1.三、配置文件

配置文件有不少方法这里主要讲我使用的方法：详情请参考以下：

英文介绍中文介绍

1.3.1 在博客根目录下建文件夹live2d_models；

1.3.2 再在live2d_models下建文件夹<你喜欢的模型名字>；

1.3.3 再在<你喜欢的模型名字>下建json文件：<你喜欢的模型名字>.model.json；

1.四、安装模型

在命令行（即Git Bash）运行如下命令便可：

npm install --save live2d-widget-model-<你喜欢的模型名字> 模型安装

1.五、查看结果

在命令行（即Git Bash）运行如下命令，在http://127.0.0.1:4000/查看测试结果：

hexo clean && hexo g && hexo s

1.六、更改模型

若更改模型请从第二步更改model.use；删除第三步原有文件，从新建立，安装模型，查看结果

二、实现fork me on github

2.一、点击这里挑选本身喜欢的样式，并复制代码

2.二、而后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在`<div class="headband"></div>`的下面)，并把href改成你的github地址

2.三、若位置不对，在 img 标签中修改 `style="position:fixed;top:0;right:0"`

三、设置网站的图标Favicon

在EasyIcon或者Iconfont中找一张（32*32）的ico图标，并将图标名称改成favicon.ico，而后把图标放在/themes/next/source/images里，而且修改主题配置文件 ：

四、首页文章添加阴影效果

打开\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);
}
复制代码

五、网站顶部加载条

修改主题配置文件(_config.yml)将pace: false改成pace: true就好了，你还能够换不一样样式的加载条，以下图：

六、统计文章阅读量

经过leanCloud统计您网站的文章阅读量 1.注册LeanCloud, 并建立一个你本身的应用; 2.点击图片右上角的设置图标进入应用界面; 3.到此，你的应用建立成功，继续表的建立,建立表，并将表的名字命名为：Counter 4.打开设置 -> 应用key 获取App ID和App Key; 5.最后打开主题配置文件: themes/*/_config.yml;

leancloud_visitors:
 enable: true
 app_id: #你的app_id
 app_key: #你的的app_key
复制代码

6.完成配置并从新编译。到此您已经成功设置了阅读量的统计

七、文章加密访问

打开themes->next->layout->_partials->head.swig文件,在如下位置插入这样一段代码：

<script> (function(){ if('{{ page.password }}'){ if (prompt('请输入文章密码') !== '{{ page.password }}'){ alert('密码错误！'); history.back(); } } })(); </script>

复制代码

而后在文章上写上password: ****,以下：

八、修改连接URL

编辑 站点配置文件下的 _config.yml 文件，修改其中的 permalink字段：permalink: :category/:title/

九、文章置顶

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 %}
复制代码

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

第一种方法：在主题配置文件中，找到footer,配置以下：

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
 icon: heart

  # If not defined, will be used `author` from Hexo main config.
 copyright: Sando
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
 powered: false

 theme:
    # Theme & scheme info link (Theme - NexT.scheme).
 enable: false
    # Version info of NexT after scheme info (vX.X.X).
 version: false
复制代码

第二种方法：打开themes/next/layout/_partials/footer.swig,使用隐藏之间的代码便可，或者直接删除。

十一、实现统计功能

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
复制代码

十二、网站底部字数统计

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>
复制代码

1三、添加 README.md 文件

每一个项目下通常都有一个 README.md 文件，可是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的。

在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件 _config.yml，将 skip_render 参数的值设置为skip_render: README.md

1四、修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成

1五、添加RSS

1.站点根目录下安装插件，npm install --save hexo-generator-feed; 2.在站点配置文件_config.yml中，添加以下内容：

# 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 中

1六、点击出现桃心效果

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()
}(window, 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();
        });
    });
})();
复制代码

1七、修改文章内连接文本样式

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;
  }
}
复制代码

1八、在文章末尾添加“本文结束”标记

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.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
 enabled: true
复制代码

4.完成以上设置以后，在每篇文章以后都会添加如此效果图

1九、自定义鼠标样式

打开 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,修改参考

2一、修改内容区域的宽度

编辑主题的 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%，各位能够自行测试进行调整

2二、打赏功能

1.准备支付宝和微信二维码，存放在themes/*/source/images 2.在主题配置文件（_config.yml）中进行设置

# 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

2三、配置Valine评论系统

1.Valine 是一款基于Leancloud的快速、简洁且高效的无后端评论系统； 2.获取Leancloud的APP ID和 APP KEY, 上面第六步设置中已经介绍了获取方法； 3.打开主题配置文件: themes/*/_config.yml;

# 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详细配置官网

2四、添加搜索功能

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
复制代码

2五、不蒜子访问统计

1.编辑 主题配置文件 themes/*/_config.yml中的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>
复制代码

2六、添加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.将返回首页的连接更改成本身的连接。

2七、网页代码压缩

网上有不少相关的博文，常规的作法是使用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查看效果。

2八、添加网站底部跳动的心

1.在主题配置文件中（themes/*/_config.yml）,更改footer;

footer:
 icon: heart
复制代码

2.编辑标签,在/themes/*/layout/_partials/footer.swig中，span中增长id="heart";

<span class="with-love" id="heart">
复制代码

3.编辑css,在themes/*/source/css/_custom/custom.styl中更改样式以下：

// 自定义页脚跳动的心样式
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}
复制代码