Hexo+Next+GitHub博客搭建超详细教程--提升篇（1)

一、添加评论

1. 注册leancloud

在 leancloud 上注册账号，新建应用，选择开发版，应用名称随意。

打开应用，在 存储 的 结构化数据 点击 创建Class 。

输入名字为 Comment

再创建一个名字为 Counter Class（后面做文章阅读量统计用）

点击设置-安全中心，找到 Web安全域名 ，添加自己的博客地址。

点击 应用Keys ，复制其中的 appid 和 appkey 备用。

2. 添加到博客

打开主题配置文件，查找 valine ，将内容替换为以下内容，其中 appid 和 appkey 填入自己的。

master为自己的邮箱地址的md5值，点击这里在线获取md5

（部分配置目前不生效，在后续的修改中会逐渐生效）

# 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 appid
  appkey:  # your appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊!\nTips:\n1.这里可以支持Markdown语法哦~\n2.请尽量使用主流邮件地址，例如QQ、网易、谷歌等等，使用不常见的邮箱地址(例如@cr.cx)可能收不到回复通知哦~\n3.使用QQ邮箱可以自动获取QQ头像~ # comment box placeholder
  avatar: monsterid # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  master: ["your email(md5)"]
  friends: ["your friend's email(md5)", "your friend's email(md5)"]
  tagMeta_master:  "博主"
  tagMeta_friends: "小伙伴"
  tagMeta_visters: "访客"
  enableQQ: true

3. 修改评论区样式

打开 ./themes/next/source/css/_custom/custom.styl 文件，在末尾添加以下内容

//评论区卡片样式
.comments .vcards .vcard {
	padding: 15px 20px 0 20px;
	border-radius: 10px;
	margin-bottom: 15px;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
	transition: all .3s
}
.comments .vcards .vcard:hover {
	box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12)
}
.comments .vcards .vcard .vh .vcard {
	border: none;
	box-shadow: none;
}

//评论头像旋转
img.vimg {
     transition: all 1.5s   /* 旋转时间为 1s */
}
img.vimg:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
}

4. 添加背景图

仍然是 custom.styl 文件，在末尾添加

#veditor {
  height: 300px;
	background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp);
	// background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: rgba(255, 255, 255, 0);
	resize: vertical
}

获取焦点时背景图消失：

添加

#veditor:focus{
	background-position-y: 10000px;
	transition: all 5s ease-in-out 0s;
}

5. 添加博主、小伙伴和浏览器标识

这个功能需要修改原生的js文件，使用魔改的js。与原生的js相比，增加以下功能

添加博主，小伙伴，访客标签
添加浏览器和操作系统图标，需引入 fontawesome v5.0+ 的 CSS 样式
邮箱检测更严格
增加 QQ 邮箱识别（原版只能通过昵称栏输入 QQ 号识别）
meta placeholder 可自定义

点击魔改的valine.min.js 将其保存在 ./themes/next/source/js/src 文件夹下。

打开 ./themes/next/layout/_third-party/comments/valine.swig 文件，修改其中的

1	<script src="//unpkg.com/valine/dist/Valine.min.js"></script>

为

1	<script src="/js/src/Valine.min.js"></script>

将其中的 new Valine （一整段）修改为

new Valine({
    el: '#comments' ,
    verify: {{ theme.valine.verify }},
    notify: {{ theme.valine.notify }},
    appId: '{{ theme.valine.appid }}',
    appKey: '{{ theme.valine.appkey }}',
    placeholder: '{{ theme.valine.placeholder }}',
    avatar:'{{ theme.valine.avatar }}',
    guest_info:guest,
    pageSize:'{{ theme.valine.pageSize }}' || 10,
    master: "{{ theme.valine.master }}",
    friends: "{{ theme.valine.friends }}",
    tagMeta: ["{{ theme.valine.tagMeta_master }}", "{{ theme.valine.tagMeta_friends }}", "{{ theme.valine.tagMeta_visters }}"],
    metaPlaceholder: {"nick": "昵称/QQ号(必填)","mail": "邮箱(会收到回复哦~)","link": "网址(放上你的博客地址~)"},
    enableQQ: "{{ theme.valine.enableQQ }}",
});

打开 ./themes/next/layout/_layout.swg 文件，

在 head 标签内添加

1	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

6. 添加自定义表情

打开前面下载的 Valine.min.js 文件，

查找 //img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ ，将其剪贴到粘贴板。

查找 smile （由于默认表情第一个是smile），找到 function(e,t){e.exports={smile:，

在每个链接的前面添加刚刚剪贴的内容

（较多，可以使用正则替换）：

:"(.*?)"->"//img.t.sinajs.cn/t4/appstyle/expression/ext/normal/$1"

在 smile 前面添加自己的表情。

格式：<名字>:”<图片地址>”，例如：

1	smile:"https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png",

这里有别人整理的一些表情包，我将其整理为可用的json格式：

原仓库地址：https://github.com/blogimg/emotion

我的仓库地址：https://github.com/Roc136/emotion

可以从我的仓库的README中复制喜欢的表情的地址，也可以将仓库克隆到自己的github里，将链接中的Roc136换成自己的名字。

这里没有使用CDN，不建议放入过多的自定义表情，因为会让表情的加载变得很慢。

效果图：

7. 添加评论邮件通知

在 leancloud 控制台，点击云引擎-部署-部署项目

点击 Git部署，输入地址：https://github.com/zhaojun1998/Valine-Admin

点击手动部署-部署，等待部署完成。

点击设置，添加环境变量如下

变量	值
ADMIN_URL	# 你的评论管理地址
SENDER_NAME	# 名字
SITE_NAME	# 站点名字
SITE_URL	# 站点url
SMTP_HOST	# 邮箱服务器例如QQ邮箱填 smtp.qq.com
SMTP_PASS	# 邮箱密码，不是登陆邮箱使用的密码，在邮箱的smtp设置中查找
SMTP_PORT	# 端口
SMTP_SERVICE	# 邮箱服务商
SMTP_USER	# 发送邮箱，用于发送通知邮件，包括评论通知和回复通知
TEMPLATE_NAME	# 主题，目前有rainbow和default两种
TO_EMAIL	# 主人邮箱，用于接收评论通知

如下

详见 http://www.zhaojun.im/hexo-valine-admin/

二、变化的背景

（包括修改背景随时间变化，标题栏字体、背景颜色随背景变化，页面底部信息随背景变化）

打开 ./themes/next/source/css/_custom/custom.styl 文件，在 body 前面添加

:root {
  --bgurl: ;
  --brand-color: rgb(106,0,95);
  --site-meta-color: black;
}

（这里需要做过前面的美化教程中的添加背景图和修改标题颜色背景的工作，见Hexo+Next+GitHub博客搭建超详细教程–美化篇（1)）

将 body 中的 background 的链接修改为 var(--bgurl)

将 .site-meta 中的 background 的链接修改为 var(--site-meta-color)

将 brand 中的 color 修改为 var(--brand-color)

打开 ./theme/snext/css/_common/components/footer/footer.styl 文件

在最前面添加

1
2
3

:root {
 --footer-color: #1e1e1e; 
}

将 footer 中的 color 改为 var(--footer-color)

在 ./themes/next/source/js/src/ 文件夹下新建文件 color.js ，在其中添加以下内容

var bg_num=31,time=600000,bg_id=(Math.ceil(new Date().getTime() / time) % bg_num + 1).toString();
// var url="https://blog-roc.oss-cn-hongkong.aliyuncs.com/background/bj" + bg_id + ".jpg";
var url="/images/background/bj" + bg_id + ".jpg";
document.documentElement.style.setProperty('--bgurl', "url("+url+")");
console.log("背景id（每"+time/60000+"分钟改变一次）："+bg_id);

(function() {

    var root = document.documentElement;

    var TEXTColor = function(obj) {
        if(obj instanceof TEXTColor) return obj;
        if(!(this instanceof TEXTColor)) return new TEXTColor(obj);
    }

    if(typeof exports !== 'undefined') {
        if (typeof module !== 'undefined' && module.exports) {
            exports = module.exports = TEXTColor;
        }
        exports.TEXTColor = TEXTColor;
    } else {
        root.TEXTColor = TEXTColor;
    }

    function resBgColor(rgbArr) {
        var color = 0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
        return color? '#000000': '#ffffff'
    }

    TEXTColor.findTextColor = function findTextColor(colorValue) {
        // #123456或者rgb(12,34,56)转为rgb数组[12,34,56]
        const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        var that = colorValue;
        if (/^(rgb|RGB)/.test(that)) {
            // 处理rgb转为数组
            var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
            return resBgColor(aColor);
        } else if (reg.test(that)) {
            // 处理十六进制色值
            var sColor = colorValue.toLowerCase();
            if (sColor && reg.test(sColor)) {
                if (sColor.length === 4) {
                var sColorNew = "#";
                for (var i = 1; i < 4; i += 1) {
                    sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for (var i = 1; i < 7; i += 2) {
                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
            }
            return resBgColor(sColorChange);
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
    
    function hexToRgb(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? [
          parseInt(result[1], 16),
          parseInt(result[2], 16),
          parseInt(result[3], 16)
         ] : null;
    }

    function componentToHex(c) {
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }
      
      function rgbToHex(r, g, b) {
        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }

    //some colors from https://gist.github.com/ruanyf/e6c896df1c24d0236eb93d65144f2907
    function hksubcolor(rgbcolor) {
        var color_list=["#b51921","#b2103e","#c41832","#ef342a","#a84d18","#f68f26","#faca07","#07594a","#4ba946","#5fc0a7","#0376c2","#c41832","#c41832","#be3223","#f45f7c","#d16f20","#ffd00d","#076750","#7abf45","#75c7b9","#077cb0","#29409a","#ee1e4f","#d2174a","#f79d8b","#ce7020","#e9a519","#fddf55","#076a66","#a7c299","#098ec4","#89d2e3","#7572a7","#f7b1bf","#f67e2a","#f57125","#fbaf37","#fde14e","#076c53","#b2d68c","#8fd1cd","#0798c7","#9597ca","#69686d","#f47a25","#fcba5d","#f8d29d","#ffe285","#077e7a","#d0e4a9","#81cdc1","#22b6ed","#b4d6f2","#c077af","#bbbfc2","#fed7a6","#fcae62","#ffe901","#078e82","#d7df3f","#89d3de","#22b6ed","#b295c5","#c5c4c9","#d1d5d8","#f2f1f6","#efe946","#fff455","#ffe901","#4c7020","#c4e0e1","#79bce7","#b7e1fa","#c7a7d2","#e5e4e9","#f2f1f6","#f2f2f6","#1fb27f","#b5a87f","#07b195","#d7df3f","#6dade2","#4dc7ec","#a8b7d8","#b8a1a9","#f8c9cb","#f2f1f6"];
        var result = hexToRgb(color_list[0]);
        function sum(arr) {
            return arr[0]+arr[1]+arr[2];
        };
        for (var i=0;i<color_list.length;i+=1) {
            var c=color_list[i];
            var rgbc=hexToRgb(c);
            if (Math.abs(sum(result)-sum(rgbcolor))>Math.abs(sum(rgbc)-sum(rgbcolor))) {
                result=rgbc;
            }
        }
        return rgbToHex(result[0],result[1],result[2]);
    }

    function get_bg_color() {
        return new Promise(resolve => {
            const colorThief = new ColorThief();
            const bg_img = new Image;
            bg_img.crossOrigin = 'Anonymous';
            bg_img.onload = function(){
                var result = colorThief.getColor(bg_img)
                var bg_color = "#"+result[0].toString(16) + result[1].toString(16) + result[2].toString(16);
                resolve(bg_color);
                var level = 1;
                document.documentElement.style.setProperty("--brand-color", "rgb("+result[0]*level+","+result[1]*level+","+result[2]*level+")");
                document.documentElement.style.setProperty("--site-meta-color", hksubcolor([255-result[0]*level,255-result[1]*level,255-result[2]*level]));
            }
            bg_img.src = url;
        });
    }

    function set_text_color(bg_color) {
        if (typeof define === 'function' && define.amd) {
            define('color-js' ,[], function() {
                return TEXTColor;
            });
        }
        var textcolor = TEXTColor.findTextColor(bg_color);
        document.documentElement.style.setProperty("--footer-color", textcolor);
    }

    (async function() {
        var bg_color = await get_bg_color();
        set_text_color(bg_color);
    })();
})();

其中第一行的 bg_num 是背景图的数量，time 是切换时间，以毫秒为单位，可以根据自己的需求修改。

打开 ./themes/next/layout/_layout.swig 文件，在head标签内添加

1
2
3

<!--根据背景切换footer颜色-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script type="module" src="/js/src/color.js"></script>

接下来将背景图存放到 ./themes/next/source/images/background/ 文件夹下，并依次重命名为 bj+编号.jpg （如 bj1.jpg、bj2.jpg）即可。