hexo的next主题个性化教程

hexo 主题教程

hexo

发布日期: 2020-10-05

更新日期: 2020-10-05

文章字数: 6.6k

阅读时长: 31 分

看到有些 next 主题的网站很炫酷，那么是怎么配置的呢？接下来我会讲一讲如何实现一些炫酷的效果

主要有以下 32 种：

在右上角或者左上角实现 fork me on github
添加 RSS
添加动态背景
实现点击出现桃心效果
修改文章内链接文本样式
修改文章底部的那个带 #号的标签
在每篇文章末尾统一添加 “本文结束” 标记
修改作者头像并旋转
博文压缩
修改 `` 代码块自定义样式
侧边栏社交小图标设置
主页文章添加阴影效果
在网站底部加上访问量
添加热度
网站底部字数统计
添加 README.md 文件
设置网站的图标 Favicon
实现统计功能
添加顶部加载条
在文章底部增加版权信息
添加网易云跟帖 (跟帖关闭，已失效，改为来必力)
隐藏网页底部 powered By Hexo / 强力驱动
修改网页底部的桃心
文章加密访问
添加 jiathis 分享
博文置顶
修改字体大小
修改打赏字体不闪动
自定义鼠标样式
为博客加上萌萌的宠物
DaoVoice 在线联系
点击爆炸效果

实现效果图

具体实现方法

点击这里或者这里挑选自己喜欢的样式，并复制代码。例如，我是复制如下代码：

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

实现效果图

具体实现方法

切换到你的 blog（我是取名 blog，具体的看你们的取名是什么）的路径，例如我是在/Users/chenzekun/Code/Hexo/blog这个路径上，也就是在你的根目录下

然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)

$ npm install --save hexo-generator-feed

接下来打开画红线的文件，如下图：

在里面的末尾添加：(请注意在冒号后面要加一个空格，不然会发生错误！)

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

然后打开 next 主题文件夹里面的_config.yml, 在里面配置为如下样子：(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)

# 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

配置完之后运行：

$ hexo g

重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中。

实现效果图

具体实现方法

这个我之前有一篇文章有讲过了，详情点击我的博客

实现效果图

具体实现方法

在网址输入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

然后将里面的代码 copy 一下，新建love.js文件并且将代码复制进去，然后保存。将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件, 在末尾（在前面引用会出现找不到的 bug）添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

实现效果图

具体实现方法

修改文件 themes\next\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;
  }
}

其中选择.post-body 是为了不影响标题，选择 p 是为了不影响首页 “阅读全文” 的显示样式, 颜色可以自己定义。

实现效果图

具体实现方法

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

实现效果图

具体实现方法

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件, 并添加以下内容：

<div>
    {% if not is_index %}
        -------------本文结束感谢您的阅读-------------
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer 之前两个 DIV）：

代码如下：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml), 在末尾添加：

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

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

实现效果图：

具体实现方法

打开\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);
  }
}

在站点的根目录下执行以下命令：

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

在如下图所示，新建 gulpfile.js ，并填入以下内容：

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');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 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'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。

实现效果图

具体实现方法

打开\themes\next\source\css\_custom\custom.styl, 向里面加入：(颜色可以自己定义)

// 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;
}

实现效果图

具体实现方法

打开主题配置文件（_config.yml），搜索social_icons:, 在图标库找自己喜欢的小图标，并将名字复制在如下位置

实现效果图

具体实现方法

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

// 主页文章添加阴影效果
 .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);
  }

实现效果图

具体实现方法

打开\themes\next\layout\_partials\footer.swig文件, 在 copyright 前加上画红线这句话：

代码如下：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再合适的位置添加显示统计的代码，如图：

代码如下：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

在这里有两中不同计算方式的统计代码：

pv的方式，单个用户连续点击 n 篇文章，记录 n 次访问量

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

uv的方式，单个用户连续点击 n 篇文章，只记录 1 次访客数

<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

实现效果图：

具体实现方法

next 主题集成 leanCloud，打开/themes/next/layout/_macro/post.swig, 在画红线的区域添加℃：

然后打开，/themes/next/languages/zh-Hans.yml, 将画红框的改为热度就可以了

实现效果图

具体方法实现

切换到根目录下，然后运行如下代码

$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

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

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

skip_render: README.md

保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。

实现效果图

具体方法实现

在EasyIcon中找一张（32*32）的ico图标, 或者去别的网站下载或者制作，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

实现效果图

具体实现方法

在根目录下安装 hexo-wordcount, 运行：

$ npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

实现效果图

具体实现方法

打开/themes/next/layout/_partials/head.swig文件，添加红框上的代码

代码如下：

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才 link 的后面）

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

目前，博主的增加顶部加载条的 pull request 已被 Merge===>详情
现在升级最新版的 next 主题，升级后只需修改主题配置文件 (_config.yml) 将pace: false改为pace: true就行了，你还可以换不同样式的加载条，如下图：

实现效果图

在目录 next/layout/_macro / 下添加 my-copyright.swig：

{% 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 %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

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

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

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加增加如下代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

如下：

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

@import "my-post-copyright"

保存重新生成即可。
如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加 copyright: true 的设置，类似：

---
title: 前端小项目：使用canvas绘画哆啦A梦
date: 2017-05-22 22:53:53
tags: canvas
categories: 前端
copyright: true
---

小技巧：如果你觉得每次都要输入copyright: true很麻烦的话, 那么在/scaffolds/post.md文件中添加：

这样每次hexo new "你的内容"之后，生成的 md 文件会自动把copyright:加到里面去
(注意：如果解析出来之后，你的原始链接有问题：如：http://yoursite.com / 前端小项目：使用 canvas 绘画哆啦 A 梦. html, 那么在根目录下_config.yml中写成类似这样：）

就行了。

实现效果图

具体方法实现
有两种实现方法：
① 更新 next 主题，因为最新版本的主题已经支持这种评论。直接在主题配置文件_config.yml 文件中添加如下配置:

gentie_productKey: #your-gentie-product-key

② 如果你不想更新的话，那么按下面步骤进行：
首先，还是在主题配置文件_config.yml 文件中添加如下配置:

gentie_productKey: #your-gentie-product-key

你的productKey就是下面画红线部分

然后在在layout/_scripts/third-party/comments/ 目录中添加 gentie.swig，文件内容如下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id %}
  {% if theme.gentie_productKey %}
    {% set gentie_productKey = theme.gentie_productKey %}
    
    
  {% endif %}
{% endif %}

然后在layout/_scripts/third-party/comments.swig文件中追加：

{% include './comments/gentie.swig' %}

最后，在 layout/_partials/comments.swig 文件中条件最后追加网易云跟帖插件引用的判断逻辑：

{% elseif theme.gentie_productKey %}
      <div id="cloud-tie-wrapper" class="cloud-tie-wrapper">
      </div>

具体位置如下：

可能你hexo s时可能看不到，直接hexo d就可以看到了

近日，我朋友发来消息，说网易云跟帖要关了，我网上查了一下，果然如此

都是泪, 上次用了多说，结果多说关了，接着是网易云跟帖，这次直接用国外的来必力，应该不会这么容易关吧

方法其实还是跟上面差不多的

首先在 _config.yml 文件中添加如下配置：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

其中，livere_uid就是画红线的部分

然后在 layout/_scripts/third-party/comments/ 目录中添加 livere.swig，文件内容如下：


{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
  {% if theme.livere_uid %}
    
  {% endif %}
{% endif %}

然后在 layout/_scripts/third-party/comments.swig文件中追加：

{% include './comments/livere.swig' %}

最后，在 layout/_partials/comments.swig 文件中条件最后追加 LiveRe 插件是否引用的判断逻辑：

{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

完

打开themes/next/layout/_partials/footer.swig, 使用” ” 隐藏之间的代码即可，或者直接删除。位置如图：

还是打开themes/next/layout/_partials/footer.swig，找到：

，然后还是在图标库中找到你自己喜欢的图标，然后修改画红线的部分就可以了。

实现效果图

具体实现方法

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

代码如下：

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

然后在文章上写成类似这样：

在主题配置文件中，jiathis 为 true，就行了，如下图

默认是这样子的：

如果你想自定义话，打开themes/next/layout/_partials/share/jiathis.swig修改画红线部分就可以了

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

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

在文章中添加 top 值，数值越大文章越靠前，如

---
title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成16px，如下所示：

$font-size-base            =16px

修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：

/* 注释文字闪动函数
 #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;
}
*/

打开themes/next/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
  }

其中 url 里面必须是 ico 图片，ico 图片可以上传到网上（我是使用七牛云图床），然后获取外链，复制到 url 里就行了

实现效果图

具体实现方法
在终端切换到你的博客的路径里，然后输入如下代码：

npm install -save hexo-helper-live2d

然后打开Hexo/blog/themes/next/layout
的_layout.swig, 将下面代码放到</body>之前：

{{ live2d() }}

然后在在 hexo 的 _config.yml中添加参数：

live2d:
  model: wanko
  bottom: -30

然后 hexo clean ，hexo g ，hexo d 就可以看到了。

下面是一些 model，可以换不同的宠物

model 模型名称默认值: z16
- Gantzert_Felixander
- Epsilon2.1
- haru
- miku
- ni-j
- nico
- nito
- nipsilon
- nietzsche
- shizuku
- tsumiki
- wanko
- z16
- hibiki
- koharu
- haruto
- Unitychan
- tororo
- hijiki
width 宽度默认值: 150
height 高度默认值： 300
className <canvas>元素的类名默认值： live2d
id <canvas> 元素的 id 默认值： live2dcanvas
bottom <canvas> 元素的底部偏移默认值： -20 如果嫌模型位置不正确可以调整这个参数

~ 用这个有缺点，如果是在手机上看的话，感觉不是很好，宠物一直挡着文字，还有就是加载有点慢~

（感谢Layne网友的提醒，目前手机上显示宠物的问题已经解决，如果不想在手机上显示宠物的话，修改主题配置文件，改为如下：）

live2d:
  model: wanko
  bottom: -30
  mobileShow: false

注意！如果你在 hexo d 的时候出现我下面这个问题

你可以这样，首先删除 hexo 下面的. deploy_git 文件夹，然后运行

git config --global core.autocrlf false

重新 hexo clean,hexo g,hexo d 就行了

实现效果图

[外链图片转存失败, 源站可能有防盗链机制, 建议将图片保存下来直接上传 (img-lQ2kq1SI-1571136856003)(http://ohggtqwxx.bkt.clouddn.com/2017-12-18-053222.png)]

具体实现方法

首先在 daovoice 注册账号,邀请码是0f81ff2f, 注册完成后会得到一个 app_id :

[外链图片转存失败, 源站可能有防盗链机制, 建议将图片保存下来直接上传 (img-niJeM1e3-1571136856004)(http://ohggtqwxx.bkt.clouddn.com/2017-12-18-054308.png)]
, 记下这个 app_id 的值，然后打开/themes/next/layout/_partials/head.swig, 写下如下代码：

{% if theme.daovoice %}
  
{% endif %}

[外链图片转存失败, 源站可能有防盗链机制, 建议将图片保存下来直接上传 (img-1VNWsyM9-1571136856005)(http://ohggtqwxx.bkt.clouddn.com/2017-12-18-054603.png)]

接着打开主题配置文件，在最后写下如下代码：

# Online contact
daovoice: true

daovoice_app_id: 这里填你的刚才获得的 app_id

重新 hexo g ，hexo s 就能看到效果了。

安装成功后可以在 DaoVoice 控制台上的聊天设置里设置聊天窗口样式，附上我的设置

[外链图片转存失败, 源站可能有防盗链机制, 建议将图片保存下来直接上传 (img-sMW8L7x0-1571136856006)(http://ohggtqwxx.bkt.clouddn.com/2017-12-18-055639.png)]

实现效果图

实现方法

跟那个红心是差不多的，首先在themes/next/source/js/src里面建一个叫 fireworks.js 的文件，代码如下：

"use strict";
function updateCoords(e) {
  (pointerX =
    (e.clientX || e.touches[0].clientX) -
    canvasEl.getBoundingClientRect().left),
    (pointerY =
      e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top);
}
function setParticuleDirection(e) {
  var t = (anime.random(0, 360) * Math.PI) / 180,
    a = anime.random(50, 180),
    n = [-1, 1][anime.random(0, 1)] * a;
  return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) };
}
function createParticule(e, t) {
  var a = {};
  return (
    (a.x = e),
    (a.y = t),
    (a.color = colors[anime.random(0, colors.length - 1)]),
    (a.radius = anime.random(16, 32)),
    (a.endPos = setParticuleDirection(a)),
    (a.draw = function () {
      ctx.beginPath(),
        ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
        (ctx.fillStyle = a.color),
        ctx.fill();
    }),
    a
  );
}
function createCircle(e, t) {
  var a = {};
  return (
    (a.x = e),
    (a.y = t),
    (a.color = "#F00"),
    (a.radius = 0.1),
    (a.alpha = 0.5),
    (a.lineWidth = 6),
    (a.draw = function () {
      (ctx.globalAlpha = a.alpha),
        ctx.beginPath(),
        ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
        (ctx.lineWidth = a.lineWidth),
        (ctx.strokeStyle = a.color),
        ctx.stroke(),
        (ctx.globalAlpha = 1);
    }),
    a
  );
}
function renderParticule(e) {
  for (var t = 0; t < e.animatables.length; t++) {
    e.animatables[t].target.draw();
  }
}
function animateParticules(e, t) {
  for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
    n.push(createParticule(e, t));
  }
  anime
    .timeline()
    .add({
      targets: n,
      x: function (e) {
        return e.endPos.x;
      },
      y: function (e) {
        return e.endPos.y;
      },
      radius: 0.1,
      duration: anime.random(1200, 1800),
      easing: "easeOutExpo",
      update: renderParticule,
    })
    .add({
      targets: a,
      radius: anime.random(80, 160),
      lineWidth: 0,
      alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) },
      duration: anime.random(1200, 1800),
      easing: "easeOutExpo",
      update: renderParticule,
      offset: 0,
    });
}
function debounce(e, t) {
  var a;
  return function () {
    var n = this,
      i = arguments;
    clearTimeout(a),
      (a = setTimeout(function () {
        e.apply(n, i);
      }, t));
  };
}
var canvasEl = document.querySelector(".fireworks");
if (canvasEl) {
  var ctx = canvasEl.getContext("2d"),
    numberOfParticules = 30,
    pointerX = 0,
    pointerY = 0,
    tap = "mousedown",
    colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
    setCanvasSize = debounce(function () {
      (canvasEl.width = 2 * window.innerWidth),
        (canvasEl.height = 2 * window.innerHeight),
        (canvasEl.style.width = window.innerWidth + "px"),
        (canvasEl.style.height = window.innerHeight + "px"),
        canvasEl.getContext("2d").scale(2, 2);
    }, 500),
    render = anime({
      duration: 1 / 0,
      update: function () {
        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
      },
    });
  document.addEventListener(
    tap,
    function (e) {
      "sidebar" !== e.target.id &&
        "toggle-sidebar" !== e.target.id &&
        "A" !== e.target.nodeName &&
        "IMG" !== e.target.nodeName &&
        (render.play(), updateCoords(e), animateParticules(pointerX, pointerY));
    },
    !1
  ),
    setCanvasSize(),
    window.addEventListener("resize", setCanvasSize, !1);
}
("use strict");
function updateCoords(e) {
  (pointerX =
    (e.clientX || e.touches[0].clientX) -
    canvasEl.getBoundingClientRect().left),
    (pointerY =
      e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top);
}
function setParticuleDirection(e) {
  var t = (anime.random(0, 360) * Math.PI) / 180,
    a = anime.random(50, 180),
    n = [-1, 1][anime.random(0, 1)] * a;
  return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) };
}
function createParticule(e, t) {
  var a = {};
  return (
    (a.x = e),
    (a.y = t),
    (a.color = colors[anime.random(0, colors.length - 1)]),
    (a.radius = anime.random(16, 32)),
    (a.endPos = setParticuleDirection(a)),
    (a.draw = function () {
      ctx.beginPath(),
        ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
        (ctx.fillStyle = a.color),
        ctx.fill();
    }),
    a
  );
}
function createCircle(e, t) {
  var a = {};
  return (
    (a.x = e),
    (a.y = t),
    (a.color = "#F00"),
    (a.radius = 0.1),
    (a.alpha = 0.5),
    (a.lineWidth = 6),
    (a.draw = function () {
      (ctx.globalAlpha = a.alpha),
        ctx.beginPath(),
        ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
        (ctx.lineWidth = a.lineWidth),
        (ctx.strokeStyle = a.color),
        ctx.stroke(),
        (ctx.globalAlpha = 1);
    }),
    a
  );
}
function renderParticule(e) {
  for (var t = 0; t < e.animatables.length; t++) {
    e.animatables[t].target.draw();
  }
}
function animateParticules(e, t) {
  for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
    n.push(createParticule(e, t));
  }
  anime
    .timeline()
    .add({
      targets: n,
      x: function (e) {
        return e.endPos.x;
      },
      y: function (e) {
        return e.endPos.y;
      },
      radius: 0.1,
      duration: anime.random(1200, 1800),
      easing: "easeOutExpo",
      update: renderParticule,
    })
    .add({
      targets: a,
      radius: anime.random(80, 160),
      lineWidth: 0,
      alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) },
      duration: anime.random(1200, 1800),
      easing: "easeOutExpo",
      update: renderParticule,
      offset: 0,
    });
}
function debounce(e, t) {
  var a;
  return function () {
    var n = this,
      i = arguments;
    clearTimeout(a),
      (a = setTimeout(function () {
        e.apply(n, i);
      }, t));
  };
}
var canvasEl = document.querySelector(".fireworks");
if (canvasEl) {
  var ctx = canvasEl.getContext("2d"),
    numberOfParticules = 30,
    pointerX = 0,
    pointerY = 0,
    tap = "mousedown",
    colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
    setCanvasSize = debounce(function () {
      (canvasEl.width = 2 * window.innerWidth),
        (canvasEl.height = 2 * window.innerHeight),
        (canvasEl.style.width = window.innerWidth + "px"),
        (canvasEl.style.height = window.innerHeight + "px"),
        canvasEl.getContext("2d").scale(2, 2);
    }, 500),
    render = anime({
      duration: 1 / 0,
      update: function () {
        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
      },
    });
  document.addEventListener(
    tap,
    function (e) {
      "sidebar" !== e.target.id &&
        "toggle-sidebar" !== e.target.id &&
        "A" !== e.target.nodeName &&
        "IMG" !== e.target.nodeName &&
        (render.play(), updateCoords(e), animateParticules(pointerX, pointerY));
    },
    !1
  ),
    setCanvasSize(),
    window.addEventListener("resize", setCanvasSize, !1);
}

打开themes/next/layout/_layout.swig, 在</body>上面写下如下代码：

{% if theme.fireworks %}
   
   
   
{% endif %}

打开主题配置文件，在里面最后写下：

# Fireworks
fireworks: true

参考的文章：

原文地址：https://blog.csdn.net/qq_33699981/article/details/72716951

leader755

https://www.leader755.com/leader755/58433.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !

hexo 主题教程

input输入框的限制

原生输入对复制粘贴也会生效，但是 vue 中的双向绑定 v-model 会出现，实际值并没有改变而使显示值变化了。1.文本框只能输入数字<input onkeyup="this.value=this.value.replace(/\D

2020-10-26 input 输入限制

input 输入

hexo博客添加百度统计和Google统计

简介百度统计和 Google 统计主要用于分析网站数据：流量、访客量等。需要注册账号，然后将代码（脚本）嵌入到网站中，然后在后台就会生成对应数据，然后进行分析。百度统计网址：https://tongji.baidu.com Googl

2020-10-05 hexo

百度统计 Google 统计

hexo的next主题个性化教程

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图：

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图：

具体实现方法

实现效果图

具体方法实现

实现效果图

具体方法实现

实现效果图

具体实现方法

实现效果图

具体实现方法

实现效果图

实现效果图

具体实现方法

参考的文章：

给作者买杯咖啡