hexo主题美化(续)

hexo弹出欢迎弹窗

选择一个好看的弹窗

首先，既然要弹窗，就要好看，而不是JavaScript里的alert()函数。

这块参考网上文章后，选定使用sweetAlert来实现弹窗（SweetAlert），感觉不错。

获取其JavaScript和CSS文件

首先，需要将sweetalert.js和sweetalert.css放到自己博客下。

新建JavaScript文件夹

在博客根目录往下找到\themes\next\source\js文件夹，新建sweetalert.js，文件内容请看这里，觉得复制麻烦的可以直接按Crtl+S进行保存。

新建CSS文件

在博客根目录往下找到\themes\next\source\css文件夹，新建sweetalert.css，文件内容请看这里。

引入到主题中

打开\themes\next\layout_layout.swig，在标签内插入以下语句：

<script src="/js/sweetalert.js"></script>
<link rel="stylesheet" href="/css/sweetalert.css">

这样就完成了引入。

自动弹窗

在博客根目录往下找到\themes\next\source\js文件夹，新建welcome.js：

function welcome(){
    let welcome_text = '欢迎光顾xxx的小窝~'
    if(document.referrer!==''){
        let referrer=document.referrer.split("/")[2];
        welcome_text="欢迎你，来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名
    }
    swal({
        title: " 欢迎！",
        text: welcome_text+'\n打开页面下方音乐以获得更佳体验！',//欢迎文本，可自行修改
        imageUrl: "/images/avatar.jpg",//图片，自行修改位置
        timer: 3000,//弹出时间
        showConfirmButton: false
    });
}
$(document).ready(()=>{//若未引用JQuery，请引用
    welcome()
})

这样就大功告成了~~~

双栏布局

默认情况，博客文章是单栏布局的，如下所示：

但是我们可以通过插件 “hexo-butterfly-article-double-row” 将其调整为双栏布局，如下：

首先执行以下的命令

npm i hexo-butterfly-article-double-row --save

在网站的根配置文件下添加以下的代码

#双栏美化
butterfly_article_double_row:
  enable: true

【重要】这块有个点一定要注意，是在我们默认的根配置文件 _config.yml 中添加上述代码，而不是在主题配置文件中，如果配置在主题文件中后续hexo一键三连的时候会报错，解析有问题：

“Cannot read property ‘enable’ of undefined”

这样之后，可以成功切换双栏了，但有个bug，页面比较丑，且页码是有问题的

通过扒取其他博主的的样式代码，发现有些地方需要改一下，在\themes\butterfly\source\css目录下新建文件mycss.css（一般存自己的一些样式代码，或者想本案例中需要做一些调整的样式代码）,添加以下代码：

#recent-posts>.recent-post-item{
	border-radius: 30px;
}
.layout #recent-posts>.recent-post-item .post_cover{
	height: 280px;
}
#recent-posts>.recent-post-item>.recent-post-info{
	padding: 10px 40px;
}
.layout #recent-posts>.recent-post-item>.recent-post-info>.article-title{
	font-size: 1.6em;
}
#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap{
	font-size: 100%;
}
#pagination {
    overflow: hidden;
    margin-top: 1rem;
    width: 100%;
}

#pagination .page-number{
	box-shadow: 0 8px 16px -4px #2c2d300c;
}
.layout>.recent-posts .pagination>:not(.space){
	box-shadow: 0 8px 16px -4px #2c2d300c;
}

同时在主题配置目录inject字段下引入mycss.css文件

inject
    - <link rel="stylesheet" href="/css/mycss.css">

再次查看效果

个人感觉双栏没有单栏看着舒服，这块只做演示。。。

添加卡通人物

可以给博客添加一个卡通宠物，还能根据你鼠标位置摇头，点击此处（点击此处）进入项目地址：

初级版

已经封装好了插件，但只是模型，不能说话、不能换装、功能较少。

1、安装模块

npm install --save hexo-helper-live2d

2、输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可

npm install packagename  //npm install live2d-widget-model-wanko

具体的packagename和对应图片可以点击此处

3、在 站点配置文件 中新增如下内容（这块要求必须是站点配置文件，不能是主题配置文件）：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: false # 手机中是否展示

3、展示如下：

进阶版

网上也有一些进阶版的卡通人物实现，功能齐全。能说话、能换装、能玩游戏、能拍照、还能自定义。

具体实现，可以参考：

Hexo美化|站宠？看板娘？live2d配置（附魔改插件和新模型）

Hexo博客NexT主题美化之新增看板娘(能说话、能换装)

小标题添加旋转小风车

1、打开 _config.butterfly.yml
找到 Beautify，将 enable 设置为 true，title-prefix-icon 设置为 ‘\f863’

# Beautify (美化頁面顯示)
beautify:
    enable: true
    field: post # site/post
    title-prefix-icon: '\f863' # '\f0c1'
    title-prefix-icon-color: "#F47466"

2、在主题文件夹 source/css/ 中创建一个 icon.css，内容如下：

/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}
/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}

3、并在 _config.butterfly.yml 中找到 inject，在 head 下添加

- <link rel="stylesheet" href="/css/icon.css">

最终展示效果如下：

自定义鼠标指针样式

1、选定好看的鼠标样式，这块为了简答，选择两种鼠标样式，如下：

下载地址为：

https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@1.0/images/mouse.cur
https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur

2、在 /themes/butterfly/source/css路径下创建一个mouse.css文件，在文件中添加如下代码：

body {
  cursor:url(/img/pointer/mouse.cur),
        default;
}
a,
img {
  cursor:url(/img/pointer/pointer.cur),
        default;
}

3、打开站点主题配置文件_config.butterfly.yml，找到inject，在head处直接引入该文件：

inject:
  head:
  - <link rel="stylesheet" href="/css/mouse.css">

效果如下所示：

添加背景动态彩带效果

butterfly提供三种效果：静止彩带、动态彩带、canvas_nest

我选的是动态彩条，修改主题配置文件：

canvas_fluttering_ribbon: # 动态彩带
  enable: true
  mobile: false # false 手机端不显示 true 手机端显示

添加枫叶飘落效果

步骤和前面的基本类似，都是本地引入JS文件，在配置文件中直接调用即可

var stop, staticx;
var img = new Image();
img.src = "https://img.cdn.nesxc.com/2022/02/202202251325420webp";

function Sakura(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
    cxt.save();
    var xc = 20 * this.s / 2;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
    cxt.restore()
};
Sakura.prototype.update = function() {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
        this.r = getRandom("fnr");
        if (Math.random() > 0.4) {
            this.x = getRandom("x");
            this.y = 0;
            this.s = getRandom("s");
            this.r = getRandom("r")
        } else {
            this.x = window.innerWidth;
            this.y = getRandom("y");
            this.s = getRandom("s");
            this.r = getRandom("r")
        }
    }
};
SakuraList = function() {
    this.list = []
};
SakuraList.prototype.push = function(sakura) {
    this.list.push(sakura)
};
SakuraList.prototype.update = function() {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update()
    }
};
SakuraList.prototype.draw = function(cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt)
    }
};
SakuraList.prototype.get = function(i) {
    return this.list[i]
};
SakuraList.prototype.size = function() {
    return this.list.length
};

function getRandom(option) {
    var ret, random;
    switch (option) {
        case "x":
            ret = Math.random() * window.innerWidth;
            break;
        case "y":
            ret = Math.random() * window.innerHeight;
            break;
        case "s":
            ret = Math.random();
            break;
        case "r":
            ret = Math.random() * 4;
            break;
        case "fnx":
            random = -0.5 + Math.random() * 1;
            ret = function(x, y) {
                return x + 0.5 * random - 1.7
            };
            break;
        case "fny":
            random = 1.5 + Math.random() * 0.7;
            ret = function(x, y) {
                return y + random
            };
            break;
        case "fnr":
            random = Math.random() * 0.03;
            ret = function(r) {
                return r + random
            };
            break
    }
    return ret
}

function startSakura() {
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
    var canvas = document.createElement("canvas"),
        cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
    canvas.setAttribute("id", "canvas_sakura");
    document.getElementsByTagName("body")[0].appendChild(canvas);
    cxt = canvas.getContext("2d");
    var sakuraList = new SakuraList();
    for (var i = 0; i < 50; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom("x");
        randomY = getRandom("y");
        randomR = getRandom("r");
        randomS = getRandom("s");
        randomFnx = getRandom("fnx");
        randomFny = getRandom("fny");
        randomFnR = getRandom("fnr");
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura)
    }
    stop = requestAnimationFrame(function() {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee)
    })
}
window.onresize = function() {
    var canvasSnow = document.getElementById("canvas_snow")
};
img.onload = function() {
    startSakura()
};

function stopp() {
    if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false
    } else {
        startSakura()
    }
};

在配置文件中引入：

inject:
  head
  bottom:
    - <script src="/js/leaves.js"></script>