自定义 Twikoo 访客通知邮件模板

效果预览

点击查看参考教程

注意其中我的博客地址、logo 什么的，需要修改为你自己的。

1
<div><div id="isForwardContent"><div><div id="content"><div style="         background: white;         width: 95%;         max-width: 800px;         margin: auto auto;         border-radius: 5px;         border: #49b1f5 1px solid;         overflow: hidden;         -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);         box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);       "><header style="overflow: hidden"><img src="https://cdn.guole.fun/img/bg.min.jpg"style="width: 100%; z-index: 666"/></header><div style="padding: 5px 20px"><div class="dear"style="             position: relative;             color: white;             float: left;             z-index: 999;             background: #49b1f5;             padding: 5px 30px;             margin: -25px auto 0;             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);           ">Dear ${PARENT_NICK}</div><br/><center><h3>来自&nbsp;<strong>${NICK}</strong>&nbsp;的回复</h3></center><hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;"/><br/>&nbsp;&nbsp;<p>您在<a href="${POST_URL}"style="text-decoration: none; color: #49b1f5"target="_blank">&nbsp;${SITE_NAME}&nbsp;</a>上发表的评论：</p><div class="tk-content"style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid;  padding-top: 20px;">${PARENT_COMMENT}</div><p><strong>${NICK}</strong>&nbsp;给您回复啦：</p><div class="tk-content"style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #eee;  margin: 15px 0px;  padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px; ">${COMMENT}</div><p>欢迎再次光临<a style="text-decoration:none; color:#12addb"href="${SITE_URL}"target="_blank">${SITE_NAME}</a>！</p><br/><div class="chakan"style="text-align: center;"><a href="${POST_URL}"style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em"target="_blank">点击去原文查看&gt;&gt;</a><p></p></div><div class="footer-p"style="text-align: center; margin-top: 5rem; display:block;color:#b3b3b1;text-decoration:none;"><img src="https://cdn.guole.fun/logo/guole.fun.png"style="width:1.8rem; margin:0 auto"/>&nbsp;<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;"/>©&nbsp;2021&nbsp;<a href="https://guole.fun/"style="text-align:center; color: #0da1e6a6"target="_blank">guole.fun</a><p></p></div></div></div></div></div><br/></div><style type="text/css">.qmbox::-webkit-scrollbar{display:none}</style><style id="cloudAttachStyle"type="text/css">.qmbox#divNeteaseBigAttach,.qmbox#divNeteaseBigAttach_bak{display:none}</style><style id="blockquoteStyle"type="text/css">.qmbox blockquote{display:none}</style><style type="text/css">.qmbox body{font-size:14px;font-family:arial,verdana,sans-serif;line-height:1.666;padding:0;margin:0;overflow:auto;white-space:normal;word-wrap:break-word;min-height:100px}.qmbox td,.qmbox input,.qmbox button,.qmbox select,.qmbox body{font-family:Helvetica,'Microsoft Yahei',verdana}.qmbox pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;width:95%}.qmbox th,.qmbox td{font-family:arial,verdana,sans-serif;line-height:1.666}.qmbox img{border:0}.qmbox header,.qmbox footer,.qmbox section,.qmbox aside,.qmbox article,.qmbox nav,.qmbox hgroup,.qmbox figure,.qmbox figcaption{display:block}.qmbox blockquote{margin-right:0px}</style><style type="text/css">@media screen and(max-width:1100px){#content p{font-size:10px}#content h3{font-size:14px}.footer-p{font-size:9px}.dear{font-size:12px}}</style><style id="ntes_link_color"type="text/css">.qmbox a,.qmbox td a{color:#236da1}</style></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
  <h2 style="border-bottom:1px solid #dddddd;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">您在
    <a style="text-decoration:none;color: #12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>上的评论有了新的回复</h2>${PARENT_NICK} 同学，您曾发表评论：
  <div style="padding:0 12px 0 12px;margin-top:18px">
    <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${PARENT_COMMENT}</div>
    <p>
      <strong>${NICK}</strong>回复说：</p>
    <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">${COMMENT}</div>
    <p>您可以点击
      <a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">查看回复的完整內容</a>， 欢迎再次光临
      <a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。
      <br></p></div>
</div>

文章加密

点击查看参考教程

1.安装插件

1
npm install hexo-blog-encrypt

2.在_config.yml文件中添加内容:

1
2
encrypt:
	enable:true

3.在文章头部加上对应文字

1
2
3
4
5
6
7
8
9
---
title: Hexo加密功能
date: 2019-09-04 23:20:00   
tags: [学习笔记,Hexo]
categories: Hexo      
password: smile   
abstract: Welcome to my blog, enter password to read. 
message: 密码输入框上描述性内容
---

参数说明

参数说明
password该Blog使用的密码
abstractBlog摘要文字（少量）
message密码框上的描述性文字

导航栏居中

点击查看参考教程

自定义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
#nav .menus_items {
    display: inline;
    position: absolute;
    text-align: center;
    width: fit-content;
    left: 0;
    right: 0;
    margin: auto;
}
.menus_item_child li:not(#sidebar-menus li){
    float: left;
    border-radius: 6px!important;
    -webkit-border-radius: 6px!important;
    -moz-border-radius: 6px!important;
    -ms-border-radius: 6px!important;
    -o-border-radius: 6px!important;
}
.menus_item_child:not(#sidebar-menus ul){
    left:calc(-50%)!important;/*这是估算值，为了保持元素居中的，如果不合适可以自己调*/
}
/*导航条间距*/
#nav .menus_items .menus_item{
    padding: 0 0 0 14px;
}
#nav .menus_items .menus_item .menus_item_child{
    float: left;
    border-radius: 6px!important;
    -webkit-border-radius: 6px!important;
    -moz-border-radius: 6px!important;
    -ms-border-radius: 6px!important;
    -o-border-radius: 6px!important;
}

博客访问统计

点击查看参考教程

1.写在需要的页面引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="statistic">
    <div class="content"></div>
</div>

<!-- js -->
<script>
    // 链接替换即可，不需要后面的参数
    fetch('https://v6-widget.51.la/v6/JqNOFlYj12ogPJ9Y/quote.js').then(res => res.text()).then((data) => {
    let title = ['最近活跃访客', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
    let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
    let order = [1, 3, 2, 4, 5] // 新增  可排序，如果需要隐藏则删除对应数字即可。
    // 示例：[1, 3, 2, 4, 5] 显示 ['今日人数', '昨日人数', '今日访问', '昨日访问', '本月访问']，不显示 最近活跃访客(0) 和 总访问量(6)
    for (let i = 0; i < order.length; i++) { document.querySelectorAll('#statistic .content')[0].innerHTML += '<div><span>' + title[order[i]] + '</span><span class="num">' + num[order[i]] + '</span></div>' }
});

  1. 引入css
    在自定义的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
    36
    #statistic {
        font-size: 18px;
        padding: 20px;
        border-radius: 12px;
        width: 100%;
        color: var(--font-color);
        background-color: var(--card-bg);
    }

    div#statistic .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#statistic a {
        text-decoration: none;
    }

    #statistic .content div {
        display: inline-block;
    }

    #statistic div span {
        font-size: 14px;
        line-height: 1.3;
        display: block;
    }

    #statistic div .num {
        letter-spacing: 1px;
        font-weight: bold;
        font-size: 2rem;
        margin-bottom: .8rem;
        white-space: nowrap;
    }

友链朋友圈

点击查看参考教程

参考：友链朋友圈

使用gitHub+vercel+sqlite部署

random.js实现页面随机跳转

点击查看参考教程

1.新建 themes/butterfly/scripts/helpers/random.js

1
2
3
4
5
6
7
8
9
10
11
12
hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
        if (post.random !== false) posts.push(post.path)
    }
    return {
        path: config.path || 'bywind/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
    }
})

2.在主题配置文件引入,themes/butterfly/_config.yml，inject的bottom里添加

1
<script src="/bywind/random.js"></script>

友链美化

点击查看参考教程

在自定义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
36
37
38
39
40
 /* 头像微调 */
.flink-item-icon {
    margin-right: 0 !important;
    transition: .5s !important;
}

.flink-item-name,
.flink-item-desc {
    padding-left: 10px !important;
}

/* 去掉原来自带的before */
#article-container .flink .flink-list>.flink-list-item::before {
    content: none;
}
/*友链边框*/
#article-container .flink .flink-list > .flink-list-item {
    border: 1px solid #c0c6d8;
}
/* 鼠标经过改变背景 */
#article-container .flink .flink-list>.flink-list-item:hover {
    background-color: #61bcf2cc;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}

/* 鼠标经过改变文字颜色 */
#article-container .flink .flink-list>.flink-list-item:hover a {
    color: white !important;
}

/* 鼠标经过头像滚动 */
#article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
    width: 60px;
    margin-left: -70px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

宽屏适配

点击查看参考教程

参考：https://yisous.xyz/posts/d1fc759/?time=1665232765761
1.在自定义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
 .layout{
     max-width:1400px;
 }
 .aside-content{
     max-width:312px;
     min-width:300px;
 }
 @media screen and (max-width: 900px){
     .aside-content{
         max-width:none!important;
     }
 }
/*分页适配宽屏*/
 #archive,#page,#category,#tag{
     width:100%;
 }
 .page:not(.page.home) .aside-content{
     display: none;
 }
 .flink-list-item{
     width:calc(100% / 4 - 15px)!important;
 }
 @media screen and (max-width: 1250px) {
     .flink-list-item{
         width:calc(100% / 3 - 15px)!important;
     }
 }

 /*图库宽屏适配*/
 .gallery-group {
     width: calc(33% - 8px)!important;
 }

1
2
3
4
5
6
7
参考链接：https://anzhiy.cn/posts/sdxhu.html
动画：https://blog.justlovesmile.top/posts/e24ee5c3.html
https://blog.xmwpro.com/post/acd421de.html
Butterfly主题美化教程：https://butterfly.zhheo.com/docs/
参考链接：https://tzy1997.com/articles/hexo1606/
Butterfly 美化日记：https://blog.jayhrn.com/posts/716a/
提取图片主题色：https://blog.justlovesmile.top/posts/b16c0eda.html