mccsjs

域名备案中，部分组件和服务可能无法使用

Mon, 20 Jul 2026 09:11:56 GMT

需要调整一下备案内容，正在重新备案，预计两周内恢复

什么是Agent，它能干什么

Thu, 11 Jun 2026 12:38:05 GMT

AI 和 Agent 到底有什么区别？

一个简单的例子：假如你问 DeepSeek，今天上海天气怎么样？它会告诉你天气情况。一次对话到此结束。而如果你对 Agent 说：我的项目启动不了了查一下什么原因并修复,修完启动

Agent 需要完成：

整个过程涉及多个步骤，而用户只需要说一句话。

这就是两者最大的区别： DeepSeek负责回答问题，而Agent负责完成任务。

Agent 就像一个数字员工。

你告诉它目标，它自己思考下一步该怎么做。

例如：

搜索资料→阅读网页→分析数据→调用 API→修改文件→告知结果

最终把结果交给你。

整个过程中，你不需要手把手告诉它每一步应该怎么执行。

Agent与Ai对话软件最大的区别在于：

Agent 会根据当前状态不断思考下一步应该做什么。

而不是等待用户继续输入问题。

Agent 为什么一下子火了？

过去的大模型更像一个知识库，你问问题，它回答问题，流程非常简单。

而现在的ai模型已经拥有：推理能力,长上下文能力，工具调用能力，代码执行能力，网络搜索能力

于是流程开始变成：

AI 开始从「能说不会做」变成「会说会做」。

这是本质上的变化。

Agent 能做什么？

内容创作例如：写博客,写文档,写脚本

Agent 可以自动完成：

软件开发

这是目前最热门的 Agent 应用场景例如：阅读项目代码，修复 Bug，编写报告，自动测试，部署项目

现在很多开发工具已经逐渐具备 Agent 的能力。

比如Codex、Claude Code、Openclaw等。

你给它一个目标：给博客增加lazyload懒加载

它会自动阅读项目结构，下载js，修改代码，运行测试，检查错误

而不是只生成一段代码给你，让你自行添加

近期

Sat, 11 Apr 2026 22:35:14 GMT

最近一个月太忙了，都没时间管理博客，回来发现博客加载不起来了最后发现是cdn证书过期了，更换了就恢复了🤪

然后我发现butterfly利用twikoo可以自行配置说说了，可以在单条说说里面评论我本来想用ech0整一个带后端的，鸽了😄

说说页面配置：

hexo new page shuoshuo

在shuoshuo的index.md中修改

---
title: 说说
date: 2026-04-12 06:25:20
type: shuoshuo
---

在 source 下新建一个 _data 文件夹，里面新建一个 shuoshuo.yml，说说就在这里写

- date: 2026-04-12 07:00:02 # 时间
  key: 5 # 不能重复，不写不能开启评论
  content: | # 这里用管道表示多行内容
    才发现butterfly有这功能了<img src="https://pic.seln.cn/file/picui/XET6TgXG.png" alt="滑稽狂汗.png" width=5% />

不过默认样式有点烂，需要修改一下，不知道是不是我魔改太多的原因🤷‍♀️

新年快乐，马到成功

Tue, 17 Feb 2026 00:00:00 GMT

在过去的一年里，我们或许有收获，有挑战，但正是这些经历让我们更加坚韧和成熟。在新的一年里，愿我们都能像骏马一样，拥有昂扬的斗志，朝着目标奋力奔跑，最终马到成功，事业腾飞！

更重要的是，希望大家在新的一年里身体健康，阖家幸福。愿每一天都充满阳光和欢笑，愿爱与温暖常伴左右。

2026星河长明，步履不停

Wed, 31 Dec 2025 16:08:57 GMT

辞别2025的晨曦与暮色，
我们以梦为舟，驶向2026的黎明。
愿新年的风，吹散所有疲惫；
愿每一步，都踏在希望的土壤上。
不问前路多远，只管心向远方——
2026，愿你我皆如星辰，微光成炬，照亮自己的山河。
🌟 新年快乐，万事顺遂！

利用Cloudflare自建图床并套入cdn

Sun, 28 Dec 2025 11:00:22 GMT

我所使用的是别人的开源项目，项目成品预览：CloudFlare ImgBed，认证码为：cfbed。注：请不要使用演示站点上传，图片数据无法保证

本篇文章所有图片皆为自建图床+CDN效果，速度很快

Cloudflare部署

📂 第一步：Fork 项目

访问 CloudFlare ImgBed 项目
点击右上角的 “Fork” 按钮
选择您的 GitHub 账户
确认 Fork 完成

🏗️ 第二步：创建 Pages 项目

2.1 访问 Cloudflare Dashboard

登录 Cloudflare Dashboard
选择左侧菜单的 “计算和AI” -> “Workers & Pages”
点击 “创建应用程序”
在最下方 Looking to deploy Pages? 选择 “Get started”
在 “导入现有 Git 存储库” 处点击 “开始使用”

2.2 连接 GitHub 仓库

如果首次使用，需要授权 Cloudflare 访问 GitHub
选择您 Fork 的 CloudFlare-ImgBed 仓库
点击 “开始设置”

2.3 配置项目设置

配置项	值	说明
项目名称	`cloudflare-imgbed`（或自定义）	项目标识符
生产分支	`main`	生产环境分支
构建命令	`npm install`	重要：构建命令
构建输出目录	`/`	保持默认

2.4 部署项目

点击 “保存并部署”
等待首次部署完成（约 2-3 分钟）

🗄️ 第三步：配置数据库

注意：kv和d1只需存在一个，若两项都加可能有意料之外的问题

特点	KV 数据库	D1 数据库
读写性能	高	较低
免费额度	少	多
大文件上传	支持	不支持

创建 KV 命名空间

在 Cloudflare Dashboard 中选择 “存储和数据库”
点击 “Workers KV”
点击 “创建实例”
输入命名空间名称：img_url
点击 “创建”

绑定 KV 到项目

返回您的 Pages 项目
选择 “设置” → “绑定”
点击 “添加” → “KV 命名空间”
填写绑定信息：
- 变量名称：img_url（必须是这个名称）
- KV 命名空间：选择刚创建的命名空间
点击 “保存”

注意：绑定 KV 时，变量名称必须为 img_url，这是项目预设的变量名，填错会出现无法进入管理界面等情况。

创建 D1 数据库

注意：kv和d1只需存在一个，若两项都加可能有意料之外的问题

在 Cloudflare Dashboard 中选择 “存储和数据库”
点击 “D1 SQL 数据库”
点击 “创建数据库”
输入数据库名称：img_d1（建议使用此名称）
不选择地区，点击 “创建”

初始化 D1 数据库

创建完成后，点击进入数据库详情页
选择 “控制台” 选项卡
在 SQL 输入框中逐段粘贴并执行初始化语句填写示例：

太多了，请展开

文件表 - 存储文件元数据

CREATE TABLE IF NOT EXISTS files (
    id TEXT PRIMARY KEY,
    value TEXT,
    metadata TEXT NOT NULL,
    file_name TEXT,
    file_type TEXT,
    file_size TEXT,
    upload_ip TEXT,
    upload_address TEXT,
    list_type TEXT,
    timestamp INTEGER,
    label TEXT,
    directory TEXT,
    channel TEXT,
    channel_name TEXT,
    tg_file_id TEXT,
    tg_chat_id TEXT,
    tg_bot_token TEXT,
    is_chunked BOOLEAN DEFAULT FALSE,
    tags TEXT, 
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

系统配置表

CREATE TABLE IF NOT EXISTS settings (
    key TEXT PRIMARY KEY,
    value TEXT NOT NULL,
    category TEXT,
    description TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

索引操作表

CREATE TABLE IF NOT EXISTS index_operations (
    id TEXT PRIMARY KEY,
    type TEXT NOT NULL,
    timestamp INTEGER NOT NULL,
    data TEXT NOT NULL,
    processed BOOLEAN DEFAULT FALSE,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

其他数据表

CREATE TABLE IF NOT EXISTS other_data (
    key TEXT PRIMARY KEY,
    value TEXT NOT NULL,
    type TEXT,
    description TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

创建索引

CREATE INDEX IF NOT EXISTS idx_files_timestamp ON files(timestamp DESC);
CREATE INDEX IF NOT EXISTS idx_files_directory ON files(directory);
CREATE INDEX IF NOT EXISTS idx_files_channel ON files(channel);
CREATE INDEX IF NOT EXISTS idx_files_file_type ON files(file_type);
CREATE INDEX IF NOT EXISTS idx_files_upload_ip ON files(upload_ip);
CREATE INDEX IF NOT EXISTS idx_files_created_at ON files(created_at DESC);
CREATE INDEX IF NOT EXISTS idx_files_tags ON files(tags);

CREATE INDEX IF NOT EXISTS idx_settings_category ON settings(category);

CREATE INDEX IF NOT EXISTS idx_index_operations_timestamp ON index_operations(timestamp);
CREATE INDEX IF NOT EXISTS idx_index_operations_processed ON index_operations(processed);
CREATE INDEX IF NOT EXISTS idx_index_operations_type ON index_operations(type);

CREATE INDEX IF NOT EXISTS idx_other_data_type ON other_data(type);

创建触发器

CREATE TRIGGER IF NOT EXISTS update_files_updated_at 
    AFTER UPDATE ON files
    BEGIN
        UPDATE files SET updated_at = CURRENT_TIMESTAMP WHERE id = NEW.id;
    END;

CREATE TRIGGER IF NOT EXISTS update_settings_updated_at 
    AFTER UPDATE ON settings
    BEGIN
        UPDATE settings SET updated_at = CURRENT_TIMESTAMP WHERE key = NEW.key;
    END;

CREATE TRIGGER IF NOT EXISTS update_index_metadata_updated_at 
    AFTER UPDATE ON index_metadata
    BEGIN
        UPDATE index_metadata SET updated_at = CURRENT_TIMESTAMP WHERE key = NEW.key;
    END;

CREATE TRIGGER IF NOT EXISTS update_other_data_updated_at 
    AFTER UPDATE ON other_data
    BEGIN
        UPDATE other_data SET updated_at = CURRENT_TIMESTAMP WHERE key = NEW.key;
    END;

插入初始的索引元数据

INSERT OR REPLACE INTO index_metadata (key, last_updated, total_count, last_operation_id)
VALUES ('main_index', 0, 0, NULL);

初始化完成

4. 点击 "执行"

绑定 D1 到项目

返回您的 Pages 项目
选择 “设置” → “绑定”
点击 “添加” → “D1 数据库”
填写绑定信息：
- 变量名称：img_d1（必须是这个名称）
- D1 数据库：选择刚创建的数据库
点击 “保存”

🔄 第四步：重新部署

绑定数据库后需要重新部署以生效：

进入项目的 “部署” 页面
找到最新的部署记录
点击右侧的 “…” 菜单
选择 “重试部署”
等待部署完成

第五步：绑定域名

为你的项目配置一个域名，如使用cdn可不用配置

加入EO CDN

Cloudflare本身的速度太慢，域名备案后套上CDN会更快，如没有备案域名忽略这步 ping值：

操作

打开EdgeOne - 控制台并登陆，添加域名点击域名管理➡️添加域名 Cloudflare page域名就是这个第一个域，直接填进去保存就行

配置存储渠道

部署完成后访问您的域名，进入管理后台配置存储渠道。

访问管理后台

访问 https://你的域名/

配置 Telegram 渠道

2.1 获取 TG_BOT_TOKEN

在 Telegram 中搜索 @BotFather
发送 /newbot 命令
先输入你要为机器人准备的英文名字
再输入机器人id，必须_bot结尾
获得 Bot Token（格式：123456789:ABCdefGHIjklMNOpqrsTUVwxyz）

点击上图中被打码的链接，随便发点文字把bot添加到联系人

2.2 获取 TG_CHAT_ID

创建一个新的 Telegram 频道（Channel）

点击右下角的笔➡️新建频道➡️随便填一个名字然后点右上角的确定➡️更改为私密频道 - 将创建的 Bot 添加为频道管理员 - 给予 Bot 消息管理的权限点击创建的频道名➡️点击管理员（如是英文就是第二项）➡️点击添加管理员，搜索bot的名字将他拉进来，给bot所有权限

在频道中发送一条测试消息
向 @VersaToolsBot 转发这条消息
获得频道 ID（示例：-1001234567890）

2.3 配置 Telegram

左上角菜单栏进入 “系统设置” → “上传设置”
找到 “Telegram 渠道配置”
点击 “添加渠道”
填入准备好的 Token 和 Chat ID：
- 渠道名称：自定义名称（如：主渠道）
- Bot Token：从 @BotFather 获得的 Token
- Chat ID：频道 ID（有-号时需要保留）
- 启用状态：开启
点击 “保存设置”

配置 R2 渠道

服务器部署时默认添加了 Cloudflare R2 存储方式，以下步骤仅针对 Cloudflare 部署方式：

在项目设置中绑定 R2 存储桶：
- 选择 “设置” → “绑定”
- 添加 “R2 存储桶”
- 变量名称：img_r2
- R2 存储桶：选择已创建的存储桶 r2的教程看这边：Cloudflare的r2存储桶使用 | mccsjs
在管理后台配置：
- 进入 “系统设置” → “上传设置”
- 配置 R2 渠道参数
- 如需图像审查，填入 R2 公开访问链接提示

请注意Cloudflare R2 的免费额度限制，超过后可能会产生费用。

🔒 安全设置

安全相关设置，在管理后台的 “系统设置” → “安全设置” 中配置

认证管理

用户端认证：用于 Web 端用户登录和 API 认证
管理端认证：管理员用户名和密码，用于访问管理后台

上传管理

图像审查

审查渠道支持 nsfwjs 和 moderatecontent.com，可根据如下步骤自行配置。

moderatecontent.com

访问 ModerateContent
注册并获取免费 API Key（目前已不再支持免费注册）
在管理后台 “系统设置” → “安全设置” 中填入 API Key

安全设置

点开菜单➡️系统设置➡️安全设置➡️管理端认证添加用户名和密码，给自己设置一个管理员账户

🌐 网页设置

前端网页相关设置，在管理后台的 “系统设置” → “网页设置” 中配置

字段名	用途	类型	内容规范
siteTitle	网站标题	字符串	只支持`字符串`类型，设置为你自定义的网站标题
siteIcon	网站图标	字符串	只支持`字符串`类型，设置为你自定义的网站图标链接
ownerName	图床名称	字符串	只支持`字符串`类型，设置为你自定义的图床名称（默认为`Sanyue`）
logoUrl	图床Logo	字符串	只支持`字符串`类型，设置为你自定义的图床Logo链接
bkInterval	背景切换间隔	正整数	设置为背景图的轮播时间，默认`3000`，单位`ms`。例如你希望10s切换一次，设置为`10000`即可。
bkOpacity	背景图透明度	(0,1]的浮点数	展示的背景图透明度，默认为`1`。如果你觉得显示效果不佳，可以自定义，如`0.8`
urlPrefix	默认 URL 前缀	字符串	只支持`字符串`类型，设置为自定义的全局默认链接前缀，该前缀会覆盖原始默认前缀，但不会覆盖用户自定义的链接前缀
announcement	公告	字符串	只支持`字符串`类型，可以为 HTML 格式，设置为你自定义的公告内容（如有）
defaultUploadChannel	默认上传渠道	字符串	只支持`字符串`类型，设置为你自定义的默认上传渠道，支持`telegram`（Telegram 渠道）、`cfr2`（Cloudflare R2）和`s3`（S3 渠道）
defaultUploadNameType	默认命名方式	字符串	只支持`字符串`类型，设置为你自定义的默认上传文件命名方式，支持`default`（默认）、`index`（仅前缀）、`original`（仅原名）和`short`（短链接）
loginBkImg	登录页背景图	列表/字符串	1、当字段类型为`列表`时，列表中元素为需要添加到轮播列表中的图片链接（列表中只有一张图时即为固定背景），形如`["1.jpg","2.jpg"]` 2、当字段类型为`字符串`时，目前仅支持字符串值为`bing`，设置为该值时启用bing随机图片轮播模式。
uploadBkImg	上传页背景图	列表/字符串	同loginBkImg
footerLink	页脚传送门链接	字符串	只支持`字符串`类型，设置为你自定义的传送地址（如个人博客链接）
disableFooter	隐藏页脚	boolean	支持`boolean`类型，设为`true`时禁用页脚，默认`false`
adminLoginBkImg	管理页背景图	列表/字符串	同loginBkImg

部署完成

结束，访问域名开始使用吧

给博客大部分图标更换成iconfont【hexo-butterfly】

Sat, 27 Dec 2025 10:44:11 GMT

刚刚给博客底部的fontawesome的图标更换成阿里iconfont图标，butterfly主题在4.5的时候，在更改对应的图标时候会同步更改，新版把他们分开了，这期教一下怎么改

使用方法

butterfly默认的图标写法是这样：i.fas.fa-history 这样会疑惑，这要怎么改图标？其实这只是fontawesome的写法而已，阿里iconfont不是也有自己的写法吗，在正确引入阿里图标之后，我们就可以使用它的写法：i.iconfont.icon-gengxin 将i.fas.fa-history整个替换为i.iconfont.icon-gengxin后，fontawesome的更新图标就会换成iconfont了，其中的icon-gengxin可以更换成自己的

修改

那么如何修改呢？很简单，文章上面的图标都在themes\butterfly\layout\includes\mixins\indexPostUI.pug里面，可以自行更改。若是想要更改别的，可以使用F12的控制台，快捷键为Ctrl+shift+c，鼠标放在上面就知道叫啥名字了。后续在VSCode中搜索跳转就能改

关于今天提交博客时遇到的问题

Sat, 27 Dec 2025 01:17:43 GMT

今天早上，我对博客进行修改后，正如往常一样提交，突然控制台出现一堆warning 我一看就懵了，当时的表情是这样

理清报错，LF和CRLF的差异

LF（Line Feed）和CRLF（Carriage Return Line Feed）在不同的操作系统中，换行符的呈现方式是不同的。

在Unix、Linux和macOS中，LF（\n）被用作换行符；
而在Windows中，CRLF（\r\n）被用作换行符。这种差异导致了在Git协作中的一些问题，特别是在不同操作系统之间进行代码共享和版本控制时。

警告“LF将被CRLF替换”是什么意思？

当我们在Git中进行代码提交时，Git会检查我们的文件中的换行符，并根据当前的配置进行调整。如果Git检测到我们的文件中存在LF，而当前设置是自动将其替换为CRLF，那么就会出现这个警告。

这个警告可能会在以下几种情况下出现：

当我们在Windows上执行Git命令时，Git默认会将每一行的LF替换为CRLF，以适应Windows操作系统的需求；
当我们从外部系统（如Windows）下载代码到Git仓库中时，Git可能会检测到文件中存在LF，从而发出警告。

解决警告“LF将被CRLF替换”的方法

要解决警告“LF将被CRLF替换”，我们可以采取以下几种方法：

方法一：禁用自动替换LF为CRLF

我们可以通过以下命令来禁用自动替换LF为CRLF：

git config --global core.autocrlf false

这会告诉Git不要自动替换LF为CRLF。这是一个全局设置，对所有的Git仓库生效。

方法二：在项目中设置替换规则

如果我们只想在特定的Git仓库中禁用LF替换为CRLF，可以在该仓库中执行以下命令：

git config core.autocrlf false

这会把设置限制在当前的项目中，可以避免不必要的换行符问题。

方法三：使用.gitattributes文件

我们还可以使用.gitattributes文件来明确指定和管理换行符的处理方式。在博客的根目录下创建一个名为.gitattributes的文件，然后将以下内容添加到文件中：

# 设置默认规则
* text=auto

# 指定某些文件始终使用 LF 换行符
*.js text eol=lf
*.css text eol=lf
*.html text eol=lf
*.xml text eol=lf
*.json text eol=lf
*.txt text eol=lf
*.md text eol=lf

# 二进制文件不进行转换
*.png binary
*.jpg binary
*.gif binary
*.ico binary
*.woff binary
*.woff2 binary
*.ttf binary
*.eot binary

我是source和根目录都添加了，都一样

省流

这个只是一个警告，我们直接忽略就好。

关于首页文章双栏、文心一言（hexo-butterfly）

Mon, 22 Dec 2025 10:31:15 GMT

本站所使用的是双栏文章布局，原先想用我的旧站mccsjs🍋の小家的三栏布局的，但是发现新版butterfly已经不支持了

双栏实现方法

新版butterfly支持直接在主题文件中修改打开config.butterfly.yml，翻到约168行找到如下内容

# Article layout on the homepage
# 1: Cover on the left, info on the right
# 2: Cover on the right, info on the left
# 3: Cover and info alternate between left and right
# 4: Cover on top, info on the bottom
# 5: Info displayed on the cover
# 6: Masonry layout - Cover on top, info on the bottom
# 7: Masonry layout - Info displayed on the cover
index_layout: 3

# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
  method: 3
  # If you set method to 2 or 3, the length need to config
  length: 500

英文看不懂没关系，我们给他翻译一下：

# 首页文章布局方式
# 1: 封面图在左，信息在右
# 2: 封面图在右，信息在左
# 3: 封面图与信息左右交替排列
# 4: 封面图在上，信息在下
# 5: 信息直接显示在封面图上
# 6: 瀑布流布局 - 封面图在上，信息在下
# 7: 瀑布流布局 - 信息直接显示在封面图上
index_layout: 6

# 首页文章摘要显示设置
# 1: 显示文章描述的description
# 2: 智能显示（存在description则显示，否则显示自动截取的内容）
# 3: 自动截取内容（默认，从前N个字符截取）
# false: 不显示文章摘要
index_post_content:
  method: 1         # 选择摘要显示方式
  length: 500       # 当method为2或3时，指定截取长度（单位：字符）

注释内容随便改，不影响，看懂之后就好配置了，照着中文自行修改自己喜欢的布局

关于文心一言

文心一言就是标题底下的打字效果

继续打开config.butterfly.yml，翻到约149行找到如下内容

# The subtitle on homepage
subtitle:
  enable: false
  # Typewriter Effect
  effect: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # Source - Call the third-party service API (Chinese only)
  # It will show the source first, then show the content of sub
  # Choose: false/1/2/3
  # false - disable the function
  # 1 - hitokoto.cn
  # 2 - https://api.aa1.cn/doc/yiyan.html
  # 3 - jinrishici.com
  source: false
  # If you close the typewriter effect, the subtitle will only show the first line of sub
  sub:

其中的各项意义

enable：是否启用
loop: 是否循环打字
source: 服务商，这里填的1、2、3而非true，个人推荐1
sub：自定义字符，你可以输入自己想要的文字 sub项可以这样写：

    - "Welcome to mccsjsのHome!🤣🤣🤣"
    - "Hope you have a nice day!🍭🍭🍭"

关于文章图片放大功能

butterfly自带了图片放大功能，但是需要手动启用打开config.butterfly.yml，翻到约910行找到如下内容

# Choose: fancybox / medium_zoom
# https://github.com/francoischalifour/medium-zoom
# https://fancyapps.com/fancybox/
# Leave it empty if you don't need lightbox
lightbox:

在lightbox后填入fancybox即可实现图片放大功能，twikoo的评论图片也可适用

博客配置追番页面【hexo-butterfly】

Sun, 21 Dec 2025 07:58:24 GMT

我在我废弃的博客1.0中，添加了追番页，写个教程记录一下怎么实现的我追的番 | mccsjs🍋の小家

安装插件

在控制台中键入以下内容

npm install hexo-bilibili-bangumi --save

配置

（此处使用了旧版博客一模一样的配置，照着我的注释改）将以下配置写入站点的配置文件 _config.yml 中（不是主题的配置文件）：

# 追番插件
bangumi: # 追番设置
  enable: true  # 是否启用
  source: bili  # 数据源
  path: /dm/  # 这是让番剧挂载的页面，自行修改
  vmid: 209190096 # 这是你b站的UID，更改成你自己的
  title: '我追的番'
  quote: '看番就是快乐源泉！'   # 置顶文字，自行修改
  show: 1   # 初始显示页面: 0=想看, 1=在看, 2=看过
  lazyload: true
  metaColor:
  color:  # 简介字体颜色
  webp:
  progress:
  extra_options:
    key: value
cinema: # 追剧设置
  enable: true  # 是否启用
  source: bili   # 数据源
  path: /video/
  vmid: 209190096  # b站uid
  title: '追剧列表'
  quote: '好看的剧！'
  show: 1
  lazyload: true
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value

使用方法

在生成或部署博客之前，需要更新追番/追剧数据：

更新追番数据：

hexo bangumi -u

更新追剧数据

hexo cinema -u

删除追番数据

hexo bangumi -d

删除追剧数据

hexo cinema -d

手动添加数据

在 source/_data/ 目录下创建 extra_bangumis.json（追番）或 extra_cinemas.json（追剧）：

此处给的同款追加番剧

{
  "watchedExtra": [
    {
      "title": "番剧标题",
      "type": "番剧",
      "area": "日本",
      "cover": "封面图片链接",
      "totalCount": "全12话",
      "link": "https://example.com/xxx",
      "des": "简介内容..."
    }
  ]
}

第一项的含义为：

wantWatchExtra: 想看
watchingExtra: 在看
watchedExtra: 看过

twikoo配置邮箱和即时提醒

Sun, 21 Dec 2025 06:46:44 GMT

twikoo评论的配置可以前往Twikoo | 一个简洁、安全、免费的静态网站评论系统进行配置，本文仅针对邮箱提醒和QQ即时提醒

QQ即时通知

其中最简便的就是qmsg，仅需一个token即可实现

打开Qmsg酱，使用QQ账号登陆
在3个默认的机器人中选择一个，他会弹出机器人的QQ号，在QQ中搜索添加即可，基本上秒添加。如果没能添加就说明是好友满了，换一个机器人。这边不涉及自建机器人，这个需要有服务器
在页面往下翻可以找到添加QQ号，把你需要接收消息的QQ号和群添加进去（QQ群需要把机器人拉进去）
在列表上面有个key，直接复制他
打开Twikoo管理面板，点击配置管理➡️即时通知，然后填入以下内容

其中的token填入第四步的key即可，如果仅配置qmsg而不配置邮箱提醒，最后一项可为false

邮箱提醒

邮箱提醒需要另外一个邮箱，由配置的邮箱发送邮件给访客和你自己的常用邮箱我使用的是163邮箱进行发送，QQ邮箱接收，因为163邮箱配置stmp方便，QQ邮箱消息提醒及时

所有邮箱打开stmp方法都差不多，以163举例

打开163网易免费邮并登陆，点击上方的设置，然后点击POP3/SMTP/IMAP
打开IMAP/SMTP服务按照提示发送短信，发送完之后会给你一个授权码，保存好了，这个只会显示这一次
打开Twikoo管理面板，点击配置管理➡️邮件通知，并仿写

最后记得保存，你可以使用下方的邮件测试，给你常用邮箱发消息试试

结束

我的邮箱提醒是加上模板的，想要模板可以复制修改

邮件通知模板MAIL_TEMPLATE(给访客)

<div     style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">     <div         style="border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; background-color: #ffffff;">         <!-- 头部区域 -->         <div             style="background-color: #f8db8f; padding: 20px; color: white; display: flex; align-items: center; justify-content: center; gap: 20px;">             <div style="text-align: center;">                 <div                     style="font-size: 28px; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px;">                     <span style="font-size: 26px;">👋</span> Hi ${PARENT_NICK} </div>                 <div style="margin-top: 10px; font-size:16px;"> 您在 <a href="${SITE_URL}"                         style="color: white; text-decoration: underline; font-weight: 500;">${SITE_NAME}</a> 中收到一条新回复！                 </div>             </div> <!-- 右侧图片 --> <img src="https://cdn.atao.cyou/Web/web_250913_194213.png"                 style="display:block; max-width:100px;">         </div> <!-- 内容区域 -->         <div style="padding: 25px 20px;"> <!-- 原评论部分 -->             <div style="margin-bottom: 20px;">                 <div style="font-weight: bold; margin-bottom: 10px; color: #333; font-size: 16px;">您发表的评论：</div>                 <div style="background-color: #f5f7fa; border-radius: 6px; padding: 15px; border: 1px solid #ebf0f5;">                     <div style="color: #f8db8f; font-weight: 500; margin-bottom: 8px;">@${PARENT_NICK}:</div>                     <div style="color: #333; line-height: 1.6;">                         <div style="margin-bottom: 5px;">${PARENT_COMMENT}</div>                     </div>                 </div>             </div> <!-- 收到的回复部分 -->             <div style="margin-bottom: 30px;">                 <div style="font-weight: bold; margin-bottom: 10px; color: #333; font-size: 16px;">您收到的回复</div>                 <div style="background-color: #f5f7fa; border-radius: 6px; padding: 15px; border: 1px solid #ebf0f5;">                     <div style="color: #f8db8f; font-weight: 500; margin-bottom: 8px;">@${NICK}:</div>                     <div style="color: #333; line-height: 1.6;">${COMMENT}</div>                 </div>             </div> <!-- 回复按钮 -->             <div style="margin-bottom: 30px;"> <a href="${POST_URL}"                     style="display: inline-block; background-color: #f8db8f; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-weight: 500;">回复</a>             </div> <!-- 系统提示 -->             <div                 style="color: #86909c; font-size: 12px; text-align: center; padding-top: 15px; border-top: 1px solid #ebf0f5;">                 此邮件由系统发送，请不要回复此邮件 </div>         </div>     </div> </div>

通知博主模板MAIL_TEMPLATE_ADMIN

<div> 	<div id="isForwardContent"> 		<div> 			<div id="content"> 				<div style="background: white;width: 95%;max-width: 800px;margin: auto auto;         border-radius: 15px;         border: #d7ce58ff 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://hexo.seln.cn/img/1.jpg" style="width: 100%; z-index: 666" /> 					</header> 					<div style="padding: 5px 20px;background-color: #46e1c60d"> 						<div class="dear" style="  border-radius: 30px;           position: relative;             color: white;             float: left;             z-index: 999;             background: #dfdc43ff;             padding: 10px 30px;             margin: -25px auto 0;             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);           ">亲爱的站长：</div> 						<br /> 						<center> 							<h3>来自 <strong>${NICK}</strong> 的评论</h3> 						</center> 						<hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" /> 						<br> 						<p> 							您好！系统得知 <strong>${NICK}</strong> 刚刚在您的网站发表评论： 						</p> 						<div class="tk-content" style="border-radius: 8px;border: 1px solid #ddd; padding-bottom: 20px; background-color: #f5f5f5;  margin: 15px 0px;  padding-left: 20px; padding-right: 20px; padding-top: 20px; ">${COMMENT}</div> 						<p>特地通知您，快去看看吧！</p> 						<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:#39c5bb;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: 3rem; display:block;color:#b3b3b1;text-decoration:none;"> 							<img src="https://hexo.seln.cn/img/ico.jpg/" style="width:5rem; margin:0 auto;border-radius: 5px;" />&nbsp; 							<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2023-2025&nbsp;By <a href="https://hexo.seln.cn/" style="text-align:center; color: #c8c342ff;text-decoration: none;font-weight: bold" target="_blank">mccsjs🍋</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> </div>

本站已公安联网备案，关于备案流程

Fri, 19 Dec 2025 09:23:58 GMT

如果您的网站/App已完成ICP备案需要在开通网站/App之日起的30日内提交公安联网备案申请。

说明

互联网信息服务备案（ICP备案）是工信部管理要求，由接入商协助代申请。而公安联网备案遵循公安部的要求，由主办者通过全国互联网安全管理服务平台自行完成。

本文仅作为公安联网备案的基础指导，如有详细问题，请您联系当地公安部门进行咨询。

前提条件

您已完成个人网站/App的ICP备案。
您已在全国互联网安全管理服务平台注册个人账号。具体操作，请参见公安联网备案指南。
您已在全国互联网安全管理服务平台下载《网站备案指引》，并了解公安联网备案的操作流程和所需材料，例如：需要负责人身份证的人像面、国徽面和手持身份证人像面照片。

个人网站公安联网备案

申请新增主体。
1. 登录全国互联网安全管理服务平台，单击申请主体。
2. 在开办主体管理下的点新增主体页面，先选择开办主体性质为个人，再填写负责人信息，最后提交审核。
申请新办网站。
1. 登录全国互联网安全管理服务平台，点击右上角”业务办理”。
2. 在全国互联网安全管理服务平台左侧导航栏，选择网站业务 > 新办网站申请。
3. 在开办主体页面，平台会自动获取已有的主体负责人信息，直接进入下一步操作。
4. 在网站基本信息页面，填写网站信息、网络接入服务商、域名注册服务商和网站语种信息。
5. 在网站负责人页面，网站安全负责人信息和网站应用联络人信息均可直接勾选同主体负责人信息，但身份证相关信息需重新手动上传。
6. 新办网站申请提交后，您可以查看审核状态。
7. 公安联网备案成功后，您会收到短信。
查看公安备案号。
- 登录全国互联网安全管理平台，根据网站名称或网站域名查询公安备案号。
  
  说明
  
  如果未显示备案结果，则说明该网站未进行公安备案。
- 在我的网站中查看公安备案号，复制备案编号的HTML代码，下载备案编号图标。
悬挂公安联网备案号。

公安联网备案成功后，您需要在30日内登录全国互联网安全管理服务平台，将公安联网备案信息放置在网页底部。

通用代码示例如下：
```
<p><img src="/assets/image/head-logo.png" width="20"/> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=32083002000282" rel="noreferrer" target="_blank">苏公网安备3208300*****号</a></p>
```
公安备案号在网站的悬挂结果如下图所示。

App公安联网备案

登录全国互联网安全管理服务平台，点击右上角”业务办理”。
在全国互联网安全管理服务平台左侧导航栏，选择APP业务 > 新增APP。

说明

若没有提前申请新增主体，请先申请新增主体以免影响后续操作。具体操作请参见申请新增主体。
新增App操作流程如下。
1. 在开办主体页面，平台会自动获取已有的主体负责人信息，直接进入下一步操作。
2. 在APP信息页面，输入如图所示的App详细信息，然后单击下一步。
3. 在网络安全责任告知书页面，单击提交。
4. 新增App申请提交后，您可以查看审核状态。
5. 公安联网备案成功后，您会收到短信。
查看公安备案结果。
- 登录全国互联网安全管理平台，根据App名称查询公安备案结果。
  
  说明
  
  如果未显示备案结果，则说明该App未进行公安备案。
- 在我的APP中查看公安备案结果。

本站已成功备案，关于备案的材料

Sat, 13 Dec 2025 13:00:45 GMT

如题，本站已成功备案，，并开设主页：沐雨拾光备案后使用了国内服务和cdn，加载速度快了一大截

关于备案

首先你肯定得有一个独立域名，且域名后缀在可备案服务里，详情可见工业和信息化部域名行业管理信息公示
注册域名的服务商需是大陆内服务商
备案域名在域名注册有效期内（以从域名注册服务机构中查询结果显示的时间为准）。
备案域名已通过实名认证
申请备案时填报的备案主体信息应与域名注册人实名认证信息（含域名持有人名称、证件类型、证件号等信息）相符

备案所需材料

域名证书类似于：
提供备案服务的服务器厂商国内大厂，如腾讯云、华为云、京东云、阿里云等都支持备案送审，需购买半年及以上的大陆服务器。我是京东云双11做活动38买的一年轻量云
域名实名认证截图进入域名控制台，找到实名认证，类似于下：
承诺书（部分地区）我这边在申请的时候自动进行电子签名，你同意了协议就代表你默认了。但是广东省不一样，广东省需要打印手签并按压红手印
其他资料根据各管局要求，个人备案不同备案场景可能需要准备以下部分资料用于备案申请：

材料名称	使用场景
暂住证/居住证	可以异地备案的省份，证件地址非内蒙古、上海（不支持学生证备案）、浙江、广东（以及权威网站有效期限查询结果页面）、江苏、陕西（优先居住证，可学生证）、四川（需提供在四川学习、生活、工作的相关证明）、贵州、湖北、江西、福建等本地的，都需要居住证或暂住证。
网站建设方案书	- 江苏管局：个人网站大于等于10个网站，需要提供网站建设方案书。 - 上海管局：超过5个及以上，需要提供网站建设方案书。 - 湖南管局备案主体之前备案成功的网站个数超过1个，则需要提供网站建设方案书。 - 重庆管局：主体下网站数量超过5个网站，需提供每个网站的网站建设方案书及承诺书。 - 广东管局：个人备案前缀不相同的域名数超5个时须提供每个域名的域名注册证书和网站建设方案书，连同主办单位有效证件复印件、接入商与网站主办者签订的接入合同复印件提供我局核验。
劳动就业或收入证明	- 江苏管局：已满16周岁不满18周岁。 - 云南管局：非法人负责人未满18周岁。 - 重庆管局：满16周岁不满18周岁的个人申请互联网信息服务备案。 - 福建管局：满16周岁不满18周岁的个人备案（或者监护人身份证）。
常驻证明	宁夏、山东、吉林：居住证或当地房产证明。
工作证明盖上公章	广东管局

购买服务器后备案

登录京东云备案系统

打开京东云官网首页,点击右上角处备案按钮，进入登录页面。
进入登录页面，选择您可登录的方式登录系统。

提示： 1个账号对应1个备案主体，子账号无法备案

步骤二：准备备案材料，开始网站备案

进入备案系统，开始备案
填写备案信息，选择网站备案，按照实际情况填写证件号码和域名，系统会自动完成备案类型校验。若您没有备案授权码，请先申请备案授权码
填写备案主体信息
填写备案服务信息
上传域名证书以及互联网信息服务备案承诺书，若有如居住证、变更证明、授权书、域名实名认证截图等其他文件需要提供请点击“点击展开”按钮，按照您的需求提供。

步骤三：使用京东云APP进行电子核验

若您的手机未安装京东云APP，请先扫描左侧步骤①的二维码进行下载，若您的手机已下载过京东云APP，请核对安卓APP版本是否在2.5.3以上，IOS版本是否在2.5.1以上；使用京东云APP扫描步骤②的专属二维码按照APP提示完成电子核验
小提示：非企业（营业执照）单位备案可选择本地上传主体证件。
身份证件识别成功后进入视频验证环节，需网站负责人本人完成操作，核验前请仔细阅读提示内容。
核验时注意人物背景需为白色！请穿着合适的服装，光线不能太暗或太亮，面部不要存在遮挡物。
阅读并同意《人脸识别服务协议》后，正式进入视频验证环节。
小技巧：拍摄之前选择好拍摄位置，保持身体稳定，成像效果会更好哦~
全部上传完毕后，可以在电脑端看到上传的图片，核对无误可点击下一步
核对信息无误后，勾选“我已阅读并同意《信息安全管理协议》和《协助更改备案信息服务在线服务条款》”，点击提交信息即可成功提交至京东云初审。

步骤四：京东云初审

京东云的备案审核员会在1个工作日内对您提交的备案信息进行审核，请注意接听京东云核实电话：010-86310529。若没有问题您将通过京东云初审。

步骤五：完成工信部短信核验

京东云审核通过后您会收到工信部下发的核验短信，需要在24小时内完成短信核验。详细文档可查看备案短信核验说明

步骤六：管局审核通过

管局审核通过后您可以在备案管理页面查看备案号等信息、同一主体备案号下后续的网站增加、变更、注销等操作均可在此页面发起。

增加网站

步骤一：登录京东云备案系统

打开京东云官网首页,点击右上角处备案按钮，进入登录页面。
进入登录页面，选择您可登录的方式登录系统。

提示： 1个账号对应1个备案主体，子账号无法备案

步骤二：准备备案材料，开始增加网站

进入备案系统，可以看到已存在的备案信息，点击新增服务，服务类型选择网站，填写需要备案的域名，点击确认后系统会根据您填写的信息自动校验备案类型。若您没有备案授权码，请先申请备案授权码
核对备案主体信息

请认真核验您的主体信息，如果有变动请先进行变更备案；如果信息无误，请点击“信息准确，下一步”继续增加服务。
填写备案服务信息
上传域名证书以及互联网信息服务备案承诺书，若有如居住证、变更证明、授权书等其他文件需要提供请点击“点击展开”按钮，按照您的需求提供。

步骤三：使用京东云APP进行电子核验

若您的手机未安装京东云APP，请先扫描左侧步骤①的二维码进行下载，若您的手机已下载过京东云APP，请核对APP版本是否在2.5.3以上；使用京东云APP扫描步骤②的专属二维码按照APP提示完成电子核验
小提示：非企业（营业执照）单位备案可选择本地上传主体证件。
身份证件识别成功后进入视频验证环节，需网站负责人本人完成操作，核验前请仔细阅读提示内容。
核验时注意人物背景需为白色！请穿着合适的服装，光线不能太暗或太亮，面部不要存在遮挡物。

阅读并同意《人脸识别服务协议》后，正式进入视频验证环节。
小技巧：拍摄之前选择好拍摄位置，保持身体稳定，成像效果会更好哦~
全部上传完毕后，可以在电脑端看到上传的图片，核对无误可点击下一步
核对信息无误后，勾选“我已阅读并同意《信息安全管理协议》和《协助更改备案信息服务在线服务条款》”，点击提交信息即可成功提交至京东云初审。

步骤四：京东云初审

京东云的备案审核员会在1个工作日内对您提交的备案信息进行审核，请注意接听京东云核实电话：010-86310529。若没有问题您将通过京东云初审。

步骤五：完成工信部短信核验

京东云审核通过后您会收到工信部下发的核验短信，需要在24小时内完成短信核验。详细文档可查看备案短信核验说明

步骤六：管局审核通过

管局审核通过后您可以在备案管理页面查看备案号等信息、同一主体备案号下后续的网站增加、变更、注销等操作均可在此页面发起。

变更备案

步骤一：登录京东云备案系统

打开京东云官网首页,点击右上角处备案按钮，进入登录页面。

进入登录页面，选择您可登录的方式登录系统。

提示： 1个账号对应1个备案主体，子账号无法备案

步骤二：准备备案材料，点击“变更类操作”进行变更

进入备案系统，可以看到已存在的备案信息，点击变更类操作，会弹出“主体变更”、“服务变更”、“变更备案”三种类型及其提示
- 主体变更：仅支持变更备案信息中的主体信息，包含主体的营业执照、证件号码、证件地址，主体负责人信息及联系方式等主体信息。
- 服务变更：仅支持变更备案信息中的服务信息，包含网站负责人信息及联系方式等。若服务信息含有多个域名，仅可以删除域名，不支持增加或修改域名；若服务信息仅含有1个域名，不支持变更域名。
- 变更备案：支持修改备案主体信息和主体下的服务信息，若服务信息含有多个域名，仅可以删除域名，不支持增加或修改域名；若服务信息仅含有1个域名，不支持变更域名。
填写或核对备案主体信息

请认真核验您的主体信息，如果有变动请先进行变更备案；如果信息无误，请点击“信息准确，下一步”继续增加服务。
填写备案服务信息
上传域名证书以及互联网信息服务备案承诺书，若有如居住证、变更证明、授权书等其他文件需要提供请点击“点击展开”按钮，按照您的需求提供。

步骤三：使用京东云APP进行电子核验

若您的手机未安装京东云APP，请先扫描左侧步骤①的二维码进行下载，若您的手机已下载过京东云APP，请核对APP版本是否在2.5.3以上；使用京东云APP扫描步骤②的专属二维码按照APP提示完成电子核验
小提示：非企业（营业执照）单位备案可选择本地上传主体证件。
身份证件识别成功后进入视频验证环节，需网站负责人本人完成操作，核验前请仔细阅读提示内容。
核验时注意人物背景需为白色！请穿着合适的服装，光线不能太暗或太亮，面部不要存在遮挡物。
阅读并同意《人脸识别服务协议》后，正式进入视频验证环节。
小技巧：拍摄之前选择好拍摄位置，保持身体稳定，成像效果会更好哦~
全部上传完毕后，可以在电脑端看到上传的图片，核对无误可点击下一步
核对信息无误后，勾选“我已阅读并同意《信息安全管理协议》和《协助更改备案信息服务在线服务条款》”，点击提交信息即可成功提交至京东云初审。

步骤四：京东云初审

京东云的备案审核员会在1个工作日内对您提交的备案信息进行审核，请注意接听京东云核实电话：010-86310529。若没有问题您将通过京东云初审。

步骤五：完成工信部短信核验

京东云审核通过后您会收到工信部下发的核验短信，需要在24小时内完成短信核验。详细文档可查看备案短信核验说明

步骤六：管局审核通过

管局审核通过后您可以在备案管理页面查看备案号等信息、同一主体备案号下后续的网站增加、变更、注销等操作均可在此页面发起。

备案完成

备案完成后，工信部会发邮件给你，及时在网站底部悬挂备案号，并链接指向ICP/IP地址/域名信息备案管理系统及时开设www主页在备案完成30日内进行公安备案（下期会说）

给博客添加一个小菜单【hexo-butterfly】

Sat, 29 Nov 2025 05:57:19 GMT

前提

情况是有一天博客闲逛，逛到了LiuShen’s Blog - 清羽飞扬，发现他添加了一个左上角小菜单，我觉得有意思，我也想添加一个我搜搜看有没有现成的教程可以喂饭到嘴，发现没人做这方面的东西,然后在Prorise - 博客小栈发现同样也有这个样式，我就去问问博主，得到回复是anzhiyu主题自带的，这下事情明朗了，直接下载主题开始扒代码。

修改nav.pug

打开\themes\butterfly\layout\includes\header\nav.pug，在原有的代码中插入以下内容

  #nav-group
    //- 添加左上角菜单
    span#blog_name
      if theme.nav.enable
        .back-home-button
          i.anzhiyufont.anzhiyu-icon-grip-vertical
          .back-menu-list-groups
            each group in theme.nav.menu
              .back-menu-list-group
                .back-menu-list-title= group.title
                .back-menu-list
                  each item in group.item
                    a.back-menu-item(href=url_for(item.link), title=item.name)
                      img.back-menu-item-icon(src=item.icon alt=item.name)
                      span.back-menu-item-text= item.name

或直接使用替换好的

nav#nav
  #nav-group
    //- 添加左上角菜单
    span#blog_name
      if theme.nav.enable
        .back-home-button
          i.anzhiyufont.anzhiyu-icon-grip-vertical
          .back-menu-list-groups
            each group in theme.nav.menu
              .back-menu-list-group
                .back-menu-list-title= group.title
                .back-menu-list
                  each item in group.item
                    a.back-menu-item(href=url_for(item.link), title=item.name)
                      img.back-menu-item-icon(src=item.icon alt=item.name)
                      span.back-menu-item-text= item.name
    
    span#blog-info
      a.nav-site-title(href=url_for('/'))
        if theme.nav.logo
          img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
        if theme.nav.display_title
          span.site-name=config.title
      if globalPageType === 'post' && theme.nav.display_post_title
        a.nav-page-title(href=url_for('/'))
          span.site-name=(page.title || config.title)
          span.site-name
            i.fa-solid.fa-circle-arrow-left
            span= ' ' + _p('post.back_to_home')

  #menus
    if theme.search.use
      #search-button
        span.site-page.social-icon.search
          i.fas.fa-search.fa-fw
          span= ' ' + _p('search.title')
    if theme.menu
      != partial('includes/header/menu_item', {}, {cache: true})

      #toggle-menu
        span.site-page
          i.fas.fa-bars.fa-fw

这样左上角就会显示一个隐藏的按钮了（因为源代码用的anzhiyu图标，咱是原版butterfly自然不会显示）

修改nav.styl

新建themes\butterfly\source\css\_layout\nav.styl，并添加以下代码

/* 左上角菜单样式 */
.back-home-button
  display flex
  width 35px
  height 35px
  padding 0 !important
  align-items center
  justify-content center
  margin-right 4px
  transition 0.3s
  border-radius 8px

.back-home-button:hover
  background var(--anzhiyu-main)
  color var(--anzhiyu-white) !important

.back-home-button:hover .back-menu-list-groups
  display: flex;
  opacity: 1;
  transition: .3s;
  top: 55px;
  pointer-events: auto;
  left: 0rem;
  transform: scale(1);

.back-home-button .back-menu-list-groups
  position: absolute;
  top: 45px;
  transform: scale(.8);
  transform-origin: top left;
  left: 0rem;
  /* 半透明毛玻璃背景 */
  background-color: rgba(255, 255, 255, 0.59);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 12px;
  border: var(--style-border);
  flex-direction: column;
  font-size: 12px;
  color: var(--anzhiyu-secondtext);
  box-shadow: var(--anzhiyu-shadow-border);
  transition: .1s;
  opacity: 0;
  pointer-events: none;

.back-home-button .back-menu-list-group
  display flex
  flex-direction column

.back-home-button .back-menu-list-group .back-menu-list-title
  margin 8px 0 0 16px
  transition 0.3s
  color: #333 /* 白天模式标题颜色 */

.back-home-button .back-menu-list
  display flex
  flex-direction row
  flex-wrap wrap
  width 340px
  justify-content space-between

.back-home-button .back-menu-list::before
  position absolute
  top -24px
  left 0px
  width 100%
  height 25px
  content ""
  transition: 0s

.back-home-button .back-menu-list-groups .back-menu-list-group:last-child .back-menu-list
  margin 0 0 8px

.back-home-button .back-menu-list-group:hover .back-menu-list-title
  color var(--anzhiyu-main)

.back-home-button .back-menu-list-groups:hover
  border var(--style-border-hover)

.back-home-button .back-menu-list .back-menu-item
  display flex
  align-items center
  margin 4px 8px
  padding 4px 8px !important
  transition 0.3s
  width 150px
  border-radius 8px !important
  transition 0.2s !important

.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text
  font-size var(--global-font-size)
  margin-left 0.5rem
  color: #333 /* 白天模式文字颜色为黑色 */
  white-space nowrap

.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon
  width 24px
  height 24px
  border-radius 24px
  background var(--anzhiyu-secondbg)

.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text
  color var(--anzhiyu-white)

/* 页面头部样式调整 */
#page-header #nav .back-home-button
  cursor pointer
  position relative

#page-header:not(.not-top-img) #nav .back-home-button
  color var(--light-grey)

#page-header.nav-fixed:not(.not-top-img) #nav .back-home-button
  color var(--font-color)

/* 黑夜模式适配 */
[data-theme="dark"]
  .back-home-button .back-menu-list-groups
    background-color: rgba(0, 0, 0, 0.3) /* 深色模式背景更暗 */
  
  .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text
    color: #fff /* 深色模式文字颜色为白色 */
  
  .back-home-button .back-menu-list-group .back-menu-list-title
    color: #fff /* 深色模式标题颜色为白色 */

/* 移动端适配 */
@media screen and (max-width: 768px)
  .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

这样菜单列表就能正常显示了

给小菜单添加可见图标

在自定义css文件中添加以下样式代码

.back-home-button i.anzhiyufont.anzhiyu-icon-grip-vertical {
  display: none;
}

.back-home-button {
  position: relative;
  padding-left: 28px; /* 左侧留出图标空间 + 边距 */
  padding-right: 8px; /* 右侧边距 */
  padding-top: 6px; /* 上边距 */
  padding-bottom: 6px; /* 下边距 */
  display: flex;
  align-items: center;
  min-height: 32px; /* 最小高度确保按钮有足够空间 */
}

.back-home-button::before {
  content: "";
  position: absolute;
  left: 8px; /* 图标左侧边距 */
  top: 50%;
  transform: translateY(-50%);
  width: 18px; /* 图标宽度 */
  height: 18px; /* 图标高度 */
  background-image: url('你的图标路径');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

修改完后，搜索按钮可能会错位，再次添加css进行固定我这里是固定在右上角

#menus {
  display: flex;
  align-items: center;
  width: 100%;
}

#search-button {
  margin-left: auto;
}

添加菜单内容

在config.butterfly.yml中找到nav配置（一般就在配置的第一项），并仿写

nav:
  # Navigation bar logo image
  logo: 
  display_title: true
  display_post_title: true
  # Whether to fix navigation bar
  fixed: false
  home_icon_url: /img/lemon.png 
  enable: true
  menu:
    - title: "我的网站"
      item:
        - name: "博客"
          link: https://hexo.seln.cn/
          icon: https://hexo.seln.cn/img/ico.jpg
    - title: "友情链接"
      item:
        - name: "阿叶Ayeez"
          link: https://blog.ayeez.cn
          icon: https://blog.ayeez.cn/imgs/photo.jpg
        - name: "裕裕裕"
          link: https://yu-blog.top/
          icon: https://free.picui.cn/free/2025/09/30/68dbd5869ed39.jpg
        - name: "ZY知识库"
          link: https://blog.pljzy.top/
          icon: https://blog.pljzy.top/_astro/logo.BxIxyJV1_Z19cEQW.webp

QEXO的注意事项

Sun, 23 Nov 2025 08:00:23 GMT

早上我发布了一篇给静态博客添加一个优雅的在线后端

然后我发现每次更新，修改的以及没有修改的文章全部会更新一遍，后来发现是qexo的问题

之前的文章是每次hexo g之后生成更新时间，到了qexo他不认可hexo g，所以每次都按最新提交时间算

解决方法：打开qexo的文章页面，手动修改更新时间

重新修改一下更新时间即可，qexo只认自己的时间，修改后就固定了

给静态博客添加一个优雅的在线后端【hexo-qexo】

Sun, 23 Nov 2025 07:00:12 GMT

项目部署

点击下面的按钮部署到 Vercel：

首次部署会因为没有数据库报错, 不要管直接进行接下来的步骤

申请 Vercel 数据库

进入Vercel Storage 界面然后点击右上角的 Create Database 并选择 Neon 创建免费数据库,数据库地址默认即可（通常为Washington, D.C., USA (East)）在Database Name (*)取一个随意的名字然后点击create 创建完成之后进入数据库，点击Connect Project，在最上方选择刚刚fork的项目，选择完直接点击connect，这样数据库就连接成功了

重新部署vercel项目

点击你fork的项目，点击左上角的Deployments，再点击下方内容的右边三个点，点击Redeploy重新部署，重新部署完之后给项目绑定一个自定义域名，这样就完成了

创建github仓库

创建一个github私有仓库（如果不建议博客在大街上飘那请随意）创建完之后点击上方绿色按钮，复制ssh密钥➡️在你本地磁盘找一个地方右键，点击git bash here➡️输入git clone 你的密钥下载到本地更改将博客源代码都复制进去，然后依次执行

git add .
git commit -m "第一次提交"
git push

这样就上传到GitHub仓库了

后台配置

进入你刚刚给后台设置的域名，添加用户名和密码

添加github密钥 Github 设置生成的 Token (建议使用 Classical) 需要 Repo & Workflow 下的权限不建议给出所有权限，剩下的自己填填注意，项目分支根据实际情况填写，main或者master

添加vercel密钥

您的 Vercel 账户密钥在此处生成 PROJECT_ID:您 Qexo 部署所在项目的 ID 位于 Project Settings -> General -> Project ID

登录后台

输入账号密码就能用了，其他功能自行研究 QEXO文档

配置GitHub Actions

此功能可以实现监测所有 source 目录下的文件变动，所有 yml,json 后缀文件的变动。然后进行自动推送

在本地创建.github/workflows/main.yml，添加以下代码

name: Blog自动推送 # 脚本 workflow 名称

on:
  push:
    branches: [main, master] # 当监测 main,master 的 push
    paths: # 监测所有 source 目录下的文件变动，所有 yml,json 后缀文件的变动。
      - '*.json'
      - '**.yml'
      - '**/source/**'

jobs:
  blog: # 任务名称
    timeout-minutes: 30 # 设置 30 分钟超时
    runs-on: ubuntu-latest # 指定最新 ubuntu 系统
    steps:
      - uses: actions/checkout@v4 # 拉取仓库代码
      - uses: actions/setup-node@v4 # 设置 node.js 环境
      - name: Cache node_modules # 缓存 node_modules，提高编译速度，毕竟每月只有 2000 分钟。
        uses: actions/cache@v4 # 亲测 Github 服务器编译速度比我自己电脑都快，如果每次构建按5分钟计算，我们每个月可以免费部署 400 次，Github yyds！！！
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Init Node.js # 安装源代码所需插件
        run: |
          npm install
          echo "init node successful"
      - name: Install Hexo-cli And component # 安装 Hexo
        run: |
          npm install -g hexo-cli --save
          npm install hexo-generator-sitemap --save
          npm install hexo-generator-baidu-sitemap --save
          npm install hexo-abbrlink --save
          npm install hexo-renderer-pug hexo-renderer-stylus --save
          npm i hexo-renderer-markdown-it --save
          npm install hexo-generator-searchdb
          npm install katex @renbaoshuo/markdown-it-katex
          npm install hexo-wordcount --save
          npm i hexo-filter-nofollow --save
          npm install hexo-generator-feed --save
          echo "install hexo successful"
      - name: Build Blog # 编译创建静态博客文件
        run: | # 下方可以自行添加需要的命令
          hexo clean && hexo g 
          echo "build blog successful"
      - name: Deploy Blog # 设置 git 信息并推送静态博客文件
        run: |
          cd ./public
          git init
          git config user.name "${{secrets.GIT_NAME}}"
          git config user.email "${{secrets.GIT_EMAIL}}"
          git add .
          git commit -m "Update"
          git push --force --quiet "https://${{secrets.GH_TOKEN}}@${{secrets.GH_REF}}" master:main

      - run: echo "Deploy Successful!"

然后进行推送更新

git add .
git commit -m "第一次提交"
git push

配置存储库 Secrets

上方Github Action的配置文件 Deploy Blog中引用了4个 Secret，分别是 GIT_NAME, GIT_EMAIL, GH_TOKEN, GH_REF, 接下来将在存储库中设置它们

在 Github -> 源码仓库 -> Settings -> Secrets and variables -> Actions -> Secrets 中添加用于Github Action的Secrets

Secrets的名称分别是上方 GIT_NAME, GIT_EMAIL, GH_TOKEN, GH_REF 其中GH_TOKEN上面配置qexo的时候已经获取，可以直接使用 GH_REF的内容为 github.com/用户名/Blog仓库名.git（这里的仓库是你博客静态文件的仓库，不是源码仓库）

结尾

接下来你直接在qexo添加一篇文章并上传就可以看见了，可以实现云端写博客，云端添加友链

记录博客第二次回档

Thu, 20 Nov 2025 07:49:47 GMT

自从Cloudflare坠机之后，本博客因莫名其妙的原因失效了一些组件，无从修复，遂回档试试，结果发现还真有用。我最后的存档日期是2025-11-13,在此之后在没修改过东西，回档能修复真的神奇最后:

请多多备份，要不然出错了又不知道怎么改就完啦！！！

Cloudflare的r2存储桶使用

Wed, 12 Nov 2025 09:10:50 GMT

上期说了接入cdn可以让图片更快，国内cdn付费的多，而且我原来的github图床仓库出问题了，所以我使用了r2**注意，需要visa或者万事达卡** r2不怕被刷流量，下载请求1000万次/月免费，10g的存储空间

登录Cloudflare

登录Cloudflare,点击左侧存储和数据库➡️R2对象存储➡️概述

右侧如实填写，其中cvc码是银行卡背面，签名部分数字的后三位

新建存储桶

随笔取一个名字，点击位置，推荐选择亚太地区（APAC），其他不动点击设置➡️自定义域➡️绑定一个域名作为接口最后就可以上传图片或者新建文件夹后上传文件了

图片测试

点击图片跳转

r2存储桶速度只能说够用，至少可以分流别的cdn压力

关于hexo静态博客优化的几个小技巧

Wed, 12 Nov 2025 02:06:47 GMT

使用lazyload懒加载

lazyload(懒加载)是一个对提升性能非常有效的功能，它会优先加载处于屏幕显示区域内的资源，而不是等待一整个页面的资源加载完毕。这让许多资源可以在用户边浏览的时候边加载，节省时间。因前两个月懒加载服务太卡了我就没开，现在恢复正常了我又打开了我给我的评论模块开启了lazyload，因为很多时候评论模块加载都会慢，导致用户要在加载页面等待。

修改**config.butterfly.yml** 评论懒加载：

comments:
  use: Twikoo
  text: true
  lazyload: true #原为false
  count: false
  card_post_count: false

网站图片懒加载：

# Lazyload
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true  #原为空
  # Use browser's native lazyload instead of vanilla-lazyload
  native: false
  # Specify the field to use lazyload (site or post)
  field: site
  placeholder:
  blur: false

压缩图片大小

作为静态博客占用最大的部分，图片文件的大小关乎了网站加载速度。一张图片若有10m，那前端用户也会实打实加载10m，如果网络质量好倒是无所谓，但是对带宽低的和网络不好的人来说加载速度就是地狱我用的是Squoosh压缩图片，这个工具可以自选压缩率，而且压缩后图片效果很好

预览：

可见效果还是非常不错的，从原先1.25mb➡️115kb，质的转变，图片质量也不会变太多

操作：打开Squoosh，上传图片，操作右下角的Quality可以自己操控压缩率，中间大图左侧为原图，右侧为压缩效果，可以自行左右滑动

压缩css，js

如图所示，自己css样式不再更新之后可以进行压缩来少量增加网站性能，js同理。但是css压缩基本不会出现样式错乱问题，js压缩经常会导致js代码失效，只能先排查失效部分，然后单独创建新文件引入我所使用的工具：（建议给css和js做个副本，或者创建.min文件）

css压缩,打开后上传css文件进行压缩，点击左上角的复制代码，替换原先的css
js压缩和css同理

使用hexo-html-minifier插件

hexo-all-minifier 插件可以一站式解决压缩问题，它集成了以下子插件，可以压缩HTML,JS,CSS, 本地Image。

hexo-html-minifier, which is based on HTMLMinifier
hexo-clean-css, which is based on clean-css
hexo-uglify, which is based on UglifyJS
hexo-imagemin, which is based on imagemin

压缩效果肯定没有对文件本身动手效果好，但是至少有用

在控制台输入：

npm install hexo-all-minifier --save

在_config.yml文件中添加一行

all_minifier: true

CDN存储

图片不仅需要量小，还得选择好的图床，大多数人使用的都是vercel或者Cloudflare的自带cdn，他们服务器都在国外，导致国内加载还是稍微慢的。国内有少量”免费“额度的CDN，以下流量按月算

名称	网址	免费存储	免费流量
七牛云	链接	10g	10g
又拍云	链接	10g	15g

如果有新发现的以后再加，使用cdn注意别被盗刷

利用f12工具

F12非常好用，当没什么头绪优化的时候可以打开f12的网络工具勾选禁用缓存，再重新加载，就能看见是哪些东西拖垮了加载速度比如我这个就是不蒜子统计的问题，但是网站加载2秒内我自己是觉得ok的发现严重拖垮速度的东西之后进本地替换掉，或者找个平替就行

利用谷歌lighthouse

谷歌chrome的f12里面自带一个lighthouse功能，可以对网站进行打分，并且会提示你应该修改哪些部分,操作方法和上一个一样

我的网站优化的还是不错的

点击上面的分数圆球可以查看指导

给手机版单独设置背景[hexo-butterfly]

Thu, 06 Nov 2025 10:42:04 GMT

本来想看看有没有什么成熟的方案，结果发现全都失效了，于是自己搞了个css

实现的方式很简单，在自定义css中添加以下内容 ```css @media (max-width: 768px) { #web_bg { background-image: url('图片url') !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; } } ``` * 就是那么简单🤣

hexo-butterfly魔改about页面

Sat, 01 Nov 2025 08:12:46 GMT

魔改前请备份，要不然出错了又不知道怎么改就完啦！！！有些内容我没有放出来，但是大体是一致的可以看看[我的关于页面](https://hexo.seln.cn/about/)

# 魔改关于页面主要以[安知鱼的关于页面](https://blog.anheyu.com/)为参考，经行个性化魔改，具体代码如下： ### 新建about页面新建`source/about/index.md` ```markdown title: 关于 date: 2025-9-25 17:24:51 type: about aside: false top_img: false comments: false ``` ### 新建about页面模板新建`themes/butterfly/layout/includes/page/about.pug`代码如下： ```pug #about-page .author-box .author-tag-left span.author-tag 🚩 攻防赛道指尖争 span.author-tag 🌐 万网互联掌中沙 span.author-tag 📜 秒断漏洞定胜局 span.author-tag 🛠️ Markdown .author-img img.no-lightbox(src='https://hexo.seln.cn/img/head.jpg') .image-dot .author-tag-right span.author-tag 脚踏实地行动派 🏃 span.author-tag 攻防路径一手划 🧭 span.author-tag 我立规则御千军 🧱 span.author-tag 安全运营定乾坤 🏆 p.p.center.logo.large 关于我 p.p.center.small 🤔 .author-content .author-content-item.myInfoAndSayHello .title1 你好，很高兴认识你👋 .aboutsiteTips.author-content-item .author-content-item-tips 追求 h2 | 源于 br | 热爱而去 span.inline-word 感受 .mask span.first-tips 学习 | span 生活 | span(data-show) 体验 .hello-about .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') .shapes .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)') .content h1 Hello！ .author-content .about-statistic.author-content-item .card-content .author-content-item-tips 数据 span.author-content-item-title 访问统计 #statistic .post-tips | 统计信息来自 a(href='https://invite.51.la/1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计 .banner-button-group a.banner-button(onclick='pjax.loadUrl("/archives/")', data-pjax-state) i.fas.fa-circle-right | span.banner-button-text 文章隧道 .author-content .author-content-item.maxim .author-content-item-tips 座右铭 span.maxim-title span(style='opacity:.6;margin-bottom:8px') 在迷雾中穿行，本身即是道路； | span 驻足于原地苦等晴空，反而会迷失全部的方向。 .author-content-item.buff .card-content .author-content-item-tips 特长 span.buff-title span(style='opacity:.6;margin-bottom:8px') | 搜索引擎大师 - span.inline-word 熟练使用各种搜索技巧 | span | 二次元指数 span.inline-word MAX | span | CV工程师 - span.inline-word 擅长各种复制粘贴操作 .card-background-icon i.fas.fa-dice-d20 .author-content .author-content-item.game-yuanshen .card-content .author-content-item-tips 爱好游戏 span.author-content-item-title 原神 .content-bottom .icon-group .tips.game-yuanshen-uid UID: 109468770 .author-content-item.game-starrail .card-content .author-content-item-tips 常玩 span.author-content-item-title .content-bottom .tips.game-starrail-uid UID: 101786049 .autor-content .author-content-item.comic-content .card-content each item in site.data.comic - let {comic_tips, comic_title, comic_list} = item .author-content-item-tips= comic_tips .author-content-item-title= comic_title .comic-box if comic_list each i in comic_list a.comic-item(href=i.href, target="_blank", title=i.name) .comic-item-cover img(src=i.cover, alt=i.name) .author-content .author-content-item.like-technology .card-content .author-content-item-tips 关注偏好 span.author-content-item-title 动漫番剧 .content-bottom .tips 二次元，lovelive .author-content-item.like-music .card-content .author-content-item-tips 音乐偏好 span.author-content-item-title ACGN | span.author-content-item-title 游戏 .content-bottom .tips 和我一起欣赏更多音乐 .banner-button-group a.banner-button(onclick='window.open("https://i.y.qq.com/n2/m/share/details/taoge.html?platform=11&appshare=android_qq&appversion=14100008&hosteuin=oi4z7K4qoKCs7n**&id=9261491370&ADTAG=qfshare&qq_aio_chat_type=3")', data-pjax-state) i.fas.fa-circle-right | span.banner-button-text 更多推荐 .author-content .create-site-post.author-content-item.single .author-content-item-tips 文字测试 | 欢迎来到我的博客 😝 //- .checkbox.blue.checked //- input(type='checkbox', checked) //- p //- | 又菜又爱玩🎮 //- kbd ctrl //- | + //- kbd C //- | 、 //- kbd ctrl //- | + //- kbd V //- | 高级CV工程师🏆 //- .checkbox.blue.checked //- input(type='checkbox', checked) //- p 擅长PS、Pr、Ae、Au、Ai、Dw、An、Id等软件的安装与卸载🎃 //- .checkbox.blue.checked //- input(type='checkbox', checked) //- p 精通Html、CSS、JavaScript、Vue、React、PHP、Java、Python、C、C++、C#、Go、TypeScript等单词的拼写🎲 //- .checkbox.blue.checked //- input(type='checkbox', checked) //- p 熟悉Windows、Linux、Mac、Android、IOS等系统的开关机👻 script(src=url_for(theme.CDN.option.countup_js)) script(src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js") script. (() => { function isInViewPortOfOne(el) { if (!el) return; const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; const offsetTop = el.offsetTop; const scrollTop = document.documentElement.scrollTop; const top = offsetTop - scrollTop; return top <= viewPortHeight; } fetch('https://v6-widget.51.la/v6/掩码id/quote.js').then(res => res.text()).then((data) => { let title = ['最近活跃', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量'] let num = data.match(/(<\/span>).*?(\/span><\/p>)/g) num = num.map((el) => { let val = el.replace(/(<\/span>)/g, '') let str = val.replace(/(<\/span><\/p>)/g, '') return str }) let statisticEl = document.getElementById('statistic') // 自定义不显示哪个或者显示哪个，如下为不显示最近活跃访客和总访问量 let statistic = [] for (let i = 0; i < num.length; i++) { if (!statisticEl) return if (i == 0 || i == num.length - 1) continue; statisticEl.innerHTML += '

' + title[i] + '' + num[i] + '

' queueMicrotask(()=> { statistic.push(new CountUp(title[i], 0, num[i], 0, 2, { useEasing: true, useGrouping: true, separator: ',', decimal: '.', prefix: '', suffix: '' })) }) } function statisticUP () { let statisticElment = document.querySelector('.about-statistic.author-content-item'); if(isInViewPortOfOne(statisticElment)) { for (let i = 0; i < num.length; i++) { if (i == 0 || i == num.length - 1) continue; statistic[i-1].start(); } document.removeEventListener('scroll', throttleStatisticUP); } } function scrollSelfInfoContentYear() { let selfInfoContentYearElment = document.querySelector('.author-content-item.selfInfo.single'); if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) { selfInfoContentYear.start() document.removeEventListener('scroll', throttleScrollSelfInfoContentYear); } } const throttleStatisticUP = btf.throttle(statisticUP, 200) document.addEventListener('scroll', throttleStatisticUP, {passive: true}) const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200) document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true}) }); var pursuitInterval = null; pursuitInterval = setInterval(function () { const show = document.querySelector('span[data-show]') const next = show.nextElementSibling || document.querySelector('.first-tips') const up = document.querySelector('span[data-up]') if (up) { up.removeAttribute('data-up') } show.removeAttribute('data-show') show.setAttribute('data-up', '') next.setAttribute('data-show', '') }, 2000) document.addEventListener('pjax:send', function(){ clearInterval(pursuitInterval); }); var helloAboutEl = document.querySelector('.hello-about') helloAboutEl.addEventListener("mousemove", evt => { const mouseX = evt.offsetX; const mouseY = evt.offsetY; gsap.set(".cursor", { x: mouseX, y: mouseY, }) gsap.to(".shape", { x: mouseX, y: mouseY, stagger: -0.1 }) }) })() ```

第173行的{掩码ID}由[51la](https://www.51.la/)提供，用于统计网站访问量。后续我会尝试使用umami代替 1. 注册账号并添加网站访问 51la 官网注册账号并登录添加你的网站 2. 开启数据挂件进入站点配置 > 参数设置 > 数据挂件开启数据挂件功能 3. 获取 {掩码ID} 在嵌入代码中找到 src 项提取 https://v6-widget.51.la/v6/ 后的 16 位字符

以上代码的个性化文字和图像url需要自己修改 ### 引入统计代码如果开启了51la统计，就需要在_config.butterfly.yml中引入统计代码: ```yml bottem: - - - # 添加完站点后会自动跳转安装，就在代码里面 - # 开启灵雀功能后，也在安装代码里面 ``` 注意一定要在51la上开启v6统计和灵雀监控，否则无法统计访问量 ### 配置 countup_js 的 CDN 1. 修改_config.butterfly.yml ```yml CDN: option: countup_js: /js/countup.js ``` 2. 新建source/js/countup.js ```js var CountUp = function (target, startVal, endVal, decimals, duration, options) { var self = this; self.version = function () { return "1.9.2"; }; self.options = { useEasing: true, useGrouping: true, separator: ",", decimal: ".", easingFn: easeOutExpo, formattingFn: formatNumber, prefix: "", suffix: "", numerals: [], }; if (options && typeof options === "object") { for (var key in self.options) { if (options.hasOwnProperty(key) && options[key] !== null) { self.options[key] = options[key]; } } } if (self.options.separator === "") { self.options.useGrouping = false; } else { self.options.separator = "" + self.options.separator; } var lastTime = 0; var vendors = ["webkit", "moz", "ms", "o"]; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (id) { clearTimeout(id); }; } function formatNumber(num) { num = num.toFixed(self.decimals); num += ""; var x, x1, x2, x3, i, l; x = num.split("."); x1 = x[0]; x2 = x.length > 1 ? self.options.decimal + x[1] : ""; if (self.options.useGrouping) { x3 = ""; for (i = 0, l = x1.length; i < l; ++i) { if (i !== 0 && i % 3 === 0) { x3 = self.options.separator + x3; } x3 = x1[l - i - 1] + x3; } x1 = x3; } if (self.options.numerals.length) { x1 = x1.replace(/[0-9]/g, function (w) { return self.options.numerals[+w]; }); x2 = x2.replace(/[0-9]/g, function (w) { return self.options.numerals[+w]; }); } return self.options.prefix + x1 + x2 + self.options.suffix; } function easeOutExpo(t, b, c, d) { return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; } function ensureNumber(n) { return typeof n === "number" && !isNaN(n); } self.initialize = function () { if (self.initialized) { return true; } self.error = ""; self.d = typeof target === "string" ? document.getElementById(target) : target; if (!self.d) { self.error = "[CountUp] target is null or undefined"; return false; } self.startVal = Number(startVal); self.endVal = Number(endVal); if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) { self.decimals = Math.max(0, decimals || 0); self.dec = Math.pow(10, self.decimals); self.duration = Number(duration) * 1000 || 2000; self.countDown = self.startVal > self.endVal; self.frameVal = self.startVal; self.initialized = true; return true; } else { self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number"; return false; } }; self.printValue = function (value) { var result = self.options.formattingFn(value); if (self.d.tagName === "INPUT") { this.d.value = result; } else { if (self.d.tagName === "text" || self.d.tagName === "tspan") { this.d.textContent = result; } else { this.d.innerHTML = result; } } }; self.count = function (timestamp) { if (!self.startTime) { self.startTime = timestamp; } self.timestamp = timestamp; var progress = timestamp - self.startTime; self.remaining = self.duration - progress; if (self.options.useEasing) { if (self.countDown) { self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration); } else { self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration); } } else { if (self.countDown) { self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration); } else { self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration); } } if (self.countDown) { self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal; } else { self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal; } self.frameVal = Math.round(self.frameVal * self.dec) / self.dec; self.printValue(self.frameVal); if (progress < self.duration) { self.rAF = requestAnimationFrame(self.count); } else { if (self.callback) { self.callback(); } } }; self.start = function (callback) { if (!self.initialize()) { return; } self.callback = callback; self.rAF = requestAnimationFrame(self.count); }; self.pauseResume = function () { if (!self.paused) { self.paused = true; cancelAnimationFrame(self.rAF); } else { self.paused = false; delete self.startTime; self.duration = self.remaining; self.startVal = self.frameVal; requestAnimationFrame(self.count); } }; self.reset = function () { self.paused = false; delete self.startTime; self.initialized = false; if (self.initialize()) { cancelAnimationFrame(self.rAF); self.printValue(self.startVal); } }; self.update = function (newEndVal) { if (!self.initialize()) { return; } newEndVal = Number(newEndVal); if (!ensureNumber(newEndVal)) { self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal; return; } self.error = ""; if (newEndVal === self.frameVal) { return; } cancelAnimationFrame(self.rAF); self.paused = false; delete self.startTime; self.startVal = self.frameVal; self.endVal = newEndVal; self.countDown = self.startVal > self.endVal; self.rAF = requestAnimationFrame(self.count); }; if (self.initialize()) { self.printValue(self.startVal); } }; ``` ### 新建CSS 在`themes\butterfly\source\css`目录下创建`_custom`然后在_custom里面再次创建about文件夹，然后在about目录下新建about.css ```css #gitcalendar { margin: 0 auto; border-radius: 24px; background: var(--anzhiyu-card-bg); border: var(--style-border-always); box-shadow: var(--anzhiyu-shadow-border); position: relative; padding: 1rem 2rem; overflow: hidden; } /*背景面板*/ #page:has(#about-page) { border: 0; box-shadow: none !important; padding: 0 !important; background: rgba(255, 255, 255, 0.884); /* 添加一个半透明的背景色 */ backdrop-filter: blur(10px); /* 添加背景模糊效果 */ -webkit-backdrop-filter: blur(10px); /* 兼容Safari浏览器 */ border-radius: 26px; /* 设置四个角为圆角，半径为24px */ } #page:has(#about-page) .page-title { display: none; } .page:has(#about-page) #footer-wrap { opacity: 1; overflow: visible; height: auto !important; min-height: 16px; color: #ffffff; } #web_bg ~ .page:has(#about-page) { background: var(--anzhiyu-background); } #about-page .author-box { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; width: 100%; } /* 头像样式调整 */ #about-page .author-box .author-img { margin: 0; border-radius: 50%; overflow: hidden; width: 180px; height: 180px; flex-shrink: 0; order: 2; /* 头像在中间 */ position: relative; } #about-page .author-box .author-img img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; } /* 修复 image-dot 定位 - 现在它是 author-box 的直接子元素 */ #about-page .author-box .image-dot { width: 30px; height: 30px; background: #6bdf8f; position: absolute; border-radius: 50%; border: 4px solid var(--anzhiyu-background); top: calc(50% + 45px); /* 向下偏移头像半径的一半 */ left: calc(50% + 45px); /* 向右偏移头像半径的一半 */ z-index: 10; transform: translate(-50%, -50%); /* 居中定位 */ } .author-content { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin-top: 1rem; } #about-page .myInfoAndSayHello { display: flex; flex-direction: column; justify-content: center; color: var(--anzhiyu-white); background: linear-gradient(120deg, #5fa8c8 0, #00d4ff 100%); background-size: 200%; animation: gradient 15s ease infinite; width: 59%; } .author-content-item { width: 49%; border-radius: 24px; background: var(--anzhiyu-card-bg); border: var(--style-border-always); box-shadow: var(--anzhiyu-shadow-border); position: relative; padding: 1rem 2rem; overflow: hidden; } #about-page .myInfoAndSayHello .title1 { opacity: 0.8; line-height: 1.3; } #about-page .myInfoAndSayHello .title2 { font-size: 36px; font-weight: 700; line-height: 1.1; margin: 0.5rem 0; } .inline-word { word-break: keep-all; white-space: nowrap; } #about-page .myInfoAndSayHello .title1 { opacity: 0.8; line-height: 1.3; } .author-content-item.aboutsiteTips { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 39%; } .aboutsiteTips h2 { margin-right: auto; font-size: 36px; font-family: Helvetica; line-height: 1.06; letter-spacing: -0.02em; color: var(--font-color); margin-top: 0; } .aboutsiteTips .mask { height: 36px; position: relative; overflow: hidden; margin-top: 4px; } .aboutsiteTips .mask span { display: block; box-sizing: border-box; position: absolute; top: 36px; padding-bottom: var(--offset); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; } .aboutsiteTips .mask span[data-show] { transform: translateY(-100%); transition: 0.5s transform ease-in-out; } .aboutsiteTips .mask span[data-up] { transform: translateY(-200%); transition: 0.5s transform ease-in-out; } .aboutsiteTips .mask span:nth-child(1) { background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1); } .aboutsiteTips .mask span:nth-child(2) { background-image: linear-gradient(45deg, #18e198 50%, #0ec15d); } .aboutsiteTips .mask span:nth-child(3) { background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c); } .aboutsiteTips .mask span:nth-child(4) { background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f); } @media screen and (max-width: 768px) { .author-content-item.map { margin-bottom: 0; } } #about-page .about-statistic { min-height: 380px; width: 99.9%; background: url(https://img02.anheyu.com/adminuploads/1/2022/09/23/632d634f8376d.jpg) no-repeat top; background-size: cover; color: var(--anzhiyu-white); overflow: hidden; } #about-page .about-statistic::after { box-shadow: 0 -159px 173px 71px #0c1c2c inset; position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; } .author-content-item .card-content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; padding: 1rem 2rem; } .author-content-item .card-content .author-content-item-title { margin-bottom: 0.5rem; } .author-content-item .author-content-item-title { font-size: 36px; font-weight: 700; line-height: 1; } #statistic { font-size: 16px; border-radius: 15px; width: 100%; color: var(--anzhiyu-white); display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; margin-top: 1rem; margin-bottom: 2rem; } #statistic div span:first-child { opacity: 0.8; font-size: 12px; } #statistic div span:last-child { font-weight: 700; font-size: 34px; line-height: 1; white-space: nowrap; } #statistic div { display: flex; justify-content: space-between; flex-direction: column; width: 50%; margin-bottom: 0.5rem; } .post-tips { color: var(--anzhiyu-gray); font-size: 14px; position: absolute; bottom: 1rem; left: 2rem; } .post-tips a { color: var(--anzhiyu-gray) !important; border: none !important; } .author-content-item .card-content .banner-button-group { position: absolute; bottom: 1.5rem; right: 2rem; } .author-content-item .card-content .banner-button-group .banner-button { height: 40px; width: 124px; border-radius: 20px; justify-content: center; background: var(--anzhiyu-card-bg); color: var(--font-color); display: flex; align-items: center; z-index: 1; transition: 0.3s; cursor: pointer; border-bottom: 0 !important; } .author-content-item .card-content .banner-button-group .banner-button i { margin-right: 8px; font-size: 1rem; } #about-page .author-content-item .card-content .banner-button-group .banner-button i { font-size: 1.5rem; } .author-content-item .card-content .banner-button-group .banner-button:hover { background: var(--anzhiyu-main); color: var(--anzhiyu-white); border-radius: 20px !important; } .author-content-item.personalities { position: relative; width: 59%; } .author-content-item.personalities .image { position: absolute; right: 30px; top: 10px; width: 220px; transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02); } .author-content-item.personalities .image img { display: block; margin: 0 auto 20px; max-width: 100%; transition: filter 375ms ease-in 0.2s; } .author-content-item.personalities:hover .image { transform: rotate(-10deg); } .author-content-item.myphoto { height: 60%; min-height: 240px; position: relative; overflow: hidden; width: 39%; display: flex; align-items: center; justify-content: center; } .author-content-item.myphoto img { position: absolute; min-width: 100%; object-fit: cover; transition: 0.6s; animation: coverIn 2s ease-out forwards; transition: transform 2s ease-out !important; } .author-content-item.myphoto:hover img { transform: scale(1.1); } .author-content-item:hover .card-background-icon { transform: rotate(20deg); } .author-content-item.personalities .title2 { font-size: 36px; font-weight: 700; line-height: 1.1; } .author-content-item.single { width: 100%; } .author-content-item.map .map-title { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--anzhiyu-maskbg); padding: 0.5rem 2rem; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: blur(20px); transition: 1s ease-in-out; font-size: 20px; } .author-content-item.map .map-title b { color: var(--font-color); } .author-content-item.selfInfo { display: flex; min-height: 100px; max-height: 400px; justify-content: space-between; align-items: center; flex-wrap: wrap; height: -webkit-fill-available; height: 40%; } .author-content-item.selfInfo div { display: flex; flex-direction: column; margin: 0.5rem 2rem 0.5rem 0; } .author-content-item.selfInfo .selfInfo-title { opacity: 0.8; font-size: 12px; line-height: 1; margin-bottom: 8px; } .author-content-item.selfInfo .selfInfo-content { font-weight: 700; font-size: 34px; line-height: 1; } .author-content-item-group.column.mapAndInfo { width: 59%; } .author-content-item.map:hover { background-size: 120%; transition: 4s ease-in-out; background-position-x: 0; background-position-y: 36%; } .author-content-item.map:hover .map-title { bottom: -100%; } .author-content-item-group.column { display: flex; flex-direction: column; width: 49%; justify-content: space-between; } .post-tips a:hover { color: var(--anzhiyu-main) !important; background: none !important; } .author-content-item.single.reward .reward-list-updateDate { color: var(--anzhiyu-gray); font-size: 14px; } .author-content-item.single.reward .post-reward { position: absolute; margin-top: 0px; width: auto; text-align: none; pointer-events: none; right: 2rem; top: 2rem; } .tip-button { border: 0; border-radius: 2.25rem; cursor: pointer; font-size: 20px; font-weight: 600; height: 2.6rem; margin-bottom: -4rem; outline: 0; position: relative; top: 0; transform-origin: 0 100%; transition: transform 50ms ease-in-out; width: auto; -webkit-tap-highlight-color: transparent; } .coin::before, .coin__back, .coin__back::after, .coin__front, .coin__front::after, .coin__middle { border-radius: 50%; box-sizing: border-box; height: 100%; left: 0; position: absolute; width: 100%; z-index: 3; } .coin-wrapper { background: 0 0; bottom: 0; height: 18rem; left: 0; opacity: 1; overflow: hidden; pointer-events: none; position: absolute; transform: none; transform-origin: 50% 100%; transition: opacity 0.2s linear 0.1s, transform 0.3s ease-out; width: 100%; } .coin__front::after { background: rgba(0, 0, 0, 0.2); content: ""; opacity: var(--front-y-multiplier); } .coin__back::after { background: rgba(0, 0, 0, 0.2); content: ""; opacity: var(--back-y-multiplier); } .coin__middle { background: #737c99; transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-multiplier)); } .coin::before { background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent calc(var(--shine-bg-multiplier) + 0), #e9f4ff calc(var(--shine-bg-multiplier) + 0), transparent calc(var( --shine-bg-multiplier ) + 50%)); content: ""; opacity: var(--shine-opacity-multiplier); transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / -2)) scaleY(var(--middle-scale-multiplier)) rotate(calc(var(--coin-rotation-multiplier) * 1deg)); z-index: 10; } .coin { --front-y-multiplier: 0; --back-y-multiplier: 0; --coin-y-multiplier: 0; --coin-x-multiplier: 0; --coin-scale-multiplier: 0; --coin-rotation-multiplier: 0; --shine-opacity-multiplier: 0.4; --shine-bg-multiplier: 50%; bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem); height: 3.5rem; margin-bottom: 3.05rem; position: absolute; right: calc(var(--coin-x-multiplier) * 34% + 16%); transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var( --coin-rotation-multiplier ) * -1deg)); transition: opacity 0.1s linear 0.2s; width: 3.5rem; z-index: 3; } .coin__back { background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%), radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent 35%); background-color: #8590b3; background-size: 100% 100%; transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--back-scale-multiplier)); } .coin__front { background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%), linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%), linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient( to bottom, #fcfaf9 44%, transparent 44%, transparent 65%, #fcfaf9 65%, #fcfaf9 71%, #8590b3 71% ), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9 47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent 72%); background-color: #8590b3; background-size: 100% 100%; transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--front-scale-multiplier)); } .tip-button__text { color: #fff; margin-right: 1.8rem; opacity: 1; position: relative; transition: opacity 0.1s linear 0.5s; z-index: 3; } .author-content .post-reward .reward-main { bottom: 0; top: 50px; left: auto; right: 0; } .author-content .post-reward .reward-main .reward-all:before { top: -11px; bottom: auto; } #about-page .post-reward .reward-item a:hover { background: transparent !important; } #about-page .post-reward .reward-item a { border-bottom: none !important; } #about-page .post-reward .reward-item a img { margin-bottom: 0 !important; } #about-page .post-reward .reward-main .reward-all { border-radius: 10px; padding: 20px 10px !important; } .post-reward .reward-main .reward-all .reward-item { padding: 0 8px !important; } .post-reward .reward-main .reward-all li.reward-item::before { content: none !important; } .post-reward .reward-main .reward-all:after { content: none !important; } .author-content-item.maxim { font-size: 36px; font-weight: 700; line-height: 1.1; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; width: 39%; } .author-content-item .author-content-item-tips { opacity: 0.8; font-size: 12px; margin-bottom: 0.5rem; } .author-content-item.maxim .maxim-title { display: flex; flex-direction: column; } .author-content-item.buff { height: 200px; font-size: 36px; font-weight: 700; line-height: 1.1; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%); color: var(--anzhiyu-white); background-size: 200%; animation: gradient 15s ease infinite; min-height: 200px; height: fit-content; width: 59%; } .author-content-item.buff .card-content { display: flex; flex-direction: column; justify-content: center; } .author-content-item.buff .buff-title { display: flex; flex-direction: column; } .card-background-icon { font-size: 12rem; opacity: 0.2; position: absolute; right: 0; bottom: -40%; transform: rotate(30deg); transition: 2s ease-in-out; } /* 在原神卡片样式后面添加星穹铁道卡片样式 */ .author-content-item.game-starrail { background: url(https://youke1.picui.cn/s1/2025/09/27/68d8000b6120e.jpg) no-repeat top; background-size: cover; min-height: 300px; max-height: 400px; /* 添加最大高度控制 */ height: 300px; /* 固定高度 */ overflow: hidden; color: var(--anzhiyu-white); width: 45%; } .author-content-item.game-starrail::after { box-shadow: 0 -69px 203px 11px #2a1a5e inset; position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; } /* 修改原神卡片宽度，添加高度控制 */ .author-content-item.game-yuanshen { background: url(https://img02.anheyu.com/adminuploads/1/2022/12/19/63a079ca63c8a.webp) no-repeat top; background-size: cover; min-height: 300px; max-height: 400px; /* 添加最大高度控制 */ height: 300px; /* 固定高度 */ overflow: hidden; color: var(--anzhiyu-white); width: 45%; } /* 为两个游戏卡片添加容器样式 */ .games-container { display: flex; gap: 1rem; width: 100%; margin-bottom: 1rem; } /* 移动端适配 */ @media screen and (max-width: 768px) { .games-container { flex-direction: column; } .author-content-item.game-yuanshen, .author-content-item.game-starrail { width: 100% !important; height: 250px; /* 移动端调整高度 */ min-height: 250px; } .author-content-item.game-yuanshen .content-bottom, .author-content-item.game-starrail .content-bottom { padding-bottom: 10px; } .author-content-item.game-yuanshen .game-yuanshen-uid, .author-content-item.game-starrail .game-starrail-uid { display: none; } } .author-content-item.comic-content { width: 100%; /* 将宽度设置为100% */ min-height: 300px; overflow: hidden; } .author-content-item.comic-content .comic-box { display: flex; width: 99.9%; /* 将宽度设置为100% */ height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .author-content-item.comic-content .author-content-item-tips, .author-content-item.comic-content .author-content-item-title { z-index: 2; color: var(--anzhiyu-white); pointer-events: none; } .author-content-item.comic-content .comic-item { height: 100%; color: white; width: 20%; transform: skew(-10deg, 0deg); transition: 0.8s; position: relative; overflow: hidden; } .author-content-item.comic-content .comic-item:hover { width: 46%; } .author-content-item.comic-content .comic-item:hover .comic-item-cover { left: 16%; transform: skew(10deg, 0deg) scale(1.6); } .author-content-item.comic-content .comic-item .comic-item-cover { position: absolute; top: 0; left: -50%; height: 100%; transform: skew(10deg, 0deg); object-fit: cover; transition: scale 0.2s, all 0.8s; } .author-content-item.comic-content .comic-item .comic-item-cover img { height: 100%; transition: 0.8s; max-width: none; border-radius: 0px; } .author-content-item.comic-content::after { box-shadow: 0 -48px 203px 11px #ffffff52 inset; position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; } .author-content-item.like-technology { background: url(https://blog.ayeez.cn/imgs/bg/p11.jpg) no-repeat; background-size: cover; min-height: 230px; color: var(--anzhiyu-white); } .author-content-item.like-music { background: url(https://blog.ayeez.cn/imgs/bg/p15.jpg) no-repeat top; background-size: cover; min-height: 400px; color: var(--anzhiyu-white); overflow: hidden; } .author-content-item .card-content .banner-button-group { position: absolute; bottom: 1.5rem; right: 2rem; } .author-content-item.like-music::after { box-shadow: 0 -69px 203px 11px #453e38 inset; position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; } @media screen and (max-width: 768px) { #gitcalendar { display: none; } [data-theme="dark"] .author-content-item .card-content .banner-button-group .banner-button { color: var(--anzhiyu-black) !important; } .author-content-item .card-content .banner-button-group .banner-button:hover { background: none !important; } .author-content-item.game-yuanshen .content-bottom { padding-bottom: 10px; } .author-content-item.game-yuanshen .game-yuanshen-uid { display: none; } .author-content { margin-top: 0; } .author-content-item { width: 100% !important; margin-top: 1rem; padding: 1rem; } .author-content-item.map { margin-bottom: 0; } .author-content-item-group.column { width: 100% !important; } .author-content-item.selfInfo { height: 95%; } .author-content-item.personalities { height: 170px; } .post-tips { left: auto; } .author-content-item.personalities .image { width: 90px; } .site-card-group > a { width: 100% !important; } .post-reward { display: none; } .reward-list-item { width: 100% !important; } .layout > div:first-child:not(.recent-posts) { /* border-radius: 0; */ padding: 0 1rem !important; box-shadow: none !important; background: var(--anzhiyu-background); } .author-content-item .card-content .banner-button-group .banner-button-text { display: none; } .author-content-item .card-content .banner-button-group { right: 1rem; bottom: 1rem; } .author-content-item .card-content .banner-button-group .banner-button { background: 0 0; padding: 0; } .author-content-item .card-content .banner-button-group .banner-button i { margin-right: 0; font-size: 1.5rem; background: white; border-radius: 50%; padding: 6px; margin-left: 80px; } .author-content-item .card-content .banner-button-group .banner-button:hover i { background: var(--anzhiyu-background) !important; color: var(--anzhiyu-theme); } #selfInfo-content-year { width: 90px; } } @media screen and (min-width: 768px) and (max-width: 896px) { .author-content-item.like-music .content-bottom .tips { display: none; } } /* 赞赏的css */ .reward-list-all { display: flex; flex-wrap: wrap; flex-direction: row; margin-top: 1rem; margin-bottom: 0.5rem; margin-left: -0.25rem; margin-right: -0.25rem; } .reward-list-item { padding: 1rem; border-radius: 12px; border: var(--style-border-always); width: calc((100% / 3) - 0.5rem); margin: 0 0.25rem 0.5rem 0.25rem; box-shadow: var(--anzhiyu-shadow-border); } .reward-list-item .reward-list-item-name { font-size: 1rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; } .reward-list-item .reward-list-bottom-group { display: flex; align-items: center; justify-content: space-between; } .reward-list-item .reward-list-item-money { padding: 4px; background: var(--font-color); color: var(--card-bg); font-size: 12px; line-height: 1; border-radius: 4px; margin-right: 4px; white-space: nowrap; } .reward-list-item .reward-list-item-time { font-size: 12px; color: var(--anzhiyu-secondtext); white-space: nowrap; } /* 修改头像容器为flex布局，添加标签环绕 */ #about-page .author-box { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; width: 100%; } /* 头像样式调整 */ #about-page .author-box .author-img { margin: 0; border-radius: 50%; overflow: visible; /* 改为 visible 允许子元素溢出 */ width: 180px; height: 180px; flex-shrink: 0; order: 2; /* 头像在中间 */ position: relative; } #about-page .author-box .author-img img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; /* 确保图片在 dot 下面 */ } /* 修改 image-dot 的定位 - 现在它在头像内部 */ #about-page .author-box .image-dot { width: 30px; height: 30px; background: #6bdf8f; position: absolute; border-radius: 50%; border: 7px solid var(--anzhiyu-background); top: calc(50% + 69px); /* 增加偏移量，使其更靠近右下角 */ left: calc(50% + 60px); /* 增加偏移量，使其更靠近右下角 */ z-index: 10; transform: translate(-50%, -50%); /* 居中定位 */ } /* 标签容器样式 */ .author-tag-left, .author-tag-right { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; /* 防止flex项目溢出 */ } .author-tag-left { order: 1; align-items: flex-end; } .author-tag-right { order: 3; align-items: flex-start; } .author-tag { background: #ffffff; color: #333333; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border: 1px solid #e1e1e1; transition: all 0.3s ease; white-space: nowrap; max-width: 180px; display: inline-block; } .author-tag:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } /* 为不同标签添加不同的边框颜色 */ .author-tag-left .author-tag:nth-child(1) { border-color: #ff6b6b; } .author-tag-left .author-tag:nth-child(2) { border-color: #48cae4; } .author-tag-left .author-tag:nth-child(3) { border-color: #51cf66; } .author-tag-left .author-tag:nth-child(4) { border-color: #ffd43b; } .author-tag-right .author-tag:nth-child(1) { border-color: #da77f2; } .author-tag-right .author-tag:nth-child(2) { border-color: #74c0fc; } .author-tag-right .author-tag:nth-child(3) { border-color: #ffa94d; } .author-tag-right .author-tag:nth-child(4) { border-color: #8ce99a; } /* 移动端适配 */ @media screen and (max-width: 768px) { #about-page .author-box { flex-direction: column; gap: 1.2rem; } /* 在移动端隐藏两侧标签 */ .author-tag-left, .author-tag-right { display: none; /* 隐藏两侧标签 */ } /* 确保头像在移动端居中显示 */ #about-page .author-box .author-img { order: 1; /* 调整顺序，让头像在移动端显示在最上面 */ margin: 0 auto; /* 居中显示 */ } /* 移动端调整 dot 位置 */ #about-page .author-box .image-dot { top: calc(50% + 45px); left: calc(50% + 45px); width: 25px; height: 25px; border: 3px solid var(--anzhiyu-background); } } /* 添加标签漂浮动画效果 */ .author-tag { background: #ffffff; color: #333333; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border: 1px solid #e1e1e1; transition: all 0.3s ease; white-space: nowrap; max-width: 180px; display: inline-block; animation: float 3s ease-in-out infinite; /* 添加漂浮动画 */ } /* 为不同标签设置不同的动画延迟，形成错落有致的效果 */ .author-tag-left .author-tag:nth-child(1) { border-color: #ff6b6b; animation-delay: 0s; } .author-tag-left .author-tag:nth-child(2) { border-color: #48cae4; animation-delay: 0.5s; } .author-tag-left .author-tag:nth-child(3) { border-color: #51cf66; animation-delay: 1s; } .author-tag-left .author-tag:nth-child(4) { border-color: #ffd43b; animation-delay: 1.5s; } .author-tag-right .author-tag:nth-child(1) { border-color: #da77f2; animation-delay: 0.2s; } .author-tag-right .author-tag:nth-child(2) { border-color: #74c0fc; animation-delay: 0.7s; } .author-tag-right .author-tag:nth-child(3) { border-color: #ffa94d; animation-delay: 1.2s; } .author-tag-right .author-tag:nth-child(4) { border-color: #8ce99a; animation-delay: 1.7s; } /* 定义漂浮动画 */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); /* 向上漂浮4像素 */ } } /* 悬停时暂停动画并放大 */ .author-tag:hover { animation-play-state: paused; /* 悬停时暂停动画 */ transform: translateY(-1px) scale(1.05); /* 悬停时上浮并轻微放大 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } ``` ### 新建careers.css ```css .author-content-item.careers { min-height: 400px; } .author-content-item.careers .careers-group { margin-top: 12px; } .author-content-item.careers .careers-item { display: flex; align-items: center; } .author-content-item.careers .careers-item .circle { width: 16px; height: 16px; margin-right: 8px; border-radius: 16px; } .author-content-item.careers .careers-item .name { color: var(--anzhiyu-secondtext); } .author-content-item.careers .careers-item { display: flex; align-items: center; } .author-content-item.careers .careers-item .circle { width: 16px; height: 16px; margin-right: 8px; border-radius: 16px; } .author-content-item.careers .careers-item .name { color: var(--anzhiyu-secondtext); } .author-content-item.careers img { position: absolute; left: 0; bottom: 20px; width: 100%; transition: 0.6s; } ``` ### 新建genshinimpact.css ```css :root { --loadingbar-background-color: #2c2b30; --loadingbar-prospect-color: #ece5d8; } /* html.dark body { background-color: #161d22; } */ .loading-bar { position: absolute; top: 50%; left: 50%; width: 500px; height: 62.5px; transform: translate(-25%, -50%) scale(0.5); transition: all 0.5s; user-select: none; overflow: hidden; } .loading-bar img { position: absolute; top: 500px; left: 0; filter: drop-shadow(0 -500px 0 var(--loadingbar-background-color)); } .loading-bar::after { content: ""; position: absolute; top: 500px; left: 0; filter: drop-shadow(0 -500px 0 var(--loadingbar-prospect-color)); width: 500px; height: 62.5px; background: url("https://yuanshen.site/imgs/loading-bar.png") no-repeat left 100%; background-size: 500px 62.5px; background-position-x: 0; } .author-content-item.game-yuanshen:hover .loading-bar::after { animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards; } @media screen and (max-width: 719px) { .loading-bar .loading-bar { display: none; } } @media screen and (max-width: 719px) and (orientation: landscape) { .loading-bar .loading-bar { display: block !important; transform: translate(-50%, -50%) scale(0.7) !important; } } @supports not (filter: drop-shadow(0 0 0 #fff)) { .loading-bar:before { content: "Your browser does not support the animation"; } } @keyframes loading-bar { 0% { width: 0; background-size: 500px 62.5px; } 16.6% { } 33.2% { } 49.8% { } 66.4% { } 83% { width: 475px; } 83.1% { width: 475px; } 83.2% { width: 475px; } 83.3% { width: 475px; } 83.4% { width: 475px; } 83.5% { width: 475px; } 83.6% { width: 475px; } 83.7% { width: 475px; } 83.8% { width: 475px; } 83.9% { width: 475px; } 84% { width: 475px; } 85% { width: 475px; } 86% { width: 475px; } 87% { width: 475px; } 100% { width: 500px; } } ``` 在第37行修改图片url即可 ### 新建hello-about.css ```css .hello-about { margin: 20px auto; border-radius: 24px; background: var(--anzhiyu-card-bg); border: var(--style-border-always); box-shadow: var(--anzhiyu-shadow-border); position: relative; overflow: hidden; user-select: none; } .shapes { position: relative; height: 315px; width: 100%; background: #2128bd; overflow: hidden; } .shape { will-change: transform; position: absolute; border-radius: 50%; } .shape.shape-1 { background: #005ffe; width: 650px; height: 650px; margin: -325px 0 0 -325px; } .shape.shape-2 { background: #ffe5e3; width: 440px; height: 440px; margin: -220px 0 0 -220px; } .shape.shape-3 { background: #ffcc57; width: 270px; height: 270px; margin: -135px 0 0 -135px; } .hello-about .content { top: 0; left: 0; position: absolute; display: flex; justify-content: center; align-items: center; height: 315px; width: 100%; background: #fff; mix-blend-mode: screen; } [data-theme="dark"] .hello-about .content { background: transparent; } [data-theme="dark"] .hello-about h1 { color: var(--anzhiyu-white); } .hello-about h1 { font-size: 200px; color: #000; margin: 0; text-align: center; font: inherit; vertical-align: baseline; line-height: 1; font-size: calc((0.0989119683 * 100vw + (58.5558852621px))); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } @media (min-width: 419px) { .hello-about h1 { font-size: calc((0.0989119683 * 100vw + (58.5558852621px))); } } .cursor { position: absolute; background: #2128bd; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; will-change: transform; user-select: none; pointer-events: none; z-index: 3; } ::selection { color: #fff; background: #2128bd; } ``` ### 新建site.css ```css .site-card-group .site-card .info { margin-top: 0; } .site-card-group > a { width: calc(100% / 4 - 0.5rem); height: 150px; position: relative; display: block; margin: 0.5rem 0.25rem; float: left; overflow: hidden; padding: 0; border-radius: 8px; -webkit-transition: all 0.3s ease 0s, -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -moz-transition: all 0.3s ease 0s, -moz-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -o-transition: all 0.3s ease 0s, -o-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -ms-transition: all 0.3s ease 0s, -ms-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -webkit-box-shadow: none; box-shadow: none; border: var(--style-border) !important; } .site-card-group > a .wrapper { position: relative; } .site-card-group > a .cover { width: 100%; -webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; transition: transform 0.5s ease-out; } .site-card-group > a .info, .site-card-group > a .wrapper .cover { position: absolute; top: 0; left: 0; } .site-card-group > a .info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background-color: rgba(255, 255, 255, 0.7); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; -ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; } .site-card-group > a .info img { position: relative; top: 45px; width: 80px; height: 80px; border-radius: 50%; -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%); box-shadow: 0 0 10px rgb(0 0 0 / 30%); z-index: 1; text-align: center; pointer-events: none; } .site-card-group > a .info span { padding: 20px 10% 60px 10%; font-size: 16px; width: 100%; text-align: center; -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%); box-shadow: 0 0 10px rgb(0 0 0 / 30%); background-color: rgba(255, 255, 255, 0.7); color: var(--font-color); white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .site-card-group .site-card:hover { border-color: var(--anzhiyu-main) !important; background-color: var(--anzhiyu-main) !important; -webkit-box-shadow: var(--anzhiyu-shadow-theme) !important; box-shadow: var(--anzhiyu-shadow-theme) !important; } .site-card-group > a:hover .wrapper img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .site-card-group > a .cover { width: 100%; -webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; transition: transform 0.5s ease-out; } .site-card-group > a .wrapper img { height: 150px; pointer-events: none; } .site-card-group .site-card .wrapper img { -webkit-transition: -webkit-transform 0.5s ease-out !important; -moz-transition: -moz-transform 0.5s ease-out !important; -o-transition: -o-transform 0.5s ease-out !important; -ms-transition: -ms-transform 0.5s ease-out !important; transition: transform 0.5s ease-out !important; } .site-card-group > a .wrapper .fadeIn { -webkit-animation: coverIn 0.8s ease-out forwards; -moz-animation: coverIn 0.8s ease-out forwards; -o-animation: coverIn 0.8s ease-out forwards; -ms-animation: coverIn 0.8s ease-out forwards; animation: coverIn 0.8s ease-out forwards; } .site-card-group > a:hover .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } ``` ### 整合并引入 CSS 修改`\themes\butterfly\source\css\index.styl` ```styl if hexo-config('css_prefix') @import 'nib' @import '_third-party/normalize.min.css' // project @import 'var' @import '_global/*' @import '_highlight/highlight' @import '_page/*' @import '_layout/*' @import '_tags/*' @import '_mode/*' @import '_custom/**/*.css' // search @import '_search/index' ``` ### 添加番剧数据新建`\source\_data\comic.yml`以下是我的数据 ```yml - class_name: 番剧 comic_tips: 阅片无数 comic_title: 番剧 comic_list: - name: 某科学的超电磁炮T href: https://www.bilibili.com/bangumi/play/ss29325?spm_id_from=333.1387.0.0 cover: https://csjs.eu.org/c/1.webp - name: Fate/Zero 第二季 href: https://www.bilibili.com/bangumi/play/ss779?spm_id_from=333.1387.0.0 cover: https://csjs.eu.org/c/2.webp - name: 葬送的芙莉莲 href: https://www.bilibili.com/bangumi/play/ep779775?spm_id_from=333.1387.0.0&from_spmid=666.25.episode.0 cover: https://csjs.eu.org/c/3.webp - name: 异度侵入 ID:INVADED href: https://www.bilibili.com/bangumi/play/ss29310?spm_id_from=333.1387.0.0 cover: https://csjs.eu.org/c/4.webp - name: 我们仍未知道那天所看见的花的名字。 href: https://www.bilibili.com/bangumi/play/ss835?spm_id_from=333.1387.0.0 cover: https://csjs.eu.org/c/5.webp - name: 孤独摇滚！ href: https://www.bilibili.com/bangumi/play/ss43164?spm_id_from=333.1387.0.0 cover: https://csjs.eu.org/c/6.webp - name: Re：从零开始的异世界生活 href: https://www.bilibili.com/bangumi/play/ss36429?spm_id_from=333.337.0.0 cover: https://csjs.eu.org/c/7.webp - name: 百妖谱 href: https://www.bilibili.com/bangumi/play/ep2008512?spm_id_from=333.337.0.0&from_spmid=666.25.episode.0 cover: https://csjs.eu.org/c/8.webp - name: 石纪元 href: https://www.bilibili.com/bangumi/play/ss42093?spm_id_from=333.1387.0.0&from_spmid=666.25.series.0 cover: https://csjs.eu.org/c/9.webp - name: 夏目友人帐 href: https://www.bilibili.com/bangumi/play/ss48811?spm_id_from=333.1387.0.0 cover: https://csjs.eu.org/c/10.webp - name: 异世界舅舅 href: https://www.bilibili.com/bangumi/play/ss42105?spm_id_from=333.1387.0.0 cover: https://csjs.eu.org/c/11.webp - name: 命运拳台 href: https://www.bilibili.com/bangumi/play/ep789332?spm_id_from=333.1387.0.0&from_spmid=666.25.episode.0 cover: https://csjs.eu.org/c/12.webp - name: 转生史莱姆日记 href: https://www.bilibili.com/bangumi/play/ep395211?spm_id_from=333.337.0.0&from_spmid=666.25.episode.0 cover: https://csjs.eu.org/c/13.webp ``` ### 修复bug 因为写完才发现有bug，这里通过打补丁方式修改在`themes\butterfly\source\css\_custom\about\`里面新建`bd.css` ```css .author-content-item .tips, .author-content-item .author-content-item-title, .author-content-item .author-content-item-tips, .author-content-item .banner-button-group .banner-button i, .author-content-item .banner-button-group .banner-button-text { color: #ccc2c2; } /* UID显示在右下角 - 可点击按钮版本 */ .author-content-item.game-yuanshen .game-yuanshen-uid, .author-content-item.game-starrail .game-starrail-uid { position: absolute; bottom: 1.5rem; right: 1.5rem; background: transparent; color: #ffffff; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 500; z-index: 3; border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); text-decoration: none; /* 去掉下划线 */ cursor: pointer; /* 鼠标指针变为手型 */ display: inline-block; /* 确保链接可以正确应用padding */ } /* 悬停效果 */ .author-content-item.game-yuanshen .game-yuanshen-uid:hover, .author-content-item.game-starrail .game-starrail-uid:hover { border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.15); /* 悬停时背景更明显 */ transform: translateY(-1px); color: #ffffff; /* 确保悬停时文字颜色不变 */ text-decoration: none; /* 确保悬停时没有下划线 */ } /* 点击效果 */ .author-content-item.game-yuanshen .game-yuanshen-uid:active, .author-content-item.game-starrail .game-starrail-uid:active { transform: translateY(0); /* 点击时回到原位 */ background: rgba(255, 255, 255, 0.25); /* 点击时背景更深 */ } /* 移动端适配 */ @media screen and (max-width: 768px) { .author-content-item.game-yuanshen .game-yuanshen-uid, .author-content-item.game-starrail .game-starrail-uid { bottom: 1rem; right: 1rem; font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 10px; } } /* 所有游戏卡片标题改为白色 */ .author-content-item.game-yuanshen .author-content-item-title, .author-content-item.game-starrail .author-content-item-title, .author-content-item.game-yuanshen .author-content-item-tips, .author-content-item.game-starrail .author-content-item-tips { color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .author-content-item.comic-content .author-content-item-title { color: #ffffff !important; } ``` ### 大功告成样式预览：剩下的东西就自己发挥了，图片在about.css里面更换 ### 进阶操作 1. 添加技能和生涯卡片在`about.pug`第43行中插入以下代码 ```pug .author-content .author-content-item.skills .card-content .author-content-item-tips 技能 span.author-content-item-title 書到用時方恨少 .skills-style-group .tags-group-all .tags-group-wrapper each i in site.data.creativity - const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0); - const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1); each item, index in i.creativity_list if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length)) .tags-group-icon-pair .tags-group-icon(style=`background: ${evenNum[index].color}`) img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon) .tags-group-icon(style=`background: ${oddNum[index].color}`) img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon) .skills-list each i in site.data.creativity each item, index in i.creativity_list .skill-info .skill-icon(style=`background: ${item.color}`) img.no-lightbox(title=item.name, src=item.icon) .skill-name span=item.name .etc ... .author-content-item.careers .card-content .author-content-item-tips 生涯 span.author-content-item-title 無限進步 .careers-group .careers-item .circle(style='background:#357ef5') .name 集成电路设计与集成系统 img.author-content-img.no-lightbox(alt='生涯', src='https://i.postimg.cc/tJ4DXvhx/edu.png') ``` 2. 添加创造力数据新建\source\_data\creativity.yml ```yml - class_name: creativity creativity_list: - name: C color: "#555555" # 深灰色，常用于C语言的标志性颜色 icon: https://img.icons8.com/?size=100&id=40670&format=png&color=000000 - name: C++ color: "#00599C" # C++的标志性颜色 icon: https://i.postimg.cc/6QHPrz7h/C.png - name: Python color: "#3776AB" # Python的标志性颜色 icon: https://i.postimg.cc/V6dVDMnP/python.png - name: Markdown color: "#000000" # Markdown通常使用黑色 icon: https://i.postimg.cc/G3TfDFbk/markdown.png - name: LATEX color: "#008080" # LATEX的标志性颜色 icon: https://i.postimg.cc/tTNqbt6K/latex.png - name: Algorithm color: "#FF6347" # 使用橙红色 icon: https://i.postimg.cc/VvtHc8K7/algorithm.png - name: Raspberry Pi color: "#A22036" # Raspberry Pi的标志性颜色 icon: https://i.postimg.cc/jdzkgRw2/Raspberry-Pi.png - name: Linux color: "#FCC624" # Linux的标志性颜色 icon: https://i.postimg.cc/RVrDLW02/linux.png - name: Kali color: "#557C94" # Kali的标志性颜色 icon: https://i.postimg.cc/4y8X7fBw/kalilinux.png - name: Blender color: "#F38027" # Blender的标志性颜色 icon: https://i.postimg.cc/B6kwy6BL/Blender.png - name: Unity color: "725757" #使用红棕色 icon: https://i.postimg.cc/k58M1dgX/unity.png - name: Photoshop color: "#31A8FF" # Photoshop的标志性颜色 icon: https://i.postimg.cc/qRTJWZNc/Photoshop.png - name: Powerpoint color: "#D24726" # Powerpoint的标志性颜色 icon: https://i.postimg.cc/kX4JrSgH/powerpoint.png - name: Word color: "#2B579A" # Word的标志性颜色 icon: https://i.postimg.cc/rFP8qpdw/WORD.png - name: Steam color: "#1B2838" # Steam的标志性颜色 icon: https://i.postimg.cc/J071zDcG/steam.png - name: Ubisoft color: "#3FAEAA" # 使用浅蓝色 icon: https://i.postimg.cc/mZVL6jBM/ubisoft.png - name: EA color: "#D3D3D3" # EA的标志性颜色 icon: https://i.postimg.cc/4y0rRm8C/ea.png ``` 3. 修改文章底部页面卡片宽度修改`themes\butterfly\source\css\_page\common.styl`文件 ```styl // 隱藏aside &.hide-aside max-width: 1400px // 按喜好修改 +minWidth2000() max-width: 1400px // 按喜好修改 & > div width: 100% !important // 不推荐动，但也可以按喜好修改 ``` 全部结束！！！

hexo-butterfly实现友链状态检测

Fri, 31 Oct 2025 10:20:05 GMT

本项目是根据[`清雨飞扬`](https://blog.liushen.fun/posts/c2262998/)的开源项目和自己的小巧思实现的

## 创建友链信息在博客根目录创建`link.js`（如果你在[添加友链朋友圈](https://hexo.seln.cn/posts/7dc9a0a2/)创建过了可无视添加以下代码： ```js const YML = require('yamljs') const fs = require('fs') const blacklist = ["友站名称1", "友站名称2", "友站名称3"]; // 由于某种原因，不想订阅的列表 let friends = [], data_f = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n')); data_f.forEach((entry, index) => { let lastIndex = 2; if (index < lastIndex) { const filteredLinkList = entry.link_list.filter(linkItem => !blacklist.includes(linkItem.name)); friends = friends.concat(filteredLinkList); } }); // 根据规定的格式构建 JSON 数据 const friendData = { friends: friends.map(item => { return [item.name, item.link, item.avatar]; }) }; // 将 JSON 对象转换为字符串 const friendJSON = JSON.stringify(friendData, null, 2); // 写入 friend.json 文件 fs.writeFileSync('./source/friend.json', friendJSON); console.log('friend.json 文件已生成。'); ``` 然后在控制台输入 ```bash npm i yamljs --save node link.js hexo cl;hexo g;hexo d ``` ## 复刻github项目 [友情链接检测](https://github.com/mccsjs/flink#)`*不要勾选仅复刻main*` 1. 修改main分支下的config.yml，更改以下内容 ```yml # 友情链接数据源URL url: "https://你的博客域名/friend.json" ``` 2. 切换到page分支删除`status.json`和`error-count.json`的数据 ## cloudflare部署 1. 点击左侧的`Workers 和 Pages`，再点击创建程序

blue

2. 点击pages➡️导入现有git➡️选择刚刚fork的库➡️更换生产分支

blue

3. 绑定域名使用你绑定后的域名就能使用了 ## 将检测结果显示到友链页 1. 创建`source\_data\styles.styl`，并填入以下内容 * 因为我出过一期[友链样式魔改](https://hexo.seln.cn/posts/97eebedd/)，本站所使用的是volantis和butterfly两个款式友链，我将提供这两种形式的styl文件 1.butterfly版本： ```styl // 友链状态指示器样式 .site-card position: relative .flink-list-item position: relative .site-card-status position: absolute bottom: 0 right: 0 z-index: 10 padding: 3px 8px border-radius: 8px 0 8px 0 font-size: 12px font-weight: 500 color: #fff background-color: rgba(0, 0, 0, 0.6) backdrop-filter: blur(4px) transition: all 0.3s ease .site-card-status.status-loading background-color: rgba(100, 100, 100, 0.8) animation: pulse 1.5s infinite .site-card-status.status-normal background-color: rgba(82, 196, 26, 0.9) .site-card-status.status-slow background-color: rgba(250, 173, 20, 0.9) .site-card-status.status-error background-color: rgba(255, 77, 79, 0.9) @keyframes pulse 0%, 100% opacity: 1 50% opacity: 0.5 [data-theme="dark"] .site-card-status background-color: rgba(255, 255, 255, 0.1) color: #fff [data-theme="dark"] .site-card-status.status-loading background-color: rgba(100, 100, 100, 0.8) [data-theme="dark"] .site-card-status.status-normal background-color: rgba(82, 196, 26, 0.8) [data-theme="dark"] .site-card-status.status-slow background-color: rgba(250, 173, 20, 0.8) [data-theme="dark"] .site-card-status.status-error background-color: rgba(255, 77, 79, 0.8) ``` 2.volantis版本 ```styl // 友链状态指示器样式 - 只对volantis样式生效 .volantis-flink-list .site-card position: relative .volantis-flink-list .site-card-status position: absolute top: 4px // 减小距离 left: 4px // 减小距离 z-index: 10 padding: 2px 6px // 减小内边距 border-radius: 12px // 稍微减小圆角 font-size: 10px // 缩小字体 font-weight: 600 color: #fff background-color: rgba(0, 0, 0, 0.35) backdrop-filter: blur(8px) -webkit-backdrop-filter: blur(8px) border: 1px solid rgba(255, 255, 255, 0.1) transition: all 0.3s ease min-width: 24px // 确保最小宽度 text-align: center box-sizing: border-box line-height: 1.2 // 加载中状态 .volantis-flink-list .site-card-status.status-loading background-color: rgba(100, 100, 100, 0.5) animation: pulse 1.5s infinite // 正常状态 .volantis-flink-list .site-card-status.status-normal background-color: rgba(82, 196, 26, 0.5) // 缓慢状态 .volantis-flink-list .site-card-status.status-slow background-color: rgba(250, 173, 20, 0.5) // 错误状态 .volantis-flink-list .site-card-status.status-error background-color: rgba(255, 77, 79, 0.5) // 加载动画 @keyframes pulse 0%, 100% opacity: 1 50% opacity: 0.7 // 深色主题适配 [data-theme="dark"] .volantis-flink-list .site-card-status background-color: rgba(255, 255, 255, 0.15) color: #fff border: 1px solid rgba(255, 255, 255, 0.2) [data-theme="dark"] .volantis-flink-list .site-card-status.status-loading background-color: rgba(100, 100, 100, 0.6) [data-theme="dark"] .volantis-flink-list .site-card-status.status-normal background-color: rgba(82, 196, 26, 0.6) [data-theme="dark"] .volantis-flink-list .site-card-status.status-slow background-color: rgba(250, 173, 20, 0.6) [data-theme="dark"] .volantis-flink-list .site-card-status.status-error background-color: rgba(255, 77, 79, 0.6) ``` 2. 在`source\js`中创建links.js，填入以下代码 * 这里也提供两种版本 1.butterfly版本 ```js // Butterfly主题友链状态检测脚本 - 适配提供的CSS样式 class LinkStatusChecker { constructor() { this.retryCount = 0; this.MAX_RETRIES = 3; this.STATUS_URL = 'https://你给检测项目绑定的域名/status.json'; this.init(); } init() { // 等待Butterfly主题的友链卡片加载完成 if (this.hasLinkCards()) { this.injectStatusIndicators(); this.fetchAndUpdateStatus(); } else { // 如果友链容器还没加载，等待一下 setTimeout(() => this.init(), 100); } } hasLinkCards() { return document.querySelector('.flink-list') || document.querySelector('.site-card') || document.querySelector('.flink-list-item'); } // 为每个友链卡片注入状态指示器 injectStatusIndicators() { // 尝试多种选择器以适应不同版本的Butterfly主题 const linkSelectors = [ '.flink-list .flink-list-item', '.flink-list-item', '.site-card', '.friend-link-item' ]; let linkCards = []; for (const selector of linkSelectors) { const cards = document.querySelectorAll(selector); if (cards.length > 0) { linkCards = cards; break; } } linkCards.forEach(card => { // 检查是否已经添加了状态指示器 if (card.querySelector('.site-card-status')) { return; } const linkElement = card.querySelector('a'); if (!linkElement) return; // 获取链接名称 - 适配Butterfly主题的不同结构 let linkName = ''; const nameSelectors = [ '.flink-item-name', '.site-name', '.friend-name', 'h2', 'h3', 'h4', '.card-title', 'span' ]; for (const selector of nameSelectors) { const nameEl = card.querySelector(selector); if (nameEl && nameEl.textContent.trim()) { linkName = nameEl.textContent.trim(); break; } } // 如果还是没找到，使用链接文本 if (!linkName) { linkName = linkElement.textContent.trim() || linkElement.getAttribute('title') || '未知网站'; } const linkUrl = linkElement.href; // 创建状态指示器 - 使用你提供的CSS类名 const statusEl = document.createElement('div'); statusEl.className = 'site-card-status status-loading'; statusEl.setAttribute('data-name', linkName); statusEl.setAttribute('data-url', linkUrl); statusEl.textContent = '检测中...'; // 添加到卡片中 card.appendChild(statusEl); // 确保卡片有相对定位 if (getComputedStyle(card).position === 'static') { card.style.position = 'relative'; } }); } async fetchLinkStatus() { const response = await fetch(this.STATUS_URL); if (!response.ok) { throw new Error('网络请求失败'); } return await response.json(); } updateLinkStatus(data) { if (data && data.link_status) { const statusMap = {}; data.link_status.forEach(link => { statusMap[link.name] = link; }); // 更新每个链接的状态 const statusElements = document.querySelectorAll('.site-card-status'); statusElements.forEach(el => { const linkName = el.getAttribute('data-name'); if (statusMap[linkName]) { const status = statusMap[linkName]; this.updateStatusElement(el, status); } else { // 如果没有找到对应的状态数据，标记为错误 this.updateStatusElement(el, { success: false, latency: -1 }); } }); } else { throw new Error('无效的状态数据'); } } updateStatusElement(element, status) { let statusClass = ''; let statusText = ''; if (!status.success || status.latency === -1) { statusClass = 'status-error'; const errorCount = status.error_count || 0; statusText = "异常[" + errorCount + "]"; } else { const latency = status.latency; if (latency <= 3) { statusClass = 'status-normal'; } else { statusClass = 'status-slow'; } statusText = latency + 's'; } element.className = 'site-card-status ' + statusClass; element.textContent = statusText; } handleError() { this.retryCount++; if (this.retryCount <= this.MAX_RETRIES) { console.log(`状态检测失败，第${this.retryCount}次重试...`); setTimeout(() => this.fetchAndUpdateStatus(), 2000 * this.retryCount); } else { // 将所有状态设为错误 document.querySelectorAll('.site-card-status.status-loading').forEach(el => { el.className = 'site-card-status status-error'; el.textContent = '获取失败'; }); } } async fetchAndUpdateStatus() { try { const data = await this.fetchLinkStatus(); this.updateLinkStatus(data); } catch (error) { console.error('获取友链状态失败:', error); this.handleError(); } } } // 添加你提供的CSS样式 const addLinkStatusStyles = () => { // 检查是否已经添加了样式 if (document.querySelector('#link-status-styles')) { return; } const css = ` .site-card { position: relative } .flink-list-item { position: relative } .site-card-status { position: absolute; bottom: 0; right: 0; z-index: 10; padding: 3px 8px; border-radius: 8px 0 8px 0; font-size: 12px; font-weight: 500; color: #fff; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); transition: all 0.3s ease } .site-card-status.status-loading { background-color: rgba(100, 100, 100, 0.8); animation: pulse 1.5s infinite } .site-card-status.status-normal { background-color: rgba(82, 196, 26, 0.9) } .site-card-status.status-slow { background-color: rgba(250, 173, 20, 0.9) } .site-card-status.status-error { background-color: rgba(255, 77, 79, 0.9) } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } } [data-theme="dark"] .site-card-status { background-color: rgba(255, 255, 255, 0.1); color: #fff } [data-theme="dark"] .site-card-status.status-loading { background-color: rgba(100, 100, 100, 0.8) } [data-theme="dark"] .site-card-status.status-normal { background-color: rgba(82, 196, 26, 0.8) } [data-theme="dark"] .site-card-status.status-slow { background-color: rgba(250, 173, 20, 0.8) } [data-theme="dark"] .site-card-status.status-error { background-color: rgba(255, 77, 79, 0.8) } .flink-templates { margin-top: 2rem; padding: 1.5rem; background: var(--efu-card-bg); border-radius: 12px; border: var(--style-border-always); box-shadow: var(--efu-shadow-border) } .flink-templates h3 { margin-bottom: 1rem; font-size: 1.2rem; font-weight: 600; color: var(--efu-fontcolor) } .template-buttons { display: flex; gap: 1rem; flex-wrap: wrap } .template-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; background: var(--efu-theme); color: #fff } .template-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) } .template-btn i { font-size: 16px } .template-btn.markdown-btn { background: #10b981 } .template-btn.markdown-btn:hover { background: #059669 } [data-theme="dark"] .flink-templates { background: var(--efu-card-bg); border-color: var(--efu-border) } [data-theme="dark"] .template-btn { background: var(--efu-theme) } [data-theme="dark"] .template-btn.markdown-btn { background: #10b981 } `; const style = document.createElement('style'); style.id = 'link-status-styles'; style.textContent = css; document.head.appendChild(style); }; // 初始化 document.addEventListener('DOMContentLoaded', () => { addLinkStatusStyles(); new LinkStatusChecker(); }); // 支持PJAX重新加载 document.addEventListener('pjax:complete', () => { new LinkStatusChecker(); }); // 监听主题切换事件（如果Butterfly主题支持动态主题切换） document.addEventListener('themechange', () => { // 重新应用样式以确保深色主题正确 addLinkStatusStyles(); }); ``` 2.volantis版本 ```js // 友链状态检测脚本 - 只对volantis样式生效，状态显示在左上角 class LinkStatusChecker { constructor() { this.retryCount = 0; this.MAX_RETRIES = 3; this.STATUS_URL = 'https://你给检测项目绑定的域名/status.json'; this.init(); } init() { // 只等待volantis样式的友链卡片加载完成 if (this.hasVolantisLinkCards()) { this.injectStatusIndicators(); this.fetchAndUpdateStatus(); } else { // 如果volantis友链容器还没加载，等待一下 setTimeout(() => this.init(), 100); } } hasVolantisLinkCards() { // 只检测volantis样式的友链容器 return document.querySelector('.volantis-flink-list'); } // 为volantis样式的友链卡片注入状态指示器 injectStatusIndicators() { // 只选择volantis样式容器内的卡片 const linkCards = document.querySelectorAll('.volantis-flink-list .site-card'); linkCards.forEach(card => { // 检查是否已经添加了状态指示器 if (card.querySelector('.site-card-status')) { return; } const linkElement = card; if (!linkElement) return; // 获取链接名称 - 适配volantis样式的结构 let linkName = ''; const nameEl = card.querySelector('.info .title'); if (nameEl && nameEl.textContent.trim()) { linkName = nameEl.textContent.trim(); } // 如果还是没找到，使用备用方法 if (!linkName) { linkName = card.querySelector('.title')?.textContent.trim() || card.getAttribute('title') || '未知网站'; } const linkUrl = card.href; // 创建状态指示器 const statusEl = document.createElement('div'); statusEl.className = 'site-card-status status-loading'; statusEl.setAttribute('data-name', linkName); statusEl.setAttribute('data-url', linkUrl); statusEl.textContent = '检测中...'; // 添加到卡片中 card.appendChild(statusEl); // 确保卡片有相对定位 if (getComputedStyle(card).position === 'static') { card.style.position = 'relative'; } }); } async fetchLinkStatus() { const response = await fetch(this.STATUS_URL); if (!response.ok) { throw new Error('网络请求失败'); } return await response.json(); } updateLinkStatus(data) { if (data && data.link_status) { const statusMap = {}; data.link_status.forEach(link => { statusMap[link.name] = link; }); // 更新每个链接的状态 const statusElements = document.querySelectorAll('.site-card-status'); statusElements.forEach(el => { const linkName = el.getAttribute('data-name'); if (statusMap[linkName]) { const status = statusMap[linkName]; this.updateStatusElement(el, status); } else { // 如果没有找到对应的状态数据，标记为错误 this.updateStatusElement(el, { success: false, latency: -1 }); } }); } else { throw new Error('无效的状态数据'); } } updateStatusElement(element, status) { let statusClass = ''; let statusText = ''; if (!status.success || status.latency === -1) { statusClass = 'status-error'; const errorCount = status.error_count || 0; statusText = "异常[" + errorCount + "]"; } else { const latency = status.latency; if (latency <= 3) { statusClass = 'status-normal'; } else { statusClass = 'status-slow'; } statusText = latency + 's'; } element.className = 'site-card-status ' + statusClass; element.textContent = statusText; } handleError() { this.retryCount++; if (this.retryCount <= this.MAX_RETRIES) { console.log(`状态检测失败，第${this.retryCount}次重试...`); setTimeout(() => this.fetchAndUpdateStatus(), 2000 * this.retryCount); } else { // 将所有状态设为错误 document.querySelectorAll('.site-card-status.status-loading').forEach(el => { el.className = 'site-card-status status-error'; el.textContent = '获取失败'; }); } } async fetchAndUpdateStatus() { try { const data = await this.fetchLinkStatus(); this.updateLinkStatus(data); } catch (error) { console.error('获取友链状态失败:', error); this.handleError(); } } } // 添加CSS样式 - 只针对volantis样式，状态显示在左上角 const addLinkStatusStyles = () => { // 检查是否已经添加了样式 if (document.querySelector('#link-status-styles')) { return; } const css = ` /* 只对volantis样式的友链生效，状态显示在左上角 */ .volantis-flink-list .site-card { position: relative; } .volantis-flink-list .site-card-status { position: absolute; top: 0; left: 0; z-index: 10; padding: 3px 8px; border-radius: 0 0 8px 0; /* 左上角圆角改为右下角圆角，因为现在在左上角 */ font-size: 12px; font-weight: 500; color: #fff; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); transition: all 0.3s ease; } .volantis-flink-list .site-card-status.status-loading { background-color: rgba(100, 100, 100, 0.8); animation: pulse 1.5s infinite; } .volantis-flink-list .site-card-status.status-normal { background-color: rgba(82, 196, 26, 0.9); } .volantis-flink-list .site-card-status.status-slow { background-color: rgba(250, 173, 20, 0.9); } .volantis-flink-list .site-card-status.status-error { background-color: rgba(255, 77, 79, 0.9); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } [data-theme="dark"] .volantis-flink-list .site-card-status { background-color: rgba(255, 255, 255, 0.1); color: #fff; } [data-theme="dark"] .volantis-flink-list .site-card-status.status-loading { background-color: rgba(100, 100, 100, 0.8); } [data-theme="dark"] .volantis-flink-list .site-card-status.status-normal { background-color: rgba(82, 196, 26, 0.8); } [data-theme="dark"] .volantis-flink-list .site-card-status.status-slow { background-color: rgba(250, 173, 20, 0.8); } [data-theme="dark"] .volantis-flink-list .site-card-status.status-error { background-color: rgba(255, 77, 79, 0.8); } `; const style = document.createElement('style'); style.id = 'link-status-styles'; style.textContent = css; document.head.appendChild(style); }; // 初始化 document.addEventListener('DOMContentLoaded', () => { addLinkStatusStyles(); new LinkStatusChecker(); }); // 支持PJAX重新加载 document.addEventListener('pjax:complete', () => { new LinkStatusChecker(); }); // 监听主题切换事件 document.addEventListener('themechange', () => { addLinkStatusStyles(); }); ``` ## 大功告成至此已全部修改完成，本站只使用volantis版，所以里面的小巧思更多点，用butterfly版本只能复制让ai完善个人的小巧思了。完成预览：更新这篇文章主要是发现我在逐渐忘记这部分魔改，赶紧得保存下来🤣 如果要更新友链信息那就在控制台执行 ```bash node link.js ``` 最后hexo三连看看效果 ```bash hexo;cl;hexo g;hexo d ``` 下一期预告：魔改about页面，实现anzhiyu同款

hexo博客添加安全跳转页面

Tue, 28 Oct 2025 07:56:44 GMT

样式预览

blue

安装插件

安装依赖 cheerio和hexo-safego 插件

npm install cheerio --save

npm install hexo-safego --save

配置

在hexo根目录的_config.yml文件中添加以下配置：

hexo_safego:
  # --- 基本功能设置 ---
  general:
    enable: true                      # 【必填】插件总开关
    enable_base64_encode: true      # 【推荐】是否对链接进行Base64编码，让URL更干净，也能轻微防止爬虫
    enable_target_blank: true       # 【推荐】是否在新标签页中打开外链

  # --- 安全与路径设置 ---
  security:
    url_param_name: 'u'               # URL中的参数名, 例如 /go.html?u=...
    html_file_name: 'go.html'         # 跳转页面的文件名，可自定义
    ignore_attrs:                     # 忽略带有这些属性的链接，例如相册的链接
      - 'data-fancybox'

  # --- 生效范围设置 ---
  scope:
    apply_containers:                 # 指定插件在哪些HTML容器内生效
      - '#article-container'          # 默认为文章内容区，您可以添加其他选择器，如 '#aside-content'
    # apply_pages:                      # 【可选】只在特定路径下的页面生效，例如 ['/posts/']
    # exclude_pages:                    # 【可选】在哪些页面完全禁用此插件

  # --- 域名白名单 ---
  whitelist:
    domain_whitelist:                 # 【重要】白名单内的域名不会被跳转，请务必加入您自己的所有域名
      - "hexo.seln.cn"                 # <--- 请替换为您自己的主域名
      - "syys.eu.org"             # <--- 您绑定的Waline/Twikoo域名

  # --- 跳转页面外观设置 ---
  appearance:
    avatar: '/img/head.jpg'   # 【可选】跳转页面上显示的头像
    title: "mccsjs"             # 【可选】跳转页面大标题
    subtitle: "安全中心"              # 【可选】跳转页面副标题
    darkmode: true                    # 【可选】是否为跳转页启用深色模式
    countdowntime: 4               # 【可选】自动跳转的倒计时秒数，设置为 -1 则不自动跳转，需要用户手动点击
  
  # --- 调试设置 ---
  debug:
    enable: false

结尾

接下来hexo三连即可，不过插件默认的黑白天模式有点问题，我直接把黑夜删了，你们也可以用我的打开\node_modules\hexo-safego\go.html，替换为以下代码

<!DOCTYPE html><html lang="zh"><head><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1,user-scalable=no"><!--添加一个网站图标--><link rel="icon"href="{{avatar}}"type="image/x-icon"><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><meta name="robots"content="noindex, nofollow"/><title>😃页面加载中，请稍候...</title><style type="text/css">body{overflow:hidden;height:100vh;width:100vw;margin:0;padding:0;background:linear-gradient(135deg,#E9E9E9,#FFFFFF)}.container{display:flex;align-items:center;justify-content:center;height:100%;width:100%;margin:0;flex-direction:column}.avatar-placeholder,.avatar{width:100px;height:100px;border-radius:50%;margin-bottom:15px;display:block}.avatar{display:none}.description{font-size:20px;font-weight:600}.subtitle{font-size:15px;margin-bottom:20px;color:#C4C4C4}.loading{text-align:center;padding:30px;border-radius:25px;animation:fadein 2s;width:450px;max-width:80%;transition:all 0.3s ease-in-out;border:1px solid#ccc;background:rgba(255,255,255,0.7);box-shadow:0 16px 32px rgba(0,0,0,0.1)}.loading:hover{box-shadow:0 16px 32px rgba(0,0,0,0.2)}@keyframes fadein{from{opacity:0}to{opacity:1}}.content{margin-bottom:20px}.url-text{margin-bottom:10px;font-size:16px;letter-spacing:1px;color:#333}.jump-url{position:relative;font-size:20px;display:block;margin-top:5px;margin-bottom:25px;padding:15px;border-radius:18px;height:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid#ccc;background-color:#F7F9FE;color:#333}.copy-btn-container{position:absolute;display:flex;align-items:center;right:10px;top:50%;transform:translateY(-50%);height:100%;width:63px;flex-direction:row-reverse;background:linear-gradient(to left,#F7F9FE 75%,transparent 100%)}.copy-btn{width:40px;height:40px;border-radius:12px;border:1px solid#a4a4a4;transition:all 0.3s ease-in-out;background-color:#F7F9FE}.copy-btn:hover{box-shadow:0 16px 32px rgba(100,100,100,0.2)}.copy-btn-container svg{width:25px;height:25px;fill:#888}.countdown-text{margin-top:12px;font-size:12px;color:#515151}.button-container{display:flex;justify-content:center;gap:20%;margin-top:20px}.button{padding:10px 20px;border-radius:16px;border:none;cursor:pointer;font-size:16px;width:120px;height:40px}.cancel-button{background-color:#a6e3e9;color:black}.confirm-button{background-color:#3fc1c9;color:white}.progress-bar{width:100%;border-radius:5px;overflow:hidden;height:10px;margin-top:20px}.progress{width:100%;height:100%;transition:width 1s;background-color:#abedd8}</style><script type="text/javascript">const host=window.location.host;function GetQueryString(name){var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");var r=window.location.search.substr(1).match(reg);return r?decodeURI(r[2]):null}function decodeSafeUrlParam(paramStr){const base64=paramStr.replace(/-/g,'+').replace(/_/g,'/');const decoded=decodeURIComponent(atob(base64).split('').map(c=>'%'+('00'+c.charCodeAt(0).toString(16)).slice(-2)).join(''));return decoded}let countdown={{countdown}};let jump_url=GetQueryString('{{url_param_name}}');jump_url=decodeSafeUrlParam(jump_url);const UrlReg='^((http|https|thunder|qqdl|ed2k|Flashget|qbrowser|ftp|rtsp|mms)://)';if(!jump_url||!jump_url.match(UrlReg)){document.title='参数错误，正在返回首页...';jump_url=location.origin}let progressElement;let countdownElement;let countdownTextElement;let jumpUrlElement;function updateCountdown(){if(countdown<0){countdownTextElement.textContent="💡自行点击跳转，请注意您的账号和财产安全";return}countdownElement.textContent=countdown;progressElement.style.width=(countdown/{{countdown}}*100)+'%';if(countdown===0){jump()}else{countdown--;setTimeout(updateCountdown,1000)}}function jump(){location.href=jump_url}function closeWindow(){function isWeChat(){return/MicroMessenger/i.test(navigator.userAgent)}function isQQ(){return/QQ/i.test(navigator.userAgent)&&!/MicroMessenger/i.test(navigator.userAgent)}if(isWeChat()){if(typeof WeixinJSBridge!=="undefined"){WeixinJSBridge.call('closeWindow')}else{document.addEventListener('WeixinJSBridgeReady',function(){WeixinJSBridge.call('closeWindow')},false)}}else if(isQQ()){if(typeof mqq!=="undefined"&&mqq.ui&&mqq.ui.closeWebView){mqq.ui.closeWebView()}else{window.history.back()}}else{window.opener=null;window.open('','_self');window.close()}}function copyToClipboard(){const urlText=document.getElementById('jump-url-text').textContent;const tempInput=document.createElement('input');tempInput.value=urlText;document.body.appendChild(tempInput);tempInput.select();document.execCommand('copy');document.body.removeChild(tempInput);alert('链接已复制到剪贴板！')}async function loadAvatar(){const avatarImg=document.querySelector('.avatar');const placeholder=document.querySelector('.avatar-placeholder');const img=new Image();img.src='{{avatar}}';img.onload=function(){avatarImg.src=img.src;avatarImg.style.display='block';placeholder.style.display='none'}}window.addEventListener('load',function(){loadAvatar();progressElement=document.getElementById('progress');countdownElement=document.getElementById('countdown');countdownTextElement=document.querySelector('.countdown-text');jumpUrlElement=document.getElementById('jump-url-text');jumpUrlElement.textContent=jump_url;updateCountdown()});</script></head><body><div class="container"><div class="avatar-placeholder"></div><img src=""alt="头像"class="avatar"><div class="description">{{title}}</div><div class="subtitle">{{subtitle}}</div><div class="loading"><div class="content"><div class="url-text">您即将离开本站，跳转到：</div><div class="jump-url"id="jump-url"><span id="jump-url-text"></span><div class="copy-btn-container"><button class="copy-btn"onclick="copyToClipboard()"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 448 512"><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg></button></div></div></div><div class="countdown-text">⚡将在<span id="countdown"></span>秒后跳转，请自行确认链接安全性</div><div class="progress-bar"><div class="progress"id="progress"></div></div><div class="button-container"><button class="button cancel-button"onclick="closeWindow()">取消跳转</button><button class="button confirm-button"onclick="jump()">立即跳转</button></div></div></div></body></html>

然后

hexo cl;hexo g;hexo d

在butterfly主题中加入说说

Sat, 25 Oct 2025 08:22:04 GMT

前提

1、有自己的域名
2、如果使用 LeanCloud 国内版，需要对域名进行备案
3、如果使用 LeanCloud 国际版，由于国际版共享域名不再向中国大陆提供服务 ,leancloud 里的应用要绑定一个二级域名
4、以下内容示例使用的国际版 LeanCloud

注册和配置 LeanCloud

直接照搬 Artitalk.js 文档完成操作：使用文档 | Artitalk.js

1、前往 LeanCloud 国际版，注册账号。

butterfly 主题安装插件和配置使用

安装插件

butterfly 主题 Hexo 博客已经整合了 artitalk 功能，所以直接安装 hexo-butterfly-artitalk 插件即可：

npm install hexo-butterfly-artitalk

默认配置

相关的配置可参考 Artitalk.js 文档在 hexo 中新建 page 页：

hexo new page artitalk

在index.md中添加以下内容

 <!-- 引用 artitalk -->
 <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
 <!-- 存放说说的容器 -->
 <div id="artitalk_main"></div>
 <script>
 new Artitalk({
     serverURL: 'https://域名',// Your LeanCloud site
     appId: '', // Your LeanCloud appId
     appKey: '', // Your LeanCloud appKey
     color1: 'linear-gradient(45deg,rgba(109,208,242,0.75) 15%,rgba(245,154,190,0.75) 85%)',
     color2: 'linear-gradient(45deg,rgba(109,208,242,0.75) 15%,rgba(245,154,190,0.75) 85%)',
 })
 </script>

登录LeanCloud创建应用名称随意，选择开发版，然后创建，点击设置

绑定域名

打开 LeanCloud artitalk 应用左边菜单栏的设置 - 域名绑定，添加一个二级域名，如下图：

创建用户

点击左侧内建账户，用户管理，添加用户 tips：点击非必填，在img项添加你头像的链接

部署LeanCloud

点击结构化数据➡️_User表➡️添加行此为在博客页面登录artitalk所用的账号密码
修改权限为刚才添加的用户
创建Class➡️shuoshuo➡️修改访问权限为刚才创建的用户
创建Class➡️atComment➡️访问权限为所有用户
点击应用凭证，记下AppID和AppKey的值
设置➡️安全中心➡️Web安全域名，填入自己的博客域名

结尾

接下来hexo三连即可

hexo cl;hexo g;hexo d

附上样式预览：Artitalk样式

添加友链朋友圈「hexo-butterfly」

Tue, 21 Oct 2025 07:00:54 GMT

详情可见：

blue

本博客的是根据liushen柳清扬大佬的开源项目，修复了bug使用

复刻修改项目

首先复刻我的仓库,不要勾选仅复刻main

spider_settings:
  enable: true
  json_url: "https://你的博客域名/friend.json"
  article_count: 5
  merge_result:
    enable: true
    merge_json_url: "https://你为朋友圈设置的域名"

你可以先填，文件在下文会实现 2. 继续修改conf.yaml

rss_subscribe:
  enable: true
  github_username: willow-god
  github_repo: 朋友圈精简版
  your_blog_url: https://你的博客域名/
  email_template: "./push_templates/default.html"
  website_info:
    title: "你的名字/id"

点击左上角的main，更换为page 删除all.json和errors.json里的全部内容，等会抓取链接的时候会自动更新
创建friend.json文件先创建一个朋友圈页面，再在博客根目录创建link.js

创建朋友圈页面

hexo new page fc #fc你可以更换别的

并在朋友圈的index.md添加如下代码

<div id="friend-circle-lite-root"></div>

<script>

    if (typeof UserConfig === 'undefined') {

        var UserConfig = {

            // 填写你的fc Lite地址

            private_api_url: 'https://你为朋友圈准备的域名/',

            // 点击加载更多时，一次最多加载几篇文章，默认20

            page_turning_number: 20,

            // 头像加载失败时，默认头像地址

            error_img: 'https://i.p-i.vip/30/20240815-66bced9226a36.webp',

        }

    }

</script>

<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.css">

<script src="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.js"></script>

创建link.js

const YML = require('yamljs')
const fs = require('fs')

const blacklist = ["友站名称1", "友站名称2", "友站名称3"]; // 由于某种原因，不想订阅的列表

let friends = [],
    data_f = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));

data_f.forEach((entry, index) => {
    let lastIndex = 2;
    if (index < lastIndex) {
        const filteredLinkList = entry.link_list.filter(linkItem => !blacklist.includes(linkItem.name));
        friends = friends.concat(filteredLinkList);
    }
});

// 根据规定的格式构建 JSON 数据
const friendData = {
    friends: friends.map(item => {
        return [item.name, item.link, item.avatar];
    })
};

// 将 JSON 对象转换为字符串
const friendJSON = JSON.stringify(friendData, null, 2);

// 写入 friend.json 文件
fs.writeFileSync('./source/friend.json', friendJSON);

console.log('friend.json 文件已生成。');

然后依次执行

npm i yamljs --save
node link.js
hexo cl;hexo g;hexo d

这样友链数据就出来了。例：你的博客域名/friend.json

Cloudflare Pages部署进入cloudflare点击左侧的计算和AI，选择workers和pages，点击创建应用程序，选择pages，导入现有 Git 存储库，选择你要部署的项目生产分支一定要选page，创建完绑定域名就行
开始运行打开github朋友圈仓库，点击上方的action，再点击左侧的Friend circle lite

点击运行工作流程，等待几分钟就大功告成了

结尾

朋友圈会自动抓取配置了rss的博客，没有配置的博客不会显示朋友圈底部的订阅:32 活跃:19，意思是你有32个友链，只有19人配置了rss 这下你访问你朋友圈域名或者博客朋友圈的页面就会显示文章了

不蒜子out，拥抱Vercount

Sat, 18 Oct 2025 06:29:19 GMT

昨天下午发现网页加载时间被拖到1分钟了，就看看啥情况，原来是不蒜子的域名无了由于butterfly主题自带的就是不蒜子，我就去搜有没有平替，还真找到了 Vercount，他可以直接使用不蒜子的配置，直接替换链接就行

在butterfly中使用vercount

在themes\butterfly\layout\includes\additional-js.pug中，替换以下项

  if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
    script(async data-pjax src= theme.asset.busuanzi || 'https://events.vercount.one/js')

在themes\butterfly\layout\includes\head\preconnect.pug中替换

if !theme.asset.busuanzi && (theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv)
  link(rel="preconnect" href="https://vercount.one")

vercount比不蒜子快多了，只是访问数据需要从头再来最后将_config.butterfly.yml不蒜子的配置打开

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

hexo不蒜子统计的问题

Fri, 17 Oct 2025 13:33:50 GMT

今天发现博客页面底部的访客统计不蒜子失效了，就去查什么情况了。是因为不蒜子统计的域名过期了，之前也多次出现这种情况

在恢复之前，将不蒜子取消，等恢复吧，在主题配置文件中修改以下部分

busuanzi:
  site_uv: false
  site_pv: false
  page_pv: false

记录博客第一次回档

Fri, 17 Oct 2025 00:03:52 GMT

魔改有风险，上传需谨慎 因魔改代码导致加载时长从2秒加载涨到了十几秒，迫不得已回档到2025/10/15的版本魔改一定要多备份

hexo博客添加弹窗公告

Wed, 15 Oct 2025 11:46:55 GMT

新建/css/gg.css，在css中引入以下代码：（只推荐新建，不推荐粘贴到已有的CSS中）

.sweet-alert,.sweet-overlay{position:fixed;display:none}body.stop-scrolling{height:100%;overflow:hidden}.sweet-overlay{background-color:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";background-color:rgba(0,0,0,.4);left:0;right:0;top:0;bottom:0;z-index:10000}.sweet-alert{background-color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;width:478px;padding:17px;border-radius:5px;text-align:center;left:50%;top:50%;margin-left:-256px;margin-top:-200px;overflow:hidden;z-index:99999}@media all and (max-width:540px){.sweet-alert{width:auto;margin-left:0;margin-right:0;left:15px;right:15px}}.sweet-alert h2{color:#575757;font-size:30px;text-align:center;font-weight:600;text-transform:none;position:relative;margin:25px 0;padding:0;line-height:40px;display:block}.sweet-alert p{color:#797979;font-size:16px;font-weight:300;position:relative;text-align:inherit;float:none;margin:0;padding:0;line-height:normal}.sweet-alert fieldset{border:none;position:relative}.sweet-alert .sa-error-container{background-color:#f1f1f1;margin-left:-17px;margin-right:-17px;overflow:hidden;padding:0 10px;max-height:0;webkit-transition:padding .15s,max-height .15s;transition:padding .15s,max-height .15s}.sweet-alert .sa-error-container.show{padding:10px 0;max-height:100px;webkit-transition:padding .2s,max-height .2s;transition:padding .25s,max-height .25s}.sweet-alert .sa-error-container .icon{display:inline-block;width:24px;height:24px;border-radius:50%;background-color:#ea7d7d;color:#fff;line-height:24px;text-align:center;margin-right:3px}.sweet-alert .sa-error-container p{display:inline-block}.sweet-alert .sa-input-error{position:absolute;top:29px;right:26px;width:20px;height:20px;opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all .1s;transition:all .1s}.sweet-alert .sa-input-error::after,.sweet-alert .sa-input-error::before{content:"";width:20px;height:6px;background-color:#f06e57;border-radius:3px;position:absolute;top:50%;margin-top:-4px;left:50%;margin-left:-9px}.sweet-alert .sa-input-error::before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sweet-alert .sa-input-error::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.sweet-alert .sa-input-error.show{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.sweet-alert input{width:100%;box-sizing:border-box;border-radius:3px;border:1px solid #d7d7d7;height:43px;margin-top:10px;margin-bottom:17px;font-size:18px;box-shadow:inset 0 1px 1px rgba(0,0,0,.06);padding:0 12px;display:none;-webkit-transition:all .3s;transition:all .3s}.sweet-alert input:focus{outline:0;box-shadow:0 0 3px #c4e6f5;border:1px solid #b4dbed}.sweet-alert input:focus::-moz-placeholder{transition:opacity .3s 30ms ease;opacity:.5}.sweet-alert input:focus:-ms-input-placeholder{transition:opacity .3s 30ms ease;opacity:.5}.sweet-alert input:focus::-webkit-input-placeholder{transition:opacity .3s 30ms ease;opacity:.5}.sweet-alert input::-moz-placeholder{color:#bdbdbd}.sweet-alert input:-ms-input-placeholder{color:#bdbdbd}.sweet-alert input::-webkit-input-placeholder{color:#bdbdbd}.sweet-alert.show-input input{display:block}.sweet-alert .sa-confirm-button-container{display:inline-block;position:relative}.sweet-alert .la-ball-fall{position:absolute;left:50%;top:50%;margin-left:-27px;margin-top:4px;opacity:0;visibility:hidden}.sweet-alert button{background-color:#8CD4F5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}.sweet-alert button:focus{outline:0;box-shadow:0 0 2px rgba(128,179,235,.5),inset 0 0 0 1px rgba(0,0,0,.05)}.sweet-alert button:hover{background-color:#7ecff4}.sweet-alert button:active{background-color:#5dc2f1}.sweet-alert button.cancel{background-color:#C1C1C1}.sweet-alert button.cancel:hover{background-color:#b9b9b9}.sweet-alert button.cancel:active{background-color:#a8a8a8}.sweet-alert button.cancel:focus{box-shadow:rgba(197,205,211,.8) 0 0 2px,rgba(0,0,0,.0470588) 0 0 0 1px inset!important}.sweet-alert button[disabled]{opacity:.6;cursor:default}.sweet-alert button.confirm[disabled]{color:transparent}.sweet-alert button.confirm[disabled]~.la-ball-fall{opacity:1;visibility:visible;transition-delay:0s}.sweet-alert button::-moz-focus-inner{border:0}.sweet-alert[data-has-cancel-button=false] button{box-shadow:none!important}.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false]{padding-bottom:40px}.sweet-alert .sa-icon{width:80px;height:80px;border:4px solid gray;-webkit-border-radius:40px;border-radius:50%;margin:20px auto;padding:0;position:relative;box-sizing:content-box}.sweet-alert .sa-icon.sa-error{border-color:#F27474}.sweet-alert .sa-icon.sa-error .sa-x-mark{position:relative;display:block}.sweet-alert .sa-icon.sa-error .sa-line{position:absolute;height:5px;width:47px;background-color:#F27474;display:block;top:37px;border-radius:2px}.sweet-alert .sa-icon.sa-error .sa-line.sa-left{-webkit-transform:rotate(45deg);transform:rotate(45deg);left:17px}.sweet-alert .sa-icon.sa-error .sa-line.sa-right{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:16px}.sweet-alert .sa-icon.sa-warning{border-color:#F8BB86}.sweet-alert .sa-icon.sa-warning .sa-body{position:absolute;width:5px;height:47px;left:50%;top:10px;-webkit-border-radius:2px;border-radius:2px;margin-left:-2px;background-color:#F8BB86}.sweet-alert .sa-icon.sa-warning .sa-dot{position:absolute;width:7px;height:7px;-webkit-border-radius:50%;border-radius:50%;margin-left:-3px;left:50%;bottom:10px;background-color:#F8BB86}.sweet-alert .sa-icon.sa-info::after,.sweet-alert .sa-icon.sa-info::before{content:"";background-color:#C9DAE1;position:absolute}.sweet-alert .sa-icon.sa-info{border-color:#C9DAE1}.sweet-alert .sa-icon.sa-info::before{width:5px;height:29px;left:50%;bottom:17px;border-radius:2px;margin-left:-2px}.sweet-alert .sa-icon.sa-info::after{width:7px;height:7px;border-radius:50%;margin-left:-3px;top:19px}.sweet-alert .sa-icon.sa-success{border-color:#A5DC86}.sweet-alert .sa-icon.sa-success::after,.sweet-alert .sa-icon.sa-success::before{content:'';position:absolute;width:60px;height:120px;background:#fff}.sweet-alert .sa-icon.sa-success::before{-webkit-border-radius:120px 0 0 120px;border-radius:120px 0 0 120px;top:-7px;left:-33px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:60px 60px;transform-origin:60px 60px}.sweet-alert .sa-icon.sa-success::after{-webkit-border-radius:0 120px 120px 0;border-radius:0 120px 120px 0;top:-11px;left:30px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 60px;transform-origin:0 60px}.sweet-alert .sa-icon.sa-success .sa-placeholder{width:80px;height:80px;border:4px solid rgba(165,220,134,.2);-webkit-border-radius:40px;border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.sweet-alert .sa-icon.sa-success .sa-fix{width:5px;height:90px;background-color:#fff;position:absolute;left:28px;top:8px;z-index:1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sweet-alert .sa-icon.sa-success .sa-line{height:5px;background-color:#A5DC86;display:block;border-radius:2px;position:absolute;z-index:2}.sweet-alert .sa-icon.sa-success .sa-line.sa-tip{width:25px;left:14px;top:46px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.sweet-alert .sa-icon.sa-success .sa-line.sa-long{width:47px;right:8px;top:38px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sweet-alert .sa-icon.sa-custom{background-size:contain;border-radius:0;border:none;background-position:center center;background-repeat:no-repeat}@-webkit-keyframes showSweetAlert{0%{transform:scale(.7);-webkit-transform:scale(.7)}45%{transform:scale(1.05);-webkit-transform:scale(1.05)}80%{transform:scale(.95);-webkit-transform:scale(.95)}100%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes showSweetAlert{0%{transform:scale(.7);-webkit-transform:scale(.7)}45%{transform:scale(1.05);-webkit-transform:scale(1.05)}80%{transform:scale(.95);-webkit-transform:scale(.95)}100%{transform:scale(1);-webkit-transform:scale(1)}}@-webkit-keyframes hideSweetAlert{0%{transform:scale(1);-webkit-transform:scale(1)}100%{transform:scale(.5);-webkit-transform:scale(.5)}}@keyframes hideSweetAlert{0%{transform:scale(1);-webkit-transform:scale(1)}100%{transform:scale(.5);-webkit-transform:scale(.5)}}@-webkit-keyframes slideFromTop{0%{top:0}100%{top:50%}}@keyframes slideFromTop{0%{top:0}100%{top:50%}}@-webkit-keyframes slideToTop{0%{top:50%}100%{top:0}}@keyframes slideToTop{0%{top:50%}100%{top:0}}@-webkit-keyframes slideFromBottom{0%{top:70%}100%{top:50%}}@keyframes slideFromBottom{0%{top:70%}100%{top:50%}}@-webkit-keyframes slideToBottom{0%{top:50%}100%{top:70%}}@keyframes slideToBottom{0%{top:50%}100%{top:70%}}.showSweetAlert[data-animation=pop]{-webkit-animation:showSweetAlert .3s;animation:showSweetAlert .3s}.showSweetAlert[data-animation=none]{-webkit-animation:none;animation:none}.showSweetAlert[data-animation=slide-from-top]{-webkit-animation:slideFromTop .3s;animation:slideFromTop .3s}.showSweetAlert[data-animation=slide-from-bottom]{-webkit-animation:slideFromBottom .3s;animation:slideFromBottom .3s}.hideSweetAlert[data-animation=pop]{-webkit-animation:hideSweetAlert .2s;animation:hideSweetAlert .2s}.hideSweetAlert[data-animation=none]{-webkit-animation:none;animation:none}.hideSweetAlert[data-animation=slide-from-top]{-webkit-animation:slideToTop .4s;animation:slideToTop .4s}.hideSweetAlert[data-animation=slide-from-bottom]{-webkit-animation:slideToBottom .3s;animation:slideToBottom .3s}@-webkit-keyframes animateSuccessTip{0%,54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animateSuccessTip{0%,54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@-webkit-keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@-webkit-keyframes rotatePlaceholder{0%,5%{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}100%,12%{transform:rotate(-405deg);-webkit-transform:rotate(-405deg)}}@keyframes rotatePlaceholder{0%,5%{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}100%,12%{transform:rotate(-405deg);-webkit-transform:rotate(-405deg)}}.animateSuccessTip{-webkit-animation:animateSuccessTip .75s;animation:animateSuccessTip .75s}.animateSuccessLong{-webkit-animation:animateSuccessLong .75s;animation:animateSuccessLong .75s}.sa-icon.sa-success.animate::after{-webkit-animation:rotatePlaceholder 4.25s ease-in;animation:rotatePlaceholder 4.25s ease-in}@-webkit-keyframes animateErrorIcon{0%{transform:rotateX(100deg);-webkit-transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);-webkit-transform:rotateX(0);opacity:1}}@keyframes animateErrorIcon{0%{transform:rotateX(100deg);-webkit-transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);-webkit-transform:rotateX(0);opacity:1}}.animateErrorIcon{-webkit-animation:animateErrorIcon .5s;animation:animateErrorIcon .5s}@-webkit-keyframes animateXMark{0%,50%{transform:scale(.4);-webkit-transform:scale(.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);-webkit-transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);-webkit-transform:scale(1);margin-top:0;opacity:1}}@keyframes animateXMark{0%,50%{transform:scale(.4);-webkit-transform:scale(.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);-webkit-transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);-webkit-transform:scale(1);margin-top:0;opacity:1}}.animateXMark{-webkit-animation:animateXMark .5s;animation:animateXMark .5s}@-webkit-keyframes pulseWarning{0%{border-color:#F8D486}100%{border-color:#F8BB86}}@keyframes pulseWarning{0%{border-color:#F8D486}100%{border-color:#F8BB86}}.pulseWarning{-webkit-animation:pulseWarning .75s infinite alternate;animation:pulseWarning .75s infinite alternate}@-webkit-keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}@keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}.pulseWarningIns{-webkit-animation:pulseWarningIns .75s infinite alternate;animation:pulseWarningIns .75s infinite alternate}@-webkit-keyframes rotate-loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes rotate-loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sweet-alert .sa-icon.sa-error .sa-line.sa-left{-ms-transform:rotate(45deg)\9}.sweet-alert .sa-icon.sa-error .sa-line.sa-right{-ms-transform:rotate(-45deg)\9}.sweet-alert .sa-icon.sa-success{border-color:transparent\9}.sweet-alert .sa-icon.sa-success .sa-line.sa-tip{-ms-transform:rotate(45deg)\9}.sweet-alert .sa-icon.sa-success .sa-line.sa-long{-ms-transform:rotate(-45deg)\9}/*!

 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)

 * Copyright 2015 Daniel Cardoso <@DanielCardoso>

 * Licensed under MIT

 */.la-ball-fall,.la-ball-fall>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-fall{display:block;font-size:0;color:#fff;width:54px;height:18px}.la-ball-fall.la-dark{color:#333}.la-ball-fall>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor;width:10px;height:10px;margin:4px;border-radius:100%;opacity:0;-webkit-animation:ball-fall 1s ease-in-out infinite;-moz-animation:ball-fall 1s ease-in-out infinite;-o-animation:ball-fall 1s ease-in-out infinite;animation:ball-fall 1s ease-in-out infinite}.la-ball-fall>div:nth-child(1){-webkit-animation-delay:-.2s;-moz-animation-delay:-.2s;-o-animation-delay:-.2s;animation-delay:-.2s}.la-ball-fall>div:nth-child(2){-webkit-animation-delay:-.1s;-moz-animation-delay:-.1s;-o-animation-delay:-.1s;animation-delay:-.1s}.la-ball-fall>div:nth-child(3){-webkit-animation-delay:0s;-moz-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}.la-ball-fall.la-sm{width:26px;height:8px}.la-ball-fall.la-sm>div{width:4px;height:4px;margin:2px}.la-ball-fall.la-2x{width:108px;height:36px}.la-ball-fall.la-2x>div{width:20px;height:20px;margin:8px}.la-ball-fall.la-3x{width:162px;height:54px}.la-ball-fall.la-3x>div{width:30px;height:30px;margin:12px}@-webkit-keyframes ball-fall{0%{opacity:0;-webkit-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(145%);transform:translateY(145%)}}@-moz-keyframes ball-fall{0%{opacity:0;-moz-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-moz-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(145%);transform:translateY(145%)}}@-o-keyframes ball-fall{0%{opacity:0;-o-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-o-transform:translateY(145%);transform:translateY(145%)}}@keyframes ball-fall{0%{opacity:0;-webkit-transform:translateY(-145%);-moz-transform:translateY(-145%);-o-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(145%);-moz-transform:translateY(145%);-o-transform:translateY(145%);transform:translateY(145%)}}

新建/js/gg.js并加入以下代码：

!function(w,C,S){"use strict";!function o(a,r,s){function l(n,e){if(!r[n]){if(!a[n]){var t="function"==typeof require&&require;if(!e&&t)return t(n,!0);if(i)return i(n,!0);e=new Error("Cannot find module '"+n+"'");throw e.code="MODULE_NOT_FOUND",e}t=r[n]={exports:{}};a[n][0].call(t.exports,function(e){var t=a[n][1][e];return l(t||e)},t,t.exports,o,a,r,s)}return r[n].exports}for(var i="function"==typeof require&&require,e=0;e<s.length;e++)l(s[e]);return l}({1:[function(e,t,n){function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var c,d,a,f,p=e("./modules/handle-dom"),m=e("./modules/utils"),y=e("./modules/handle-swal-dom"),v=e("./modules/handle-click"),h=o(e("./modules/handle-key")),b=o(e("./modules/default-params")),g=o(e("./modules/set-params"));n.default=a=f=function(){var t=arguments[0];function e(e){return(t[e]===S?b.default:t)[e]}if(p.addClass(C.body,"stop-scrolling"),y.resetInput(),t===S)return m.logStr("SweetAlert expects at least 1 attribute!"),!1;var n=m.extend({},b.default);switch(typeof t){case"string":n.title=t,n.text=arguments[1]||"",n.type=arguments[2]||"";break;case"object":if(t.title===S)return m.logStr('Missing "title" argument!'),!1;for(var o in n.title=t.title,b.default)n[o]=e(o);n.confirmButtonText=n.showCancelButton?"Confirm":b.default.confirmButtonText,n.confirmButtonText=e("confirmButtonText"),n.doneFunction=arguments[1]||null;break;default:return m.logStr('Unexpected type of argument! Expected "string" or "object", got '+typeof t),!1}g.default(n),y.fixVerticalPosition(),y.openModal(arguments[1]);for(var a=y.getModal(),r=a.querySelectorAll("button"),s=["onclick","onmouseover","onmouseout","onmousedown","onmouseup","onfocus"],l=function(e){return v.handleButton(e,n,a)},i=0;i<r.length;i++)for(var u=0;u<s.length;u++)r[i][s[u]]=l;y.getOverlay().onclick=l,c=w.onkeydown;w.onkeydown=function(e){return h.default(e,n,a)},w.onfocus=function(){setTimeout(function(){d!==S&&(d.focus(),d=S)},0)},f.enableButtons()},a.setDefaults=f.setDefaults=function(e){if(!e)throw new Error("userParams is required");if("object"!=typeof e)throw new Error("userParams has to be a object");m.extend(b.default,e)},a.close=f.close=function(){var t=y.getModal(),e=(p.fadeOut(y.getOverlay(),5),p.fadeOut(t,5),p.removeClass(t,"showSweetAlert"),p.addClass(t,"hideSweetAlert"),p.removeClass(t,"visible"),t.querySelector(".sa-icon.sa-success")),e=(p.removeClass(e,"animate"),p.removeClass(e.querySelector(".sa-tip"),"animateSuccessTip"),p.removeClass(e.querySelector(".sa-long"),"animateSuccessLong"),t.querySelector(".sa-icon.sa-error")),e=(p.removeClass(e,"animateErrorIcon"),p.removeClass(e.querySelector(".sa-x-mark"),"animateXMark"),t.querySelector(".sa-icon.sa-warning"));return p.removeClass(e,"pulseWarning"),p.removeClass(e.querySelector(".sa-body"),"pulseWarningIns"),p.removeClass(e.querySelector(".sa-dot"),"pulseWarningIns"),setTimeout(function(){var e=t.getAttribute("data-custom-class");p.removeClass(t,e)},300),p.removeClass(C.body,"stop-scrolling"),w.onkeydown=c,w.previousActiveElement&&w.previousActiveElement.focus(),d=S,clearTimeout(t.timeout),!0},a.showInputError=f.showInputError=function(e){var t=y.getModal(),n=t.querySelector(".sa-input-error"),n=(p.addClass(n,"show"),t.querySelector(".sa-error-container"));p.addClass(n,"show"),n.querySelector("p").innerHTML=e,setTimeout(function(){a.enableButtons()},1),t.querySelector("input").focus()},a.resetInputError=f.resetInputError=function(e){if(e&&13===e.keyCode)return!1;var e=y.getModal(),t=e.querySelector(".sa-input-error"),t=(p.removeClass(t,"show"),e.querySelector(".sa-error-container"));p.removeClass(t,"show")},a.disableButtons=f.disableButtons=function(e){var t=y.getModal(),n=t.querySelector("button.confirm"),t=t.querySelector("button.cancel");n.disabled=!0,t.disabled=!0},a.enableButtons=f.enableButtons=function(e){var t=y.getModal(),n=t.querySelector("button.confirm"),t=t.querySelector("button.cancel");n.disabled=!1,t.disabled=!1},void 0!==w?w.sweetAlert=w.swal=a:m.logStr("SweetAlert is a frontend module!"),t.exports=n.default},{"./modules/default-params":2,"./modules/handle-click":3,"./modules/handle-dom":4,"./modules/handle-key":5,"./modules/handle-swal-dom":6,"./modules/set-params":8,"./modules/utils":9}],2:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});n.default={title:"",text:"",type:null,allowOutsideClick:!1,showConfirmButton:!0,showCancelButton:!1,closeOnConfirm:!0,closeOnCancel:!0,confirmButtonText:"OK",confirmButtonColor:"#8CD4F5",cancelButtonText:"Cancel",imageUrl:null,imageSize:null,timer:null,customClass:"",html:!1,animation:!0,allowEscapeKey:!0,inputType:"text",inputPlaceholder:"",inputValue:"",showLoaderOnConfirm:!1},t.exports=n.default},{}],3:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});function m(e,t){var n=!0;h.hasClass(e,"show-input")&&(n=(n=e.querySelector("input").value)||""),t.doneFunction(n),t.closeOnConfirm&&sweetAlert.close(),t.showLoaderOnConfirm&&sweetAlert.disableButtons()}function y(e,t){var n=String(t.doneFunction).replace(/\s/g,"");"function("===n.substring(0,9)&&")"!==n.substring(9,10)&&t.doneFunction(!1),t.closeOnCancel&&sweetAlert.close()}var v=e("./utils"),h=(e("./handle-swal-dom"),e("./handle-dom"));n.default={handleButton:function(e,t,n){var o,a,r,e=e||w.event,s=e.target||e.srcElement,l=-1!==s.className.indexOf("confirm"),i=-1!==s.className.indexOf("sweet-overlay"),u=h.hasClass(n,"visible"),c=t.doneFunction&&"true"===n.getAttribute("data-has-done-function");function d(e){l&&t.confirmButtonColor&&(s.style.backgroundColor=e)}switch(l&&t.confirmButtonColor&&(o=t.confirmButtonColor,a=v.colorLuminance(o,-.04),r=v.colorLuminance(o,-.14)),e.type){case"mouseover":d(a);break;case"mouseout":d(o);break;case"mousedown":d(r);break;case"mouseup":d(a);break;case"focus":var f=n.querySelector("button.confirm"),p=n.querySelector("button.cancel");l?p.style.boxShadow="none":f.style.boxShadow="none";break;case"click":p=n===s,f=h.isDescendant(n,s);if(!p&&!f&&u&&!t.allowOutsideClick)break;l&&c&&u?m(n,t):c&&u||i?y(0,t):h.isDescendant(n,s)&&"BUTTON"===s.tagName&&sweetAlert.close()}},handleConfirm:m,handleCancel:y},t.exports=n.default},{"./handle-dom":4,"./handle-swal-dom":6,"./utils":9}],4:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});function o(e,t){return new RegExp(" "+t+" ").test(" "+e.className+" ")}function a(e){e.style.opacity="",e.style.display="block"}function r(e){e.style.opacity="",e.style.display="none"}n.hasClass=o,n.addClass=function(e,t){o(e,t)||(e.className+=" "+t)},n.removeClass=function(e,t){var n=" "+e.className.replace(/[\t\r\n]/g," ")+" ";if(o(e,t)){for(;0<=n.indexOf(" "+t+" ");)n=n.replace(" "+t+" "," ");e.className=n.replace(/^\s+|\s+$/g,"")}},n.escapeHtml=function(e){var t=C.createElement("div");return t.appendChild(C.createTextNode(e)),t.innerHTML},n._show=a,n.show=function(e){if(e&&!e.length)return a(e);for(var t=0;t<e.length;++t)a(e[t])},n._hide=r,n.hide=function(e){if(e&&!e.length)return r(e);for(var t=0;t<e.length;++t)r(e[t])},n.isDescendant=function(e,t){for(var n=t.parentNode;null!==n;){if(n===e)return!0;n=n.parentNode}return!1},n.getTopMargin=function(e){e.style.left="-9999px",e.style.display="block";var t=e.clientHeight,n="undefined"!=typeof getComputedStyle?parseInt(getComputedStyle(e).getPropertyValue("padding-top"),10):parseInt(e.currentStyle.padding);return e.style.left="",e.style.display="none","-"+parseInt((t+n)/2)+"px"},n.fadeIn=function(e,t){var n,o,a;function r(){return a.apply(this,arguments)}+e.style.opacity<1&&(t=t||16,e.style.opacity=0,e.style.display="block",n=+new Date,a=function(){e.style.opacity=+e.style.opacity+(new Date-n)/100,n=+new Date,+e.style.opacity<1&&setTimeout(o,t)},r.toString=function(){return a.toString()},(o=r)()),e.style.display="block"},n.fadeOut=function(e,t){t=t||16,e.style.opacity=1;var n,o=+new Date,a=(n=function(){e.style.opacity=+e.style.opacity-(new Date-o)/100,o=+new Date,0<+e.style.opacity?setTimeout(a,t):e.style.display="none"},r.toString=function(){return n.toString()},r);function r(){return n.apply(this,arguments)}a()},n.fireClick=function(e){var t;"function"==typeof MouseEvent?(t=new MouseEvent("click",{view:w,bubbles:!1,cancelable:!0}),e.dispatchEvent(t)):C.createEvent?((t=C.createEvent("MouseEvents")).initEvent("click",!1,!1),e.dispatchEvent(t)):C.createEventObject?e.fireEvent("onclick"):"function"==typeof e.onclick&&e.onclick()},n.stopEventPropagation=function(e){"function"==typeof e.stopPropagation?(e.stopPropagation(),e.preventDefault()):w.event&&w.event.hasOwnProperty("cancelBubble")&&(w.event.cancelBubble=!0)}},{}],5:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});var c=e("./handle-dom"),d=e("./handle-swal-dom");n.default=function(e,t,n){var e=e||w.event,o=e.keyCode||e.which,a=n.querySelector("button.confirm"),r=n.querySelector("button.cancel"),s=n.querySelectorAll("button[tabindex]");if(-1!==[9,13,32,27].indexOf(o)){for(var l=e.target||e.srcElement,i=-1,u=0;u<s.length;u++)if(l===s[u]){i=u;break}9===o?(l=-1===i?a:i===s.length-1?s[0]:s[i+1],c.stopEventPropagation(e),l.focus(),t.confirmButtonColor&&d.setFocusStyle(l,t.confirmButtonColor)):13===o?"INPUT"===l.tagName&&(l=a).focus():27===o&&!0===t.allowEscapeKey&&c.fireClick(l=r,e)}},t.exports=n.default},{"./handle-dom":4,"./handle-swal-dom":6}],6:[function(e,t,n){function o(e){return e&&e.__esModule?e:{default:e}}function a(){var e=C.createElement("div");for(e.innerHTML=u.default;e.firstChild;)C.body.appendChild(e.firstChild)}Object.defineProperty(n,"__esModule",{value:!0});var r,s=e("./utils"),l=e("./handle-dom"),i=o(e("./default-params")),u=o(e("./injected-html")),c=(r=function(){var e=C.querySelector(".sweet-alert");return e||(a(),e=c()),e},d.toString=function(){return r.toString()},d);function d(){return r.apply(this,arguments)}function f(){var e=c();if(e)return e.querySelector("input")}function p(){return C.querySelector(".sweet-overlay")}function m(e){if(e&&13===e.keyCode)return!1;var t=(e=c()).querySelector(".sa-input-error"),t=(l.removeClass(t,"show"),e.querySelector(".sa-error-container"));l.removeClass(t,"show")}n.sweetAlertInitialize=a,n.getModal=c,n.getOverlay=p,n.getInput=f,n.setFocusStyle=function(e,t){t=s.hexToRgb(t);e.style.boxShadow="0 0 2px rgba("+t+", 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)"},n.openModal=function(e){var t=c();l.fadeIn(p(),10),l.show(t),l.addClass(t,"showSweetAlert"),l.removeClass(t,"hideSweetAlert"),w.previousActiveElement=C.activeElement;t.querySelector("button.confirm").focus(),setTimeout(function(){l.addClass(t,"visible")},500);var n,o=t.getAttribute("data-timer");"null"!==o&&""!==o&&(n=e,t.timeout=setTimeout(function(){(n?"true"===t.getAttribute("data-has-done-function"):null)?n(null):sweetAlert.close()},o))},n.resetInput=function(){var e=c(),t=f();l.removeClass(e,"show-input"),t.value=i.default.inputValue,t.setAttribute("type",i.default.inputType),t.setAttribute("placeholder",i.default.inputPlaceholder),m()},n.resetInputError=m,n.fixVerticalPosition=function(){c().style.marginTop=l.getTopMargin(c())}},{"./default-params":2,"./handle-dom":4,"./injected-html":7,"./utils":9}],7:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});n.default='<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert"><div class="sa-icon sa-error">\n      <span class="sa-x-mark">\n        <span class="sa-line sa-left"></span>\n        <span class="sa-line sa-right"></span>\n      </span>\n    </div><div class="sa-icon sa-warning">\n      <span class="sa-body"></span>\n      <span class="sa-dot"></span>\n    </div><div class="sa-icon sa-info"></div><div class="sa-icon sa-success">\n      <span class="sa-line sa-tip"></span>\n      <span class="sa-line sa-long"></span>\n\n      <div class="sa-placeholder"></div>\n      <div class="sa-fix"></div>\n    </div><div class="sa-icon sa-custom"></div><h2>Title</h2>\n    <p>Text</p>\n    <fieldset>\n      <input type="text" tabIndex="3" />\n      <div class="sa-input-error"></div>\n    </fieldset><div class="sa-error-container">\n      <div class="icon">!</div>\n      <p>Not valid!</p>\n    </div><div class="sa-button-container">\n      <button class="cancel" tabIndex="2">Cancel</button>\n      <div class="sa-confirm-button-container">\n        <button class="confirm" tabIndex="1">OK</button><div class="la-ball-fall">\n          <div></div>\n          <div></div>\n          <div></div>\n        </div>\n      </div>\n    </div></div>',t.exports=n.default},{}],8:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});var u=e("./utils"),c=e("./handle-swal-dom"),d=e("./handle-dom"),f=["error","warning","info","success","input","prompt"];n.default=function(a){var e,t,r=c.getModal(),n=r.querySelector("h2"),o=r.querySelector("p"),s=r.querySelector("button.cancel"),l=r.querySelector("button.confirm");if(n.innerHTML=a.html?a.title:d.escapeHtml(a.title).split("\n").join("<br>"),o.innerHTML=a.html?a.text:d.escapeHtml(a.text||"").split("\n").join("<br>"),a.text&&d.show(o),a.customClass?(d.addClass(r,a.customClass),r.setAttribute("data-custom-class",a.customClass)):(n=r.getAttribute("data-custom-class"),d.removeClass(r,n),r.setAttribute("data-custom-class","")),d.hide(r.querySelectorAll(".sa-icon")),a.type&&!u.isIE8()){var o=function(){for(var e=!1,t=0;t<f.length;t++)if(a.type===f[t]){e=!0;break}if(!e)return logStr("Unknown alert type: "+a.type),{v:!1};var n=S,o=(-1!==["success","error","warning","info"].indexOf(a.type)&&(n=r.querySelector(".sa-icon.sa-"+a.type),d.show(n)),c.getInput());switch(a.type){case"success":d.addClass(n,"animate"),d.addClass(n.querySelector(".sa-tip"),"animateSuccessTip"),d.addClass(n.querySelector(".sa-long"),"animateSuccessLong");break;case"error":d.addClass(n,"animateErrorIcon"),d.addClass(n.querySelector(".sa-x-mark"),"animateXMark");break;case"warning":d.addClass(n,"pulseWarning"),d.addClass(n.querySelector(".sa-body"),"pulseWarningIns"),d.addClass(n.querySelector(".sa-dot"),"pulseWarningIns");break;case"input":case"prompt":o.setAttribute("type",a.inputType),o.value=a.inputValue,o.setAttribute("placeholder",a.inputPlaceholder),d.addClass(r,"show-input"),setTimeout(function(){o.focus(),o.addEventListener("keyup",swal.resetInputError)},400)}}();if("object"==typeof o)return o.v}a.imageUrl&&((n=r.querySelector(".sa-icon.sa-custom")).style.backgroundImage="url("+a.imageUrl+")",d.show(n),e=o=80,a.imageSize&&(i=(t=a.imageSize.toString().split("x"))[0],t=t[1],i&&t?(o=i,e=t):logStr("Parameter imageSize expects value with format WIDTHxHEIGHT, got "+a.imageSize)),n.setAttribute("style",n.getAttribute("style")+"width:"+o+"px; height:"+e+"px")),r.setAttribute("data-has-cancel-button",a.showCancelButton),a.showCancelButton?s.style.display="inline-block":d.hide(s),r.setAttribute("data-has-confirm-button",a.showConfirmButton),a.showConfirmButton?l.style.display="inline-block":d.hide(l),a.cancelButtonText&&(s.innerHTML=d.escapeHtml(a.cancelButtonText)),a.confirmButtonText&&(l.innerHTML=d.escapeHtml(a.confirmButtonText)),a.confirmButtonColor&&(l.style.backgroundColor=a.confirmButtonColor,l.style.borderLeftColor=a.confirmLoadingButtonColor,l.style.borderRightColor=a.confirmLoadingButtonColor,c.setFocusStyle(l,a.confirmButtonColor)),r.setAttribute("data-allow-outside-click",a.allowOutsideClick);var i=!!a.doneFunction;r.setAttribute("data-has-done-function",i),a.animation?"string"==typeof a.animation?r.setAttribute("data-animation",a.animation):r.setAttribute("data-animation","pop"):r.setAttribute("data-animation","none"),r.setAttribute("data-timer",a.timer)},t.exports=n.default},{"./handle-dom":4,"./handle-swal-dom":6,"./utils":9}],9:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});n.extend=function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},n.hexToRgb=function(e){e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return e?parseInt(e[1],16)+", "+parseInt(e[2],16)+", "+parseInt(e[3],16):null},n.isIE8=function(){return w.attachEvent&&!w.addEventListener},n.logStr=function(e){w.console&&w.console.log("SweetAlert: "+e)},n.colorLuminance=function(e,t){(e=String(e).replace(/[^0-9a-f]/gi,"")).length<6&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),t=t||0;for(var n,o="#",a=0;a<3;a++)n=parseInt(e.substr(2*a,2),16),o+=("00"+(n=Math.round(Math.min(Math.max(0,n+n*t),255)).toString(16))).substr(n.length);return o}},{}]},{},[1]),"function"==typeof define&&define.amd?define(function(){return sweetAlert}):"undefined"!=typeof module&&module.exports&&(module.exports=sweetAlert)}(window,document);

这样模板就完成了，接下来在已有的js中添加以下代码来让公告显示： 我这里提供两个版本，手动关闭和倒计时关闭，你也可以融合以下

// 公告（必须手动关闭版本）

function welcome(){

    let welcome_text = '欢迎光顾mccsjs的小窝~'

    if(document.referrer!==''){

        let referrer=document.referrer.split("/")[2];

        welcome_text="欢迎来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名

    }

    swal({

        title: " 欢迎！",

        text: welcome_text+'\n欢迎',//欢迎文本，可自行修改

        imageUrl: "/img/head.jpg",//图片，自行修改位置

        showConfirmButton: true, // 显示确认按钮

        confirmButtonText: "OK", // 按钮文字设为OK

        closeOnConfirm: true // 点击OK后关闭

    });

}

$(document).ready(()=>{

    welcome()

})

倒计时3秒关闭版本：

// 公告
function welcome(){
    let welcome_text = '欢迎光顾mccsjs的小窝~'
    if(document.referrer!==''){
        let referrer=document.referrer.split("/")[2];
        welcome_text="欢迎来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名
    }
    swal({
        title: " 欢迎！",
        text: welcome_text+'\n欢迎',//欢迎文本，可自行修改
        imageUrl: "/img/head.jpg",//图片，自行修改位置
        timer: 3000,//弹出时间，延长到5秒以便用户阅读
    });
}
$(document).ready(()=>{//若未引用JQuery，请引用
    welcome()
})

融合版本

// 公告
function welcome(){
    let welcome_text = '欢迎光顾mccsjs的小窝~'
    if(document.referrer!==''){
        let referrer=document.referrer.split("/")[2];
        welcome_text="欢迎来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名
    }
    swal({
        title: " 欢迎！",
        text: welcome_text+'\n近期将更换域名至hexo.seln.cn',//欢迎文本，可自行修改
        imageUrl: "/img/head.jpg",//图片，自行修改位置
        timer: 5000,//弹出时间，延长到5秒以便用户阅读
        showConfirmButton: true, // 显示确认按钮
        confirmButtonText: "OK", // 按钮文字设为OK
        closeOnConfirm: true // 点击OK后关闭
    });
}
$(document).ready(()=>{//若未引用JQuery，请引用
    welcome()
})

结尾

注意，三者只能存其一

接下来三连试试效果

hexo c;hexo g;hexo s

引入阿里iconfont自定义图标

Mon, 13 Oct 2025 08:40:16 GMT

新建图标项目

访问阿里巴巴矢量图标库,注册登录。
搜索自己想要的图标，然后选择添加入库，加到购物车。
选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，没有项目就新建一个。
可以通过上方资源管理->我的项目，找到之前添加的图标项目。(现在的iconfont可以在图标库的项目设置里直接打开彩色设置，然后采用fontclass的引用方式即可使用多彩图标。但是单一项目彩色图标上限是40个图标，酌情采用。)

引入图标

复制你的font class代码和symbol代码并引入到主题文件

inject:  
 head:  
   - <link rel="stylesheet" href="这里填写font class项" media="defer" onload="this.media='all'">  
 bottom:   
   - <script async src="这里填写sybol项"></script>

可以在自定义CSS中添加如下样式来控制图标默认大小和颜色等属性（若已经在项目设置中勾选了彩色选项，则无需再定义图标颜色）

.iconfont {  
  font-family: "iconfont" !important;  
  /* 这里可以自定义图标大小 */  
  font-size: 3em;  
  font-style: normal;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
}

菜单栏多色动态图标

请确保您已经完成了前置教程，并实现了在文章中使用symbol写法来引入iconfont图标

替换themes\butterfly\layout\includes\header\menu_item.pug为以下代码，本方案默认使用观感最佳的悬停父元素触发子元素动画效果，默认动画为faa-tada。注意：可以把之前的代码注释掉，再在后面加上如下代码，以便于回滚

if theme.menu

  .menus_items

    each value, label in theme.menu

      if typeof value !== 'object'

        .menus_item

          - const valueArray = value.split('||')

          a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))

            if valueArray[1]

              i.fa-fw(class=trim(valueArray[1]))

              - var icon_value = trim(value.split('||')[1])

              - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'

              if icon_value.substring(0,2)=="fa"      

                i.fa-fw(class=icon_value + ' ' + anima_value)

              else if icon_value.substring(0,4)=="icon"          

                svg.icon(aria-hidden="true" class=anima_value)

                  use(xlink:href=`#`+ icon_value)

            span=' '+label

      else

        .menus_item

          - const labelArray = label.split('||')

          - const hideClass = labelArray[3] && trim(labelArray[3]) === 'hide' ? 'hide' : ''

          a.site-page.group.faa-parent.animated-hover(class=`${hideClass}` href='javascript:void(0);')

            if labelArray[1]

              - var icon_label = trim(label.split('||')[1])

              - var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'

              if icon_label.substring(0,2)=="fa"      

                i.fa-fw(class=icon_label + ' ' + anima_label)

              else if icon_label.substring(0,4)=="icon"    

                svg.icon(aria-hidden="true" class=anima_label)

                  use(xlink:href=`#`+ icon_label)

            span=' '+ trim(labelArray[0])

            i.fas.fa-chevron-down

          ul.menus_item_child

            each val,lab in value

              - const valArray = val.split('||')

              li

                a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split('||')[0])))

                  if valArray[1]

                    - var icon_val = trim(val.split('||')[1])

                    - var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'

                    if icon_val.substring(0,2)=="fa"      

                      i.fa-fw(class=icon_val + ' ' + anima_val)

                    else if icon_val.substring(0,4)=="icon"

                      svg.icon(aria-hidden="true" class=anima_val)

                        use(xlink:href=`#`+ icon_val)                    

                  span=' '+ lab

以下是填写示例，在_config.butterfly.yml中修改。icon-xxx字样的为iconfont的symbol引入方案的id值，可以在你的iconfont图标库内查询，其中hide属性也是可以用的。

menu:  
首页: / || icon-home || faa-tada  
文章 || icon--article || faa-tada || hide:  
归档: /archives/ || icon-guidang1 || faa-tada  
标签: /tags/ || icon-sekuaibiaoqian || faa-tada  
分类: /categories/ || icon-fenlei || faa-tada

这里的动态图标是svg.icon的标签，因此上面调节.iconfont的css并不适用，需要在custom.css里加上一些样式来限制图标的大小和颜色等，具体大小自行调节。

svg.icon {  
  width: 1.28em;  
  height: 1.28em;  
  vertical-align: -0.15em;  
  fill: currentColor;  
  overflow: hidden;  
}

修改完在手机上是默认展开二级栏的，可以在后面➕hide:收起，例：

  文章|| icon-book || faa-tada || hide:
    归档: /archives/ || icon-archive || faa-tada
    标签: /tags/ || icon-tag || faa-tada
    分类: /categories/ || icon-fenlei || faa-tada

重启项目即可看到效果：

hexo cl;hexo g;hexo s

友链一行显示多个

Sun, 12 Oct 2025 09:35:33 GMT

请先一步完成友链样式魔改

volantis样式在自定义css中添加以下代码

/* 友链一行显示更多 */
.site-card {
  width: calc(100% / 5 - 16px) !important;
  border-radius: 18px !important;
}
.site-card .img {
  height: 165px !important;
  border-radius: 18px !important;
}
/* 适应宽度不同的设备 */
@media screen and (max-width: 1200px) {
  .site-card {
    width: calc(100% / 4 - 16px) !important;
  }
}
@media screen and (max-width: 900px) {
  .site-card {
    width: calc(100% / 3 - 16px) !important;
  }
}
@media screen and (max-width: 600px) {
  .site-card {
    width: calc(100% / 2 - 16px) !important;
  }
}

其中， width: calc(100% / 5 - 16px) !important;的5可以更改成更多，宽度按自己喜欢的样式进行修改 2. 博客宽屏适配在custom.css中加入以下样式：

/* 全局宽度 */  
.layout {  
  max-width: 1400px;  
}  
  
/* 侧边卡片栏宽度 */  
.aside-content {  
  max-width: 318px;  
  min-width: 300px;  
}  
  
/* 平板尺寸自适应(不启用侧边栏宽度限制) */  
@media screen and (max-width: 900px) {  
  .aside-content {  
    max-width: none !important;  
    padding: 0 5px 0 5px;  
  }  
}

因为以上代码有重复，也可以复制下面的整合版：

/* 友链卡片布局优化 */
.site-card {
  width: calc(100% / 5 - 16px) !important;
  border-radius: 18px !important;
}

.site-card .img {
  height: 165px !important;
  border-radius: 18px !important;
}

/* 响应式布局调整 */
@media screen and (max-width: 1200px) {
  .site-card {
    width: calc(100% / 4 - 16px) !important;
  }
}

@media screen and (max-width: 900px) {
  .site-card {
    width: calc(100% / 3 - 16px) !important;
  }
  
  /* 平板尺寸侧边栏调整 */
  .aside-content {
    max-width: none !important;
    padding: 0 5px;
  }
}

@media screen and (max-width: 600px) {
  .site-card {
    width: calc(100% / 2 - 16px) !important;
  }
}

/* 全局布局设置 */
.layout {
  max-width: 1400px;
}

/* 侧边栏默认样式 */
.aside-content {
  max-width: 318px;
  min-width: 300px;
}

有的小伙伴想友链页面不显示侧边栏，可以在主题文件中aside部分增加一项

aside:

  enable: true

  hide: false

  # Show the button to hide the aside in bottom right button

  button: true

  mobile: true

  # Position: left / right

  position: right

  display:

    archive: true

    tag: true

    category: true

    flink: false # 友链页隐藏侧栏

增加flink: false 这样友链页面就不会显示侧边栏了

hexo博客添加顶部加载条

Sat, 11 Oct 2025 12:03:16 GMT

魔改前请备份，要不然出错了又不知道怎么改就完啦！！！

## 顶部细线加载条详见：[给Butterfly加上顶部加载条](https://www.qcqx.cn/article/13d6481a.html) 1. 旧版顶部长条引入css ```css .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #e90f92; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } .pace .pace-progress-inner { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } .pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 15px; right: 15px; width: 14px; height: 14px; border: solid 2px transparent; border-top-color: #e90f92; border-left-color: #e90f92; border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } @-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes pace-spinner { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes pace-spinner { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes pace-spinner { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pace-spinner { 0% { transform: rotate(0deg); transform: rotate(0deg); } 100% { transform: rotate(360deg); transform: rotate(360deg); } } /* 在下面修改进度条外观 */ .pace .pace-progress { background: #1ef4fbec; /*进度条颜色*/ height: 3px;/* 进度条厚度 */ } .pace .pace-progress-inner { box-shadow: 0 0 10px #1ef4fbce, 0 0 5px #1ecffbd0; /*阴影颜色*/ } .pace .pace-activity { border-top-color: #1edafbe5; /*上边框颜色*/ border-left-color: #1ef4fbec; /*左边框颜色*/ } ``` 2. 引入js(建议保存到本地引入) ```js ``` 然后三连刷新就能看到了 ```bash hexo cl;hexo g;hexo s ``` --- ## 新版顶部胶囊加载条（本站使用中） 1. 添加css（注意，两款加载条二选一，不要同时用） ```css /* 加载条 */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 4px; left: 0; right: 0; height: 8px; border-radius: 8px; width: 7rem; background: #eaecf2; border: 1px #e3e8f7; overflow: hidden } .pace-inactive .pace-progress { opacity: 0; transition: .3s ease-in } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 200px; position: absolute; z-index: 2000; display: block; top: 0; right: 100%; height: 100%; width: 100%; /* linear-gradient(to right, #3494e6, #ec6ead) */ background: linear-gradient(to right, #43cea2, #3866ca); animation: gradient 2s ease infinite; background-size: 200% } .pace.pace-inactive { opacity: 0; transition: .3s; top: -8px } ``` 然后引入新版js，依然推荐保存到本地引入 ```js - ``` 最后三连刷新就能看到了 ```bash hexo cl;hexo g;hexo s ``` 下期预告：`引入阿里iconfont自定义图标`

友链样式魔改

Sat, 11 Oct 2025 07:23:28 GMT

魔改前请备份，要不然出错了又不知道怎么改就完啦！！！请注意，魔改此部分会让markdown语法和标签失效

## 修改模板文件打开`"\themes\butterfly\layout\includes\page\flink.pug"`文件，覆盖式写入下面的内容： ```pug #article-container if top_img === false h1.page-title= page.title .flink if site.data.link each linkGroup in site.data.link //- 友链分类标题 if linkGroup.class_name h2!= linkGroup.class_name //- 友链分类描述 if linkGroup.class_desc .flink-desc!= linkGroup.class_desc //- 生成随机列表（如果需要） - let linkList = linkGroup.link_list.slice() if linkGroup.random - linkList.sort(() => Math.random() - 0.5) //- Butterfly 样式 if linkGroup.flink_style === 'butterfly' .butterfly-flink-list each item in linkList .flink-list-item a( href=url_for(item.link) title=item.name target="_blank" rel="noopener" ) .flink-item-icon +flink-img(item.avatar, item.name, 'flink') .flink-item-info .flink-item-name= item.name .flink-item-desc(title=item.descr)= item.descr //- Flexcard 样式 else if linkGroup.flink_style === 'flexcard' .flexcard-flink-list each item in linkList a.flink-list-card( href=url_for(item.link) target='_blank' rel='noopener' data-title=item.descr ) .wrapper.cover - const siteshot = item.siteshot ? url_for(item.siteshot) : `https://s0.wp.com/mshots/v1/${item.link}?w=400&h=300` +flink-img(siteshot, '', 'post_page') +flink-img(item.avatar, '', 'post_page') .info +flink-img(item.avatar, item.name, 'flink') span.flink-sitename= item.name //- Volantis 样式 else if linkGroup.flink_style === 'volantis' .volantis-flink-list each item in linkList a.site-card( href=url_for(item.link) target='_blank' rel='noopener' ) .img - const siteshot = item.siteshot ? url_for(item.siteshot) : `https://s0.wp.com/mshots/v1/${item.link}?w=400&h=300` img.no-lightbox( src=siteshot onerror=imgError('post_page') alt=item.name ) .info img.no-lightbox( src=url_for(item.avatar) onerror=imgError('flink') alt=item.name ) span.title= item.name span.desc(title=item.descr)= item.descr //- Byer 样式 else if linkGroup.flink_style === 'byer' .byer-flink-list each item in linkList .flink-list-item a( href=url_for(item.link) title=item.name target="_blank" rel="noopener" ) .flink-item-bar span.flink-item-bar-yellow span.flink-item-bar-green span.flink-item-bar-red span.flink-item-bar-x + .flink-item-content .flink-item-text .flink-item-name= item.name .flink-item-desc(title=item.descr)= item.descr .flink-item-icon img.no-lightbox( src=url_for(item.avatar) onerror=imgError('flink') alt=item.name ) //- Ark 样式 else if linkGroup.flink_style === 'ark' .ark-flink-list each item in linkList a.ark-flink-list-card( href=url_for(item.link) target='_blank' rel='noopener' title=item.descr ) .ark-flink-progress-bar-A .ark-flink-progress-bar-B .ark-flink-progress-bar-C .ark-flink-content .ark-flink-name .flink-sitename= item.name .flink-block .ark-flink-avatar img.no-lightbox( src=url_for(item.avatar) onerror=imgError('flink') alt=item.name ) .ark-flink-mask .ark-flink-mask-left .ark-flink-mask-right .ark-flink-descr .ark-flink-descr-text= item.descr .ark-flink-siteshot - const siteshot = item.siteshot ? url_for(item.siteshot) : `https://s0.wp.com/mshots/v1/${item.link}?w=400&h=300` img.no-lightbox( src=siteshot onerror=imgError('post_page') alt=item.name ) //- 页面内容 != page.content //- Mixin: 友链图片处理 mixin flink-img(src, alt, errorType) if theme.lazyload.enable img.nolazyload( data-lazy-src=url_for(src) onerror=imgError(errorType) alt=alt ) else img.nolazyload( src=url_for(src) onerror=imgError(errorType) alt=alt ) //- 函数: 图片错误处理 - function imgError(type) { return `this.onerror=null;this.src='${url_for(theme.error_img[type])}'` } ``` 注意缩进问题，整个文件全部覆盖 ## 修改样式文件打开`"\themes\butterfly\source\css\_page\flink.styl"`文件，覆盖以下内容： ```styl .flink-desc margin: .2rem 0 .5rem //bf原生 .butterfly-flink-list overflow: auto padding: 10px 10px 0 text-align: center & > .flink-list-item position: relative float: left overflow: hidden line-height: 17px -webkit-transform: translateZ(0) height: 100px; padding: 10px; width: calc(100% / 5 - 0.5rem) margin: 0.5rem 0.25rem; border-radius: 12px; border: var(--style-border); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; +maxWidth1200() width: calc(50% - 15px) !important +maxWidth600() width: calc(100% - 15px) !important &:hover border-color: #101010 !important; background-color: #eeeeee !important; box-shadow: #cccccc !important; .flink-item-icon width: 0; height: 0; margin-left: -10px; &:hover:before, &:focus:before, &:active:before transform: scale(1) a color: var(--font-color) text-decoration: none .flink-item-icon float: left overflow: hidden margin: 15px 10px width: 60px height: 60px border-radius: 35px transition: all .3s ease-out margin: 8px 0 8px 0; border-radius: 50%; overflow: hidden; img width: 100% height: 100% transition: filter 375ms ease-in .2s, transform .3s object-fit: cover .img-alt display: none .flink-item-info display: flex; flex-wrap: wrap; padding-left: 10px; text-align: left; flex-direction: column; .flink-item-name @extend .limit-one-line padding: 12px 0 16px 0; height: auto; font-weight: bold font-size: 1.2em .flink-item-desc @extend .limit-one-line padding: 0 height: 35px font-size: .93em opacity: .7; word-break: break-all; white-space: break-spaces; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; .flink-name margin-bottom: 5px font-weight: bold font-size: 1.5em //flexcard卡片 #article-container img margin-bottom: 0.5rem; object-fit: cover; max-height: 900px; .flexcard-flink-list overflow hidden .flink-list-card .wrapper img transition: transform .5s ease-out !important; & > a width: calc(100% / 5 - 0.5rem); height 150px position relative display block margin: 0.5rem 0.25rem; float left overflow hidden padding: 0; border-radius: 8px; transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s box-shadow none border: var(--style-border)!important; &:hover .info transform translateY(-100%) .wrapper img transform scale(1.2) &::before position: fixed width:inherit margin:auto left:0 right:0 top:10% border-radius: 10px text-align: center z-index: 100 content: attr(data-title) font-size: 20px color: #fff padding: 10px background-color: rgba($theme-color,0.8) .cover width 100% transition transform .5s ease-out .wrapper position relative .fadeIn animation coverIn .8s ease-out forwards img height 150px pointer-events none .info display flex flex-direction column justify-content center align-items center width 100% height 100% overflow hidden border-radius 3px background-color hsla(0, 0%, 100%, .7) transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s img position relative top 45px width 80px height 80px border-radius 50% box-shadow 0 0 10px rgba(0, 0, 0, .3) z-index 1 text-align center pointer-events none span padding 20px 10% 60px 10% font-size 16px width 100% text-align center box-shadow 0 0 10px rgba(0, 0, 0, .3) background-color hsla(0, 0%, 100%, .7) color var(--font-color) white-space nowrap overflow hidden text-overflow ellipsis .flexcard-flink-list>a .info, .flexcard-flink-list>a .wrapper .cover position absolute top 0 left 0 @media screen and (max-width:1024px) .flexcard-flink-list & > a width calc(33.33333% - 15px) @media screen and (max-width:600px) .flexcard-flink-list & > a width calc(50% - 15px) [data-theme=dark] .flexcard-flink-list a .info, .flexcard-flink-list a .info span background-color rgba(0, 0, 0, .6) .flexcard-flink-list & > a &:hover &:before background-color: rgba(#121212,0.8); .justified-gallery > div > img, .justified-gallery > figure > img, .justified-gallery > a > a > img, .justified-gallery > div > a > img, .justified-gallery > figure > a > img, .justified-gallery > a > svg, .justified-gallery > div > svg, .justified-gallery > figure > svg, .justified-gallery > a > a > svg, .justified-gallery > div > a > svg, .justified-gallery > figure > a > svg position static!important trans($time = 0.28s) transition: all $time ease -moz-transition: all $time ease -webkit-transition: all $time ease -o-transition: all $time ease //volantis卡片，我的最爱 .volantis-flink-list display: flex flex-wrap: wrap justify-content: flex-start margin: -0.5 * 16px align-items: stretch .site-card margin: 16px * 0.5 width: "calc(100% / 4 - %s)" % 16px @media screen and (min-width: 2048px) width: "calc(100% / 5 - %s)" % 16px @media screen and (max-width: 768px) width: "calc(100% / 3 - %s)" % 16px @media screen and (max-width: 500px) width: "calc(100% / 2 - %s)" % 16px display: block line-height: 1.4 height 100% .img width: 100% height 150px @media screen and (max-width: 500px) height 100px overflow: hidden border-radius: 12px * 0.5 box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2) background: #f6f6f6 img width: 100% height 100% pointer-events:none; // trans(.75s) transition: transform 2s ease object-fit: cover .info margin-top: 16px * 0.5 img width: 32px height: 32px pointer-events:none; border-radius: 16px float: left margin-right: 8px margin-top: 2px span display: block .title font-weight: 600 font-size: var(--global-font-size) color: #444 display: -webkit-box -webkit-box-orient: vertical overflow: hidden -webkit-line-clamp: 1 trans() .desc font-size: var(--global-font-size) word-wrap: break-word; line-height: 1.2 color: #888 display: -webkit-box -webkit-box-orient: vertical overflow: hidden -webkit-line-clamp: 2 .img trans() &:hover .img box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1) .info .title color: #ff5722 //byer卡片 #article-container .flink margin-bottom: 20px .byer-flink-list overflow: auto padding: 10px 10px 0 text-align: center & > .flink-list-item position: relative background: #ffffff float: left overflow: hidden margin: 15px 7px width: calc(100% / 3 - 15px) height: 120px border-radius: 2px line-height: 17px -webkit-transform: translateZ(0) border: 1px solid box-shadow: 3px 3px 1px 1px #fee34c; +maxWidth1024() width: calc(50% - 15px) !important +maxWidth600() width: calc(100% - 15px) !important a color: var(--font-color) text-decoration: none .flink-item-bar height: 15px border-width: 0 0 1px 0 border-style: none none solid none background: #fde135 display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; padding: 0 3px 0 3px sapn width: 10px; height: 10px; margin: 0 1px 0 1px border-radius: 50%; display: block; border: 1px solid; display: flex; align-items: center; justify-content: flex-start; &.flink-item-bar-yellow background: #fde135 &.flink-item-bar-green background: #249a33 &.flink-item-bar-red background: #f13b06 &.flink-item-bar-x background: transparent border: 0px margin-left: auto transform: rotate(45deg); font-size: 23px; padding: 0px 0px 6px 0px; .flink-item-content display: flex; height: 105px flex-direction: row; align-items: center; justify-content: space-between; padding: 0 5px 0 5px; .flink-item-text width: 60%; display: flex; flex-direction: column; align-items: center; .flink-item-name @extend .limit-one-line max-width: 100%; padding: 0px 5px 0px 5px; margin: 0px 0 6px 0; height: 50%; font-weight: bold; font-size: 1.43em; border-width: 0 0 7px 0; border-style: solid; border-color: #fbf19f; .flink-item-desc @extend .limit-one-line max-width: 100%; height: 50%; padding: 5px 5px 5px 5px; font-size: 0.93em; position: relative &:before content: ""; background: transparent; display: block; height: calc(100% - 4px); width: calc(100% - 4px); position: absolute; left: 0; top: 0; border-radius: 2px; border: 1px solid; clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 50%, 90% 50%, 90% 100%, 0 100%); .flink-item-icon overflow: hidden; margin: 0px 5px; width: 70px; height: 70px; border: 1px solid; border-radius: 2px; transition: width .3s ease-out box-shadow: 2px 2px 1px 1px #fee34c; img width: 50px; height: 50px; margin: 9px 9px; transition: filter 375ms ease-in .2s, transform .3s object-fit: cover .img-alt display: none //byer卡片暗夜模式改造 [data-theme=dark] #article-container .flink .byer-flink-list & > .flink-list-item background: rgb(40,40,40) box-shadow: 3px 3px 1px 1px #1B5A70; a .flink-item-bar background: #1B5A70; .flink-item-content .flink-item-text .flink-item-name border-color: #5EBAD9; .flink-item-icon box-shadow: 2px 2px 1px 1px #1B5A70; //下面是aki及其自定义配色: :root --ark-flink-default-color: rgba(153, 54, 44,0.8) /*主色调*/ --ark-flink-mask: #818181 /*遮罩层配色*/ --ark-flink-progress-default: rgba(227, 236, 238, 0.8) /*能量条默认配色*/ --ark-flink-progress-charge: #d97f17 /*能量条充能配色*/ --flink-name-border-color: #d97f17 /*ID边框配色*/ [data-theme="dark"] --ark-flink-default-color: rgba(55, 112, 143,0.8) --ark-flink-mask: #37708f --ark-flink-progress-default: rgba(46, 160, 221, 0.8) --ark-flink-progress-charge: rgba(227, 236, 238, 0.8) --flink-name-border-color: rgba(227, 236, 238, 0.8) //适配ark方舟友链卡片 #article-container .flink margin-bottom: 20px .ark-flink-list overflow: auto padding: 10px 10px 0 text-align: center & > .ark-flink-list-card position: relative display: block color: var(--font-color) text-decoration: none float: left overflow: hidden margin: 15px 7px width: calc(100% / 3 - 15px) height: 220px border-radius: 2px line-height: 17px -webkit-transform: translateZ(0) +maxWidth1024() width: calc(50% - 15px) !important +maxWidth600() width: calc(100% - 15px) !important a.ark-flink-list-card * transition: all 0.3s cubic-bezier(.6, 0, .5, 1) &:hover * transition: all 0.3s cubic-bezier(.6, 0, .5, 1) .ark-flink-progress-bar-A, .ark-flink-progress-bar-B, .ark-flink-progress-bar-C background: var(--ark-flink-progress-charge) .ark-flink-content .ark-flink-name bottom: 0px; .ark-flink-avatar transform: rotateX(90deg) .ark-flink-mask .ark-flink-mask-left transition-delay: 0.3s; left: -35%; .ark-flink-mask-right transition-delay: 0.3s; right: -55%; .ark-flink-descr .ark-flink-descr-text transition-delay: 0.3s; opacity: 1 animation: ark-flink-type 1.5s steps(20, end) 0.3s,ark-flink-blink .75s step-end infinite; /* 定义光标的闪烁动画 */ .ark-flink-progress-bar-A, .ark-flink-progress-bar-B, .ark-flink-progress-bar-C display: block position: absolute; background: var(--ark-flink-progress-default) z-index 6 .ark-flink-progress-bar-A height: 8px; width: 100px; top: 3px; left: 6px; clip-path: polygon(0% 100%, 8% 0%, 28% 0%, 20% 100%, 23% 100%, 31% 0%, 46% 0%, 38% 100%, 41% 100%, 49% 0%, 64% 0%, 56% 100%, 59% 100%, 67% 0%, 82% 0%, 74% 100%, 77% 100%, 85% 0%, 100% 0%, 90% 100%); .ark-flink-progress-bar-B height: 8px; width: 35px; bottom: 35px; left: 0; clip-path: polygon(0% 0%, 40% 0%, 15% 100%, 25% 100%, 50% 0%, 85% 0%, 60% 100%, 70% 100%, 90% 0%, 100% 100%, 15% 100%); .ark-flink-progress-bar-C height: 100px width: 8px bottom: 50px right: 0 clip-path: polygon( 0% 0%, 100% 8%, 100% 28%, 0% 20%, 0% 23%, 100% 31%,100% 46% ,0% 38% ,0% 41% ,100% 49% ,100% 64% ,0% 56% ,0% 59% ,100% 67% ,100% 82% ,0% 74% , 0% 77%,100% 85% , 100% 100%,0% 90% ); .ark-flink-content display: block position: absolute background: radial-gradient(var(--ark-flink-default-color),transparent) width: calc(100% - 10px) height: 100% top: 0 left: 0 clip-path: polygon(0 15px, 100px 15px, 115px 0, calc(100% - 45px) 0, calc(100% - 15px) 45px, 100% 45px, 100% calc(100% - 25px), calc(100% - 30px) calc(100% - 25px), calc(100% - 55px) calc(100% - 10px), calc(100% - 90px) calc(100% - 10px), calc(100% - 100px) 100%, 100px 100%, 90px calc(100% - 10px), 55px calc(100% - 10px), 35px calc(100% - 45px), 0% calc(100% - 45px)); .ark-flink-avatar, .ark-flink-mask, .ark-flink-descr, .ark-flink-siteshot position: absolute width: 100% height: 100% top: 0 left: 0 .ark-flink-name display: block; position: absolute; z-index: 5; bottom: 10px; left: 20%; color: white; text-shadow: 1px 1px 5px black; background: transparent; height: 40px; width: 60%; border-style: double; border-width: 5px 5px 0 5px; border-color: var(--flink-name-border-color); transform: perspective(0.5em) rotateX(3deg); .flink-sitename transform: perspective(0.5em) rotateX(-3deg); font-size: 15px; margin: 5px 0 0 0; .flink-block transform: perspective(0.5em) rotateX(-10deg); display: block; width: 60%; height: 13px; background: var(--flink-name-border-color); position: absolute; bottom: 0px; left: 20%; .ark-flink-avatar z-index 4 display: flex align-items: center; justify-content: center; transform: rotateX(0deg) img width: 100px; height: 100px; margin: 0 auto 20px; object-fit: cover clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); .img-alt display: none .ark-flink-mask z-index 3 .ark-flink-mask-left width: 100%; height: 100%; background: repeating-linear-gradient(0deg, var(--ark-flink-mask),transparent 1px); clip-path: polygon(50% 0, 50% calc(50% - 60px), calc(50% - 20px) calc(50% - 60px), calc(50% - 50px) calc(50% - 30px), calc(50% - 50px) calc(50% + 10px), calc(50% - 20px) calc(50% + 40px), 50% calc(50% + 40px), 50% 100%, 0% 100%, 0% 0%); left: 0%; position: absolute; .ark-flink-mask-right background: repeating-linear-gradient(0deg, var(--ark-flink-mask),transparent 1px); width: 100%; height: 100%; clip-path: polygon(100% 0%, 50% 0%, 50% calc(50% - 60px), calc(50% - 20px) calc(50% - 60px), calc(50% - 50px) calc(50% - 30px), calc(50% - 50px) calc(50% + 10px), calc(50% - 20px) calc(50% + 40px), 50% calc(50% + 40px), 50% 100%, 100% 100%); right: 0%; position: absolute; .ark-flink-descr z-index 2 display: flex align-items: center; justify-content: center; .ark-flink-descr-text color: white; text-shadow: 1px 1px 5px black; font-size: 1.5em; height: 1.5em; line-height: 1.5em; overflow: hidden; /* 隐藏超出容器的文本 */ border-right: .15em solid orange; /* 打字效果的光标动画 */ white-space: nowrap; /* 确保文本在一行内显示，不换行 */ margin: 20px; opacity: 0 .ark-flink-siteshot z-index 1 display: flex align-items: center; justify-content: center; img height: 75%; width: 100%; margin: 0 auto 20px; object-fit: cover; /* 定义打字机动画 */ @keyframes ark-flink-type from width: 0; to width: 100%; /* 定义光标闪烁动画 */ @keyframes ark-flink-blink from, to border-color: transparent; 50% border-color: orange ``` ## 修改友链数据文件打开`"\source\_data\link.yml"`按照下方格式写入文件： ```yml - class_name: 1.技术支持 class_desc: 由以下人员提供技术支持 flink_style: volantis # 可选择样式 link_list: - name: mccsjs link: https://hexo.seln.cn/ avatar: https://s2.loli.net/2023/02/04/47DVRIgbGyQwcO9.jpg descr: 第一是我自己！！！ siteshot: https://hexo.seln.cn/img/a.jpg ``` 下面是选项的用途及可选项： | 一级属性 | 二级属性 | butterfly | volantis | flexcard | byer | ark | 解释 | | ----------- | -------- | --------- | -------- | -------- | ---- | --- | ----- | | class_name | * | ✅ | ✅ | ✅ | ✅ | ✅ | 每类提示词 | | flink_style | * | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片样式 | | * | name | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片名称 | | * | link | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片链接 | | link_list | avatar | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片头像 | | * | descr | ✅ | ✅ | ✅ | ✅ | ✅ | 卡片描述 | | * | siteshot | ❌ | (✅) | (✅) | ❌ | (✅) | 网站截图 | * ❌：不支持选项 * ✅：支持项，不可省略 * (✅)：可选选项，可以省略，比如siteshot，可以根据网站信息采用api截图生成，api如下：'https://s0.wp.com/mshots/v1/' + 你的域名 + '?w=400&h=300' 各友链样式预览： ![butterfly](https://csjs.eu.org/img/6616178b03ebf.png) ![volantis](https://csjs.eu.org/img/66161742d0252.png) ![flexcard](https://csjs.eu.org/img/661617ad47e5a.png) ![byer](https://csjs.eu.org/img/661617cfd8839.png) ![ark](https://csjs.eu.org/img/661617ffb988b.png) 接下来三连看看成果 ```bash hexo cl;hexo g;hexo s ```

教程更新方式更改

Fri, 10 Oct 2025 12:51:41 GMT

教程会一个魔改一篇文章更新从2025年10月10日起博客所做的魔改中，可以展示出来的部分将会一个部分一篇文章发布，每8个修改统合到一篇文章中博客魔改教程一博客魔改教程二

中秋 · 月华如练，思念如诗

Mon, 06 Oct 2025 14:03:52 GMT

🎋 中秋 · 月华如练，思念如诗

桂子月中落，天香云外飘。在这个温柔的秋夜，愿明月寄去我所有的祝福。

🌌 今夜月明人尽望

不知秋思落谁家？

他乡月亦圆

在上海的弄堂里，闻到邻家飘出的桂花香
在北京的四合院，听到孩童嬉戏的笑语
在广州的珠江边，看见游船划过的涟漪
在成都的茶馆中，尝到刚出炉的鲜肉月饼

同一轮明月，照亮千万种团圆。

🍵 中秋雅事

品茗赏月

一壶龙井，清香悠远
一碟月饼，甜咸皆宜
一曲古琴，余音绕梁
一院桂花，暗香浮动

诗意中秋

海上生明月，天涯共此时。

今夜月明人尽望，不知秋思落谁家。

但愿人长久，千里共婵娟。

千年诗词，道不尽人间情思。

💫 致每一个你

给归家的人

厨房里忙碌的身影饭桌上熟悉的味道都是最温暖的守候

给远行的人

异乡的月亮也很圆手中的月饼也很甜心中的牵挂更绵长

给独处的人

一个人的中秋也可以很浪漫一盏茶，一本书与明月对酌

🌠 中秋祈愿

愿：

月光所至，万事顺遂
心中有爱，四季安然
步履所往，皆是坦途
笑容常在，幸福常伴

中秋快乐，不止中秋。

共赴国庆盛典，同襄时代华章

Wed, 01 Oct 2025 00:00:00 GMT

七十六载铸辉煌，盛世华章谱新篇——庆祝中华人民共和国成立76周年

共赴国庆盛典，同襄时代华章

——庆祝中华人民共和国成立76周年

七十六载风雨兼程，七十六年春华秋实
盛世中华，再谱新篇

七十六载辉煌路

当金色的秋风再次拂过神州大地，当鲜艳的五星红旗第76次在这个收获的季节迎风飘扬，我们怀着无比激动和自豪的心情，庆祝中华人民共和国成立76周年。

七十六年，在历史长河中只是短暂一瞬，但对于中华民族来说，却是一段从站起来、富起来到强起来的伟大飞跃。今天的中国，正以更加自信、更加坚定的步伐，行进在民族复兴的康庄大道上。

辉煌成就——七十六年的壮丽画卷

经济发展创造奇迹

经济总量持续增长，稳居世界第二大经济体
制造业增加值连续多年位居世界第一
科技创新实现历史性跨越，在多个领域实现“并跑”甚至“领跑”
基础设施建设成就显著，高速公路、高速铁路里程位居世界前列

民生改善成效显著

脱贫攻坚战取得全面胜利，历史性解决绝对贫困问题
教育事业全面发展，国民素质显著提升
医疗卫生体系不断完善，人均预期寿命大幅提高
社会保障网络越织越密，人民生活更加安心

时代新篇——76周年庆典的特别意义

继往开来的历史节点

76周年，既是对过往辉煌的回顾，更是迈向新征程的起点：

传承红色基因，赓续共产党人的精神血脉
汲取历史智慧，总结治国理政的宝贵经验
激发奋进力量，凝聚民族复兴的磅礴伟力

新时代的壮丽征程

站在新的历史起点，我们深刻认识到：

中国式现代化道路越走越宽广
高质量发展成为时代主题
共同富裕稳步推进
生态文明建设成效显著

庆典盛况——举国欢庆76华诞

首都北京的庄严庆典

天安门广场装扮一新，洋溢着节日的喜庆气氛：

升旗仪式庄严隆重，五星红旗迎风飘扬
主题展览精彩纷呈，展现76年辉煌成就
文艺演出好戏连台，抒发人民爱国情怀

全国各地同庆华诞

从城市到乡村，从内地到边疆，庆祝活动各具特色：

主题灯光秀点亮城市夜空
群众性文化活动丰富多彩
爱国主义教育深入人心
网上网下同频共振

使命在肩——奋进新征程

青年一代的责任担当

作为新时代的见证者和参与者，青年人应当：

坚定理想信念，筑牢信仰之基
练就过硬本领，成为栋梁之材
勇于创新创造，走在时代前列
矢志艰苦奋斗，书写无悔青春

每个人的时代答卷

在平凡岗位上创造不凡业绩：

爱岗敬业，在实干中彰显价值
服务社会，在奉献中实现价值
保护环境，在行动中创造价值
传承文化，在坚守中弘扬价值

迈向更加辉煌的明天

七十六年砥砺奋进，七十六年成就辉煌。站在新的历史起点，我们要：

铭记历史，不忘来时路的艰辛与荣光；
珍惜现在，把握新时代的机遇与挑战；
开创未来，书写民族复兴的壮丽篇章。

让我们紧密团结，同心同德，为实现中华民族伟大复兴的中国梦而努力奋斗！

祝愿伟大祖国：

繁荣昌盛
国泰民安！
明天更加美好！

*此文谨献给所有为祖国的繁荣发展默默奉献的人们*

博客魔改教程2

Mon, 29 Sep 2025 01:37:59 GMT

魔改前请备份，要不然出错了又不知道怎么改就完啦！！！ 1. [博客魔改教程一](https://hexo.seln.cn/posts/e7f6bd97/) 2. [博客魔改教程二](https://hexo.seln.cn/posts/f38acf51/) ⇦当前位置🪂

### 标题霓虹灯效果

查看教程

1. 在custom.css中添加如下代码，默认左上角标题、中间标题和副标题，还有文章页头的标题有循环霓虹灯 ```css /* 夜间模式生效 */ [data-theme="dark"] #site-name, [data-theme="dark"] #site-title { animation: light_15px 10s linear infinite; } [data-theme="dark"] #site-subtitle { animation: light_10px 10s linear infinite; } [data-theme="dark"] #post-info { animation: light_5px 10s linear infinite; } /* 白天模式生效 */ [data-theme="light"] #site-name, [data-theme="light"] #site-title { animation: light_15px 10s linear infinite; } [data-theme="light"] #site-subtitle { animation: light_10px 10s linear infinite; } [data-theme="light"] #post-info { animation: light_5px 10s linear infinite; } ``` 2. 刷新页面即可看到效果，如果你不想在白天模式开，那就更改白天模式的部分： ```css /* 白天模式不生效 */ [data-theme="light"] #site-name, [data-theme="light"] #site-title, [data-theme="light"] #site-subtitle, [data-theme="light"] #post-info { animation: none; } ```

### 页面鼠标魔改

查看教程

* 可以看到我的鼠标是蓝色小点，你们可以根据我的代码进行换色 1. 新建source\js\cursor.js，或者使用原来的js，，在里面写上如下代码： ```js /* 鼠标*/ 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,") 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() })(); // 如果当前页有评论就执行函数，评论表情放大 if (document.getElementById('post-comment')) owoBig(); // 表情放大 function owoBig() { let flag = 1, // 设置节流阀 owo_time = '', // 设置计时器 m = 3; // 设置放大倍数 // 创建盒子 let div = document.createElement('div'), body = document.querySelector('body'); // 设置ID div.id = 'owo-big'; // 插入盒子 body.appendChild(div) // 构造observer let observer = new MutationObserver(mutations => { for (let i = 0; i < mutations.length; i++) { let dom = mutations[i].addedNodes, owo_body = ''; if (dom.length == 2 && dom[1].className == 'OwO-body') owo_body = dom[1]; // 如果需要在评论内容中启用此功能请解除下面的注释 // else if (dom.length == 1 && dom[0].className == 'tk-comment') owo_body = dom[0]; else continue; // 禁用右键（手机端长按会出现右键菜单，为了体验给禁用掉） if (document.body.clientWidth <= 768) owo_body.addEventListener('contextmenu', e => e.preventDefault()); // 鼠标移入 owo_body.onmouseover = (e) => { if (flag && e.target.tagName == 'IMG') { flag = 0; // 移入300毫秒后显示盒子 owo_time = setTimeout(() => { let height = e.target.clientHeight * m, // 盒子高 2023-02-16更新 width = e.target.clientWidth * m, // 盒子宽 2023-02-16更新 left = (e.x - e.offsetX) - (width - e.target.clientWidth) / 2, // 盒子与屏幕左边距离 2023-02-16更新 top = e.y - e.offsetY; // 盒子与屏幕顶部距离 if ((left + width) > body.clientWidth) left -= ((left + width) - body.clientWidth + 10); // 右边缘检测，防止超出屏幕 if (left < 0) left = 10; // 左边缘检测，防止超出屏幕 // 设置盒子样式 div.style.cssText = `display:flex; height:${height}px; width:${width}px; left:${left}px; top:${top}px;`; // 在盒子中插入图片 div.innerHTML = `` }, 300); } }; // 鼠标移出隐藏盒子 owo_body.onmouseout = () => { div.style.display = 'none', flag = 1, clearTimeout(owo_time); } } }) observer.observe(document.getElementById('post-comment'), { subtree: true, childList: true }) // 监听的元素和配置项 } ``` 2. 在source\css\custom.css添加如下代码： ```css /* 鼠标样式 */ #cursor { position: fixed; width: 16px; height: 16px; /* 这里改变跟随的底色 */ background: rgb(58, 204, 194); 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); } ```

### 页面调节

查看教程

这个教程是通过css样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式，如本站所示 1. 复制以下代码进去自定义的文件， ```css /* 亚克力模糊 */ :root { --trans-light: rgba(255, 255, 255, 0.88); --trans-dark: rgba(25, 25, 25, 0.88); --border-style: 1px solid rgb(169, 169, 169); --backdrop-filter: blur(5px) saturate(150%); } /* 首页文章卡片 */ #recent-posts > .recent-post-item { background: var(--trans-light); backdrop-filter: var(--backdrop-filter); border-radius: 25px; border: var(--border-style); } /* 首页侧栏卡片 */ #aside-content .card-widget { background: var(--trans-light); backdrop-filter: var(--backdrop-filter); border-radius: 18px; border: var(--border-style); } /* 文章页、归档页、普通页面 */ div#post, div#page, div#archive { background: var(--trans-light); backdrop-filter: var(--backdrop-filter); border: var(--border-style); border-radius: 20px; } /* 导航栏 */ #page-header.nav-fixed #nav { background: rgba(255, 255, 255, 0.75); backdrop-filter: var(--backdrop-filter); } [data-theme="dark"] #page-header.nav-fixed #nav { background: rgba(0, 0, 0, 0.7) !important; } /* 夜间模式遮罩 */ [data-theme="dark"] #recent-posts > .recent-post-item, [data-theme="dark"] #aside-content .card-widget, [data-theme="dark"] div#post, [data-theme="dark"] div#archive, [data-theme="dark"] div#page { background: var(--trans-dark); } /* 夜间模式页脚页头遮罩透明 */ [data-theme="dark"] #footer::before { background: transparent !important; } [data-theme="dark"] #page-header::before { background: transparent !important; } /* 阅读模式 */ .read-mode #aside-content .card-widget { background: rgba(158, 204, 171, 0.5) !important; } .read-mode div#post { background: rgba(158, 204, 171, 0.5) !important; } /* 夜间模式下的阅读模式 */ [data-theme="dark"] .read-mode #aside-content .card-widget { background: rgba(25, 25, 25, 0.9) !important; color: #ffffff; } [data-theme="dark"] .read-mode div#post { background: rgba(25, 25, 25, 0.9) !important; color: #ffffff; } ``` 2. 参数说明： * --trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明； * --trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明; * --border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框; * --backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法; * 可以自行调节，我调的几乎透明了，不要学我 3. 如果你已经引入了css那就不用管，没有引入的记住在主题配置文件_config.butterfly.yml的inject配置项中引入该css文件： ```yml inject: head: - ``` 4. 重启看看效果 ```bash hexo cl;hexo s ```

### 首页文章显示设置

查看教程

blue

新版butterfly本身支持文章显示双栏了，所以只需改butterfly的文件就行因为配置文件都是英文，直接翻译成中文更好理解直接搜索index_layout: ，并替换成以下代码 ```yml # 首页文章布局方式 # 1: 封面图在左，信息在右 # 2: 封面图在右，信息在左 # 3: 封面图与信息左右交替排列 # 4: 封面图在上，信息在下 # 5: 信息直接显示在封面图上 # 6: 瀑布流布局 - 封面图在上，信息在下 # 7: 瀑布流布局 - 信息直接显示在封面图上 index_layout: 6 ``` 可以自己本地更换数字看看，有喜欢的就选哪个

### 导航栏居中

查看教程

blue

仅需在自定义css中添加如下即可 ```css /* 一级菜单居中 */ #nav .menus_items { position: absolute !important; width: fit-content !important; left: 50% !important; transform: translateX(-50%) !important; } /* 子菜单横向展示 */ #nav .menus_items .menus_item:hover .menus_item_child { display: flex !important; } /* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */ .menus_items .menus_item:nth-child(5) .menus_item_child { left: -38px; } ``` 添加完记得引入这样手机端的子菜单是默认展开的，只需在后面添加hide:就能解决例： ```yml 社交|| icon-message || faa-tada || hide: 留言板: /comments/ || icon-liuyanban || faa-tada 友链: /link/ || icon-link || faa-tada ```

### 引入阿里iconfont自定义图标

查看教程

blue

一、新建图标项目 1. 访问[阿里巴巴矢量图标库](https://www.iconfont.cn/),注册登录。 2. 搜索自己想要的图标，然后选择**添加入库**，加到购物车。 3. 选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，没有项目就新建一个。 4. 可以通过上方资源管理->我的项目，找到之前添加的图标项目。(现在的iconfont可以在图标库的项目设置里直接打开彩色设置，然后采用fontclass的引用方式即可使用多彩图标。但是**单一项目彩色图标上限是40个图标**，酌情采用。) 二、引入图标 1. 复制你的font class代码和symbol代码并引入到主题文件 ```yml inject: head: - bottom: - ``` 2. 可以在自定义`CSS`中添加如下样式来控制图标默认大小和颜色等属性（**若已经在项目设置中勾选了彩色选项，则无需再定义图标颜色**） ```css .iconfont { font-family: "iconfont" !important; /* 这里可以自定义图标大小 */ font-size: 3em; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 三. 菜单栏多色动态图标 **请确保您已经完成了前置教程，并实现了在文章中使用`symbol`写法来引入`iconfont`图标** 1. 替换`themes\butterfly\layout\includes\header\menu_item.pug`为以下代码，本方案默认使用观感最佳的悬停父元素触发子元素动画效果，默认动画为`faa-tada`。注意：可以把之前的代码注释掉，再在后面加上如下代码，以便于回滚 ```pug if theme.menu .menus_items each value, label in theme.menu if typeof value !== 'object' .menus_item - const valueArray = value.split('||') a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0]))) if valueArray[1] i.fa-fw(class=trim(valueArray[1])) - var icon_value = trim(value.split('||')[1]) - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada' if icon_value.substring(0,2)=="fa" i.fa-fw(class=icon_value + ' ' + anima_value) else if icon_value.substring(0,4)=="icon" svg.icon(aria-hidden="true" class=anima_value) use(xlink:href=`#`+ icon_value) span=' '+label else .menus_item - const labelArray = label.split('||') - const hideClass = labelArray[3] && trim(labelArray[3]) === 'hide' ? 'hide' : '' a.site-page.group.faa-parent.animated-hover(class=`${hideClass}` href='javascript:void(0);') if labelArray[1] - var icon_label = trim(label.split('||')[1]) - var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada' if icon_label.substring(0,2)=="fa" i.fa-fw(class=icon_label + ' ' + anima_label) else if icon_label.substring(0,4)=="icon" svg.icon(aria-hidden="true" class=anima_label) use(xlink:href=`#`+ icon_label) span=' '+ trim(labelArray[0]) i.fas.fa-chevron-down ul.menus_item_child each val,lab in value - const valArray = val.split('||') li a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split('||')[0]))) if valArray[1] - var icon_val = trim(val.split('||')[1]) - var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada' if icon_val.substring(0,2)=="fa" i.fa-fw(class=icon_val + ' ' + anima_val) else if icon_val.substring(0,4)=="icon" svg.icon(aria-hidden="true" class=anima_val) use(xlink:href=`#`+ icon_val) span=' '+ lab ``` 2. 以下是填写示例，在`_config.butterfly.yml`中修改。`icon-xxx`字样的为`iconfont`的`symbol`引入方案的`id`值，可以在你的`iconfont`图标库内查询，其中hide属性也是可以用的。 ```yml menu: 首页: / || icon-home || faa-tada 文章 || icon--article || faa-tada || hide: 归档: /archives/ || icon-guidang1 || faa-tada 标签: /tags/ || icon-sekuaibiaoqian || faa-tada 分类: /categories/ || icon-fenlei || faa-tada ``` 3. 这里的动态图标是`svg.icon`的标签，因此上面调节`.iconfont`的css并不适用，需要在`custom.css`里加上一些样式来限制图标的大小和颜色等，具体大小自行调节。 ```css svg.icon { width: 1.28em; height: 1.28em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } ``` 修改完在手机上是默认展开二级栏的，可以在后面➕hide:收起，例： ```yml 文章|| icon-book || faa-tada || hide: 归档: /archives/ || icon-archive || faa-tada 标签: /tags/ || icon-tag || faa-tada 分类: /categories/ || icon-fenlei || faa-tada ``` 4. 重启项目即可看到效果： ```bash hexo cl;hexo g;hexo s ```

### 顶部加载条

查看教程

blue

### 顶部细线加载条详见：[给Butterfly加上顶部加载条](https://www.qcqx.cn/article/13d6481a.html) 引入css ```css .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #e90f92; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } .pace .pace-progress-inner { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } .pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 15px; right: 15px; width: 14px; height: 14px; border: solid 2px transparent; border-top-color: #e90f92; border-left-color: #e90f92; border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } @-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes pace-spinner { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes pace-spinner { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes pace-spinner { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pace-spinner { 0% { transform: rotate(0deg); transform: rotate(0deg); } 100% { transform: rotate(360deg); transform: rotate(360deg); } } /* 在下面修改进度条外观 */ .pace .pace-progress { background: #1ef4fbec; /*进度条颜色*/ height: 3px;/* 进度条厚度 */ } .pace .pace-progress-inner { box-shadow: 0 0 10px #1ef4fbce, 0 0 5px #1ecffbd0; /*阴影颜色*/ } .pace .pace-activity { border-top-color: #1edafbe5; /*上边框颜色*/ border-left-color: #1ef4fbec; /*左边框颜色*/ } ``` ### 引入js(建议保存到本地引入) ```js ``` ### 新版顶部胶囊加载条（本站使用中） 1. 添加css（注意，两款加载条二选一，不要同时用） ```css /* 加载条 */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 4px; left: 0; right: 0; height: 8px; border-radius: 8px; width: 7rem; background: #eaecf2; border: 1px #e3e8f7; overflow: hidden } .pace-inactive .pace-progress { opacity: 0; transition: .3s ease-in } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 200px; position: absolute; z-index: 2000; display: block; top: 0; right: 100%; height: 100%; width: 100%; /* linear-gradient(to right, #3494e6, #ec6ead) */ background: linear-gradient(to right, #43cea2, #3866ca); animation: gradient 2s ease infinite; background-size: 200% } .pace.pace-inactive { opacity: 0; transition: .3s; top: -8px } ``` 然后引入新版js，依然推荐保存到本地引入 ```js - ``` 最后三连刷新就能看到了 ```bash hexo cl;hexo g;hexo s ```

### 博客添加弹窗公告

查看教程

blue

1. 新建`/css/gg.css`，在css中引入以下代码：（只推荐新建，不推荐粘贴到已有的CSS中） ```css .sweet-alert,.sweet-overlay{position:fixed;display:none}body.stop-scrolling{height:100%;overflow:hidden}.sweet-overlay{background-color:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";background-color:rgba(0,0,0,.4);left:0;right:0;top:0;bottom:0;z-index:10000}.sweet-alert{background-color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;width:478px;padding:17px;border-radius:5px;text-align:center;left:50%;top:50%;margin-left:-256px;margin-top:-200px;overflow:hidden;z-index:99999}@media all and (max-width:540px){.sweet-alert{width:auto;margin-left:0;margin-right:0;left:15px;right:15px}}.sweet-alert h2{color:#575757;font-size:30px;text-align:center;font-weight:600;text-transform:none;position:relative;margin:25px 0;padding:0;line-height:40px;display:block}.sweet-alert p{color:#797979;font-size:16px;font-weight:300;position:relative;text-align:inherit;float:none;margin:0;padding:0;line-height:normal}.sweet-alert fieldset{border:none;position:relative}.sweet-alert .sa-error-container{background-color:#f1f1f1;margin-left:-17px;margin-right:-17px;overflow:hidden;padding:0 10px;max-height:0;webkit-transition:padding .15s,max-height .15s;transition:padding .15s,max-height .15s}.sweet-alert .sa-error-container.show{padding:10px 0;max-height:100px;webkit-transition:padding .2s,max-height .2s;transition:padding .25s,max-height .25s}.sweet-alert .sa-error-container .icon{display:inline-block;width:24px;height:24px;border-radius:50%;background-color:#ea7d7d;color:#fff;line-height:24px;text-align:center;margin-right:3px}.sweet-alert .sa-error-container p{display:inline-block}.sweet-alert .sa-input-error{position:absolute;top:29px;right:26px;width:20px;height:20px;opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all .1s;transition:all .1s}.sweet-alert .sa-input-error::after,.sweet-alert .sa-input-error::before{content:"";width:20px;height:6px;background-color:#f06e57;border-radius:3px;position:absolute;top:50%;margin-top:-4px;left:50%;margin-left:-9px}.sweet-alert .sa-input-error::before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sweet-alert .sa-input-error::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.sweet-alert .sa-input-error.show{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.sweet-alert input{width:100%;box-sizing:border-box;border-radius:3px;border:1px solid #d7d7d7;height:43px;margin-top:10px;margin-bottom:17px;font-size:18px;box-shadow:inset 0 1px 1px rgba(0,0,0,.06);padding:0 12px;display:none;-webkit-transition:all .3s;transition:all .3s}.sweet-alert input:focus{outline:0;box-shadow:0 0 3px #c4e6f5;border:1px solid #b4dbed}.sweet-alert input:focus::-moz-placeholder{transition:opacity .3s 30ms ease;opacity:.5}.sweet-alert input:focus:-ms-input-placeholder{transition:opacity .3s 30ms ease;opacity:.5}.sweet-alert input:focus::-webkit-input-placeholder{transition:opacity .3s 30ms ease;opacity:.5}.sweet-alert input::-moz-placeholder{color:#bdbdbd}.sweet-alert input:-ms-input-placeholder{color:#bdbdbd}.sweet-alert input::-webkit-input-placeholder{color:#bdbdbd}.sweet-alert.show-input input{display:block}.sweet-alert .sa-confirm-button-container{display:inline-block;position:relative}.sweet-alert .la-ball-fall{position:absolute;left:50%;top:50%;margin-left:-27px;margin-top:4px;opacity:0;visibility:hidden}.sweet-alert button{background-color:#8CD4F5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}.sweet-alert button:focus{outline:0;box-shadow:0 0 2px rgba(128,179,235,.5),inset 0 0 0 1px rgba(0,0,0,.05)}.sweet-alert button:hover{background-color:#7ecff4}.sweet-alert button:active{background-color:#5dc2f1}.sweet-alert button.cancel{background-color:#C1C1C1}.sweet-alert button.cancel:hover{background-color:#b9b9b9}.sweet-alert button.cancel:active{background-color:#a8a8a8}.sweet-alert button.cancel:focus{box-shadow:rgba(197,205,211,.8) 0 0 2px,rgba(0,0,0,.0470588) 0 0 0 1px inset!important}.sweet-alert button[disabled]{opacity:.6;cursor:default}.sweet-alert button.confirm[disabled]{color:transparent}.sweet-alert button.confirm[disabled]~.la-ball-fall{opacity:1;visibility:visible;transition-delay:0s}.sweet-alert button::-moz-focus-inner{border:0}.sweet-alert[data-has-cancel-button=false] button{box-shadow:none!important}.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false]{padding-bottom:40px}.sweet-alert .sa-icon{width:80px;height:80px;border:4px solid gray;-webkit-border-radius:40px;border-radius:50%;margin:20px auto;padding:0;position:relative;box-sizing:content-box}.sweet-alert .sa-icon.sa-error{border-color:#F27474}.sweet-alert .sa-icon.sa-error .sa-x-mark{position:relative;display:block}.sweet-alert .sa-icon.sa-error .sa-line{position:absolute;height:5px;width:47px;background-color:#F27474;display:block;top:37px;border-radius:2px}.sweet-alert .sa-icon.sa-error .sa-line.sa-left{-webkit-transform:rotate(45deg);transform:rotate(45deg);left:17px}.sweet-alert .sa-icon.sa-error .sa-line.sa-right{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:16px}.sweet-alert .sa-icon.sa-warning{border-color:#F8BB86}.sweet-alert .sa-icon.sa-warning .sa-body{position:absolute;width:5px;height:47px;left:50%;top:10px;-webkit-border-radius:2px;border-radius:2px;margin-left:-2px;background-color:#F8BB86}.sweet-alert .sa-icon.sa-warning .sa-dot{position:absolute;width:7px;height:7px;-webkit-border-radius:50%;border-radius:50%;margin-left:-3px;left:50%;bottom:10px;background-color:#F8BB86}.sweet-alert .sa-icon.sa-info::after,.sweet-alert .sa-icon.sa-info::before{content:"";background-color:#C9DAE1;position:absolute}.sweet-alert .sa-icon.sa-info{border-color:#C9DAE1}.sweet-alert .sa-icon.sa-info::before{width:5px;height:29px;left:50%;bottom:17px;border-radius:2px;margin-left:-2px}.sweet-alert .sa-icon.sa-info::after{width:7px;height:7px;border-radius:50%;margin-left:-3px;top:19px}.sweet-alert .sa-icon.sa-success{border-color:#A5DC86}.sweet-alert .sa-icon.sa-success::after,.sweet-alert .sa-icon.sa-success::before{content:'';position:absolute;width:60px;height:120px;background:#fff}.sweet-alert .sa-icon.sa-success::before{-webkit-border-radius:120px 0 0 120px;border-radius:120px 0 0 120px;top:-7px;left:-33px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:60px 60px;transform-origin:60px 60px}.sweet-alert .sa-icon.sa-success::after{-webkit-border-radius:0 120px 120px 0;border-radius:0 120px 120px 0;top:-11px;left:30px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 60px;transform-origin:0 60px}.sweet-alert .sa-icon.sa-success .sa-placeholder{width:80px;height:80px;border:4px solid rgba(165,220,134,.2);-webkit-border-radius:40px;border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.sweet-alert .sa-icon.sa-success .sa-fix{width:5px;height:90px;background-color:#fff;position:absolute;left:28px;top:8px;z-index:1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sweet-alert .sa-icon.sa-success .sa-line{height:5px;background-color:#A5DC86;display:block;border-radius:2px;position:absolute;z-index:2}.sweet-alert .sa-icon.sa-success .sa-line.sa-tip{width:25px;left:14px;top:46px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.sweet-alert .sa-icon.sa-success .sa-line.sa-long{width:47px;right:8px;top:38px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sweet-alert .sa-icon.sa-custom{background-size:contain;border-radius:0;border:none;background-position:center center;background-repeat:no-repeat}@-webkit-keyframes showSweetAlert{0%{transform:scale(.7);-webkit-transform:scale(.7)}45%{transform:scale(1.05);-webkit-transform:scale(1.05)}80%{transform:scale(.95);-webkit-transform:scale(.95)}100%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes showSweetAlert{0%{transform:scale(.7);-webkit-transform:scale(.7)}45%{transform:scale(1.05);-webkit-transform:scale(1.05)}80%{transform:scale(.95);-webkit-transform:scale(.95)}100%{transform:scale(1);-webkit-transform:scale(1)}}@-webkit-keyframes hideSweetAlert{0%{transform:scale(1);-webkit-transform:scale(1)}100%{transform:scale(.5);-webkit-transform:scale(.5)}}@keyframes hideSweetAlert{0%{transform:scale(1);-webkit-transform:scale(1)}100%{transform:scale(.5);-webkit-transform:scale(.5)}}@-webkit-keyframes slideFromTop{0%{top:0}100%{top:50%}}@keyframes slideFromTop{0%{top:0}100%{top:50%}}@-webkit-keyframes slideToTop{0%{top:50%}100%{top:0}}@keyframes slideToTop{0%{top:50%}100%{top:0}}@-webkit-keyframes slideFromBottom{0%{top:70%}100%{top:50%}}@keyframes slideFromBottom{0%{top:70%}100%{top:50%}}@-webkit-keyframes slideToBottom{0%{top:50%}100%{top:70%}}@keyframes slideToBottom{0%{top:50%}100%{top:70%}}.showSweetAlert[data-animation=pop]{-webkit-animation:showSweetAlert .3s;animation:showSweetAlert .3s}.showSweetAlert[data-animation=none]{-webkit-animation:none;animation:none}.showSweetAlert[data-animation=slide-from-top]{-webkit-animation:slideFromTop .3s;animation:slideFromTop .3s}.showSweetAlert[data-animation=slide-from-bottom]{-webkit-animation:slideFromBottom .3s;animation:slideFromBottom .3s}.hideSweetAlert[data-animation=pop]{-webkit-animation:hideSweetAlert .2s;animation:hideSweetAlert .2s}.hideSweetAlert[data-animation=none]{-webkit-animation:none;animation:none}.hideSweetAlert[data-animation=slide-from-top]{-webkit-animation:slideToTop .4s;animation:slideToTop .4s}.hideSweetAlert[data-animation=slide-from-bottom]{-webkit-animation:slideToBottom .3s;animation:slideToBottom .3s}@-webkit-keyframes animateSuccessTip{0%,54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animateSuccessTip{0%,54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@-webkit-keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@-webkit-keyframes rotatePlaceholder{0%,5%{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}100%,12%{transform:rotate(-405deg);-webkit-transform:rotate(-405deg)}}@keyframes rotatePlaceholder{0%,5%{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}100%,12%{transform:rotate(-405deg);-webkit-transform:rotate(-405deg)}}.animateSuccessTip{-webkit-animation:animateSuccessTip .75s;animation:animateSuccessTip .75s}.animateSuccessLong{-webkit-animation:animateSuccessLong .75s;animation:animateSuccessLong .75s}.sa-icon.sa-success.animate::after{-webkit-animation:rotatePlaceholder 4.25s ease-in;animation:rotatePlaceholder 4.25s ease-in}@-webkit-keyframes animateErrorIcon{0%{transform:rotateX(100deg);-webkit-transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);-webkit-transform:rotateX(0);opacity:1}}@keyframes animateErrorIcon{0%{transform:rotateX(100deg);-webkit-transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);-webkit-transform:rotateX(0);opacity:1}}.animateErrorIcon{-webkit-animation:animateErrorIcon .5s;animation:animateErrorIcon .5s}@-webkit-keyframes animateXMark{0%,50%{transform:scale(.4);-webkit-transform:scale(.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);-webkit-transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);-webkit-transform:scale(1);margin-top:0;opacity:1}}@keyframes animateXMark{0%,50%{transform:scale(.4);-webkit-transform:scale(.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);-webkit-transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);-webkit-transform:scale(1);margin-top:0;opacity:1}}.animateXMark{-webkit-animation:animateXMark .5s;animation:animateXMark .5s}@-webkit-keyframes pulseWarning{0%{border-color:#F8D486}100%{border-color:#F8BB86}}@keyframes pulseWarning{0%{border-color:#F8D486}100%{border-color:#F8BB86}}.pulseWarning{-webkit-animation:pulseWarning .75s infinite alternate;animation:pulseWarning .75s infinite alternate}@-webkit-keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}@keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}.pulseWarningIns{-webkit-animation:pulseWarningIns .75s infinite alternate;animation:pulseWarningIns .75s infinite alternate}@-webkit-keyframes rotate-loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes rotate-loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.sweet-alert .sa-icon.sa-error .sa-line.sa-left{-ms-transform:rotate(45deg)\9}.sweet-alert .sa-icon.sa-error .sa-line.sa-right{-ms-transform:rotate(-45deg)\9}.sweet-alert .sa-icon.sa-success{border-color:transparent\9}.sweet-alert .sa-icon.sa-success .sa-line.sa-tip{-ms-transform:rotate(45deg)\9}.sweet-alert .sa-icon.sa-success .sa-line.sa-long{-ms-transform:rotate(-45deg)\9}/*! * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT */.la-ball-fall,.la-ball-fall>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-fall{display:block;font-size:0;color:#fff;width:54px;height:18px}.la-ball-fall.la-dark{color:#333}.la-ball-fall>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor;width:10px;height:10px;margin:4px;border-radius:100%;opacity:0;-webkit-animation:ball-fall 1s ease-in-out infinite;-moz-animation:ball-fall 1s ease-in-out infinite;-o-animation:ball-fall 1s ease-in-out infinite;animation:ball-fall 1s ease-in-out infinite}.la-ball-fall>div:nth-child(1){-webkit-animation-delay:-.2s;-moz-animation-delay:-.2s;-o-animation-delay:-.2s;animation-delay:-.2s}.la-ball-fall>div:nth-child(2){-webkit-animation-delay:-.1s;-moz-animation-delay:-.1s;-o-animation-delay:-.1s;animation-delay:-.1s}.la-ball-fall>div:nth-child(3){-webkit-animation-delay:0s;-moz-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}.la-ball-fall.la-sm{width:26px;height:8px}.la-ball-fall.la-sm>div{width:4px;height:4px;margin:2px}.la-ball-fall.la-2x{width:108px;height:36px}.la-ball-fall.la-2x>div{width:20px;height:20px;margin:8px}.la-ball-fall.la-3x{width:162px;height:54px}.la-ball-fall.la-3x>div{width:30px;height:30px;margin:12px}@-webkit-keyframes ball-fall{0%{opacity:0;-webkit-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(145%);transform:translateY(145%)}}@-moz-keyframes ball-fall{0%{opacity:0;-moz-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-moz-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(145%);transform:translateY(145%)}}@-o-keyframes ball-fall{0%{opacity:0;-o-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-o-transform:translateY(145%);transform:translateY(145%)}}@keyframes ball-fall{0%{opacity:0;-webkit-transform:translateY(-145%);-moz-transform:translateY(-145%);-o-transform:translateY(-145%);transform:translateY(-145%)}10%,90%{opacity:.5}20%,80%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(145%);-moz-transform:translateY(145%);-o-transform:translateY(145%);transform:translateY(145%)}} ``` 2. 新建`/js/gg.js`并加入以下代码： ```js !function(w,C,S){"use strict";!function o(a,r,s){function l(n,e){if(!r[n]){if(!a[n]){var t="function"==typeof require&&require;if(!e&&t)return t(n,!0);if(i)return i(n,!0);e=new Error("Cannot find module '"+n+"'");throw e.code="MODULE_NOT_FOUND",e}t=r[n]={exports:{}};a[n][0].call(t.exports,function(e){var t=a[n][1][e];return l(t||e)},t,t.exports,o,a,r,s)}return r[n].exports}for(var i="function"==typeof require&&require,e=0;e

\n \n \n \n \n

\n \n \n

\n \n \n\n

Title

Text

\n \n

Not valid!

\n \n

',t.exports=n.default},{}],8:[function(e,t,n){Object.defineProperty(n,"__esModule",{value:!0});var u=e("./utils"),c=e("./handle-swal-dom"),d=e("./handle-dom"),f=["error","warning","info","success","input","prompt"];n.default=function(a){var e,t,r=c.getModal(),n=r.querySelector("h2"),o=r.querySelector("p"),s=r.querySelector("button.cancel"),l=r.querySelector("button.confirm");if(n.innerHTML=a.html?a.title:d.escapeHtml(a.title).split("\n").join("
"),o.innerHTML=a.html?a.text:d.escapeHtml(a.text||"").split("\n").join("
"),a.text&&d.show(o),a.customClass?(d.addClass(r,a.customClass),r.setAttribute("data-custom-class",a.customClass)):(n=r.getAttribute("data-custom-class"),d.removeClass(r,n),r.setAttribute("data-custom-class","")),d.hide(r.querySelectorAll(".sa-icon")),a.type&&!u.isIE8()){var o=function(){for(var e=!1,t=0;t{ welcome() }) ``` 倒计时3秒关闭版本： ```js // 公告 function welcome(){ let welcome_text = '欢迎光顾mccsjs的小窝~' if(document.referrer!==''){ let referrer=document.referrer.split("/")[2]; welcome_text="欢迎来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名 } swal({ title: " 欢迎！", text: welcome_text+'\n欢迎',//欢迎文本，可自行修改 imageUrl: "/img/head.jpg",//图片，自行修改位置 timer: 3000,//弹出时间，延长到5秒以便用户阅读 }); } $(document).ready(()=>{//若未引用JQuery，请引用 welcome() }) ``` 融合版本 ```js // 公告 function welcome(){ let welcome_text = '欢迎光顾mccsjs的小窝~' if(document.referrer!==''){ let referrer=document.referrer.split("/")[2]; welcome_text="欢迎来自"+referrer.toUpperCase()+"的用户！";//获取用户来源域名 } swal({ title: " 欢迎！", text: welcome_text+'\n近期将更换域名至hexo.seln.cn',//欢迎文本，可自行修改 imageUrl: "/img/head.jpg",//图片，自行修改位置 timer: 5000,//弹出时间，延长到5秒以便用户阅读 showConfirmButton: true, // 显示确认按钮 confirmButtonText: "OK", // 按钮文字设为OK closeOnConfirm: true // 点击OK后关闭 }); } $(document).ready(()=>{//若未引用JQuery，请引用 welcome() }) ``` 4. 适配自定义字体我的公告只使用少部分时间，我自己没加在`custon.css`中添加以下代码 ```css .custom-swal-popup { font-family: "你的自定义字体", sans-serif; } .custom-swal-title { font-family: "你的自定义字体", sans-serif; font-size: 1.5em; } .custom-swal-content { font-family: "你的自定义字体", sans-serif; font-size: 1.1em; line-height: 1.4; } .custom-swal-confirm { font-family: "你的自定义字体", sans-serif; font-size: 1em; } ``` 5. 结尾

注意，三者只能存其一

接下来三连试试效果 ```bash hexo c;hexo g;hexo s ```

Markdown语法

Thu, 16 Feb 2023 12:02:08 GMT

本文中的第二部分所使用的是butterfly外挂标签插件，安装教程在[博客魔改教程一 | mccsjs](https://hexo.seln.cn/posts/e7f6bd97/)可见

# 1.Markdown语法自带格式

参考：[Markdown语法图文全面详解(10分钟学会)](https://blog.csdn.net/u014061630/article/details/81359144)

注意：此页面偶尔会存在CSS冲突问题!

## 1.1 代码块 ```shell \```shell # VSCode终端 hexo clean; hexo s hexo clean; hexo g; hexo d git add .; git commit -m "npm publish"; npm version patch; git push # Cmder终端 hexo clean && hexo s hexo clean && hexo g && hexo d git add . && git commit -m "npm publish" && npm version patch git push \``` ``` ```shell # VSCode终端 hexo clean; hexo s hexo clean; hexo g; hexo d git add .; git commit -m "npm publish"; npm version patch; git push # Cmder终端 hexo clean && hexo s hexo clean && hexo g && hexo d git add . && git commit -m "npm publish" && npm version patch git push ``` ## 1.2 多级标题 ```markdown # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 ``` 见本文章标题! ## 1.3 文字样式 ```markdown 下划线演示文字**加粗**演示文字*斜体*演示文本`高亮`演示文本~~删除~~线演示 5号字黑体蓝色 ``` 下划线演示文字**加粗**演示文字*斜体*演示文本`高亮`演示文本~~删除~~线演示 5号字黑体蓝色

这里的背景色是：MistyRosen，此处输入任意想输入的内容

上述要点可参考:[【Markdown语法】字体颜色大小及文字底色设置](https://blog.csdn.net/qq_43732429/article/details/108034518)

## 1.4 引用 ```markdown > Java > 二级引用演示 > MySQL > >外键 > > > >事务 > > > >**行级锁**(引用内部一样可以用格式) > > .... ``` > Java > 二级引用演示 > MySQL > >外键 > > > >事务 > > > >**行级锁**(引用内部一样可以用格式) > > .... ## 1.5 分割线 ```markdown --- *** ``` --- *** ## 1.6 列表(*,+,-跟空格都可以) ### 1.6.1 无序列表 ```markdown * Java * Python * ... + Java + Python + ... - Java - Python - ... ``` * Java * Python * ... + Java + Python + ... - Java - Python - ... ### 1.6.2 有序列表 ```markdown # 注意后面有空格 1. 2. 3. 4. ``` 1. 2. 3. 4. ## 1.7 图片 ```markdown # 本地图片 # 在线图片 ![code](https://www.csjs.eu.org/img/3.jpg) ``` 本地图片: 在线图片: ![code](https://www.csjs.eu.org/img/3.jpg) ## 1.8 表格 ```markdown | 项目标号 | 资金 | 备注 | | -------- | -------- | ---- | | 1 | 100，000 | 无 | | 2 | 200，000 | 无 | | 3 | 300,600 | 重要 | ``` | 项目标号 | 资金 | 备注 | | -------- | -------- | ---- | | 1 | 100，000 | 无 | | 2 | 200，000 | 无 | | 3 | 300,600 | 重要 | # 2.Butterfly外挂标签

这部分参考安知鱼:[基于Butterfly的外挂标签引入](https://anzhiy.cn/posts/7d58.html)

## 2.1 行内文本样式 text ```markdown ``` ```markdown 1. 带的文本 2. 带的文本 3. 带的文本 4. 带的文本 5. 键盘样式的文本 + 6. 密码样式的文本： ``` 1. 带的文本 2. 带的文本 3. 带的文本 4. 带的文本 5. 键盘样式的文本 + 6. 密码样式的文本： ## 2.2 行内文本 span ```markdown ``` 1. `字体`: logo, code 2. `颜色`: red,yellow,green,cyan,blue,gray 3. `大小`: small, h4, h3, h2, h1, large, huge, ultra 4. `对齐方向`: left, center, right ```markdown - 彩色文字在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。 ``` - 彩色文字在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。 ## 2.3 段落文本 p ```markdown ``` 1. `字体`: logo, code 2. `颜色`: red,yellow,green,cyan,blue,gray 3. `大小`: small, h4, h3, h2, h1, large, huge, ultra 4. `对齐方向`: left, center, right ```markdown - 彩色文字在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。 ``` - 彩色文字在一段话中方便插入各种颜色的标签，包括：、、、、、。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。 ## 2.4 引用note ```markdown note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style: simple icons: false border_radius: 3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 ``` ```markdown # 自带icon

Any content (support inline tags too.io).

# 外部icon

Any content (support inline tags too.io).

``` 1.自带icon | 参数 | 用法 | | ------- | :----------------------------------------------------------: | | class | 【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ） | | no-icon | 【可选】不显示 icon | | style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） | 2.外部icon | 参数 | 用法 | | ------- | :----------------------------------------------------------: | | class | 【可选】标识，不同的标识有不同的配色（ default / blue / pink / red / purple / orange / green ） | | no-icon | 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon ) | | style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） |

1.自带icon

1.`simple`样式 ```markdown

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

``` 2.`modern`样式 ```markdown

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

``` 3.`flat`样式 ```markdown

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

``` 4.`disabled`样式 ```markdown

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

``` 5.`no-icon`样式 ```markdown

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

```

2.外部icon

1.`simple`样式 ```markdown

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

``` 2.`modern`样式 ```markdown

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

``` 3.`flat`样式 ```markdown

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

``` 4.`disabled`样式 ```markdown

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

``` 5.`no-icon`样式 ```markdown

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

```

1.自带icon

1.`simple`样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

2.`modern`样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

3.`flat`样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

4.`disabled`样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

5.`no-icon`样式

默认提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

2.外部icon

1.`simple`样式

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

2.`modern`样式

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

3.`flat`样式

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

4.`disabled`样式

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

5.`no-icon`样式

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

## 2.5 上标标签 tip ```markdown

文本内容

``` 1. `样式`: success,error,warning,bolt,ban,home,sync,cogs,key,bell 2. `自定义图标`: 支持fontawesome。 ```markdown

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

```

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

## 2.6 动态标签 anima ```markdown

文本内容

```

1. 将所需的CSS类添加到图标（或DOM中的任何元素）。 2. 对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类`faa-parent animated-hover`。（详情见示例及示例源码） You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow 3. 可以通过给目标元素添加CSS类`faa-fast`或`faa-slow`来控制动画快慢。

1.On DOM load（当页面加载时显示动画） ```markdown

warning

ban

``` 2.调整动画速度 ```markdown

warning

ban

``` 3.On hover（当鼠标悬停时显示动画） ```markdown

warning

ban

``` 4.On parent hover（当鼠标悬停在父级元素时显示动画） ```markdown

warning

ban

``` 1.On DOM load（当页面加载时显示动画）

warning

ban

2.调整动画速度

warning

ban

3.On hover（当鼠标悬停时显示动画）

warning

ban

4.On parent hover（当鼠标悬停在父级元素时显示动画）

warning

ban

## 2.7 复选列表 checkbox ```markdown ``` 1. `样式`: plus, minus, times 2. `颜色`: red,yellow,green,cyan,blue,gray 3. `选中状态`: checked ```markdown ``` ## 2.8 单选列表 radio ```markdown ``` 1. `颜色`: red,yellow,green,cyan,blue,gray 2. `选中状态`: checked ```markdown ``` ## 2.9 时间轴 timeline ```markdown 正文内容正文内容 ``` 1. `title`:标题/时间线 2. `color`:`timeline`颜色:default(留空) / blue / pink / red / purple / orange / green ```markdown 1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。 2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。 3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。 4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。 5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。不需要额外处理。 1. 全局搜索 `seotitle` 并替换为 `seo_title`。 2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。 2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。 ``` 1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。 2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。 3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。 4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。 5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。不需要额外处理。 1. 全局搜索 `seotitle` 并替换为 `seo_title`。 2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。 2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。 ## 2.10 链接卡片 link ```markdown ``` ```markdown ``` ## 2.11 按钮 btns ```markdown ``` 1. 圆角样式：rounded, circle 2. 增加文字样式：可以在容器内增加 ``标题``和`

`描述文字`

` 3. 布局方式：默认为自动宽度，适合视野内只有一两个的情况。 | 参数 | 含义 | | ------ | -------------------------------------- | | wide | 宽一点的按钮 | | fill | 填充布局，自动铺满至少一行，多了会换行 | | center | 居中，按钮之间是固定间距 | | around | 居中分散 | | grid2 | 等宽最多2列，屏幕变窄会适当减少列数 | | grid3 | 等宽最多3列，屏幕变窄会适当减少列数 | | grid4 | 等宽最多4列，屏幕变窄会适当减少列数 | | grid5 | 等宽最多5列，屏幕变窄会适当减少列数 | 1.如果需要显示类似「团队成员」之类的一组含有头像的链接 ```markdown ``` 2.或者含有图标的按钮 ```markdown ``` 3.圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 ```markdown 心率管家 心率管家 ``` 1.如果需要显示类似「团队成员」之类的一组含有头像的链接 2.或者含有图标的按钮 3.圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 心率管家 心率管家 ## 2.12 github卡片 ghcard ```markdown ``` 使用`,`分割各个参数。写法为：`参数名=参数值` 以下只写几个常用参数值。 | **参数名** | 取值 | 释义 | | ------------- | ------------------------------------------------------------ | -------------------------------- | | hide | stars,commits,prs,issues,contribs | 隐藏指定统计 | | count_private | true | 将私人项目贡献添加到总提交计数中 | | show_icons | true | 显示图标 | | theme | 查阅:[Available Themes](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md) | 主题 | 1.用户信息卡片 ```markdown | | | | -- | -- | | | | | | | | | | ``` 2.仓库信息卡片 ```markdown | | | | -- | -- | | | | | | | | | | ``` 1.用户信息卡片 | | | | -- | -- | | | | | | | | | | 2.仓库信息卡片 | | | | -- | -- | | | | | | | | | | ## 2.13 github徽标 ghbdage ```markdown ``` 1. `left`：徽标左边的信息，必选参数。 2. `right`: 徽标右边的信息，必选参数， 3. `logo`：徽标图标，图标名称详见[simpleicons](https://simpleicons.org/)，可选参数。 4. `color`：徽标右边的颜色，可选参数。 5. `link`：指向的链接，可选参数。 6. `title`：徽标的额外信息，可选参数。主要用于优化SEO，但`object`标签不会像`a`标签一样在鼠标悬停显示`title`信息。 7. `option`：自定义参数，支持[shields.io](https://shields.io/)的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为`name1=value2&name2=value2`。 1.基本参数,定义徽标左右文字和图标 ```markdown ``` 2.信息参数，定义徽标右侧内容背景色，指向链接 ```markdown //如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割 ``` 3.拓展参数，支持shields的API的全部参数内容 ```markdown //如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割 ``` 1.基本参数,定义徽标左右文字和图标 2.信息参数，定义徽标右侧内容背景色，指向链接 //如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割 3.拓展参数，支持shields的API的全部参数内容 //如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割 ## 2.14 网站卡片 sites ```markdown ``` ```markdown ``` ## 2.15 行内图片 inlineimage ```markdown ``` 1. `高度`：height=20px ```markdown 这是一段话。这又是一段话。 ``` 这是一段话。这又是一段话。 ## 2.16 单张图片 image ```markdown ``` 1. 图片宽度高度：width=300px, height=32px 2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述） 3. 占位背景色：bg=#f2f2f2 1.添加描述： ```markdown ``` 2.指定宽度 ```markdown ``` 3.指定宽度并添加描述： ```markdown ``` 4.设置占位背景色： ```markdown ``` 1.添加描述： 2..指定宽度 3.指定宽度并添加描述： 4.设置占位背景色： ## 2.17 音频 audio ```markdown ``` ```markdown ``` ## 2.18 视频 video ```markdown ``` 1. `对齐方向`：left, center, right 2. `列数`：逗号后面直接写列数，支持 1 ～ 4 列。 1.100%宽度 ```markdown ``` 2.50%宽度 ```markdown ``` 3.25%宽度 ```markdown ``` 1.100%宽度 2.50%宽度 3.25%宽度 ## 2.19 相册 gallery 1.gallerygroup 相册图库 ```markdown

``` 2.gallery 相册 ```markdown markdown 圖片格式 ``` - gallerygroup 相册图库 | 参数名 | 释义 | | ----------- | -------------------- | | name | 图库名字 | | description | 图库描述 | | link | 链接到对应相册的地址 | | img-url | 图库封面 | - gallery 相册区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。**建议在粘贴时故意使用长短、大小、横竖不一的图片**，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕） 1.gallerygroup 相册图库 ```markdown

``` 2.gallery 相册 ```markdown ![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg) ![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg) ``` 1.gallerygroup 相册图库

2.gallery 相册 ![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg) ![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg) ## 2.20 折叠框 folding 1.gallerygroup 相册图库 ```markdown

标题

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

``` 1. `颜色`：blue, cyan, green, yellow, red 2. `状态`：状态填写 open 代表默认打开。 ```markdown

查看图片测试

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试

- haha - hehe

查看嵌套测试

hahaha

```

查看图片测试

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试

- haha - hehe

查看嵌套测试

hahaha

## 2.21 分栏 tab ```markdown Any content (support inline tags too). ``` 1. Unique name : - 选项卡块标签的唯一名称，不带逗号。 - 将在#id中用作每个标签及其索引号的前缀。 - 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。 - 仅当前帖子/页面的URL必须是唯一的！ 2. [index]: - 活动选项卡的索引号。 - 如果未指定，将选择第一个标签（1）。 - 如果index为-1，则不会选择任何选项卡。 - 可选参数。 3. [Tab caption]: - 当前选项卡的标题。 - 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。 - 如果未指定标题，但指定了图标，则标题将为空。 - 可选参数。 4. [@icon]: - FontAwesome图标名称（全名，看起来像“ fas fa-font”） - 可以指定带空格或不带空格； - 例如’Tab caption @icon’ 和 ‘Tab caption@icon’. - 可选参数。 1.Demo 1 - 预设选择第一个【默认】 ```markdown **This is Tab 1.** **This is Tab 2.** **This is Tab 3.** ``` 2.Demo 2 - 预设选择tabs ```markdown **This is Tab 1.** **This is Tab 2.** **This is Tab 3.** ``` 3.Demo 3 - 没有预设值 ```markdown **This is Tab 1.** **This is Tab 2.** **This is Tab 3.** ``` 4.Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名 ```markdown **tab名字为第一个Tab** **只有图标没有Tab名字** **名字+icon** ``` 1.Demo 1 - 预设选择第一个【默认】 **This is Tab 1.** **This is Tab 2.** **This is Tab 3.** 2.Demo 2 - 预设选择tabs **This is Tab 1.** **This is Tab 2.** **This is Tab 3.** 3.Demo 3 - 没有预设值 **This is Tab 1.** **This is Tab 2.** **This is Tab 3.** 4.Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名 **tab名字为第一个Tab** **只有图标没有Tab名字** **名字+icon** ## 2.22 诗词标签 poem ```markdown 诗词内容 ``` 1. `title`：诗词标题 2. `author`：作者，可以不写 ```markdown 丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。明月几时有？把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。 ``` 丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。明月几时有？把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。 ## 2.23 阿里图标 icon ```markdown ``` 1. `icon-xxxx`：表示图标`font-class`,可以在自己的阿里矢量图标库项目的`font-class`引用方案内查询并复制。 2. `font-size`：表示图标大小，直接填写数字即可，单位为`em`。图标大小默认值为`1em`。 ```markdown ``` ## 2.24 特效标签wow ```markdown 内容 ``` 1. `animate`: 动画样式，效果详见[animate.css参考文档](https://animate.style/) 2. `duration`: 选填项，动画持续时间，单位可以是`ms`也可以是`s`。例如`3s`，`700ms`。 3. `delay`: 选填项，动画开始的延迟时间，单位可以是`ms`也可以是`s`。例如`3s`，`700ms`。 4. `offset`: 选填项，开始动画的距离（相对浏览器底部） 5. `iteration`: 选填项，动画重复的次数 1.flip动画效果。 ```markdown

`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次

``` 2.zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次 ```markdown

`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次

``` 3.slideInRight动画效果，持续5s，延时5s ```markdown

`slideInRight`动画效果，持续`5s`，延时`5s`。

``` 4.heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。 ```markdown

`heartBeat`动画效果，延时`5s`，重复`10`次。

``` 1.flip动画效果。

`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次

2.zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次

`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次

3.slideInRight动画效果，持续5s，延时5s

`slideInRight`动画效果，持续`5s`，延时`5s`。

4.heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。

`heartBeat`动画效果，延时`5s`，重复`10`次。

## 2.25 进度条 progress

进度条标签参考[沂佰孜猫-给HEXO文章添加彩色进度条](https://rongbuqiu.com/jdt.html)。源样式提取自[Cuteen](https://zwying0814.gitbook.io/cuteen/)主题。

color

content

``` 1. content：要隐藏的内容 2. display：展示前按钮显示的文字（可选） 3. bg：按钮的背景颜色（可选） 4. color：按钮显示的文字的颜色（可选） ```markdown

blue

这里有张图片：

```

blue

这里有张图片：

博客魔改教程一

Thu, 16 Feb 2023 11:31:19 GMT

魔改前请备份，要不然出错了又不知道怎么改就完啦！！！

### vscode 写博客或者魔改配置建议使用[vscode](https://code.visualstudio.com/)目前我也在用文章中出现的_config.butterfly.yml是node_modules/hexo-butterfly文件里面的config复制过来并改名的，关于主题的修改可以直接在里面改 ### 外挂标签引入（店长）

查看教程

参考：[教程原帖](https://akilar.top/posts/615e2dec/) 1. 在博客目录打开git bush并运行以下命令： ```bash npm install hexo-butterfly-tag-plugins-plus --save npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save ``` 2. 在_config.yml添加以下配置 ```yml # tag-plugins-plus # see https://akilar.top/posts/615e2dec/ tag_plugins: enable: true # 开关 priority: 5 #过滤器优先权 issues: false #issues标签依赖注入开关 link: placeholder: /img/link.png #link_card标签默认的图标图片 CDN: anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖 jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖 issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖 iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/ carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css ```

### live2d（店长）

查看教程

参考：[教程原帖](https://akilar.top/posts/5b8f515f/) #### 安装 1. 我个人不推荐装live2d，除非特别喜欢或者有特殊需求 2. 在博客目录打开git bush并运行以下命令： ```bash npm install --save hexo-helper-live2d ``` 3. 打开_config.yml搜索Live2D，并修改成以下配置（如没有，请在最底部添加） ```bash # Live2D ## https://github.com/EYHN/hexo-helper-live2d live2d: enable: true #开关插件版看板娘 scriptFrom: local # 默认 pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径) pluginJsPath: lib/ # 脚本文件相对与插件根目录路径 pluginModelPath: assets/ # 模型文件相对与插件根目录路径 # scriptFrom: jsdelivr # jsdelivr CDN # scriptFrom: unpkg # unpkg CDN # scriptFrom: https://npm.elemecdn.com/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://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url display: position: right #控制看板娘位置 width: 150 #控制看板娘大小 height: 300 #控制看板娘大小 mobile: show: true # 手机中是否展示 ``` 完成后进行hexo三连 ```bash hexo cl;hexo g;hexo s ``` #### 卸载live2d ```bash npm uninstall hexo-helper-live2d #卸载看板娘插件 npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称 ``` 为了保证不出错，`_config.yml`里的配置项给删掉

### violet留言板（店长）

查看教程

blue

详见：[信笺样式留言板](https://akilar.top/posts/e2d3c450/)

1. 在博客目录运行命令 ```bash npm install hexo-butterfly-envelope --save ``` 在站点配置文件`_config.yml`添加以下代码 ```yml # 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 ```

### 一图流

查看教程

blue

1. 在博客主目录source文件夹下再创建一个css文件夹，该文件夹用于存放自定义的css样式，再新建一个名为`custom.css`，在里面写入以下代码： ```css /* 页脚与头图透明 */ #footer{ background-color: rgba(0, 0, 0, .25) !important; } #page-header { background: transparent !important; } :root { --card-bg: rgba(255, 255, 255, 0.91); } ``` 如果不想要我这样的透明遮罩的话就用以下配置： ```css /* 页脚与头图透明 */ #footer { background: transparent !important; } #page-header { background: transparent !important; } /* 白天模式遮罩透明 */ #footer::before { background: transparent !important; } #page-header::before { background: transparent !important; } /* 夜间模式遮罩透明 */ [data-theme="dark"] #footer::before { background: transparent !important; } [data-theme="dark"] #page-header::before { background: transparent !important; } ``` 2. 在主题配置文件`_config.butterfly.yml`文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法） ```yml inject: head: - ``` 3. 在主题配置文件`_config.butterfly.yml`文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载 ```yml # The banner image of home page index_img: # Footer Background footer_img: false ``` 4. 如果你改完一图流之后背景图不显示的话请在主题配置文件`_config.butterfly.yml`文件中的background配置项设置背景图 ```yml background: url(https://mccsjs.eu.org/img/m.png/) ```

### 首页分类磁贴（小冰）

查看教程

详见：[原帖](https://zfe.space/post/hexo-magnet.html)

blue

这个插件主要实现了以下功能： 1. 自定义 tags 或 categories 的排列和展示 2. 自定义 tags 或 categories 的展示图标，名称 3. 自定义排列的行数，默认 2 行在博客根目录下打开终端，运行以下指令： ```bash npm i hexo-magnet --save ``` 一定要加`--save`，不然本地预览的时候可能不会显示！！！教程： 1. 在网站配置文件`_config.yml`新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应： ```bash magnet: enable: true priority: 1 enable_page: / # 显示的页面 type: categories #加以识别的，可以为tag devide: 2 #默认2列展示 display: - name: 教程 display_name: 小冰の魔改教程 icon: 📚 - name: 游戏评测 display_name: 小冰の游戏评测 icon: 🎮 - name: 生活趣闻 display_name: 小冰の生活趣闻 icon: 🐱‍👓 - name: vue display_name: 小冰の编程学习 icon: 👩‍💻 - name: 学习 display_name: 小冰の读书笔记 icon: 📒 - name: 随想 display_name: 小冰の胡思乱想 icon: 💡 color_setting: text_color: black text_hover_color: white background_color: "#f2f2f2" background_hover_color: "#b30070" layout: type: id name: recent-posts index: 0 temple_html: '

${temple_html_item}

' plus_style: "" ``` 2. 黑夜模式下看起来特别的别扭，还要做一下黑夜模式的颜色适配，在`custom.css`文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)： ```bash /* 小冰分类分类磁铁黑夜模式适配 */ /* 一般状态 */ [data-theme="dark"] .magnet_link_context { background: #1e1e1e; color: antiquewhite; } /* 鼠标悬浮状态 */ [data-theme="dark"] .magnet_link_context:hover { background: #3ecdf1; color: #f2f2f2; } ```

### 文章置顶滚动栏(店长)

查看教程

blue

详见：[Swiper Bar](https://akilar.top/posts/8e1264d1/)

1. 安装插件,在博客根目录下打开终端，运行以下指令： ```bash npm install hexo-butterfly-swiper --save ``` 2. 添加配置信息，在站点配置文件_config.yml下添加 ```bash # hexo-butterfly-swiper # see https://akilar.top/posts/8e1264d1/ swiper: enable: true # 开关 priority: 5 #过滤器优先权 enable_page: all # 应用页面 timemode: date #date/updated layout: # 挂载容器类型 type: id name: recent-posts index: 0 default_descr: 再怎么看我也不知道怎么描述它的啦！ swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖 swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖 custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁 custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法 ``` 3. 使用方法:在文章的front_matter中添加swiper_index配置项即可。 ```markdown --- title: 文章标题 date: 创建日期 updated: 更新日期 cover: 文章封面 description: 文章描述 swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前 --- ```

### 自定义字体(老版本，新版看下面)

查看教程

声明：非商免字体未经授权仅限个人使用，不得用于商业用途！推荐找一些免费可商业字体使用

1. 准备好字体文件后，在source/css/custom.css（没有就自己创建）中添加以下代码： ```css @font-face { /* 为载入的字体取名字(随意) */ font-family: 'neko'; /* 字体文件地址(相对或者绝对路径都可以) */ src: url(/font/neko.woff2); /* 定义加粗样式(加粗多少) */ font-weight: normal; /* 定义字体样式(斜体/非斜体) */ font-style: normal; /* 定义显示样式 */ font-display: block; } ``` 支持格式：*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2(推荐) 2. 在主题配置文件_config.butterfly.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体： ```bash # Global font settings # Don't modify the following settings unless you know how they work (非必要不要修改) font: global-font-size: '15px' code-font-size: '14px' font-family: neko, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif; code-font-family: Consolas, YSHST, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif # 左上角網站名字主頁居中網站名字 blog_title_font: font_link: font-family: neko, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif ``` 3. 重启项目就能看到了 ```bash hexo cl;hexo s ```

### wowjs动画

查看教程

blue

详见：[Add Blog Animation – Wowjs](https://akilar.top/posts/abab51cf/)

1. 安装插件,在博客根目录下打开终端，运行以下指令： ```bash npm install hexo-butterfly-wowjs --save ``` 2. 在站点配置文件_config.yml添加： ```yml wowjs: enable: true #控制动画开关。true是打开，false是关闭 priority: 10 #过滤器优先级 mobile: false #移动端是否启用，默认移动端禁用 animateitem: - class: recent-post-item #必填项，需要添加动画的元素的class style: animate__zoomIn #必填项，需要添加的动画 duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。 delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。 offset: 100 #选填项，开始动画的距离（相对浏览器底部） iteration: 1 #选填项，动画重复的次数 - class: card-widget style: animate__zoomIn animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js ``` hexo cl;hexo s看看效果

### 自定义字体

查看教程

1. 在/source新建一个/font文件夹，把你的字体扔进去，在/source/css新建一个font.css ```css /* 引入全局字体（b.woff2） */ @font-face { font-family: 'MyCustomFont'; src: url('/font/b.woff2') format('opentype'); /* otf字体，ttf把format改成truetype */ font-weight: normal; font-style: normal; } /* 引入代码字体（shaonv.ttf） */ @font-face { font-family: 'MyCodeFont'; src: url('/font/neko.woff2') format('truetype'); /* ttf字体，otf把format改成opentype */ font-weight: normal; font-style: normal; } /* 设置全局字体 */ body { font-family: 'MyCustomFont', "Georgia", "Arial", sans-serif; font-size: 16px; } /* 设置代码字体 */ code, pre { font-family: 'MyCodeFont', "Fira Code", "Courier", monospace; font-size: 16px; } ``` 2. 引入css并设置字体编辑_config.butterfly.yml ```yml # Inject # Insert the code to head (before '' tag) and the bottom (before '' tag) # 插入代码到头部之前和底部之前 inject: head: - ``` 字体部分 ```yml font: global-font-size: 16px code-font-size: 15px font-family: MyCustomFont, "Georgia", "Arial", sans-serif code-font-family: MyCodeFont, "Fira Code", "Courier", monospace ``` ```bash 之后hexo cl;hexo s ``` 看看效果

文章永久链接

Mon, 13 Feb 2023 02:48:26 GMT

前言

HEXO默认的文章链接格式是

year/:month/:day/:title/

这样子链接生成出来是https://hexo.seln.cn/2023/01/25/jc/markdown/ 这样的链接很长，而且改一次标题他就会随着改变，链接也失效了

安装插件

在博客根目录用git bash安装以下插件

npm install hexo-abbrlink --save

安装完成后，打开博客根目录下的_config.yml，修改以下配置：

permalink: posts/:abbrlink/  # 此处可以自己设置，也可以直接使用 :abbrlink/
permalink_defaults: 
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

我这种是域名/文件夹/文章的方法，例hexo.seln.cn/posts/e7f6bd97 你也可以设置成permalink: /:abbrlink/,链接就会变成这样hexo.seln.cn/abcd/

接下来hexo 三连即可看到成品

hexo cl;hexo g;hexo d
或者
hexo cl;hexo g;hexo s

博客迁移到新电脑

Mon, 13 Feb 2023 00:55:57 GMT

前言

因为怕自己忘了，写个教程记录一下

环境搭建

node安装

官网下载最新版就行，目前最新的19版本没有不兼容问题node官网链接可以更换淘宝源，速度更快

npm config set registry https://registry.npm.taobao.org

安装git

由于官网下载速度难顶，用淘宝源最新的链接配置用户名和邮箱

git config --global user.name 用户名
git config --global user.email 邮箱

通过git config -l检查是否配置成功

安装HEXO

在Git BASH输入命令安装

npm install -g hexo-cli

连接Github

执行命令生成ssh公钥，连接Github

ssh-keygen -t rsa -C 邮箱

打开C盘下用户文件夹下的.ssh的文件夹，会看到 id_rsa.pub 用记事本打开id_rsa.pub，复制里面的内容，在github中配置ssh密钥。（设置-ssh and key）

通过以下命令确认是否连接成功

ssh -T git@github.com

出现连接到账户的信息就行

安装依赖

1.把我的源码解压下来后输入

npm i

进行初始化 2.安装 hexo-deployer-git

npm install hexo-deployer-git --save

3.现在已经完成了，hexo三连试试效果

hexo cl;hexo g;hexo d

mccsjs

域名备案中，部分组件和服务可能无法使用

什么是Agent，它能干什么

AI 和 Agent 到底有什么区别？

Agent 为什么一下子火了？

Agent 能做什么？

近期

最近一个月太忙了，都没时间管理博客，回来发现博客加载不起来了 最后发现是cdn证书过期了，更换了就恢复了🤪

新年快乐，马到成功

2026星河长明，步履不停

利用Cloudflare自建图床并套入cdn

Cloudflare部署

📂 第一步：Fork 项目

🏗️ 第二步：创建 Pages 项目

2.1 访问 Cloudflare Dashboard

2.2 连接 GitHub 仓库

2.3 配置项目设置

2.4 部署项目

🗄️ 第三步：配置数据库

创建 KV 命名空间

绑定 KV 到项目

创建 D1 数据库

初始化 D1 数据库

绑定 D1 到项目

🔄 第四步：重新部署

第五步：绑定域名

加入EO CDN

操作

配置存储渠道

访问管理后台

配置 Telegram 渠道

2.1 获取 TG_BOT_TOKEN

2.2 获取 TG_CHAT_ID

2.3 配置 Telegram

配置 R2 渠道

🔒 安全设置

认证管理

上传管理

图像审查

moderatecontent.com

安全设置

🌐 网页设置

部署完成

给博客大部分图标更换成iconfont【hexo-butterfly】

使用方法

修改

关于今天提交博客时遇到的问题

理清报错，LF和CRLF的差异

警告“LF将被CRLF替换”是什么意思？

解决警告“LF将被CRLF替换”的方法

方法一：禁用自动替换LF为CRLF

方法二：在项目中设置替换规则

方法三：使用.gitattributes文件

省流

关于首页文章双栏、文心一言（hexo-butterfly）

双栏实现方法

关于文心一言

关于文章图片放大功能

博客配置追番页面【hexo-butterfly】

安装插件

配置

使用方法

手动添加数据

twikoo配置邮箱和即时提醒

QQ即时通知

邮箱提醒

结束

本站已公安联网备案，关于备案流程

前提条件

个人网站公安联网备案

App公安联网备案

本站已成功备案，关于备案的材料

关于备案

备案所需材料

购买服务器后备案

步骤二：准备备案材料， 开始网站备案

步骤三：使用京东云APP进行电子核验

步骤四：京东云初审

步骤五：完成工信部短信核验

步骤六：管局审核通过

最近一个月太忙了，都没时间管理博客，回来发现博客加载不起来了最后发现是cdn证书过期了，更换了就恢复了🤪

步骤二：准备备案材料，开始网站备案

步骤二：准备备案材料，开始增加网站

步骤二：准备备案材料，点击“变更类操作”进行变更