Hexo+Butterfly博客搭建教程

主要参考教程：

待看教程：

其他教程（没细看，可以参考）：

Hexo博客常见问题

Vercel部署有次数限制，最好先用hexo s本地调试好之后，再hexo d部署

image-20230104045054564

Hexo+Butterfly奇淫技巧

永久链接

搜索

当网站数据多了，建议用搜索系统，会使得网站加载速度更快！

在线聊天

友链朋友圈

Twikoo 邮件回复模板

自己稍微改一下就可以用啦。

发给别人:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div style="max-width: 600px;padding: 3rem 1rem 0;margin: auto;font-size: 14px;color: #444;">
  <style>*{background:none!important}pre,code{white-space:pre-wrap!important}</style>
  <!--头部-->
  <div style="display: flex;height: 80px;">
    <img style="border-radius: 25%;width: 80px;height: 80px;" src="https://www.recclay.cc/img/recclay.png" alt="ReCclay">
    <div style="display: flex;flex-direction: column;justify-content: end;line-height: 1.7;margin-left: 1rem;">
      <span style="font-size: 18px;white-space: nowrap;">你好,『&nbsp;
        <span style="font-weight: bold;">${PARENT_NICK}</span>&nbsp;』</span>
      <span style="color: #555;">您在本站的留言有新的回复。</span></div>
  </div>
  <!--主体-->
  <div style="margin-top:30px;">
    <div style="margin-bottom: 30px;">
      <span style="display: flex;align-items: end;">${NICK}
        <span style="font-size: 12px;color: #888;margin-left: .5rem;">回复说：</span></span>
      <div style="display: flex;flex-direction: column;max-width: 100%;margin-top:5px;background: rgb(243 244 246 / 60%)!important;padding: 0 1.5rem;border-radius: 5px 25px 25px 25px;width: fit-content;">${COMMENT}</div></div>
  </div>
  <!--底部-->
  <div>
    <a href="${POST_URL}" style="background: #36d1dc!important;background: -webkit-linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;background: linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;padding: .5rem 1rem;border-radius: 10px;margin-bottom: 1rem;box-shadow: 0 0 18px rgb(159 198 255);color: white;font-size: 16px;text-decoration: none;display: block;width: fit-content;">查看详细内容</a>
    <p style="margin: 5px!important;color: #888;font-size: 12px;">此邮件由系统自动发出，请勿直接回复</p>
    <a href="${SITE_URL}" style="margin: 5px;color: #888;font-size: 12px;text-decoration: none;">RECCLAY.CC</a></div>
</div>

渲染效果：

image-20230103183028321

发给站长：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div style="max-width: 600px;padding: 3rem 1rem 0;margin: auto;font-size: 14px;color: #444;">
  <style>*{background:none!important}pre,code{white-space:pre-wrap!important}</style>
  <!--头部-->
  <div style="display: flex;height: 80px;">
    <img style="border-radius: 25%;width: 80px;height: 80px;" src="https://www.recclay.cc/img/recclay.png" alt="ReCclay">
    <div style="display: flex;flex-direction: column;justify-content: end;line-height: 1.7;margin-left: 1rem;">
      <span style="font-size: 18px;">你好,『&nbsp;
        <span style="font-weight: bold;">ReCclay</span>&nbsp;』</span>
      <span style="color: #555;">您的博客有了一条新的留言。</span></div>
  </div>
  <!--主体-->
  <div style="margin: 30px 0;">
    <span style="display: flex;align-items: end;">${NICK}
      <span style="font-size: 12px;color: #888;margin-left: .5rem;">留言说：</span></span>
    <div style="display: flex;flex-direction: column;max-width: 100%;margin-top:5px;background: rgb(243 244 246 / 60%)!important;padding: 0 1.5rem;border-radius: 5px 25px 25px 25px;width: fit-content;">${COMMENT}</div></div>
  <!--底部-->
  <div>
    <a href="${POST_URL}" style="background: #36d1dc!important;background: -webkit-linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;background: linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;padding: .5rem 1rem;border-radius: 10px;margin-bottom: 1rem;box-shadow: 0 0 18px rgb(159 198 255);color: white;font-size: 16px;text-decoration: none;display: block;width: fit-content;">前往原文查看</a>
    <p style="margin: 5px!important;color: #888;font-size: 12px;">此邮件由系统自动发出，请勿直接回复</p>
    <a href="${SITE_URL}" style="margin: 5px;color: #888;font-size: 12px;text-decoration: none;">RECCLAY.CC</a></div>
</div>

渲染效果：

image-20230106011801994

阿里云邮箱开通

没有服务器不能备案，备案需要申请备案服务号。所以，登录邮箱暂时只能使用阿里云提供的入口。

mail域名解析的时候，阿里云可以一键完成，操作方法如下：

image-20230102224852688

阿里官网也有相关介绍：阿里云（万网）域名使用阿里邮箱如何设置解析? (aliyun.com)

博客添加自定义css和js文件

css文件在head引入，js文件在bottom里引入，有的js要求在head引入，不然无法生效。

文章H1-H6标题小风车转动效果

首页添加博客新年倒计时卡片

Hexo 切换壁纸（待做）

1、配置PJAX

2、配置background为none

3、设置透明背景CSS代码（添加到自己任一个CSS文件即可）

1
2
3
4
5
6
7
8
:root {
    /* 主题 */
    --card-bg: rgba(255, 255, 255, .6);
}
[data-theme='dark'] {
    /* 主题 */
    --card-bg: rgb(47 48 50 / 50%);
}

wowjs插件特效

主页的文章卡片还有侧边栏卡片那种滑动到那部分然后卡片才出现的效果实现？

使用gulp压缩博客静态资源

Butterfly 边栏排序

参数：sort_order。简单来讲，就是配置数字来实现排序，如果不配置，则默认为 0。 数字越小，排序越靠前。

首页分类磁铁

评论输入提醒（Leonus）

懒加载

试了下，加载图片速度太慢了，不能接受！

资源压缩

如何优雅隐藏 Hexo 文章（有空再好好看下官方的草稿）

看这篇文章最后说，_post文件夹下还可以规划文件夹？我觉得是个归类的好办法，怎么搞一下呢？

图片、字体资源分享

PJAX 适配

侧边栏公众号添加

针不戳！GitHub Actions 入坑指南

hexo博客修改时间

博客图片处理（含：图床、Webp、压缩图片）

picgo支持通过插件上传前压缩或者转换格式

oos+cdn

imagine、tinypng压缩图片比较好使

【我的Typora配置参考教程】：2022年Typora+PicGo+阿里云OSS服务配置图床保姆级教程

typora快捷键如何修改？

网站底部徽标（badgen）制作

CDN 配置参考

Picgo图片压缩插件：picgo-plugin-compress

我的Picgo的默认目录：

1
C:\Users\reccl\AppData\Roaming\picgo

在该目录下大概git bash，安装插件：（后面的--registry=https://registry.npm.taobao.org为可选项）

1
npm install picgo-plugin-compress --save --registry=https://registry.npm.taobao.org

安装依赖：（后面的--registry=https://registry.npm.taobao.org为可选项）

1
npm install --registry=https://registry.npm.taobao.org

重启picgo。

然后，在picgo的图形界面配置中，选择“配置plugin - picgo-plugin-compress”，选择默认压缩工具为“imagemin”。（经测试，选其他两个会出现无法上传的情况）

配置完毕后，选择“启用 transformer - compress”即可。

如果不放心，可以再重启一下，之后上传图片到图床进行测试！

参考

待做/待看

Hexo 博客友链样式修改（待做）

Hexo 自定义页脚（待做）

Hexo 语雀同款链接卡片—butterfly主题标签外挂（类似Notion Bookmark）（待做）

butterfly导航栏修改方案（待做）

Hexo + 语雀写作（好像很不错）（待看）

想去整的效果？（待做）

1、类似下述的分类效果实现。链接：文章分类 | Leonus

image-20230103032901576

2、基于Memos的说说、录文、清单，参考：空间动态 | Leonus

4、这两个网页也是你做的？https://blog.leonus.cn/

5、复制粘贴顶部的提示

自定义js添加这个代码就行：

1
2
3
4
5
6
7
document.querySelector('body').addEventListener('copy', (e) => {
    if (e.target.tagName == 'TEXTAREA' && e.target.className == '') return
    btf.snackbarShow("复制成功~")
});
document.querySelector('body').addEventListener('paste', (e) => {
    btf.snackbarShow("粘贴成功~")
});

样式的话我扒的Heo的，就不说了

顶部加载条：

使用这个，再使用css进行美化就可以了：https://codebyzach.github.io/pace/

6、博客底部怎么写的？

参考洪哥的，也不太好意思写文章，源码修改你可以看我这个https://blog.leonus.cn/2022/hexo.html#%E9%A1%B5%E8%84%9A，css的话自己扒一下吧

7、修改页面的透明度（可以看到整张壁纸）？

自定义css改成下面这样就可以

1
2
3
4
5
6
:root {
    --card-bg: rgba(255, 255, 255, .6);
}
[data-theme='dark'] {
    --card-bg: rgba(0, 0, 0, .5);
}

每日早报（待看）

评论表情放大（除emoji）（待看）

网站弹窗（待做）