前言

本文是基于大佬们的轮子进行魔改的，如果发现魔改中出现了报错，并且无法修复的话，请回滚一下主题，everfu/hexo-theme-solitude
由于solitude和butterfly的代码有点相似（不保证完全相似）所以这里把一些大佬魔改butterfly代码的一小部分搬过来了（）

侧边栏时钟（白夜大佬）

1.添加js和css

创建solitude/source/js/custom/digit-clock.js文件，在其中添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// 创建一个包含10个元素的数组，每个元素的值为索引  
var _time10 = Array.from(Array(10)).map((n, i) => i);
// 创建一个包含前6个元素的数组，作为时间的小时和分钟  
var _time6 = _time10.slice(0, 6);
// 创建一个包含前3个元素的数组，作为时间的秒钟  
var _time3 = _time10.slice(0, 3);
// 创建一个包含3个子数组的二维数组，用于表示时钟的结构  
var _Structure = [
    [_time3, _time10],
    [_time6, _time10],
    [_time6, _time10]
];
// 创建一个div元素作为时钟的容器，并设置id为'clock'  
var clock = document.createElement('div');
clock.id = 'clock';
// 将时钟容器添加到元素中元素中  
document.getElementById("card-digit-clock").appendChild(clock);
// 创建一个数组用于存储每个数字组的div元素  
var digitGroups = [];
// 请求动画帧并调用update函数  
requestAnimationFrame(update);
// 遍历_Structure数组  
_Structure.forEach(digits => {
    // 创建一个div元素作为数字组的容器，并添加类名'digit-group'  
    var digitGroup = document.createElement('div');
    digitGroup.classList.add('digit-group');
    // 将数字组的容器添加到时钟容器中，并将其添加到digitGroups数组中  
    clock.appendChild(digitGroup);
    digitGroups.push(digitGroup);
    // 遍历digits数组  
    digits.forEach(digitList => {
        // 创建一个div元素作为数字的容器，并添加类名'digit'  
        var digit = document.createElement('div');
        digit.classList.add('digit');
        // 遍历digitList数组  
        digitList.forEach(n => {
            // 创建一个div元素作为数字的子元素，并添加类名'digit-number'，设置文本内容为n  
            var ele = document.createElement('div');
            ele.classList.add('digit-number');
            ele.innerText = n;
            // 将数字的子元素添加到数字的容器中  
            digit.appendChild(ele);
        });
        // 将数字的容器添加到数字组的容器中  
        digitGroup.appendChild(digit);
    });
});
// 定义update函数  
function update() {
    // 请求动画帧并调用update函数  
    requestAnimationFrame(update);
    // 创建一个Date对象表示当前时间  
    var date = new Date();
    // 获取当前时间的小时、分钟和秒钟，并将它们转换为两位数的字符串数组  
    var time = [date.getHours(), date.getMinutes(), date.getSeconds()].
        map(n => `0${n}`.slice(-2).split('').map(e => +e)).
        reduce((p, n) => p.concat(n), []);
    // 遍历time数组  
    time.forEach((n, i) => {
        var digit = digitGroups[Math.floor(i * 0.5)].children[i % 2].children;
        // 遍历数字组的子元素  
        Array.from(digit).forEach((e, i2) => e.classList[i2 === n ? 'add' : 'remove']('bright'));
    });
}

然后创建solitude/source/css/custom/digit-clock.css文件，在里面添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#card-digit-clock {
    display: flex;
    justify-content: center;
    align-items: center;
}
#clock {
    font-size: 10px;
    position: relative;
}
.digit-group {
    display: inline-block;
}
.digit-group:not(:last-child):after {
    color: inherit;
    content: ":";
    font-size: 50px;
}
.digit {
    display: inline-block;
    width: 33px;
}
.digit .digit-number {
    color: inherit;
    transform: rotate(-90deg);
    transition: font-size 200ms,transform 350ms,color 150ms;
}
.digit .digit-number.bright {
    color: inherit;
    font-size: 25px;
    transform: rotate(0deg);
}

2.添加aside.yml

在[BlogRoot]/source/_data目录下新建一个aside.yml文件，内容如下：

1
2
3
4
5
6
7
8
- name: digit-clock
  title:
  class: card-digit-clock
  id: card-digit-clock
  icon:
  content_class:
  content_id: 
  content_html: "<script defer async pjax src='/js/custom/digit-clock.js'></script>"

3.在主题配置文件添加组件

在150行左右，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
aside:
  # 值：about（关于我）、newestPost（最新文章）、allInfo（网站信息）、flip（公众号二维码）、newest_comment（最新评论）
  # Values: about (info card), newestPost (latest article), allInfo (website information), flip (official account QR code), newest_comment (latest comment)

  # 在主页显示的侧边栏信息
  # Sidebar information displayed on the homepage
  home:
    # 固定的信息（滑动不跟随）
    # Fixed information (not followed by sliding)
    noSticky: "about,digit-clock"
    # 不固定的信息（滑动跟随）
    # Unfixed information (sliding follow)
    Sticky: "allInfo"
  # 在文章页显示的侧边栏信息
  # Sidebar information displayed on the article page
  post:
    noSticky: "about,digit-clock"
    Sticky: "newestPost"
  # 在页面中显示的侧边栏信息
  # Sidebar information displayed on the
  page:
    noSticky: "about,digit-clock"
    Sticky: "newestPost,allInfo"

4.引入css

修改themes\solitude\source\css\index.styl文件，在任意一行添加:

1
@import 'custom/*.css'

最后使用hexo cl和hexo s来预览效果

自定义鼠标样式（猕猴桃佬+站长微改）

1.添加js和css

在[BlogRoot]theme\solitude\source\js新建cursor.js，在里面写上如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var CURSOR;

Math.lerp = (a, b, n) => (1 - n) * a + n * b;

const getStyle = (el, attr) => {
    try {
        return window.getComputedStyle
            ? window.getComputedStyle(el)[attr]
            : el.currentStyle[attr];
    } catch (e) {}
    return "";
};

class Cursor {
    constructor() {
        this.pos = {curr: null, prev: null};
        this.pt = [];
        this.create();
        this.init();
        this.render();
    }

    move(left, top) {
        this.cursor.style["left"] = `${left}px`;
        this.cursor.style["top"] = `${top}px`;
    }

    create() {
        if (!this.cursor) {
            this.cursor = document.createElement("div");
            this.cursor.id = "cursor";
            this.cursor.classList.add("hidden");
            document.body.append(this.cursor);
        }

        var el = document.getElementsByTagName('*');
        for (let i = 0; i < el.length; i++)
            if (getStyle(el[i], "cursor") == "pointer")
                this.pt.push(el[i].outerHTML);

        document.body.appendChild((this.scr = document.createElement("style")));
        // 这里改变鼠标指针的颜色 由svg生成
        this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='.5'/></svg>") 4 4, auto}`;
    }

    refresh() {
        this.scr.remove();
        this.cursor.classList.remove("hover");
        this.cursor.classList.remove("active");
        this.pos = {curr: null, prev: null};
        this.pt = [];

        this.create();
        this.init();
        this.render();
    }

    init() {
        document.onmouseover  = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
        document.onmouseout   = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
        document.onmousemove  = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
        document.onmouseenter = e => this.cursor.classList.remove("hidden");
        document.onmouseleave = e => this.cursor.classList.add("hidden");
        document.onmousedown  = e => this.cursor.classList.add("active");
        document.onmouseup    = e => this.cursor.classList.remove("active");
    }

    render() {
        if (this.pos.prev) {
            this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
            this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
            this.move(this.pos.prev.x, this.pos.prev.y);
        } else {
            this.pos.prev = this.pos.curr;
        }
        requestAnimationFrame(() => this.render());
    }
}

(() => {
    CURSOR = new Cursor();
    // 需要重新获取列表时，使用 CURSOR.refresh()
})();

然后在/source/css新建cursor.css,添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 鼠标样式 */
#cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    background: rgb(32, 159, 181) !important;
    border-radius: 8px;
    opacity: 0.25;
    z-index: 10086;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    transition-property: background, opacity, transform;
  }
  
  #cursor.hidden {
    opacity: 0;
  }
  
  #cursor.hover {
    opacity: 0.1;
    transform: scale(2.5);
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
  }
  
  #cursor.active {
    opacity: 0.5;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
  }

2.引入css和js

在主题配置文件的Inject配置项添加以下代码：

1
2
3
4
5
extends:
  head: # 在head中插入 / Insert in head
    - <link rel="stylesheet" href="/css/cursor.css">
  body: # 在body中插入 / Insert in body
    - <script defer src="/js/cursor.js"></script>

最后使用hexo cl和hexo s来预览效果

网站恶搞标题（猕猴桃佬+站长微改）

1.新建js

这段是给旧版本solitude用的，如果你的solitude已有这个功能，请在主题配置文件开启。

在\source\js\新建title.js,并且在里面添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = '不要走啊(っ °Д °;)っ';
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = '欢迎回来ヾ(≧▽≦*)o';
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

2.插入js

在Inject的body配置项添加以下代码：

1
- <script async src="/js/title.js"></script>

自定义留言板（akilar大佬）

安装插件

在博客根目录打开Git Bash,然后安装以下插件：

1
npm install hexo-butterfly-envelope --save

添加配置项

在config.yml添加以下配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  custom_pic:      
    cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

最后

  • 目前就这么多魔改了，欢迎在评论区提供魔改教程！