commit a39e3f25bbabbe4fc40e51f8c6800117435c9439 Author: biss Date: Wed Feb 18 15:25:54 2026 +0800 update hook ··[CST 2026-02-18 Wednesday 15:25:54] diff --git a/404.html b/404.html new file mode 100644 index 0000000..a40202c --- /dev/null +++ b/404.html @@ -0,0 +1,412 @@ +Bi's Blog | Bi's Blog + + + + + + + + +

Bi's Blog

Page not found

404

Page Not Found
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/C5EC3CAE4FD14AD69AECF56219B47A0A b/C5EC3CAE4FD14AD69AECF56219B47A0A new file mode 100644 index 0000000..dd38c86 --- /dev/null +++ b/C5EC3CAE4FD14AD69AECF56219B47A0A @@ -0,0 +1 @@ +C5EC3CAE4FD14AD69AECF56219B47A0A \ No newline at end of file diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..4c38e8b --- /dev/null +++ b/about/index.html @@ -0,0 +1,414 @@ +关于 | Bi's Blog + + + + + + + + + + +

关于

复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换阅读模式隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2025/08/index.html b/archives/2025/08/index.html new file mode 100644 index 0000000..7f22041 --- /dev/null +++ b/archives/2025/08/index.html @@ -0,0 +1,558 @@ +八月 2025 | Bi's Blog + + + + + + + + +

八月 2025

+
全部文章 - 18
2025
Cudy TR3000刷入Openwrt系统
Cudy TR3000刷入Openwrt系统
搭建Owncloud并集成Onlyoffice
搭建Owncloud并集成Onlyoffice
为博客添加CMS系统
为博客添加CMS系统
为1Panel添加自己想要的应用
为1Panel添加自己想要的应用
使用GitHub推送Hexo到服务器
使用GitHub推送Hexo到服务器
C# 基本语法
C# 入门
C# 入门
自定义页脚（新）
自定义页脚（新）
自定义分类条
自定义导航栏
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2025/08/page/2/index.html b/archives/2025/08/page/2/index.html new file mode 100644 index 0000000..6802bf4 --- /dev/null +++ b/archives/2025/08/page/2/index.html @@ -0,0 +1,558 @@ +八月 2025 | Bi's Blog + + + + + + + + +

八月 2025

+
全部文章 - 18
2025
利用 SiteMap 随机访问站内页面
利用 SiteMap 随机访问站内页面
博客添加AI总结
博客添加AI总结
利用插件自定义页脚菜单
利用插件自定义页脚菜单
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
自定义右键菜单
自定义右键菜单
在侧边栏中添加欢迎信息
在侧边栏中添加欢迎信息
配置说说页面
配置说说页面
部署历程
部署历程
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2025/09/index.html b/archives/2025/09/index.html new file mode 100644 index 0000000..8e1da21 --- /dev/null +++ b/archives/2025/09/index.html @@ -0,0 +1,558 @@ +九月 2025 | Bi's Blog + + + + + + + + +

九月 2025

+
全部文章 - 2
2025
在Openwrt上安装AdguardHome
在Openwrt上安装AdguardHome
在Openwrt中安装OpenClash
在Openwrt中安装OpenClash
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2025/10/index.html b/archives/2025/10/index.html new file mode 100644 index 0000000..42279f6 --- /dev/null +++ b/archives/2025/10/index.html @@ -0,0 +1,558 @@ +十月 2025 | Bi's Blog + + + + + + + + +

十月 2025

+
全部文章 - 2
2025
Adguard和Openclash共存
Adguard和Openclash共存
Adguard规则分享
Adguard规则分享
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2025/index.html b/archives/2025/index.html new file mode 100644 index 0000000..ff3c433 --- /dev/null +++ b/archives/2025/index.html @@ -0,0 +1,558 @@ +2025 | Bi's Blog + + + + + + + + +

2025

+
全部文章 - 22
2025
Adguard和Openclash共存
Adguard和Openclash共存
Adguard规则分享
Adguard规则分享
在Openwrt上安装AdguardHome
在Openwrt上安装AdguardHome
在Openwrt中安装OpenClash
在Openwrt中安装OpenClash
Cudy TR3000刷入Openwrt系统
Cudy TR3000刷入Openwrt系统
搭建Owncloud并集成Onlyoffice
搭建Owncloud并集成Onlyoffice
为博客添加CMS系统
为博客添加CMS系统
为1Panel添加自己想要的应用
为1Panel添加自己想要的应用
使用GitHub推送Hexo到服务器
使用GitHub推送Hexo到服务器
C# 基本语法
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2025/page/2/index.html b/archives/2025/page/2/index.html new file mode 100644 index 0000000..b77bad3 --- /dev/null +++ b/archives/2025/page/2/index.html @@ -0,0 +1,558 @@ +2025 | Bi's Blog + + + + + + + + +

2025

+
全部文章 - 22
2025
C# 入门
C# 入门
自定义页脚（新）
自定义页脚（新）
自定义分类条
自定义导航栏
利用 SiteMap 随机访问站内页面
利用 SiteMap 随机访问站内页面
博客添加AI总结
博客添加AI总结
利用插件自定义页脚菜单
利用插件自定义页脚菜单
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
自定义右键菜单
自定义右键菜单
在侧边栏中添加欢迎信息
在侧边栏中添加欢迎信息
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2025/page/3/index.html b/archives/2025/page/3/index.html new file mode 100644 index 0000000..898c867 --- /dev/null +++ b/archives/2025/page/3/index.html @@ -0,0 +1,558 @@ +2025 | Bi's Blog + + + + + + + + +

2025

+
全部文章 - 22
2025
配置说说页面
配置说说页面
部署历程
部署历程
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2026/01/index.html b/archives/2026/01/index.html new file mode 100644 index 0000000..112be96 --- /dev/null +++ b/archives/2026/01/index.html @@ -0,0 +1,558 @@ +一月 2026 | Bi's Blog + + + + + + + + +

一月 2026

+
全部文章 - 3
2026
自定义字体
自定义字体
在侧边栏添加日历和倒计时
在侧边栏添加日历和倒计时
和朋友们的故事
和朋友们的故事
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2026/02/index.html b/archives/2026/02/index.html new file mode 100644 index 0000000..4e7ac44 --- /dev/null +++ b/archives/2026/02/index.html @@ -0,0 +1,558 @@ +二月 2026 | Bi's Blog + + + + + + + + +

二月 2026

+
全部文章 - 5
2026
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/2026/index.html b/archives/2026/index.html new file mode 100644 index 0000000..7b8553a --- /dev/null +++ b/archives/2026/index.html @@ -0,0 +1,558 @@ +2026 | Bi's Blog + + + + + + + + +

2026

+
全部文章 - 8
2026
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
自定义字体
自定义字体
在侧边栏添加日历和倒计时
在侧边栏添加日历和倒计时
和朋友们的故事
和朋友们的故事
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/index.html b/archives/index.html new file mode 100644 index 0000000..d2261b8 --- /dev/null +++ b/archives/index.html @@ -0,0 +1,558 @@ +存档 | Bi's Blog + + + + + + + + +

存档

+
全部文章 - 30
2026
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
自定义字体
自定义字体
在侧边栏添加日历和倒计时
在侧边栏添加日历和倒计时
和朋友们的故事
和朋友们的故事
2025
Adguard和Openclash共存
Adguard和Openclash共存
Adguard规则分享
Adguard规则分享
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/page/2/index.html b/archives/page/2/index.html new file mode 100644 index 0000000..b3beefb --- /dev/null +++ b/archives/page/2/index.html @@ -0,0 +1,558 @@ +存档 | Bi's Blog + + + + + + + + +

存档

+
全部文章 - 30
2025
在Openwrt上安装AdguardHome
在Openwrt上安装AdguardHome
在Openwrt中安装OpenClash
在Openwrt中安装OpenClash
Cudy TR3000刷入Openwrt系统
Cudy TR3000刷入Openwrt系统
搭建Owncloud并集成Onlyoffice
搭建Owncloud并集成Onlyoffice
为博客添加CMS系统
为博客添加CMS系统
为1Panel添加自己想要的应用
为1Panel添加自己想要的应用
使用GitHub推送Hexo到服务器
使用GitHub推送Hexo到服务器
C# 基本语法
C# 入门
C# 入门
自定义页脚（新）
自定义页脚（新）
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/archives/page/3/index.html b/archives/page/3/index.html new file mode 100644 index 0000000..320c75e --- /dev/null +++ b/archives/page/3/index.html @@ -0,0 +1,558 @@ +存档 | Bi's Blog + + + + + + + + +

存档

+
全部文章 - 30
2025
自定义分类条
自定义导航栏
利用 SiteMap 随机访问站内页面
利用 SiteMap 随机访问站内页面
博客添加AI总结
博客添加AI总结
利用插件自定义页脚菜单
利用插件自定义页脚菜单
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
自定义右键菜单
自定义右键菜单
在侧边栏中添加欢迎信息
在侧边栏中添加欢迎信息
配置说说页面
配置说说页面
部署历程
部署历程
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/atom.xml b/atom.xml new file mode 100644 index 0000000..e7e0ca5 --- /dev/null +++ b/atom.xml @@ -0,0 +1,547 @@ + + + Bi's Blog + https://blog.biss.click/icon.png + + + + + 2026-02-18T07:25:26.766Z + https://blog.biss.click/ + + + biss + + + + Hexo + + + 新年快乐！ + + https://blog.biss.click/posts/5785bd01/ + 2026-02-13T22:56:18.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>各位亲朋好友、合作伙伴及屏幕前的你：</p> +<p>值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下：</p> +<p>一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。</p> +< + + + + + + + + + + + + 添加网站左上角菜单 + + https://blog.biss.click/posts/7e921903/ + 2026-02-09T23:11:14.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。</p> +<div class='liushen-tag-link'><a class="tag-Link" target="_blank" + + + + + + + + + + + + + + 将博客仓库转移到gitea + + https://blog.biss.click/posts/d2c8521/ + 2026-02-07T04:30:39.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>在上一篇文章中已经完成了gitea的安装<br>那么博客源码迁移倒是没问题，直接<code>git remote add origin</code>就行，但是action文件就有些变更。<br>这是我修改的action文件：</p> +<figure + + + + + + + + + + + + + + 安装gitea + + https://blog.biss.click/posts/34725d47/ + 2026-02-06T22:32:04.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）<br>PS:我的服务器为2C2G</p> +<h1 id="安装gitea"><a href="#安装gitea" class="headerlink" + + + + + + + + + + + + + + 添加typesense搜索 + + https://blog.biss.click/posts/f287c563/ + 2026-02-05T05:14:16.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>最近在构建班级博客，用<code>ghost cms</code>，在构建搜索时发现了typesense，所以把他移植到这个博客上。</p> +<h1 id="安装typesense"><a href="#安装typesense" class="headerlink" + + + + + + + + + + + + + + 自定义字体 + + https://blog.biss.click/posts/b5601a7e/ + 2026-01-15T23:47:15.000Z + 2026-02-18T07:25:26.762Z + + + + + + + <p>今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示</p> +<div class="note no-icon + + + + + + + + + + + + + + 在侧边栏添加日历和倒计时 + + https://blog.biss.click/posts/5ed2f1e6/ + 2026-01-15T23:47:07.000Z + 2026-02-18T07:25:26.762Z + + + + + + + <p>突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）<br>效果图：</p> +<center><img src="https://pic.biss.click/image/b9819d72-3496-4204-9b7d-07d82e2e2f1b.webp" + + + + + + + + + + + + + + 和朋友们的故事 + + https://blog.biss.click/posts/a31d95d9/ + 2026-01-05T05:14:16.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>最近一直忙于学习（<del>虽然也没怎么好好学</del>），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。<br>因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年 + + + + + + + + + + + + + + Adguard和Openclash共存 + + https://blog.biss.click/posts/66e66374/ + 2025-10-05T07:18:00.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>在之前已经安装了<code>Openwrt</code>系统，并且也配置了<code>OpenClash</code>和<code>AdguardHome</code>，两者的原理简单看都是劫持<code>DNS</code>，所以两者要同时运行，必须经过一定的配置。<br + + + + + + + + + + + + + + + + + + Adguard规则分享 + + https://blog.biss.click/posts/69b16001/ + 2025-10-05T04:18:00.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>众所周知，<code>Adguardhome</code>是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则：</p> +<ol> +<li>一个综合的过滤规则 <div class='liushen-tag-link'><a + + + + + + + + + + + + + + + + 在Openwrt上安装AdguardHome + + https://blog.biss.click/posts/b57500e9/ + 2025-09-28T09:10:18.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>接续前言，<code>AdguardHome</code>是一款广告拦截软件，有了一台小软路由后就开始折腾了。</p> +<h1 id="安装"><a href="#安装" class="headerlink" + + + + + + + + + + + + + + + + 在Openwrt中安装OpenClash + + https://blog.biss.click/posts/2b2fb1a7/ + 2025-09-02T13:00:00.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。</p> +<h1 + + + + + + + + + + + + + + + + Cudy TR3000刷入Openwrt系统 + + https://blog.biss.click/posts/8802e397/ + 2025-08-31T12:15:00.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>最近搞到了一台<code>Cudy-TR3000</code>路由器，用来进行科学上网（小猫咪），先记录一下刷写<code>Openwrt</code>系统的过程。</p> +<h1 id="下载固件"><a href="#下载固件" class="headerlink" + + + + + + + + + + + + + + 搭建Owncloud并集成Onlyoffice + + https://blog.biss.click/posts/59c8572a/ + 2025-08-26T06:27:00.000Z + 2026-02-18T07:25:26.762Z + + + + + + + <h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><p>因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。</p> +<h1 + + + + + + + + + + + + + + 为博客添加CMS系统 + + https://blog.biss.click/posts/3a26a97a/ + 2025-08-25T14:03:00.000Z + 2025-08-26T00:01:00.000Z + + + + + + + <h1 id="序言"><a href="#序言" class="headerlink" + + + + + + + + + + + + + + 为1Panel添加自己想要的应用 + + https://blog.biss.click/posts/bb18d851/ + 2025-08-19T02:43:16.000Z + 2026-02-18T07:25:26.762Z + + + + + + + <p>记录一下自己为1Panel贡献自己应用的经历</p> +<h1 id="预准备"><a href="#预准备" class="headerlink" title="预准备"></a>预准备</h1><ol> +<li>Fork仓库 <div + + + + + + + + + + + + + + 使用GitHub推送Hexo到服务器 + + https://blog.biss.click/posts/ce1ec3fe/ + 2025-08-18T09:10:18.000Z + 2026-02-18T07:25:26.766Z + + + + + + + <p>1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。</p> +<h1 id="建立GitHub仓库"><a href="#建立GitHub仓库" class="headerlink" + + + + + + + + + + + + + + C# 基本语法 + + https://blog.biss.click/posts/e9a8e898/ + 2025-08-16T10:01:10.000Z + 2026-02-18T07:25:26.762Z + + + + + + + <h1 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h1><p>C# + + + + + + + + + + + + + + C# 入门 + + https://blog.biss.click/posts/bc56f789/ + 2025-08-15T01:56:17.000Z + 2026-02-18T07:25:26.762Z + + + + + + + <p>今天开始学习C#</p> +<h1 id="环境安装"><a href="#环境安装" class="headerlink" title="环境安装"></a>环境安装</h1><p>下载Visual Studio,社区版就可以</p> +<div + + + + + + + + + + + + + + 自定义页脚（新） + + https://blog.biss.click/posts/c6143ad3/ + 2025-08-14T09:05:27.000Z + 2026-02-18T07:25:26.762Z + + + + + + + <h1 id="添加CSS"><a href="#添加CSS" class="headerlink" title="添加CSS"></a>添加CSS</h1><div class="note warning 1 + + + + + + + + + + + + + diff --git a/categories/index.html b/categories/index.html new file mode 100644 index 0000000..5a91a23 --- /dev/null +++ b/categories/index.html @@ -0,0 +1,487 @@ +分类 | Bi's Blog + + + + + + + + + + +

分类

+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换阅读模式隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/categories/learning/index.html b/categories/learning/index.html new file mode 100644 index 0000000..f64fb3c --- /dev/null +++ b/categories/learning/index.html @@ -0,0 +1,450 @@ +分类: 学习 | Bi's Blog + + + + + + + + +

学习

C# 基本语法
发表于|学习
简介C# 是一种面向对象的编程语言。在面向对象的程序设计方法中，程序由各种相互交互的对象组成。相同种类的对象通常具有相同的类型，或者说，是在相同的 class 中。 例如，以 Rectangle（矩形）对象为例。它具有 length 和 width 属性。根据设计，它可能需要接受这些属性值、计算面积和显示细节。 实例 123456789101112131415161718192021222324252627282930313233343536using System;namespace RectangleApplication{ class Rectangle { // 成员变量 double length; double width; public void Acceptdetails() { length = 4.5; width = 3.5; } public double ...
C# 入门
C# 入门
发表于|学习
今天开始学习C# 环境安装下载Visual Studio,社区版就可以 🪧引用站外地址，不保证站点的可用性和安全性 Visual Studio Visual Studio 下载的是安装器选择.Net桌面开发，注意修改安装位置 第一个程序123456789101112131415using System;namespace HelloWorldApplication{ /* 类名为 HelloWorld */ class HelloWorld { /* main函数 */ static void Main(string[] args) { /* 我的第一个 C# 程序 */ Console.WriteLine("Hello World!"); C...
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
英语文章分享-去奋力生活吧，就好像死亡近在咫尺
发表于|学习
As a hospice doctor, I often have the privilege of being at the bedside of dying patients.Over the years, I’ve had countless conversations about lives well lived, and more often, about regrets.Many of my patients express a strikingly similar sentiment:I really regret that I never had the energy or time to…The rest of the sentence varies.For one, it might be writing a book.For another, traveling to a far-off land.For someone else, maybe it’s training for a favorite sport.The specifics change, ...
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/categories/miscellaneous/index.html b/categories/miscellaneous/index.html new file mode 100644 index 0000000..3d3071d --- /dev/null +++ b/categories/miscellaneous/index.html @@ -0,0 +1,450 @@ +分类: 杂谈 | Bi's Blog + + + + + + + + +

杂谈

和朋友们的故事
和朋友们的故事
发表于|杂谈
最近一直忙于学习（虽然也没怎么好好学），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年开始就断断续续地给朋友们写信，这是一些挂号信收据： 这应该是去年上半年的一张图片，下半年也在零散的发，只不过下半年比较忙，没发多少。到年底的时候呢又想着写一点贺年信，当然感觉自己的水平下降，写不出什么好的文章。于是开始着手准备电子版贺卡，当然完全使用了AI工具，自己写太麻烦，也没什么精力去写，于是就有了下面的电子贺卡： 之后呢，又写了其他一些有趣的功能，但好像不是这篇文章的重点； 再写信和创作电子贺卡是感慨万分，进入大学之后时间似乎变得十分快，感觉除了几个天天联系的好友之外，其他人都慢慢疏远了，不过这也是必然的事情，也没什么可悲伤的，只是感慨罢了。 怎么说，就这样吧，下次有时间再在这篇文章里更新。
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/categories/technology/index.html b/categories/technology/index.html new file mode 100644 index 0000000..b001c68 --- /dev/null +++ b/categories/technology/index.html @@ -0,0 +1,450 @@ +分类: 技术 | Bi's Blog + + + + + + + + +

技术

将博客仓库转移到gitea
将博客仓库转移到gitea
发表于|技术
在上一篇文章中已经完成了gitea的安装那么博客源码迁移倒是没问题，直接git remote add origin就行，但是action文件就有些变更。这是我修改的action文件： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556name: 自动部署on: push: branches: - master release: types: - published workflow_dispatch:env: TZ: Asia/Shanghaijobs: deploy: runs-on: ubuntu-latest steps: - name: 检查分支 uses: actions/checkout@v4 with: ref: master - name: 缓存项目 npm 包 id: cache-node-modul...
安装gitea
安装gitea
发表于|技术
今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）PS:我的服务器为2C2G 安装gitea这里用二进制文件安装 获取二进制文件：123wget -O gitea https://dl.gitea.com/gitea/1.25.4/gitea-1.25.4-linux-amd64chmod +x giteacp gitea /usr/local/bin/gitea 创建用户这一步不是必须的，但是推荐这样，用root用户很容易出问题。 1234567891011121314151617181920# On Ubuntu/Debian:adduser \ --system \ --shell /bin/bash \ --gecos 'Git Version Control' \ --group \ --disabled-password \ --home /home/git \ git# On Fedora/RHEL/CentOS:groupadd --system gitaddus...
添加typesense搜索
发表于|技术建站手札
最近在构建班级博客，用ghost cms，在构建搜索时发现了typesense，所以把他移植到这个博客上。 安装typesense直接用docker-compose: 1234567891011services: typesense: image: typesense/typesense:30.1 restart: always ports: - "8108:8108" volumes: - ./typesense-data:/data command: '--data-dir /data --api-key=填写key --enable-cors' 然后就是反向代理之类的，不过多写了。 添加数据集123# 先安装库npm install hexo-generator-searchnpm install typesense xml2js 然后在config.yml配置（就是把文章生成json）： 1234search: path: search.json field: post c...
Adguard和Openclash共存
Adguard和Openclash共存
发表于|技术
在之前已经安装了Openwrt系统，并且也配置了OpenClash和AdguardHome，两者的原理简单看都是劫持DNS，所以两者要同时运行，必须经过一定的配置。无非就这两种方式: 左边的方式更简单一些，只需要修改AdguardHome的上游DNS服务器为127.0.0.1:7874 即可；右边的方式需要将OpenClash里的DNS指向AdguardHome，但是可能有拦截失败的情况(好像没有遇到过)。
Adguard规则分享
Adguard规则分享
发表于|技术
众所周知，Adguardhome是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则： 一个综合的过滤规则 🪧引用站外地址，不保证站点的可用性和安全性 adblockfilters adblockfilters 广告过滤规则订阅中心 🪧引用站外地址，不保证站点的可用性和安全性 广告过滤规则订阅中心 广告过滤规则订阅中心 集成了许多规则，可以挑选一下加入。 这是我添加的规则，在这些规则下，用Adblocktester可以达到74分，基本够用
在Openwrt上安装AdguardHome
在Openwrt上安装AdguardHome
发表于|技术
接续前言，AdguardHome是一款广告拦截软件，有了一台小软路由后就开始折腾了。 安装首先要下载软件包，但是经过尝试，软件源里面的luci-app-adguardhome不太好用（也可能是我不会用） ，所以我用的下面的包： 🪧引用站外地址，不保证站点的可用性和安全性 luci-app-adguardhome rufengsuixing 虽然好几年没更新了，但还是能用。下载之后上传到路由器，使用opkg install命令安装，或者可以直接通过网页安装： 配置如下图所示进行操作，如果更新核心版本失败，考虑更换升级用的下载链接，使用镜像源，或者科学上网，错号框内的非必要不修改； 最后点击“保存并应用”，然后点击AdGuardHome Web:3000，进行安装，建议关闭路由器自带DNS/DHCP服务器，AdguardHome直接替代 然后，设置AdguardHome的DHCP服务器，注意要先检...
在Openwrt中安装OpenClash
在Openwrt中安装OpenClash
发表于|技术
前言因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。 安装可以通过web管理页面安装，搜索openclash。 当然也可以在终端中执行命令： 123opkg updateopkg install bash iptables dnsmasq-full curl ca-bundle ipset ip-full iptables-mod-tproxy iptables-mod-extra ruby ruby-yaml kmod-tun kmod-inet-diag unzip luci-compat luci luci-baseopkg install luci-app-openclash 配置首先需要下载内核，推荐启用Smart内核。 然后导入配置： 然后就可以开心使用啦！感觉zashboard简洁好看一些，看自己感觉啦
Cudy TR3000刷入Openwrt系统
Cudy TR3000刷入Openwrt系统
发表于|技术
最近搞到了一台Cudy-TR3000路由器，用来进行科学上网（小猫咪），先记录一下刷写Openwrt系统的过程。 下载固件 中间固件中间固件可以在Cudy官方网站上下载 🪧引用站外地址，不保证站点的可用性和安全性 Cudy固件下载 Cudy 2. Openwrt固件 在下面的网站中下载，下载最新的就行 🪧引用站外地址，不保证站点的可用性和安全性 Openwrt固件 Openwrt.ai 刷写固件访问192.168.10.1先刷入中间固件 然后访问192.168.1.1，刷入Openwrt插件 然后访问10.0.0.1，就可以看到openwrt登录页面了,默认密码是root。
搭建Owncloud并集成Onlyoffice
搭建Owncloud并集成Onlyoffice
发表于|技术
引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
为1Panel添加自己想要的应用
为1Panel添加自己想要的应用
发表于|技术
记录一下自己为1Panel贡献自己应用的经历 预准备 Fork仓库 🪧引用站外地址，不保证站点的可用性和安全性 1Panel appstore 仓库 1panel appstore 把仓库fork到自己的仓库 pull 1git clone -b dev https://<your-github-username>/appstore 创建新分支 12cd appstoregit checkout -b app/<app-name> 创建文件文件目录12345678910111213├──halo // 以 halo 的 key 命名 ，下面解释什么是 key ├── logo.png // 应用 logo , 最好是 180 * 180 px 不要超过 10 KB ├── data.yml // 应用声明文件 ├── README.md // 应用的 README ├── 2.2.0 /...
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/categories/technology/website/index.html b/categories/technology/website/index.html new file mode 100644 index 0000000..3072aab --- /dev/null +++ b/categories/technology/website/index.html @@ -0,0 +1,450 @@ +分类: 建站手札 | Bi's Blog + + + + + + + + +

建站手札

添加typesense搜索
发表于|技术建站手札
最近在构建班级博客，用ghost cms，在构建搜索时发现了typesense，所以把他移植到这个博客上。 安装typesense直接用docker-compose: 1234567891011services: typesense: image: typesense/typesense:30.1 restart: always ports: - "8108:8108" volumes: - ./typesense-data:/data command: '--data-dir /data --api-key=填写key --enable-cors' 然后就是反向代理之类的，不过多写了。 添加数据集123# 先安装库npm install hexo-generator-searchnpm install typesense xml2js 然后在config.yml配置（就是把文章生成json）： 1234search: path: search.json field: post c...
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/categories/website/index.html b/categories/website/index.html new file mode 100644 index 0000000..880b531 --- /dev/null +++ b/categories/website/index.html @@ -0,0 +1,450 @@ +分类: 建站手札 | Bi's Blog + + + + + + + + +

建站手札

添加网站左上角菜单
添加网站左上角菜单
发表于|建站手札
看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
自定义字体
自定义字体
发表于|建站手札
今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
在侧边栏添加日历和倒计时
在侧边栏添加日历和倒计时
发表于|建站手札
突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
为博客添加CMS系统
为博客添加CMS系统
发表于|建站手札
序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
使用GitHub推送Hexo到服务器
使用GitHub推送Hexo到服务器
发表于|建站手札
1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
自定义页脚（新）
自定义页脚（新）
发表于|建站手札
添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
自定义分类条
发表于|建站手札
修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
自定义导航栏
发表于|建站手札
最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
利用 SiteMap 随机访问站内页面
利用 SiteMap 随机访问站内页面
发表于|建站手札
在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
博客添加AI总结
博客添加AI总结
发表于|建站手札
之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/categories/website/page/2/index.html b/categories/website/page/2/index.html new file mode 100644 index 0000000..924ae62 --- /dev/null +++ b/categories/website/page/2/index.html @@ -0,0 +1,450 @@ +分类: 建站手札 | Bi's Blog + + + + + + + + +

建站手札

利用插件自定义页脚菜单
利用插件自定义页脚菜单
发表于|建站手札
安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
自定义右键菜单
自定义右键菜单
发表于|建站手札
演示本站右键即可查看,和原有菜单相比比较美观 新建pug文件在 \themes\butterfly\layout\includes新建 rightmenu.pug 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475#rightMenu.js-pjax .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.history.forward();") i.fa.fa-arrow-right ...
在侧边栏中添加欢迎信息
在侧边栏中添加欢迎信息
发表于|建站手札
效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...
配置说说页面
配置说说页面
发表于|建站手札
又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
部署历程
部署历程
发表于|建站手札
前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/cc/index.html b/cc/index.html new file mode 100644 index 0000000..c7a2099 --- /dev/null +++ b/cc/index.html @@ -0,0 +1,441 @@ +版权协议 | Bi's Blog + + + + + + + + + + + + +

版权协议

版权协议
+ +

为了保持文章质量，并保持互联网的开放共享精神，保持页面流量的稳定，综合考虑下本站的所有原创文章均采用cc协议中比较严格的署名-非商业性使用-禁止演绎 4.0 国际标准。这篇文章主要想能够更加清楚明白的介绍本站的协议标准和要求。方便你合理的使用本站的文章

+

本站无广告嵌入和商业行为。违反协议的行为不仅会损害原作者的创作热情，而且会影响整个版权环境。强烈呼吁你能够在转载时遵守协议。遵守协议的行为几乎不会对你的目标产生负面影响，鼓励创作环境是每个创作者的期望

+

哪些文章适于本协议？

所有原创内容均在文章标题顶部，以及文章结尾的版权说明部分展示

+

原创内容的非商用转载必须为完整转载且标注出处的 带有完整url链接 或 访问原文 之类字样的超链接

+

作为参考资料的情况可以无需完整转载，摘录所需要的部分内容即可，但需标注出处

+

你可以做什么？

只要你遵守本页的许可，你可以自由地共享文章的内容 — 在任何媒介以任何形式复制、发行本作品。并且无需通知作者

+

你需要遵守什么样的许可？

署名

你必须标注内容的来源，你需要在文章开头部分（或者明显位置）标注原文章链接（建议使用超链接提升阅读体验）

+

禁止商用

本站内容免费向互联网所有用户提供，分享本站文章时禁止商业性使用、禁止在转载页面中插入广告（例如谷歌广告、百度广告）、禁止阅读的拦截行为（例如关注公众号、下载App后观看文章）

+

禁止演绎

    +
  • 分享全部内容（无修改）
    你需要在文章开头部分（或者明显位置）标注原文章链接（建议使用超链接）
    • +
  • 分享部分截取内容或者衍生创作
    目前本站全部原创文章的衍生品禁止公开分享和分发。如有更好的修改建议，可以在对应文章下留言。如有衍生创作需求，可以在评论中联系。
    • +
  • 作为参考资料截取部分内容
    作为参考资料的情况可以无需完整转载，摘录所需要的部分内容即可，但需标注出处。
    • +
+

什么内容会被版权保护

包括但不限于：

+
    +
  • 文章封面图片
    • +
  • 文章标题和正文
    • +
  • 站点图片素材（不含主题自带素材）
    • +
+

例外情况

本着友好互相进步的原则，被本站友链收录的博客允许博客文章内容的衍生品的分享和分发，但仍需标注出处

+

本着互联网开放精神，你可以在博客文章下方留言要求授权博文的衍生品的分享和分发，标注你的网站地址

+

关于主题样式的版权信息，可以详见Butterfly主题说明，本站已经历多次版本迭代

+

网站源代码协议

网站源代码（仅包含css、js）的代码部分采用GPL协议

+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换阅读模式隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/cookie/index.html b/cookie/index.html new file mode 100644 index 0000000..2e367e2 --- /dev/null +++ b/cookie/index.html @@ -0,0 +1,495 @@ +Cookies | Bi's Blog + + + + + + + + + + + + +

Cookies

Cookies
+

我使用Cookies来保持我的网站和我开发的软件的可靠性，安全性和个性化。当你接受Cookies时，这有助于通过我识别你的身份、记住你的偏好、或提供个性化用户体验来帮助我改善网站

+

本政策应与我的 隐私政策 一起阅读，该隐私政策解释了我如何使用个人信息

+

如果你对我使用你的个人信息或Cookies的方式有任何疑问，请通过 bishsh2006@outlook.com 与我联系

+

如果你想管理你的Cookies，请按照下面“如何管理Cookies”部分中的说明进行操作。

+

什么是Cookies？

Cookies是一种小型文本文件，当你访问网站时，网站可能会将这些文件放在你的计算机或设备上。Cookies会帮助网站或其他网站在你下次访问时识别你的设备。网站信标、像素或其他类似文件也可以做同样的事情。我在此政策中使用术语“Cookies”来指代以这种方式收集信息的所有文件

+

Cookies提供许多功能。例如，他们可以帮助我记住你喜欢深色模式还是浅色模式，分析我网站的效果

+

大多数网站使用Cookies来收集和保留有关其访问者的个人信息。大多数Cookies收集一般信息，例如访问者如何到达和使用我的网站，他们使用的设备，他们的互联网协议地址（IP地址），他们正在查看的页面及其大致位置（例如，我将能够认识到你正在从深圳访问我的网站）

+

Cookies的目的

我将Cookies分为以下类别:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
用途说明
授权你访问我的网站时，我可通过 Cookie 提供正确信息，为你打造个性化的体验。例如：Cookie会告知你通过搜索引擎搜索的具体内容来改善文章的标题优化关键词、或者创建更符合你搜索需求的文章内容
安全措施我通过 Cookie 启用及支持安全功能，监控和防止可疑活动、欺诈性流量和违反版权协议的行为
偏好、功能和服务我使用功能性Cookies来让我记住你的偏好，或保存你向我提供的有关你的喜好或其他信息
个性化广告本站及所属旗下产品、IP没有个性化广告
网站性能、分析和研究我使用这些cookie来监控网站性能。这使我能够通过快速识别和解决出现的任何问题来提供高质量的体验
+

我的网站上的第三方Cookies

我还在我的网站上使用属于上述类别的第三方Cookies，用于以下目的：

+
    +
  • 帮助我监控网站上的流量；
    • +
  • 识别欺诈或非人为性流量；
    • +
  • 协助市场调研；
    • +
  • 改善网站功能；
    • +
  • 监督我的版权协议和隐私政策的遵守情况
    • +
+ + + + + + + + + + + + + + + + + + + +
第三方服务商用途
51.la用于统计站内访问情况，进行针对性优化异常
灵雀应用监控监控系统将网站所发生的程序异常、资源加载异常、网络请求异常上报汇总，同时对页面和资源进行性能监控和卡顿监测，分析不同维度下的耗时情况，快速解决遇到的问题
TwikooTwikoo评论服务，自建存储私有，用于本站的评论服务
+

如何管理Cookies？

在将Cookie放置在你的计算机或设备上之前，系统会显示一个弹出窗口，要求你同意设置这些Cookie。通过同意放置Cookies，你可以让我为你提供最佳的体验和服务。如果你愿意，你可以通过浏览器设置关闭本站的Cookie来拒绝同意放置Cookies；但是，我网站的部分功能可能无法完全或按预期运行。你有机会允许和/或拒绝使用Cookie。你可以通过访问浏览器设置随时返回到你的Cookie偏好设置以查看和/或删除它们

+

除了我提供的控件之外，你还可以选择在Internet浏览器中启用或禁用Cookie。大多数互联网浏览器还允许你选择是要禁用所有Cookie还是仅禁用第三方Cookie。默认情况下，大多数互联网浏览器都接受Cookie，但这可以更改。有关详细信息，请参阅Internet浏览器中的帮助菜单或设备随附的文档

+

以下链接提供了有关如何在所有主流浏览器中控制Cookie的说明：

+ +

如你使用其他浏览器，请参阅浏览器制造商提供的文档。
有关Cookies以及如何管理Cookies的更多信息，请访问：

+

wikipedia.org 、 allaboutCookies.org 或 aboutCookies.org

+

更多信息

有关我数据处理的更多信息，请参阅我的隐私政策。如果你对此Cookie政策有任何疑问，请通过 bishsh2006@outlook.com 与我联系

+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换阅读模式隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/css/calendar.css b/css/calendar.css new file mode 100644 index 0000000..a943f9c --- /dev/null +++ b/css/calendar.css @@ -0,0 +1,222 @@ +/* 浅色主题变量覆盖 -------------------------------- */ +:root { + --main: #a0d2eb; /* 主强调色：柔和天空蓝 */ + --main-op: rgba(160, 210, 235, 0.6); + --main-op-deep: rgba(160, 210, 235, 0.4); + --main-op-light: rgba(160, 210, 235, 0.2); + + --card-bg: #fdfdfd; /* 卡片背景：几乎白 */ + --fontcolor: #444; /* 主文本：深灰 */ + --secondtext: #999; /* 次级文本：浅灰 */ +} +.card-widget { + padding: 10px!important; + max-height: calc(100vh - 100px); +} +.card-times a, .card-times div { + color: var(--fontcolor); +} + +#card-widget-calendar .item-content { + display: flex; +} + +#calendar-area-left { + width: 45%; +} + +#calendar-area-right { + width: 55%; +} + +#calendar-area-left, #calendar-area-right { + height: 100%; + padding: 8px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + +#calendar-main { + width: 100%; +} + +#calendar-week { + height: 1.2rem; + font-size: 14px; + letter-spacing: 1px; + font-weight: 700; + align-items: center; + display: flex; +} + +#calendar-date { + height: 3rem; + line-height: 1.3; + font-size: 64px; + letter-spacing: 3px; + color: var(--main); + font-weight: 700; + align-items: center; + display: flex; + position: relative; + top: calc(50% - 2.1rem); +} + +#calendar-lunar, #calendar-solar { + height: 1rem; + font-size: 12px; + align-items: center; + display: flex; + position: absolute; +} + +#calendar-solar { + bottom: 2.1rem; +} + +#calendar-lunar { + bottom: 1rem; + color: var(--secondtext); +} + +#calendar-main a { + height: 1rem; + width: 1rem; + border-radius: 50%; + font-size: 12px; + line-height: 12px; + display: flex; + justify-content: center; + align-items: center; +} + +#calendar-main a.now { + background: var(--main); + color: var(--card-bg); +} + +#calendar-main .calendar-rh a { + color: var(--secondtext); +} + +.calendar-r0, .calendar-r1, .calendar-r2, .calendar-r3, .calendar-r4, .calendar-r5, .calendar-rh { + height: 1.2rem; + display: flex; +} + +.calendar-d0, .calendar-d1, .calendar-d2, .calendar-d3, .calendar-d4, .calendar-d5, .calendar-d6 { + width: calc(100% / 7); + display: flex; + justify-content: center; + align-items: center; +} + +#card-widget-schedule .item-content { + display: flex; +} + +#schedule-area-left, #schedule-area-right { + height: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#schedule-area-left { + width: 30%; +} + +#schedule-area-right { + width: 70%; + padding: 0 5px; +} + +.schedule-r0, .schedule-r1, .schedule-r2 { + height: 2rem; + width: 100%; + align-items: center; + display: flex; +} + +.schedule-d0 { + width: 30px; + margin-right: 5px; + text-align: center; + font-size: 12px; +} + +.schedule-d1 { + width: calc(100% - 35px); + height: 1.5rem; + align-items: center; + display: flex; +} + +progress::-webkit-progress-bar { + background: linear-gradient(to right, var(--main-op-deep), var(--main-op), var(--main-op-light)); + border-radius: 5px; + overflow: hidden; +} + +progress::-webkit-progress-value { + background: var(--main); + border-radius: 5px; +} + +.aside-span1, .aside-span2 { + height: 1rem; + font-size: 12px; + z-index: 1; + display: flex; + align-items: center; + position: absolute; +} + +.aside-span1 { + margin-left: 5px; +} + +.aside-span2 { + right: 20px; + color: var(--secondtext); +} + +.aside-span2 a { + margin: 0 3px; +} + +#pBar_month, #pBar_week, #pBar_year { + width: 100%; + border-radius: 5px; + height: 100%; +} + +#schedule-date, #schedule-days, #schedule-title { + display: flex; + align-items: center; +} + +#schedule-title { + height: 25px; + line-height: 1; + font-size: 14px; + font-weight: 700; +} + +#schedule-days { + height: 40px; + line-height: 1; + font-size: 30px; + font-weight: 900; + color: var(--main); +} + +#schedule-date { + height: 20px; + line-height: 1; + font-size: 12px; + color: var(--secondtext); +} \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..aa08ae4 --- /dev/null +++ b/css/index.css @@ -0,0 +1,8804 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100% +} + +body { + margin: 0 +} + +main { + display: block +} + +h1 { + font-size: 2em; + margin: .67em 0 +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible +} + +pre { + font-family: monospace, monospace; + font-size: 1em +} + +a { + background-color: transparent +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted +} + +b, +strong { + font-weight: bolder +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em +} + +small { + font-size: 80% +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline +} + +sub { + bottom: -.25em +} + +sup { + top: -.5em +} + +img { + border-style: none +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0 +} + +button, +input { + overflow: visible +} + +button, +select { + text-transform: none +} + +[type=button], +[type=reset], +[type=submit], +button { + -webkit-appearance: button +} + +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0 +} + +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText +} + +fieldset { + padding: .35em .75em .625em +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal +} + +progress { + vertical-align: baseline +} + +textarea { + overflow: auto +} + +[type=checkbox], +[type=radio] { + box-sizing: border-box; + padding: 0 +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit +} + +details { + display: block +} + +summary { + display: list-item +} + +template { + display: none +} + +[hidden] { + display: none +} +.limit-one-line, +.container .flink .flink-item-name, +.container .flink .flink-item-desc, +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a span, +.site-data > a .headline, +#nav #blog-info, +#sidebar #sidebar-menus .menus_items .site-page { + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.limit-more-line, +.type-404 .error-content .error-info .error_subtitle, +.article-sort-item-title, +#recent-posts .recent-post-item >.recent-post-info > .article-title, +#recent-posts .recent-post-item >.recent-post-info > .content, +#aside-content .aside-list > .aside-list-item .content > .name, +#aside-content .aside-list > .aside-list-item .content > .title, +#aside-content .aside-list > .aside-list-item .content > .comment, +#page-header #site-title, +#post-info .post-title, +.pagination-related .info .info-1 .info-item-2, +.pagination-related .info .info-2 .info-item-1, +.container figure.gallery-group p, +.container figure.gallery-group .gallery-group-name { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; +} +.fontawesomeIcon, +.custom-hr:before, +#post .post-copyright:before, +#post #post-outdate-notice:before, +.toggle > .toggle-button::before, +.note:not(.no-icon)::before, +.search-dialog hr:before { + display: inline-block; + font-weight: 600; + font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free'; + text-rendering: auto; + -webkit-font-smoothing: antialiased; +} +.cardHover, +.type-404 .error-content, +.layout > div:first-child:not(.nc), +#recent-posts .recent-post-item, +#article-container .shuoshuo-item, +#aside-content .card-widget, +.layout .pagination > *:not(.space) { + background: var(--card-bg); + -webkit-box-shadow: var(--card-box-shadow); + box-shadow: var(--card-box-shadow); + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + border-radius: 8px; +} +.cardHover:hover, +.type-404 .error-content:hover, +.layout > div:first-child:not(.nc):hover, +#recent-posts .recent-post-item:hover, +#article-container .shuoshuo-item:hover, +#aside-content .card-widget:hover, +.layout .pagination > *:not(.space):hover { + -webkit-box-shadow: var(--card-hover-box-shadow); + box-shadow: var(--card-hover-box-shadow); +} +.imgHover, +.type-404 .error-content .error-img img, +.article-sort-item-img :first-child, +#recent-posts .recent-post-item .post_cover .post-bg, +#aside-content .aside-list > .aside-list-item .thumbnail :first-child { + width: 100%; + height: 100%; + -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s; + -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.6s; + -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.6s; + -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.6s; + transition: filter 375ms ease-in 0.2s, transform 0.6s; + object-fit: cover; +} +.imgHover:hover, +.type-404 .error-content .error-img img:hover, +.article-sort-item-img :first-child:hover, +#recent-posts .recent-post-item .post_cover .post-bg:hover, +#aside-content .aside-list > .aside-list-item .thumbnail :first-child:hover { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.postImgHover:hover .cover, +.pagination-related:hover .cover { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.postImgHover .cover, +.pagination-related .cover { + width: 100%; + height: 100%; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transition: all 0.6s, filter 375ms ease-in 0.2s; + -moz-transition: all 0.6s, filter 375ms ease-in 0.2s; + -o-transition: all 0.6s, filter 375ms ease-in 0.2s; + -ms-transition: all 0.6s, filter 375ms ease-in 0.2s; + transition: all 0.6s, filter 375ms ease-in 0.2s; + object-fit: cover; +} +.list-beauty, +.category-lists ul { + list-style: none; +} +.list-beauty li, +.category-lists ul li { + position: relative; + padding: 0.12em 0.4em 0.12em 1.4em; +} +.list-beauty li:hover:before, +.category-lists ul li:hover:before { + border-color: var(--pseudo-hover); +} +.list-beauty li:before, +.category-lists ul li:before { + position: absolute; + top: 0.67em; + left: 0; + width: 0.43em; + height: 0.43em; + border: 0.215em solid #49b1f5; + border-radius: 0.43em; + background: transparent; + content: ''; + cursor: pointer; + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} +.custom-hr, +.search-dialog hr { + position: relative; + margin: 40px auto; + border: 2px dashed var(--hr-border); + width: calc(100% - 4px); +} +.custom-hr:hover:before, +.search-dialog hr:hover:before { + left: calc(95% - 20px); +} +.custom-hr:before, +.search-dialog hr:before { + position: absolute; + top: -10px; + left: 5%; + z-index: 1; + color: var(--hr-before-color); + content: '\f0c4'; + font-size: 20px; + line-height: 1; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; +} +.verticalCenter, +.pagination-related .info .info-1, +.pagination-related .info .info-2 { + position: absolute; + top: 50%; + width: 100%; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +#content-inner, +#footer { + -webkit-animation: bottom-top 1s; + -moz-animation: bottom-top 1s; + -o-animation: bottom-top 1s; + -ms-animation: bottom-top 1s; + animation: bottom-top 1s; +} +#page-header:not(.full_page), +#nav.show { + -webkit-animation: header-effect 1s; + -moz-animation: header-effect 1s; + -o-animation: header-effect 1s; + -ms-animation: header-effect 1s; + animation: header-effect 1s; +} +#site-title, +#site-subtitle { + -webkit-animation: titleScale 1s; + -moz-animation: titleScale 1s; + -o-animation: titleScale 1s; + -ms-animation: titleScale 1s; + animation: titleScale 1s; +} +canvas:not(#ribbon-canvas), +#web_bg.bg-animation { + -webkit-animation: to_show 4s; + -moz-animation: to_show 4s; + -o-animation: to_show 4s; + -ms-animation: to_show 4s; + animation: to_show 4s; +} +#ribbon-canvas { + -webkit-animation: ribbon_to_show 4s; + -moz-animation: ribbon_to_show 4s; + -o-animation: ribbon_to_show 4s; + -ms-animation: ribbon_to_show 4s; + animation: ribbon_to_show 4s; +} +#sidebar-menus.open > :nth-child(1) { + -webkit-animation: sidebarItem 0.2s; + -moz-animation: sidebarItem 0.2s; + -o-animation: sidebarItem 0.2s; + -ms-animation: sidebarItem 0.2s; + animation: sidebarItem 0.2s; +} +#sidebar-menus.open > :nth-child(2) { + -webkit-animation: sidebarItem 0.4s; + -moz-animation: sidebarItem 0.4s; + -o-animation: sidebarItem 0.4s; + -ms-animation: sidebarItem 0.4s; + animation: sidebarItem 0.4s; +} +#sidebar-menus.open > :nth-child(3) { + -webkit-animation: sidebarItem 0.6s; + -moz-animation: sidebarItem 0.6s; + -o-animation: sidebarItem 0.6s; + -ms-animation: sidebarItem 0.6s; + animation: sidebarItem 0.6s; +} +#sidebar-menus.open > :nth-child(4) { + -webkit-animation: sidebarItem 0.8s; + -moz-animation: sidebarItem 0.8s; + -o-animation: sidebarItem 0.8s; + -ms-animation: sidebarItem 0.8s; + animation: sidebarItem 0.8s; +} +.scroll-down-effects { + -webkit-animation: scroll-down-effect 1.5s infinite; + -moz-animation: scroll-down-effect 1.5s infinite; + -o-animation: scroll-down-effect 1.5s infinite; + -ms-animation: scroll-down-effect 1.5s infinite; + animation: scroll-down-effect 1.5s infinite; +} +.reward-main { + -webkit-animation: donate_effcet 0.3s 0.1s ease both; + -moz-animation: donate_effcet 0.3s 0.1s ease both; + -o-animation: donate_effcet 0.3s 0.1s ease both; + -ms-animation: donate_effcet 0.3s 0.1s ease both; + animation: donate_effcet 0.3s 0.1s ease both; +} +.btn-effects, +.shuoshuo-navigation button:not(:disabled), +#aside-content .card-info #card-info-btn, +.post-reward .reward-button, +#rightside > div > button, +#rightside > div > a, +.container .btn-beautify, +.hide-inline > .hide-button, +.hide-block > .hide-button, +.read-mode .exit-readmode { + position: relative; + overflow: hidden; + -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +.btn-effects:hover, +.shuoshuo-navigation button:not(:disabled):hover, +#aside-content .card-info #card-info-btn:hover, +.post-reward .reward-button:hover, +#rightside > div > button:hover, +#rightside > div > a:hover, +.container .btn-beautify:hover, +.hide-inline > .hide-button:hover, +.hide-block > .hide-button:hover, +.read-mode .exit-readmode:hover { + -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.15); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + text-decoration: none; + -webkit-transform: translateY(-1px) scale(1.02); + -moz-transform: translateY(-1px) scale(1.02); + -o-transform: translateY(-1px) scale(1.02); + -ms-transform: translateY(-1px) scale(1.02); + transform: translateY(-1px) scale(1.02); +} +.btn-effects:active, +.shuoshuo-navigation button:not(:disabled):active, +#aside-content .card-info #card-info-btn:active, +.post-reward .reward-button:active, +#rightside > div > button:active, +#rightside > div > a:active, +.container .btn-beautify:active, +.hide-inline > .hide-button:active, +.hide-block > .hide-button:active, +.read-mode .exit-readmode:active { + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + -ms-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transform: translateY(0) scale(0.98); + -moz-transform: translateY(0) scale(0.98); + -o-transform: translateY(0) scale(0.98); + -ms-transform: translateY(0) scale(0.98); + transform: translateY(0) scale(0.98); +} +.btn-effects i, +.shuoshuo-navigation button:not(:disabled) i, +#aside-content .card-info #card-info-btn i, +.post-reward .reward-button i, +#rightside > div > button i, +#rightside > div > a i, +.container .btn-beautify i, +.hide-inline > .hide-button i, +.hide-block > .hide-button i, +.read-mode .exit-readmode i { + display: inline-block; + vertical-align: middle; + -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} +.btn-effects:hover i, +.shuoshuo-navigation button:not(:disabled):hover i, +#aside-content .card-info #card-info-btn:hover i, +.post-reward .reward-button:hover i, +#rightside > div > button:hover i, +#rightside > div > a:hover i, +.container .btn-beautify:hover i, +.hide-inline > .hide-button:hover i, +.hide-block > .hide-button:hover i, +.read-mode .exit-readmode:hover i { + -webkit-animation: buttonIconBounce 0.6s ease-in-out; + -moz-animation: buttonIconBounce 0.6s ease-in-out; + -o-animation: buttonIconBounce 0.6s ease-in-out; + -ms-animation: buttonIconBounce 0.6s ease-in-out; + animation: buttonIconBounce 0.6s ease-in-out; +} +.btn-effects i + span, +.shuoshuo-navigation button:not(:disabled) i + span, +#aside-content .card-info #card-info-btn i + span, +.post-reward .reward-button i + span, +#rightside > div > button i + span, +#rightside > div > a i + span, +.container .btn-beautify i + span, +.hide-inline > .hide-button i + span, +.hide-block > .hide-button i + span, +.read-mode .exit-readmode i + span { + margin-left: 6px; + vertical-align: middle; + -webkit-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} +.btn-effects:hover i + span, +.shuoshuo-navigation button:not(:disabled):hover i + span, +#aside-content .card-info #card-info-btn:hover i + span, +.post-reward .reward-button:hover i + span, +#rightside > div > button:hover i + span, +#rightside > div > a:hover i + span, +.container .btn-beautify:hover i + span, +.hide-inline > .hide-button:hover i + span, +.hide-block > .hide-button:hover i + span, +.read-mode .exit-readmode:hover i + span { + margin-left: 8px; +} +.btn-effects::before, +.shuoshuo-navigation button:not(:disabled)::before, +#aside-content .card-info #card-info-btn::before, +.post-reward .reward-button::before, +#rightside > div > button::before, +#rightside > div > a::before, +.container .btn-beautify::before, +.hide-inline > .hide-button::before, +.hide-block > .hide-button::before, +.read-mode .exit-readmode::before { + position: absolute; + top: 0; + left: -100%; + z-index: 1; + width: 100%; + height: 100%; + background: -webkit-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); + background: -moz-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); + background: -o-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); + background: -ms-linear-gradient(0deg, transparent, rgba(255,255,255,0.2), transparent); + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + content: ''; + -webkit-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); + transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); +} +.btn-effects:hover::before, +.shuoshuo-navigation button:not(:disabled):hover::before, +#aside-content .card-info #card-info-btn:hover::before, +.post-reward .reward-button:hover::before, +#rightside > div > button:hover::before, +#rightside > div > a:hover::before, +.container .btn-beautify:hover::before, +.hide-inline > .hide-button:hover::before, +.hide-block > .hide-button:hover::before, +.read-mode .exit-readmode:hover::before { + left: 100%; +} +.btn-effects > *, +.shuoshuo-navigation button:not(:disabled) > *, +#aside-content .card-info #card-info-btn > *, +.post-reward .reward-button > *, +#rightside > div > button > *, +#rightside > div > a > *, +.container .btn-beautify > *, +.hide-inline > .hide-button > *, +.hide-block > .hide-button > *, +.read-mode .exit-readmode > * { + position: relative; + z-index: 2; +} +.btn-effects-large:hover, +.post-reward .reward-button:hover, +.container .btn-beautify.larger:hover { + -webkit-box-shadow: 0 6px 16px rgba(0,0,0,0.2); + box-shadow: 0 6px 16px rgba(0,0,0,0.2); + -webkit-transform: translateY(-2px) scale(1.03); + -moz-transform: translateY(-2px) scale(1.03); + -o-transform: translateY(-2px) scale(1.03); + -ms-transform: translateY(-2px) scale(1.03); + transform: translateY(-2px) scale(1.03); +} +@-moz-keyframes scroll-down-effect { + 0% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } + 50% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate(0, -16px); + -moz-transform: translate(0, -16px); + -o-transform: translate(0, -16px); + -ms-transform: translate(0, -16px); + transform: translate(0, -16px); + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } +} +@-webkit-keyframes scroll-down-effect { + 0% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } + 50% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate(0, -16px); + -moz-transform: translate(0, -16px); + -o-transform: translate(0, -16px); + -ms-transform: translate(0, -16px); + transform: translate(0, -16px); + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } +} +@-o-keyframes scroll-down-effect { + 0% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } + 50% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate(0, -16px); + -moz-transform: translate(0, -16px); + -o-transform: translate(0, -16px); + -ms-transform: translate(0, -16px); + transform: translate(0, -16px); + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } +} +@keyframes scroll-down-effect { + 0% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } + 50% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate(0, -16px); + -moz-transform: translate(0, -16px); + -o-transform: translate(0, -16px); + -ms-transform: translate(0, -16px); + transform: translate(0, -16px); + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + } +} +@-moz-keyframes header-effect { + 0% { + -webkit-transform: translateY(-35px); + -moz-transform: translateY(-35px); + -o-transform: translateY(-35px); + -ms-transform: translateY(-35px); + transform: translateY(-35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes header-effect { + 0% { + -webkit-transform: translateY(-35px); + -moz-transform: translateY(-35px); + -o-transform: translateY(-35px); + -ms-transform: translateY(-35px); + transform: translateY(-35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes header-effect { + 0% { + -webkit-transform: translateY(-35px); + -moz-transform: translateY(-35px); + -o-transform: translateY(-35px); + -ms-transform: translateY(-35px); + transform: translateY(-35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes header-effect { + 0% { + -webkit-transform: translateY(-35px); + -moz-transform: translateY(-35px); + -o-transform: translateY(-35px); + -ms-transform: translateY(-35px); + transform: translateY(-35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes bottom-top { + 0% { + -webkit-transform: translateY(35px); + -moz-transform: translateY(35px); + -o-transform: translateY(35px); + -ms-transform: translateY(35px); + transform: translateY(35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes bottom-top { + 0% { + -webkit-transform: translateY(35px); + -moz-transform: translateY(35px); + -o-transform: translateY(35px); + -ms-transform: translateY(35px); + transform: translateY(35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes bottom-top { + 0% { + -webkit-transform: translateY(35px); + -moz-transform: translateY(35px); + -o-transform: translateY(35px); + -ms-transform: translateY(35px); + transform: translateY(35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes bottom-top { + 0% { + -webkit-transform: translateY(35px); + -moz-transform: translateY(35px); + -o-transform: translateY(35px); + -ms-transform: translateY(35px); + transform: translateY(35px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-o-keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-moz-keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@-webkit-keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@-o-keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@-moz-keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-webkit-keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-o-keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-moz-keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-webkit-keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-o-keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-moz-keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-webkit-keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-o-keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-moz-keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes sub_menus { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + -o-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes sub_menus { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + -o-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes sub_menus { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + -o-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes sub_menus { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + -o-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-o-keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-moz-keyframes buttonIconBounce { + 0%, 100% { + -webkit-transform: translateY(0) scale(1); + -moz-transform: translateY(0) scale(1); + -o-transform: translateY(0) scale(1); + -ms-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + } + 25% { + -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + } + 50% { + -webkit-transform: translateY(0) scale(1.05) rotateZ(0); + -moz-transform: translateY(0) scale(1.05) rotateZ(0); + -o-transform: translateY(0) scale(1.05) rotateZ(0); + -ms-transform: translateY(0) scale(1.05) rotateZ(0); + transform: translateY(0) scale(1.05) rotateZ(0); + } + 75% { + -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + transform: translateY(-1px) scale(1.02) rotateZ(2deg); + } +} +@-webkit-keyframes buttonIconBounce { + 0%, 100% { + -webkit-transform: translateY(0) scale(1); + -moz-transform: translateY(0) scale(1); + -o-transform: translateY(0) scale(1); + -ms-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + } + 25% { + -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + } + 50% { + -webkit-transform: translateY(0) scale(1.05) rotateZ(0); + -moz-transform: translateY(0) scale(1.05) rotateZ(0); + -o-transform: translateY(0) scale(1.05) rotateZ(0); + -ms-transform: translateY(0) scale(1.05) rotateZ(0); + transform: translateY(0) scale(1.05) rotateZ(0); + } + 75% { + -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + transform: translateY(-1px) scale(1.02) rotateZ(2deg); + } +} +@-o-keyframes buttonIconBounce { + 0%, 100% { + -webkit-transform: translateY(0) scale(1); + -moz-transform: translateY(0) scale(1); + -o-transform: translateY(0) scale(1); + -ms-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + } + 25% { + -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + } + 50% { + -webkit-transform: translateY(0) scale(1.05) rotateZ(0); + -moz-transform: translateY(0) scale(1.05) rotateZ(0); + -o-transform: translateY(0) scale(1.05) rotateZ(0); + -ms-transform: translateY(0) scale(1.05) rotateZ(0); + transform: translateY(0) scale(1.05) rotateZ(0); + } + 75% { + -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + transform: translateY(-1px) scale(1.02) rotateZ(2deg); + } +} +@keyframes buttonIconBounce { + 0%, 100% { + -webkit-transform: translateY(0) scale(1); + -moz-transform: translateY(0) scale(1); + -o-transform: translateY(0) scale(1); + -ms-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + } + 25% { + -webkit-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -moz-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -o-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + -ms-transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + transform: translateY(-3px) scale(1.1) rotateZ(-5deg); + } + 50% { + -webkit-transform: translateY(0) scale(1.05) rotateZ(0); + -moz-transform: translateY(0) scale(1.05) rotateZ(0); + -o-transform: translateY(0) scale(1.05) rotateZ(0); + -ms-transform: translateY(0) scale(1.05) rotateZ(0); + transform: translateY(0) scale(1.05) rotateZ(0); + } + 75% { + -webkit-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -moz-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -o-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + -ms-transform: translateY(-1px) scale(1.02) rotateZ(2deg); + transform: translateY(-1px) scale(1.02) rotateZ(2deg); + } +} +:root { + --global-font-size: 110%; + --global-bg: #fff; + --font-color: #4c4948; + --hr-border: #a4d8fa; + --hr-before-color: #80c8f8; + --search-bg: #f6f8fa; + --search-input-color: #4c4948; + --search-a-color: #4c4948; + --preloader-bg: #37474f; + --preloader-color: #fff; + --tab-border-color: #f0f0f0; + --tab-button-bg: #f0f0f0; + --tab-button-color: #1f2d3d; + --tab-button-hover-bg: #dcdcdc; + --tab-button-active-bg: #fff; + --card-bg: #fff; + --card-meta: #858585; + --sidebar-bg: #f6f8fa; + --sidebar-menu-bg: #fff; + --btn-hover-color: #ff7242; + --btn-color: #fff; + --btn-bg: #49b1f5; + --text-bg-hover: rgba(73,177,245,0.7); + --light-grey: #eee; + --dark-grey: #cacaca; + --white: #fff; + --text-highlight-color: #1f2d3d; + --blockquote-color: #6a737d; + --blockquote-bg: rgba(73,177,245,0.1); + --reward-pop: #f5f5f5; + --toc-link-color: #666261; + --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05); + --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); + --pseudo-hover: #ff7242; + --headline-presudo: #a0a0a0; + --scrollbar-color: #49b1f5; + --default-bg-color: #49b1f5; + --zoom-bg: #fff; + --mark-bg: rgba(0,0,0,0.3); +} +:root { + --btn-color: #fff; + --btn-default-color: #777; + --tags-blue-color: #428bca; + --tags-blue-color-lighten: #e3eef7; + --tags-pink-color: #ff69b4; + --tags-pink-color-lighten: #ffe9f4; + --tags-red-color: #f00; + --tags-red-color-lighten: #ffd9d9; + --tags-orange-color: #ff8c00; + --tags-orange-color-lighten: #ffeed9; + --tags-purple-color: #6f42c1; + --tags-purple-color-lighten: #e9e3f6; + --tags-green-color: #5cb85c; + --tags-green-color-lighten: #e7f4e7; + --note-default-border: #777; + --note-default-bg: #f7f7f7; + --note-default-text: #777; + --note-modern-default-border: #e1e1e1; + --note-modern-default-bg: #f3f3f3; + --note-modern-default-text: #666; + --note-modern-default-hover: #454545; + --note-primary-border: #6f42c1; + --note-primary-bg: #f5f0fa; + --note-primary-text: #6f42c1; + --note-modern-primary-border: #e1c2ff; + --note-modern-primary-bg: #f3daff; + --note-modern-primary-text: #6f42c1; + --note-modern-primary-hover: #453298; + --note-info-border: #428bca; + --note-info-bg: #eef7fa; + --note-info-text: #428bca; + --note-modern-info-border: #b3e5ef; + --note-modern-info-bg: #d9edf7; + --note-modern-info-text: #31708f; + --note-modern-info-hover: #215761; + --note-success-border: #5cb85c; + --note-success-bg: #eff8f0; + --note-success-text: #5cb85c; + --note-modern-success-border: #d0e6be; + --note-modern-success-bg: #dff0d8; + --note-modern-success-text: #3c763d; + --note-modern-success-hover: #32562c; + --note-warning-border: #f0ad4e; + --note-warning-bg: #fdf8ea; + --note-warning-text: #f0ad4e; + --note-modern-warning-border: #fae4cd; + --note-modern-warning-bg: #fcf4e3; + --note-modern-warning-text: #8a6d3b; + --note-modern-warning-hover: #714f30; + --note-danger-border: #d9534f; + --note-danger-bg: #fcf1f2; + --note-danger-text: #d9534f; + --note-modern-danger-border: #ebcdd2; + --note-modern-danger-bg: #f2dfdf; + --note-modern-danger-text: #a94442; + --note-modern-danger-hover: #84333f; +} +body { + position: relative; + overflow-y: scroll; + min-height: 100%; + background: var(--global-bg); + color: var(--font-color); + font-size: var(--global-font-size); + font-family: gkai; + line-height: 2; + -webkit-tap-highlight-color: rgba(0,0,0,0); + scroll-behavior: smooth; +} +@-moz-document url-prefix() { + * { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-color) transparent; + } +} +*::-webkit-scrollbar { + width: 5px; + height: 5px; +} +*::-webkit-scrollbar-thumb { + background: var(--scrollbar-color); +} +*::-webkit-scrollbar-track { + background-color: transparent; +} +input::placeholder { + color: var(--font-color); +} +#web_bg { + position: fixed; + z-index: -999; + width: 100%; + height: 100%; + background-attachment: local; + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} +h1, +h2, +h3, +h4, +h5, +h6 { + position: relative; + margin: 20px 0 14px; + color: var(--text-highlight-color); + font-weight: bold; +} +h1 code, +h2 code, +h3 code, +h4 code, +h5 code, +h6 code { + font-size: inherit !important; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.table-wrap { + overflow-x: scroll; + margin: 0 0 20px; + border-radius: 5px; +} +.table-wrap table { + border-radius: 5px; +} +.table-wrap table thead > tr:first-child th:first-child { + border-top-left-radius: 5px; +} +.table-wrap table thead > tr:first-child th:last-child { + border-top-right-radius: 5px; +} +.table-wrap table tbody > tr:last-child td:first-child { + border-bottom-left-radius: 5px; +} +.table-wrap table tbody > tr:last-child td:last-child { + border-bottom-right-radius: 5px; +} +table { + display: table; + width: 100%; + border-spacing: 0; + border-collapse: separate; + border-top: 1px solid var(--light-grey); + border-left: 1px solid var(--light-grey); + empty-cells: show; +} +table thead { + background: rgba(153,169,191,0.1); +} +table th, +table td { + padding: 6px 12px; + border: 1px solid var(--light-grey); + border-top: none; + border-left: none; + vertical-align: middle; +} +*::selection { + background: #00c4b6; + color: #f7f7f7; +} +button { + padding: 0; + outline: 0; + border: none; + background: none; + cursor: pointer; + touch-action: manipulation; +} +a { + color: #99a9bf; + text-decoration: none; + word-wrap: break-word; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -o-transition: all 0.2s; + -ms-transition: all 0.2s; + transition: all 0.2s; + overflow-wrap: break-word; +} +a:hover { + color: #49b1f5; +} +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} +img[src=''], +img:not([src]) { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.img-alt { + margin: -10px 0 10px; + color: #858585; +} +.img-alt:hover { + text-decoration: none !important; +} +blockquote { + margin: 0 0 20px; + padding: 7px 15px; + border-left: 4px solid #49b1f5; + background-color: var(--blockquote-bg); + color: var(--blockquote-color); + border-radius: 6px; +} +blockquote footer cite:before { + padding: 0 5px; + content: '—'; +} +blockquote > :last-child { + margin-bottom: 0 !important; +} +.fa-fw { + width: 1.25em; + text-align: center; +} +:root { + --hl-color: #90a4ae; + --hl-bg: #f6f8fa; + --hltools-bg: #e6ebf1; + --hltools-color: #90a4ae; + --hlnumber-bg: #f6f8fa; + --hlnumber-color: rgba(144,164,174,0.5); + --hlscrollbar-bg: #dce4eb; + --hlexpand-bg: linear-gradient(180deg, rgba(246,248,250,0.6), rgba(246,248,250,0.9)); +} +[data-theme='dark'] { + --hl-color: rgba(255,255,255,0.7); + --hl-bg: #171717; + --hltools-bg: #1a1a1a; + --hltools-color: #90a4ae; + --hlnumber-bg: #171717; + --hlnumber-color: rgba(255,255,255,0.4); + --hlscrollbar-bg: #1f1f1f; + --hlexpand-bg: linear-gradient(180deg, rgba(23,23,23,0.6), rgba(23,23,23,0.9)); +} +@-moz-document url-prefix() { + scrollbar-color: var(--hlscrollbar-bg) transparent; +} +figure.highlight table::-webkit-scrollbar-thumb, +.container figure.highlight.default pre::-webkit-scrollbar-thumb { + background: var(--hlscrollbar-bg); +} +figure.highlight pre .deletion { + color: #bf42bf; +} +figure.highlight pre .addition { + color: #105ede; +} +figure.highlight pre .meta { + color: #7c4dff; +} +figure.highlight pre .comment { + color: rgba(149,165,166,0.8); +} +figure.highlight pre .variable, +figure.highlight pre .attribute, +figure.highlight pre .regexp, +figure.highlight pre .ruby .constant, +figure.highlight pre .xml .tag .title, +figure.highlight pre .xml .pi, +figure.highlight pre .xml .doctype, +figure.highlight pre .html .doctype, +figure.highlight pre .css .id, +figure.highlight pre .tag .name, +figure.highlight pre .css .class, +figure.highlight pre .css .pseudo { + color: #e53935; +} +figure.highlight pre .tag { + color: #39adb5; +} +figure.highlight pre .number, +figure.highlight pre .preprocessor, +figure.highlight pre .literal, +figure.highlight pre .params, +figure.highlight pre .constant, +figure.highlight pre .command { + color: #f76d47; +} +figure.highlight pre .built_in { + color: #ffb62c; +} +figure.highlight pre .ruby .class .title, +figure.highlight pre .css .rules .attribute, +figure.highlight pre .string, +figure.highlight pre .value, +figure.highlight pre .inheritance, +figure.highlight pre .header, +figure.highlight pre .ruby .symbol, +figure.highlight pre .xml .cdata, +figure.highlight pre .special, +figure.highlight pre .number, +figure.highlight pre .formula { + color: #91b859; +} +figure.highlight pre .keyword, +figure.highlight pre .title, +figure.highlight pre .css .hexcolor { + color: #39adb5; +} +figure.highlight pre .function, +figure.highlight pre .python .decorator, +figure.highlight pre .python .title, +figure.highlight pre .ruby .function .title, +figure.highlight pre .ruby .title .keyword, +figure.highlight pre .perl .sub, +figure.highlight pre .javascript .title, +figure.highlight pre .coffeescript .title { + color: #6182b8; +} +figure.highlight pre .tag .attr, +figure.highlight pre .javascript .function { + color: #7c4dff; +} +.container figure.highlight .line.marked { + background-color: rgba(128,203,196,0.251); +} +.container figure.highlight table { + display: block; + overflow: auto; + border: none; +} +.container figure.highlight table td { + padding: 0; + border: none; +} +.container figure.highlight .gutter pre { + padding-right: 10px; + padding-left: 10px; + background-color: var(--hlnumber-bg); + color: var(--hlnumber-color); + text-align: right; +} +.container figure.highlight .code pre { + padding-right: 10px; + padding-left: 10px; + width: 100%; +} +.container pre, +.container figure.highlight { + overflow: auto; + margin: 0 0 20px; + padding: 0; + background: var(--hl-bg); + color: var(--hl-color); + line-height: 1.6; +} +.container pre, +.container code { + font-size: 100%; + font-family: consolas, Menlo, monospace, 'PingFang SC', 'Microsoft YaHei', sans-serif !important; + border-radius: 6px; +} +.container code { + padding: 2px 5px; + background: rgba(27,31,35,0.05); + color: #f47466; +} +.container pre { + padding: 10px 20px; +} +.container pre code { + padding: 0; + background: none; + color: var(--hl-color); + text-shadow: none; +} +.container figure.highlight { + position: relative; + border-radius: 6px; +} +.container figure.highlight pre { + margin: 0; + padding: 8px 0; + border: none; +} +.container figure.highlight figcaption, +.container figure.highlight .caption { + padding: 6px 0 2px 14px; + font-size: 100%; + line-height: 1em; +} +.container figure.highlight figcaption a, +.container figure.highlight .caption a { + float: right; + padding-right: 10px; + color: var(--hl-color); +} +.container figure.highlight figcaption a:hover, +.container figure.highlight .caption a:hover { + border-bottom-color: var(--hl-color); +} +.container figure.highlight.default pre { + padding: 10px 20px; +} +.container figure.highlight.copy-true { + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + user-select: all; + -webkit-user-select: all; +} +.container figure.highlight.copy-true > table, +.container figure.highlight.copy-true > pre { + display: block !important; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.container .highlight-tools { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + overflow: hidden; + padding: 0 8px; + min-height: 24px; + height: 2.15em; + background: var(--hltools-bg); + color: var(--hltools-color); + font-size: 100%; + margin-right: auto; +} +.container .highlight-tools > * { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + margin: 2px; +} +.container .highlight-tools i { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + -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; + padding: 5px; + cursor: pointer; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +.container .highlight-tools i:hover { + color: #49b1f5; +} +.container .highlight-tools.closed ~ * { + display: none; +} +.container .highlight-tools.closed .expand { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.container .highlight-tools > .macStyle { + margin: 0; +} +.container .highlight-tools .code-lang { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + overflow: hidden; + padding-right: 10px; + text-transform: uppercase; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + font-size: 1.15em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; +} +.container .gutter { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; +} +.container .gist table { + width: auto; +} +.container .gist table td { + border: none; +} +.copy-notice { + position: absolute; + z-index: 99999; + padding: 2px 6px; + border-radius: 3px; + background: var(--hltools-bg); + white-space: nowrap; + font-size: 12px; + pointer-events: none; +} +.container .code-expand-btn { + position: absolute; + bottom: 0; + z-index: 10; + width: 100%; + background: var(--hlexpand-bg); + text-align: center; + font-size: 100%; + cursor: pointer; +} +.container .code-expand-btn i { + padding: 6px 0; + color: var(--hlnumber-color); + -webkit-animation: code-expand-key 1.2s infinite; + -moz-animation: code-expand-key 1.2s infinite; + -o-animation: code-expand-key 1.2s infinite; + -ms-animation: code-expand-key 1.2s infinite; + animation: code-expand-key 1.2s infinite; +} +.container .code-expand-btn.expand-done > i { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.container .code-expand-btn.expand-done + table, +.container .code-expand-btn.expand-done + pre { + margin-bottom: 1.8em; +} +.container .code-expand-btn:not(.expand-done) ~ table, +.container .code-expand-btn:not(.expand-done) ~ pre { + overflow: hidden; + height: 200px; +} +@-moz-keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-webkit-keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-o-keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +.container figure.highlight.code-fullpage { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 9999; + margin: 0; + border-radius: 0; + -webkit-animation: code-fullpage 0.3s; + -moz-animation: code-fullpage 0.3s; + -o-animation: code-fullpage 0.3s; + -ms-animation: code-fullpage 0.3s; + animation: code-fullpage 0.3s; +} +.container figure.highlight.code-fullpage .code-expand-btn, +.container figure.highlight.code-fullpage .expand { + display: none; +} +.container figure.highlight.code-fullpage .highlight-tools ~ pre, +.container figure.highlight.code-fullpage .highlight-tools ~ table { + display: block; + overflow: auto; + margin-bottom: 0; + height: calc(100vh - 2.15em); +} +@-moz-keyframes code-fullpage { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 20%, 60% { + -webkit-transform: translateX(-5px); + -moz-transform: translateX(-5px); + -o-transform: translateX(-5px); + -ms-transform: translateX(-5px); + transform: translateX(-5px); + } + 40%, 80% { + -webkit-transform: translateX(5px); + -moz-transform: translateX(5px); + -o-transform: translateX(5px); + -ms-transform: translateX(5px); + transform: translateX(5px); + } +} +@-webkit-keyframes code-fullpage { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 20%, 60% { + -webkit-transform: translateX(-5px); + -moz-transform: translateX(-5px); + -o-transform: translateX(-5px); + -ms-transform: translateX(-5px); + transform: translateX(-5px); + } + 40%, 80% { + -webkit-transform: translateX(5px); + -moz-transform: translateX(5px); + -o-transform: translateX(5px); + -ms-transform: translateX(5px); + transform: translateX(5px); + } +} +@-o-keyframes code-fullpage { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 20%, 60% { + -webkit-transform: translateX(-5px); + -moz-transform: translateX(-5px); + -o-transform: translateX(-5px); + -ms-transform: translateX(-5px); + transform: translateX(-5px); + } + 40%, 80% { + -webkit-transform: translateX(5px); + -moz-transform: translateX(5px); + -o-transform: translateX(5px); + -ms-transform: translateX(5px); + transform: translateX(5px); + } +} +@keyframes code-fullpage { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 20%, 60% { + -webkit-transform: translateX(-5px); + -moz-transform: translateX(-5px); + -o-transform: translateX(-5px); + -ms-transform: translateX(-5px); + transform: translateX(-5px); + } + 40%, 80% { + -webkit-transform: translateX(5px); + -moz-transform: translateX(5px); + -o-transform: translateX(5px); + -ms-transform: translateX(5px); + transform: translateX(5px); + } +} +.type-404 .error-content { + overflow: hidden; + margin: 0 20px; + height: 360px; +} +@media screen and (max-width: 768px) { + .type-404 .error-content { + margin: 0; + height: 500px; + } +} +.type-404 .error-content .error-img { + display: inline-block; + overflow: hidden; + width: 50%; + height: 100%; +} +@media screen and (max-width: 768px) { + .type-404 .error-content .error-img { + width: 100%; + height: 45%; + } +} +.type-404 .error-content .error-img img { + background-color: #49b1f5; +} +.type-404 .error-content .error-info { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-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; + -ms-flex-line-pack: center; + -webkit-align-content: center; + align-content: center; + width: 50%; + height: 100%; + vertical-align: top; + text-align: center; +} +@media screen and (max-width: 768px) { + .type-404 .error-content .error-info { + width: 100%; + height: 55%; + } +} +.type-404 .error-content .error-info .error_title { + margin-top: -0.6em; + font-size: 9em; +} +@media screen and (max-width: 768px) { + .type-404 .error-content .error-info .error_title { + font-size: 8em; + } +} +.type-404 .error-content .error-info .error_subtitle { + margin-top: -3em; + word-break: break-word; + font-size: 1.6em; + -webkit-line-clamp: 2; +} +.type-404 .nc { + margin-top: 5%; + padding: 0 20px; +} +.type-404 #footer { + display: none; +} +.type-404 + #rightside { + display: none; +} +.article-sort { + margin-left: 10px; + padding-left: 20px; + border-left: 2px solid #aadafa; +} +.article-sort-title { + position: relative; + margin-left: 10px; + padding-bottom: 20px; + padding-left: 20px; + font-size: 1.72em; +} +.article-sort-title:hover:before { + border-color: var(--pseudo-hover); +} +.article-sort-title:before { + position: absolute; + top: calc(((100% - 36px) / 2)); + left: -9px; + z-index: 1; + width: 10px; + height: 10px; + border: 5px solid #49b1f5; + border-radius: 10px; + background: var(--card-bg); + content: ''; + line-height: 10px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.article-sort-title:after { + position: absolute; + bottom: 0; + left: 0; + z-index: 0; + width: 2px; + height: 1.5em; + background: #aadafa; + content: ''; +} +.article-sort-item { + position: relative; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin: 0 0 20px 10px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.article-sort-item:hover:before { + border-color: var(--pseudo-hover); +} +.article-sort-item:before { + position: absolute; + left: calc(-20px - 17px); + width: 6px; + height: 6px; + border: 3px solid #49b1f5; + border-radius: 6px; + background: var(--card-bg); + content: ''; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.article-sort-item.no-article-cover { + height: 80px; +} +.article-sort-item.no-article-cover .article-sort-item-info { + padding: 0; +} +.article-sort-item.year { + font-size: 1.43em; + margin-bottom: 10px; +} +.article-sort-item.year:hover:before { + border-color: #49b1f5; +} +.article-sort-item.year:before { + border-color: var(--pseudo-hover); +} +.article-sort-item-time { + color: var(--card-meta); + font-size: 0.85em; +} +.article-sort-item-time time { + padding-left: 6px; + cursor: default; +} +.article-sort-item-title { + color: var(--font-color); + font-size: 1.05em; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + -webkit-line-clamp: 2; +} +.article-sort-item-title:hover { + color: #49b1f5; + -webkit-transform: translateX(10px); + -moz-transform: translateX(10px); + -o-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(10px); +} +.article-sort-item-img { + overflow: hidden; + width: 100px; + height: 70px; + border-radius: 6px; +} +@media screen and (max-width: 768px) { + .article-sort-item-img { + width: 70px; + height: 70px; + } +} +.article-sort-item-info { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 0 16px; +} +.category-lists .category-title { + font-size: 2.57em; +} +@media screen and (max-width: 768px) { + .category-lists .category-title { + font-size: 2em; + } +} +.category-lists .category-list { + margin-bottom: 0; +} +.category-lists .category-list a { + color: var(--font-color); +} +.category-lists .category-list a:hover { + color: #49b1f5; +} +.category-lists .category-list .category-list-count { + margin-left: 8px; + color: var(--card-meta); +} +.category-lists .category-list .category-list-count:before { + content: '('; +} +.category-lists .category-list .category-list-count:after { + content: ')'; +} +.category-lists ul { + padding: 0 0 0 20px; +} +.category-lists ul ul { + padding-left: 4px; +} +.category-lists ul li { + position: relative; + margin: 6px 0; + padding: 0.12em 0.4em 0.12em 1.4em; +} +#body-wrap { + 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; + min-height: 100vh; +} +.layout { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1 auto; + -ms-flex: 1 auto; + flex: 1 auto; + margin: 0 auto; + padding: 40px 15px; + max-width: 1200px; + width: 100%; +} +@media screen and (max-width: 900px) { + .layout { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } +} +@media screen and (max-width: 768px) { + .layout { + padding: 20px 5px; + } +} +@media screen and (min-width: 2000px) { + .layout { + max-width: 60%; + } +} +.layout > div:first-child:not(.nc) { + -webkit-align-self: flex-start; + align-self: flex-start; + -ms-flex-item-align: start; + padding: 50px 40px; +} +@media screen and (max-width: 768px) { + .layout > div:first-child:not(.nc) { + padding: 36px 14px; + } +} +.layout > div:first-child { + width: 74%; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +@media screen and (max-width: 900px) { + .layout > div:first-child { + width: 100% !important; + } +} +.layout.hide-aside { + max-width: 1000px; +} +@media screen and (min-width: 2000px) { + .layout.hide-aside { + max-width: 1300px; + } +} +.layout.hide-aside > div { + width: 100% !important; +} +.apple #page-header.full_page { + background-attachment: scroll !important; +} +.apple .recent-post-item, +.apple .avatar-img, +.apple .flink-item-icon { + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +.container .flink { + margin-bottom: 20px; +} +.container .flink .flink-list { + overflow: auto; + padding: 10px 10px 0; + text-align: center; +} +.container .flink .flink-list > .flink-list-item { + position: relative; + float: left; + overflow: hidden; + margin: 15px 7px; + width: calc(100% / 3 - 15px); + height: 90px; + line-height: 17px; + -webkit-transform: translateZ(0); + border-radius: 8px; +} +@media screen and (max-width: 1024px) { + .container .flink .flink-list > .flink-list-item { + width: calc(50% - 15px) !important; + } +} +@media screen and (max-width: 600px) { + .container .flink .flink-list > .flink-list-item { + width: calc(100% - 15px) !important; + } +} +.container .flink .flink-list > .flink-list-item:hover .flink-item-icon { + margin-left: -10px; + width: 0; +} +.container .flink .flink-list > .flink-list-item:before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + background: var(--text-bg-hover); + content: ''; + -webkit-transition: -webkit-transform 0.3s ease-out; + -moz-transition: -moz-transform 0.3s ease-out; + -o-transition: -o-transform 0.3s ease-out; + -ms-transition: -ms-transform 0.3s ease-out; + transition: transform 0.3s ease-out; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); +} +.container .flink .flink-list > .flink-list-item:hover:before, +.container .flink .flink-list > .flink-list-item:focus:before, +.container .flink .flink-list > .flink-list-item:active:before { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +.container .flink .flink-list > .flink-list-item a { + color: var(--font-color); + text-decoration: none; +} +.container .flink .flink-list > .flink-list-item a .flink-item-icon { + float: left; + overflow: hidden; + margin: 15px 10px; + width: 60px; + height: 60px; + border-radius: 7px; + -webkit-transition: width 0.3s ease-out; + -moz-transition: width 0.3s ease-out; + -o-transition: width 0.3s ease-out; + -ms-transition: width 0.3s ease-out; + transition: width 0.3s ease-out; +} +.container .flink .flink-list > .flink-list-item a .flink-item-icon img { + width: 100%; + height: 100%; + -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.3s; + -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s; + -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s; + -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s; + transition: filter 375ms ease-in 0.2s, transform 0.3s; + object-fit: cover; +} +.container .flink .flink-list > .flink-list-item a .img-alt { + display: none; +} +.container .flink .flink-item-name { + padding: 16px 10px 0 0; + height: 40px; + font-weight: bold; + font-size: 1.43em; +} +.container .flink .flink-item-desc { + padding: 16px 10px 16px 0; + height: 50px; + font-size: 0.93em; +} +.container .flink .flink-name { + margin-bottom: 5px; + font-weight: bold; + font-size: 1.5em; +} +#recent-posts .recent-post-item { + position: relative; + overflow: hidden; + margin-bottom: 20px; + display: inline-block; + width: calc(100% / 2 - 8px); + vertical-align: top; +} +@media screen and (max-width: 768px) { + #recent-posts .recent-post-item { + width: 100%; + } +} +@media screen and (min-width: 2000px) { + #recent-posts .recent-post-item { + width: calc(100% / 3 - 8px); + } +} +#recent-posts .recent-post-item:hover .post-bg { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +#recent-posts .recent-post-item.ads-wrap { + display: block !important; + height: auto !important; +} +#recent-posts .recent-post-item .post_cover { + overflow: hidden; + width: 100%; + height: 230px; +} +@media screen and (max-width: 768px) { + #recent-posts .recent-post-item .post_cover { + width: 100%; + height: 230px; + } +} +#recent-posts .recent-post-item .post_cover .post-bg { + z-index: -4; +} +#recent-posts .recent-post-item >.recent-post-info { + padding: 30px 30px 25px; +} +@media screen and (max-width: 768px) { + #recent-posts .recent-post-item >.recent-post-info { + padding: 20px 20px 30px; + width: 100%; + } +} +#recent-posts .recent-post-item >.recent-post-info.no-cover { + padding: 35px 30px; +} +@media screen and (max-width: 768px) { + #recent-posts .recent-post-item >.recent-post-info.no-cover { + padding: 30px 20px; + } +} +#recent-posts .recent-post-item >.recent-post-info > .article-title { + color: var(--text-highlight-color); + font-size: 1.55em; + line-height: 1.4; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + -webkit-line-clamp: 2; +} +#recent-posts .recent-post-item >.recent-post-info > .article-title .sticky { + margin-right: 10px; + color: #ff7242; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +@media screen and (max-width: 768px) { + #recent-posts .recent-post-item >.recent-post-info > .article-title { + font-size: 1.43em; + } +} +#recent-posts .recent-post-item >.recent-post-info > .article-title:hover { + color: #49b1f5; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap { + margin: 6px 0; + color: var(--card-meta); + font-size: 0.9em; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap > .post-meta-date { + cursor: default; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap i { + margin: 0 4px 0 0; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .fa-spinner { + margin: 0; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-label { + padding-right: 4px; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-separator { + margin: 0 6px; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-link { + margin: 0 4px; +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap a { + color: var(--card-meta); +} +#recent-posts .recent-post-item >.recent-post-info > .article-meta-wrap a:hover { + color: #49b1f5; + text-decoration: underline; +} +#recent-posts .recent-post-item >.recent-post-info > .content { + -webkit-line-clamp: 2; + word-break: break-word; +} +#rightMenu { + display: none; + position: fixed; + width: 160px; + height: fit-content; + top: 10%; + left: 10%; + background-color: var(--icat-maskbgdeep); + backdrop-filter: blur(20px) saturate(1.5); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + border: var(--style-border); + border-radius: 8px; + z-index: 99994; + -webkit-box-shadow: var(--icat-shadow-black); + box-shadow: var(--icat-shadow-black); + -webkit-transition: border 0.3s; + -moz-transition: border 0.3s; + -o-transition: border 0.3s; + -ms-transition: border 0.3s; + transition: border 0.3s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#rightMenu:hover { + border: var(--style-border-hover-always); +} +#rightMenu .rightMenu-group { + padding: 6px 6px; +} +#rightMenu .rightMenu-group:not(:nth-last-child(1)) { + border-bottom: 1px solid var(--icat-card-border); +} +#rightMenu .rightMenu-group.rightMenu-small { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + height: 40px; + padding: 0 4px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition: 0.6s; + -moz-transition: 0.6s; + -o-transition: 0.6s; + -ms-transition: 0.6s; + transition: 0.6s; +} +#rightMenu .rightMenu-group .rightMenu-item { + height: 30px; + border-radius: 6px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + color: var(--font-color); + cursor: pointer; +} +#rightMenu .rightMenu-group .rightMenu-item * { + height: 40px; + line-height: 40px; +} +#rightMenu .rightMenu-group .rightMenu-item:not(:last-child) { + margin-bottom: 4px; +} +#rightMenu .rightMenu-group .rightMenu-item:hover { + background-color: var(--icat-blue); + color: var(--icat-white); +} +#rightMenu .rightMenu-group .rightMenu-item i { + display: inline-block; + text-align: center; + line-height: 30px; + width: 30px; + height: 30px; + padding: 0 5px; +} +#rightMenu .rightMenu-group .rightMenu-item .icat-refresh, +#rightMenu .rightMenu-group .rightMenu-item .icat-changing-over, +#rightMenu .rightMenu-group .rightMenu-item .icat-simple-complex { + font-weight: 900; +} +#rightMenu-mask { + position: fixed; + width: 100vw; + height: 100vh; + background: 0 0; + top: 0; + left: 0; + display: none; + z-index: 998; +} +#article-container .shuoshuo-item { + margin-bottom: 20px; + padding: 35px 30px 30px; +} +@media screen and (max-width: 768px) { + #article-container .shuoshuo-item { + padding: 25px 20px 20px; + } +} +#article-container .shuoshuo-item-header { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + cursor: default; +} +#article-container .shuoshuo-avatar { + overflow: hidden; + width: 40px; + height: 40px; + border-radius: 40px; +} +#article-container .shuoshuo-avatar img { + margin: 0; + width: 100%; + height: 100%; +} +#article-container .shuoshuo-info { + margin-left: 10px; + line-height: 1.5; +} +#article-container .shuoshuo-date { + color: #858585; + font-size: 0.8em; +} +#article-container .shuoshuo-content { + padding: 15px 0 10px; +} +#article-container .shuoshuo-content > *:last-child { + margin-bottom: 0; +} +#article-container .shuoshuo-footer { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#article-container .shuoshuo-footer.flex-between { + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +#article-container .shuoshuo-footer.flex-end { + -webkit-box-pack: end; + -moz-box-pack: end; + -o-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; +} +#article-container .shuoshuo-footer .shuoshuo-tag { + display: inline-block; + margin-right: 8px; + padding: 0 8px; + width: fit-content; + border: 1px solid #49b1f5; + border-radius: 12px; + color: #49b1f5; + font-size: 0.85em; + cursor: default; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +#article-container .shuoshuo-footer .shuoshuo-tag:hover { + background: #49b1f5; + color: var(--white); +} +#article-container .shuoshuo-footer .shuoshuo-comment-btn { + padding: 2px; + color: #90a4ae; + cursor: pointer; +} +#article-container .shuoshuo-footer .shuoshuo-comment-btn:hover { + color: #49b1f5; +} +#article-container .shuoshuo-comment { + padding-top: 10px; +} +#article-container .shuoshuo-comment.no-comment { + display: none; +} +.shuoshuo-navigation { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -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; + margin-top: 20px; + padding: 20px 0; +/* 震動動畫 */ +} +.shuoshuo-navigation button { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -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: 2.7em; + height: 2.7em; + background-color: var(--btn-bg); + color: var(--btn-color); + font-size: 0.9em; + line-height: 2.5em; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + border-radius: 6px; +} +.shuoshuo-navigation button:hover:not(:disabled) { + background-color: var(--btn-hover-color); +} +.shuoshuo-navigation button:disabled { + background: #f5f5f5; + color: #ccc; + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + cursor: not-allowed; +} +.shuoshuo-navigation .shuoshuo-page-info { + margin: 0 15px; + color: #858585; + white-space: nowrap; + font-size: 0.9em; +} +.shuoshuo-navigation .shuoshuo-page-input { + margin-right: 12px; + padding: 0 15px; + height: 2.7em; + border: 1px solid var(--btn-bg); + background: var(--card-bg); + color: #858585; + text-align: center; + font-size: 0.9em; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + border-radius: 6px; +/* 隱藏 number 輸入框的上下箭頭 */ +/* Firefox */ + -moz-appearance: textfield; +/* 當作為頁碼按鈕時的樣式 */ +/* 超出範圍時的紅色樣式 */ +} +.shuoshuo-navigation .shuoshuo-page-input:focus { + outline: none; + border-width: 2px; +} +.shuoshuo-navigation .shuoshuo-page-input:focus::placeholder { + color: transparent; +} +.shuoshuo-navigation .shuoshuo-page-input::-webkit-outer-spin-button, +.shuoshuo-navigation .shuoshuo-page-input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; +} +.shuoshuo-navigation .shuoshuo-page-input.shuoshuo-page-num { + min-width: 40px; + width: 40px; + border: none; + background: #49b1f5; + color: var(--white); + font-weight: 500; + cursor: text; +} +.shuoshuo-navigation .shuoshuo-page-input.shuoshuo-page-num:focus { + border: 1px solid #49b1f5; + background: var(--white); + color: #333; +} +.shuoshuo-navigation .shuoshuo-page-input.invalid { + border-color: #ff4757; + background-color: #ffeaea; + color: #ff4757; + -webkit-animation: shake 0.5s ease-in-out; + -moz-animation: shake 0.5s ease-in-out; + -o-animation: shake 0.5s ease-in-out; + -ms-animation: shake 0.5s ease-in-out; + animation: shake 0.5s ease-in-out; +} +@-moz-keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-2px); + -moz-transform: translateX(-2px); + -o-transform: translateX(-2px); + -ms-transform: translateX(-2px); + transform: translateX(-2px); + } + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(2px); + -moz-transform: translateX(2px); + -o-transform: translateX(2px); + -ms-transform: translateX(2px); + transform: translateX(2px); + } +} +@-webkit-keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-2px); + -moz-transform: translateX(-2px); + -o-transform: translateX(-2px); + -ms-transform: translateX(-2px); + transform: translateX(-2px); + } + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(2px); + -moz-transform: translateX(2px); + -o-transform: translateX(2px); + -ms-transform: translateX(2px); + transform: translateX(2px); + } +} +@-o-keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-2px); + -moz-transform: translateX(-2px); + -o-transform: translateX(-2px); + -ms-transform: translateX(-2px); + transform: translateX(-2px); + } + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(2px); + -moz-transform: translateX(2px); + -o-transform: translateX(2px); + -ms-transform: translateX(2px); + transform: translateX(2px); + } +} +@keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-2px); + -moz-transform: translateX(-2px); + -o-transform: translateX(-2px); + -ms-transform: translateX(-2px); + transform: translateX(-2px); + } + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(2px); + -moz-transform: translateX(2px); + -o-transform: translateX(2px); + -ms-transform: translateX(2px); + transform: translateX(2px); + } +} +.tag-cloud-list { + -webkit-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); + -moz-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); + -o-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); + -ms-animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); + animation: tagsFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} +.tag-cloud-list:hover a:not(:hover) { + opacity: 0.7; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + -webkit-transform: scale(0.98); + -moz-transform: scale(0.98); + -o-transform: scale(0.98); + -ms-transform: scale(0.98); + transform: scale(0.98); +} +.tag-cloud-list a { + position: relative; + display: inline-block; + margin: 5px; + padding: 3px 12px; + line-height: 1.7; + -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 7px; + overflow: hidden; + color: #fff; + -webkit-transform: translateY(0) scale(1); + -moz-transform: translateY(0) scale(1); + -o-transform: translateY(0) scale(1); + -ms-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + will-change: transform, background-color, box-shadow; +} +.tag-cloud-list a::before { + position: absolute; + top: 0; + left: -100%; + z-index: -1; + width: 100%; + height: 100%; + background: -webkit-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); + background: -moz-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); + background: -o-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); + background: -ms-linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent); + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); + content: ''; + -webkit-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); + transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} +.tag-cloud-list a:hover { + background: var(--btn-hover-color) !important; + -webkit-box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.05); + box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.05); + color: var(--btn-color) !important; + -webkit-transform: translateY(-2px) scale(1.02); + -moz-transform: translateY(-2px) scale(1.02); + -o-transform: translateY(-2px) scale(1.02); + -ms-transform: translateY(-2px) scale(1.02); + transform: translateY(-2px) scale(1.02); +} +.tag-cloud-list a:hover::before { + left: 100%; +} +.tag-cloud-list a:active { + -webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); + box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); + -webkit-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + -webkit-transform: translateY(-1px) scale(0.98); + -moz-transform: translateY(-1px) scale(0.98); + -o-transform: translateY(-1px) scale(0.98); + -ms-transform: translateY(-1px) scale(0.98); + transform: translateY(-1px) scale(0.98); +} +@media screen and (max-width: 768px) { + .tag-cloud-list a { + zoom: 0.85; + } + .tag-cloud-list a:hover { + -webkit-transform: translateY(-1px) scale(1.01); + -moz-transform: translateY(-1px) scale(1.01); + -o-transform: translateY(-1px) scale(1.01); + -ms-transform: translateY(-1px) scale(1.01); + transform: translateY(-1px) scale(1.01); + } + .tag-cloud-list a:active { + -webkit-transform: translateY(0) scale(0.99); + -moz-transform: translateY(0) scale(0.99); + -o-transform: translateY(0) scale(0.99); + -ms-transform: translateY(0) scale(0.99); + transform: translateY(0) scale(0.99); + } + .tag-cloud-list a::before { + display: none; + } +} +.tag-cloud-title { + font-size: 2.57em; + -webkit-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); + -moz-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); + -o-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); + -ms-animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); + animation: titleSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} +@media screen and (max-width: 768px) { + .tag-cloud-title { + font-size: 2em; + } +} +.page-title + .tag-cloud-list { + text-align: left; +} +@-moz-keyframes tagsFadeIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes tagsFadeIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes tagsFadeIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes tagsFadeIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes titleSlideIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateX(-30px); + -moz-transform: translateX(-30px); + -o-transform: translateX(-30px); + -ms-transform: translateX(-30px); + transform: translateX(-30px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes titleSlideIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateX(-30px); + -moz-transform: translateX(-30px); + -o-transform: translateX(-30px); + -ms-transform: translateX(-30px); + transform: translateX(-30px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-o-keyframes titleSlideIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateX(-30px); + -moz-transform: translateX(-30px); + -o-transform: translateX(-30px); + -ms-transform: translateX(-30px); + transform: translateX(-30px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes titleSlideIn { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateX(-30px); + -moz-transform: translateX(-30px); + -o-transform: translateX(-30px); + -ms-transform: translateX(-30px); + transform: translateX(-30px); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +:root { + --liushen-title-font-color: #0883b7; + --liushen-maskbg: rgba(255,255,255,0.85); + --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42a2ff 54%, #d6b300 100%); + --liushen-card-secondbg: #f1f3f8; + --liushen-text: #4c4948; + --liushen-secondtext: rgba(60,60,67,0.8); +} +[data-theme='dark'] { + --liushen-title-font-color: #0883b7; + --liushen-maskbg: rgba(0,0,0,0.85); + --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, rgba(214,178,0,0.46) 0%, rgba(66,161,255,0.53) 54%, rgba(214,178,0,0.49) 100%); + --liushen-card-secondbg: #3e3f41; + --liushen-text: rgba(255,255,255,0.702); + --liushen-secondtext: #a1a2b8; +} +.ai-summary { + background-color: var(--liushen-maskbg); + background: var(--liushen-card-secondbg); + border-radius: 12px; + padding: 8px 8px 12px 8px; + line-height: 1.3; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-bottom: 16px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + gap: 5px; + position: relative; +} +.ai-summary::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + filter: blur(8px); + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + background-image: var(--liushen-ai-bg); + -webkit-transform: scaleX(1) scaleY(0.95) translateY(2px); + -moz-transform: scaleX(1) scaleY(0.95) translateY(2px); + -o-transform: scaleX(1) scaleY(0.95) translateY(2px); + -ms-transform: scaleX(1) scaleY(0.95) translateY(2px); + transform: scaleX(1) scaleY(0.95) translateY(2px); +} +.ai-summary::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; + border-radius: 12px; + background: var(--liushen-maskbg); +} +.ai-summary .ai-explanation { + z-index: 10; + padding: 8px 12px; + font-size: 15px; + line-height: 1.4; + color: var(--liushen-text); + text-align: justify; +} +.ai-summary .ai-explanation::after { + content: ''; + display: inline-block; + width: 8px; + height: 2px; + margin-left: 2px; + background: var(--liushen-text); + vertical-align: bottom; + -webkit-animation: blink-underline 1s ease-in-out infinite; + -moz-animation: blink-underline 1s ease-in-out infinite; + -o-animation: blink-underline 1s ease-in-out infinite; + -ms-animation: blink-underline 1s ease-in-out infinite; + animation: blink-underline 1s ease-in-out infinite; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + position: relative; + bottom: 3px; +} +.ai-summary .ai-title { + z-index: 10; + font-size: 14px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border-radius: 8px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + position: relative; + padding: 0 12px; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.ai-summary .ai-title .ai-title-left { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + color: var(--liushen-title-font-color); +} +.ai-summary .ai-title .ai-title-left i { + margin-right: 3px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + color: var(--liushen-title-font-color); + border-radius: 20px; + -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; +} +.ai-summary .ai-title .ai-title-left .ai-title-text { + font-weight: 500; +} +.ai-summary .ai-title .ai-tag { + color: var(--liushen-secondtext); + font-weight: 300; + margin-left: auto; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +@-moz-keyframes blink-underline { + 0%, 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 50% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-webkit-keyframes blink-underline { + 0%, 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 50% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-o-keyframes blink-underline { + 0%, 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 50% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@keyframes blink-underline { + 0%, 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 50% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +#aside-content { + width: 26%; +} +@media screen and (min-width: 900px) { + #aside-content { + padding-left: 15px; + } +} +@media screen and (max-width: 900px) { + #aside-content { + margin-top: 20px; + width: 100%; + } +} +#aside-content .card-widget { + position: relative; + overflow: hidden; + margin-bottom: 20px; + padding: 20px 24px; +} +#aside-content .card-info .author-info-name { + font-weight: 500; + font-size: 1.57em; +} +#aside-content .card-info .author-info-description { + margin-top: -0.42em; +} +#aside-content .card-info .site-data { + margin: 14px 0 4px; +} +#aside-content .card-info .card-info-social-icons { + margin: 6px 0 -6px; +} +#aside-content .card-info .card-info-social-icons .social-icon { + margin: 0 10px; + color: var(--font-color); + font-size: 1.4em; +} +#aside-content .card-info .card-info-social-icons i { + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +#aside-content .card-info .card-info-social-icons i:hover { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); +} +#aside-content .card-info #card-info-btn { + display: block; + margin-top: 14px; + background-color: var(--btn-bg); + color: var(--btn-color); + text-align: center; + line-height: 2.4; + border-radius: 7px; +} +#aside-content .card-info #card-info-btn:hover { + background-color: var(--btn-hover-color); +} +#aside-content .card-info #card-info-btn span { + padding-left: 10px; +} +#aside-content .item-headline { + padding-bottom: 6px; + font-size: 1.2em; +} +#aside-content .item-headline span { + margin-left: 6px; +} +@media screen and (min-width: 900px) { + #aside-content .sticky_layout { + position: sticky; + position: -webkit-sticky; + top: 20px; + -webkit-transition: top 0.3s; + -moz-transition: top 0.3s; + -o-transition: top 0.3s; + -ms-transition: top 0.3s; + transition: top 0.3s; + } +} +#aside-content .card-tag-cloud a { + display: inline-block; + padding: 0 4px; + line-height: 1.8; +} +#aside-content .card-tag-cloud a:hover { + color: #49b1f5 !important; +} +#aside-content .aside-list > span { + display: block; + margin-bottom: 10px; + text-align: center; +} +#aside-content .aside-list > .aside-list-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 6px 0; +} +#aside-content .aside-list > .aside-list-item:first-child { + padding-top: 0; +} +#aside-content .aside-list > .aside-list-item:not(:last-child) { + border-bottom: 1px dashed #f5f5f5; +} +#aside-content .aside-list > .aside-list-item:last-child { + padding-bottom: 0; +} +#aside-content .aside-list > .aside-list-item .thumbnail { + overflow: hidden; + width: 4em; + height: 4em; + border-radius: 6px; +} +#aside-content .aside-list > .aside-list-item .content { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 10px; + word-break: break-all; +} +#aside-content .aside-list > .aside-list-item .content > .name { + -webkit-line-clamp: 1; +} +#aside-content .aside-list > .aside-list-item .content > time, +#aside-content .aside-list > .aside-list-item .content > .name { + display: block; + color: var(--card-meta); + font-size: 0.85em; +} +#aside-content .aside-list > .aside-list-item .content > .title, +#aside-content .aside-list > .aside-list-item .content > .comment { + color: var(--font-color); + line-height: 1.5; + -webkit-line-clamp: 2; +} +#aside-content .aside-list > .aside-list-item .content > .title:hover, +#aside-content .aside-list > .aside-list-item .content > .comment:hover { + color: #49b1f5; +} +#aside-content .aside-list > .aside-list-item.no-cover { + min-height: 4.4em; +} +#aside-content .card-archives ul.card-archive-list, +#aside-content .card-categories ul.card-category-list { + margin: 0; + padding: 0; + list-style: none; +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + margin: 2px 0; + padding: 2px 8px; + color: var(--font-color); + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + border-radius: 6px; +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover { + padding: 2px 12px; + background-color: var(--text-bg-hover); + color: var(--white); +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +#aside-content .card-categories .card-category-list.child { + padding: 0 0 0 16px; + overflow: hidden; + max-height: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + visibility: hidden; + -webkit-transition: max-height 0.3s ease, opacity 0.3s ease; + -moz-transition: max-height 0.3s ease, opacity 0.3s ease; + -o-transition: max-height 0.3s ease, opacity 0.3s ease; + -ms-transition: max-height 0.3s ease, opacity 0.3s ease; + transition: max-height 0.3s ease, opacity 0.3s ease; +} +#aside-content .card-categories .card-category-list > .parent > a.expand i { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +#aside-content .card-categories .card-category-list > .parent > a.expand + .child { + max-height: 1000px; + opacity: 1; + -ms-filter: none; + filter: none; + visibility: visible; +} +#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name { + width: 70% !important; +} +#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count { + width: calc(100% - 70% - 20px); + text-align: right; +} +#aside-content .card-categories .card-category-list > .parent > a i { + float: right; + margin-right: -0.5em; + padding: 0.5em; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); +} +#aside-content .card-webinfo .webinfo .webinfo-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 2px 10px 0; +} +#aside-content .card-webinfo .webinfo .webinfo-item div:first-child { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-right: 20px; +} +@media screen and (min-width: 901px) { + #aside-content #card-toc { + right: 0 !important; + } +} +@media screen and (max-width: 900px) { + #aside-content #card-toc { + position: fixed; + right: 55px; + bottom: 30px; + z-index: 100; + max-width: 380px; + max-height: calc(100% - 60px); + width: calc(100% - 80px); + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: right bottom; + -moz-transform-origin: right bottom; + -o-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + } + #aside-content #card-toc.open { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +#aside-content #card-toc .toc-percentage { + float: right; + margin-top: -9px; + color: #a9a9a9; + font-style: italic; + font-size: 140%; +} +#aside-content #card-toc .toc-content { + overflow-y: scroll; + overflow-y: overlay; + margin: 0 -24px; + max-height: calc(100vh - 120px); + width: calc(100% + 48px); +} +@media screen and (max-width: 900px) { + #aside-content #card-toc .toc-content { + max-height: calc(100vh - 140px); + } +} +#aside-content #card-toc .toc-content > * { + margin: 0 20px !important; +} +#aside-content #card-toc .toc-content > * > .toc-item > .toc-child { + margin-left: 10px; + padding-left: 10px; + border-left: 1px solid var(--dark-grey); +} +#aside-content #card-toc .toc-content:not(.is-expand) .toc-child { + display: none; +} +@media screen and (max-width: 900px) { + #aside-content #card-toc .toc-content:not(.is-expand) .toc-child { + display: block !important; + } +} +#aside-content #card-toc .toc-content:not(.is-expand) .toc-item.active .toc-child { + display: block; +} +#aside-content #card-toc .toc-content ol, +#aside-content #card-toc .toc-content li { + list-style: none; +} +#aside-content #card-toc .toc-content > ol { + padding: 0 !important; +} +#aside-content #card-toc .toc-content ol { + margin: 0; + padding-left: 18px; +} +#aside-content #card-toc .toc-content .toc-link { + display: block; + margin: 4px 0; + padding: 1px 8px; + color: var(--toc-link-color); + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + border-radius: 6px; +} +#aside-content #card-toc .toc-content .toc-link:hover { + color: #49b1f5; +} +#aside-content #card-toc .toc-content .toc-link.active { + background: #00c4b6; + color: #fff; +} +#aside-content .sticky_layout:only-child > :first-child { + margin-top: 0; +} +#aside-content .card-more-btn { + float: right; + color: inherit; +} +#aside-content .card-more-btn:hover { + -webkit-animation: more-btn-move 1s infinite; + -moz-animation: more-btn-move 1s infinite; + -o-animation: more-btn-move 1s infinite; + -ms-animation: more-btn-move 1s infinite; + animation: more-btn-move 1s infinite; +} +#aside-content .card-announcement .item-headline i { + color: #f00; +} +.avatar-img { + overflow: hidden; + margin: 0 auto; + width: 110px; + height: 110px; + border-radius: 70px; +} +.avatar-img img { + width: 100%; + height: 100%; + -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.3s; + -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s; + -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s; + -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s; + transition: filter 375ms ease-in 0.2s, transform 0.3s; + object-fit: cover; +} +.avatar-img img:hover { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); +} +.site-data { + display: table; + width: 100%; + table-layout: fixed; +} +.site-data > a { + display: table-cell; +} +.site-data > a div { + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +.site-data > a:hover div { + color: #49b1f5 !important; +} +.site-data > a .headline { + color: var(--font-color); + font-size: 0.95em; +} +.site-data > a .length-num { + margin-top: -0.45em; + color: var(--text-highlight-color); + font-size: 1.2em; +} +@media screen and (min-width: 900px) { + html.hide-aside .layout { + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + html.hide-aside .layout > .aside-content { + display: none; + } + html.hide-aside .layout > div:first-child { + width: 80%; + } +} +.page .sticky_layout { + 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; +} +@-moz-keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@-webkit-keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@-o-keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@-moz-keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-o-keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-moz-keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@-webkit-keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@-o-keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +#category-bar { + padding: 7px 11px; + background: var(--card-bg); + border-radius: 8px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + white-space: nowrap; + overflow: hidden; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + height: 50px; + width: 100%; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin-bottom: 20px; +} +#category-bar .category-bar-right { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border-radius: 8px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#category-bar .category-bar-right .category-bar-more { + margin-left: 4px; + margin-right: 4px; + font-weight: 700; + border-radius: 8px; + padding: 0 8px; +} +#category-bar .category-bar-items { + width: 100%; + white-space: nowrap; + overflow-x: scroll; + scrollbar-width: none; + -ms-overflow-style: none; + overflow-y: hidden; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border-radius: 8px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + height: 30px; +} +#category-bar .category-bar-items::-webkit-scrollbar { + display: none; +} +#category-bar .category-bar-items .category-bar-item a { + padding: 0.1rem 0.5rem; + margin-right: 6px; + font-weight: 700; + border-radius: 8px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + height: 30px; +} +#category-bar .category-bar-items .category-bar-item.select a { + background: #3eb8be; + color: var(--btn-color); +} +#post-comment .comment-head { + margin-bottom: 20px; +} +#post-comment .comment-head:after { + display: block; + clear: both; + content: ''; +} +#post-comment .comment-head .comment-headline { + display: inline-block; + vertical-align: middle; + font-weight: 700; + font-size: 1.43em; +} +#post-comment .comment-head .comment-switch { + display: inline-block; + float: right; + margin: 2px auto 0; + padding: 4px 16px; + width: max-content; + border-radius: 8px; + background: #f6f8fa; +} +#post-comment .comment-head .comment-switch .first-comment { + color: #49b1f5; +} +#post-comment .comment-head .comment-switch .second-comment { + color: #ff7242; +} +#post-comment .comment-head .comment-switch #switch-btn { + position: relative; + display: inline-block; + margin: -4px 8px 0; + width: 42px; + height: 22px; + border-radius: 34px; + background-color: #49b1f5; + vertical-align: middle; + cursor: pointer; + -webkit-transition: 0.4s; + -moz-transition: 0.4s; + -o-transition: 0.4s; + -ms-transition: 0.4s; + transition: 0.4s; +} +#post-comment .comment-head .comment-switch #switch-btn:before { + position: absolute; + bottom: 4px; + left: 4px; + width: 14px; + height: 14px; + border-radius: 50%; + background-color: #fff; + content: ''; + -webkit-transition: 0.4s; + -moz-transition: 0.4s; + -o-transition: 0.4s; + -ms-transition: 0.4s; + transition: 0.4s; +} +#post-comment .comment-wrap > div { + -webkit-animation: tabshow 0.5s; + -moz-animation: tabshow 0.5s; + -o-animation: tabshow 0.5s; + -ms-animation: tabshow 0.5s; + animation: tabshow 0.5s; +} +#post-comment .comment-wrap > div:nth-child(2) { + display: none; +} +#post-comment.move #switch-btn { + background-color: #ff7242; +} +#post-comment.move #switch-btn:before { + -webkit-transform: translateX(20px); + -moz-transform: translateX(20px); + -o-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); +} +#post-comment.move .comment-wrap > div:first-child { + display: none; +} +#post-comment.move .comment-wrap > div:last-child { + display: block; +} +#footer { + position: relative; + background-color: #49b1f5; + background-attachment: scroll; + background-position: bottom; + background-size: cover; +} +#footer > * { + position: relative; + color: var(--light-grey); +} +#footer a { + color: var(--light-grey); + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +#footer a:hover { + color: #49b1f5; +} +#footer .footer-separator { + margin: 0 4px; +} +#footer .icp-icon { + padding: 0 4px; + max-height: 1.4em; + width: auto; + vertical-align: text-bottom; +} +#footer .footer-flex { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + margin: 0 auto; + padding: 40px 60px; + max-width: 1200px; + width: 100%; + text-align: left; + gap: 13px; +} +@media screen and (max-width: 768px) { + #footer .footer-flex { + padding: 30px; + gap: 10px; + } +} +#footer .footer-flex .footer-flex-items { + -webkit-flex-shrink: 0; + flex-shrink: 0; + min-width: 100px; + text-align: left; + white-space: nowrap; +} +#footer .footer-flex .footer-flex-title { + margin-bottom: 5px; + white-space: nowrap; + font-weight: 600; + font-size: 1.4em; +} +#footer .footer-flex .footer-flex-item { + margin: 10px 0; + white-space: nowrap; +} +#footer .footer-flex a { + display: block; + white-space: nowrap; +} +#footer .footer-other { + padding: 40px 20px; + width: 100%; + text-align: center; +} +#footer .footer-other .framework-info { + display: block; +} +#page-header { + position: relative; + width: 100%; + background-color: #49b1f5; + background-position: center center; + background-size: cover; + background-repeat: no-repeat; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +#page-header:not(.not-top-img):before { + position: absolute; + width: 100%; + height: 100%; + background-color: var(--mark-bg); + content: ''; +} +#page-header.full_page { + height: 100vh; + background-attachment: fixed; +} +#page-header.full_page #site-info { + position: absolute; + top: 43%; + padding: 0 10px; + width: 100%; +} +#page-header #site-title, +#page-header #site-subtitle, +#page-header #scroll-down .scroll-down-effects { + text-align: center; + text-shadow: 2px 2px 4px rgba(0,0,0,0.15); + line-height: 1.5; +} +#page-header #site-title { + margin: 0; + color: var(--white); + font-size: 1.85em; + -webkit-line-clamp: 3; +} +@media screen and (min-width: 768px) { + #page-header #site-title { + font-size: 2.85em; + } +} +#page-header #site-subtitle { + color: var(--light-grey); + font-size: 1.15em; +} +@media screen and (min-width: 768px) { + #page-header #site-subtitle { + font-size: 1.72em; + } +} +#page-header #site_social_icons { + display: none; + margin: 0 auto; + text-align: center; +} +@media screen and (max-width: 768px) { + #page-header #site_social_icons { + display: block; + } +} +#page-header #site_social_icons .social-icon { + margin: 0 10px; + color: var(--light-grey); + text-shadow: 2px 2px 4px rgba(0,0,0,0.15); + font-size: 1.43em; +} +#page-header #scroll-down { + position: absolute; + bottom: 10px; + width: 100%; + cursor: pointer; +} +#page-header #scroll-down .scroll-down-effects { + position: relative; + width: 100%; + color: var(--light-grey); + font-size: 20px; +} +#page-header.not-home-page { + height: 400px; +} +@media screen and (max-width: 768px) { + #page-header.not-home-page { + height: 280px; + } +} +#page-header #page-site-info { + position: absolute; + top: 200px; + padding: 0 10px; + width: 100%; +} +@media screen and (max-width: 768px) { + #page-header #page-site-info { + top: 140px; + } +} +#page-header.post-bg { + height: 400px; +} +@media screen and (max-width: 768px) { + #page-header.post-bg { + height: 360px; + } +} +#page-header #post-info { + position: absolute; + width: 100%; + bottom: 30px; +} +#page-header #post-info > * { + margin: 0 auto; + padding: 0 15px; + max-width: 1200px; +} +@media screen and (min-width: 768px) and (max-width: 1300px) { + #page-header #post-info > * { + padding: 0 30px; + } +} +@media screen and (min-width: 2000px) { + #page-header #post-info > * { + max-width: 70%; + } +} +#page-header.not-top-img { + margin-bottom: 10px; + height: 60px; + background: 0; +} +#page-header.not-top-img .title-seo { + display: none; +} +#page-header.not-top-img #nav { + background: rgba(255,255,255,0.8); + -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); + box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); +} +#page-header.not-top-img #nav a, +#page-header.not-top-img #nav span.site-page, +#page-header.not-top-img #nav .site-name { + color: var(--font-color); + text-shadow: none; +} +#page-header.nav-fixed #nav { + position: fixed; + top: -60px; + z-index: 91; + background: rgba(255,255,255,0.7); + -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); + box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6); + -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -ms-transition: -ms-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + will-change: transform; + backdrop-filter: blur(7px); +} +#page-header.nav-fixed #nav #blog-info { + color: var(--font-color); +} +#page-header.nav-fixed #nav #blog-info:hover { + color: #49b1f5; +} +#page-header.nav-fixed #nav #blog-info .site-name { + text-shadow: none; +} +#page-header.nav-fixed #nav #blog-info > a:first-child { + display: none; +} +#page-header.nav-fixed #nav #blog-info > a:last-child { + display: inline; +} +#page-header.nav-fixed #nav a, +#page-header.nav-fixed #nav span.site-page, +#page-header.nav-fixed #nav #toggle-menu { + color: var(--font-color); + text-shadow: none; +} +#page-header.nav-fixed #nav a:hover, +#page-header.nav-fixed #nav span.site-page:hover, +#page-header.nav-fixed #nav #toggle-menu:hover { + color: #49b1f5; +} +#page-header.nav-fixed.fixed #nav { + top: 0; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +#page-header.nav-visible:not(.fixed) #nav { + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; + -webkit-transform: translate3d(0, 100%, 0); + -moz-transform: translate3d(0, 100%, 0); + -o-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +#page-header.nav-visible:not(.fixed) + .layout > .aside-content > .sticky_layout { + top: 70px; + -webkit-transition: top 0.5s; + -moz-transition: top 0.5s; + -o-transition: top 0.5s; + -ms-transition: top 0.5s; + transition: top 0.5s; +} +#page-header.fixed #nav { + position: fixed; +} +#page-header.fixed + .layout > .aside-content > .sticky_layout { + top: 70px; + -webkit-transition: top 0.5s; + -moz-transition: top 0.5s; + -o-transition: top 0.5s; + -ms-transition: top 0.5s; + transition: top 0.5s; +} +#page-header.fixed + .layout #card-toc .toc-content { + max-height: calc(100vh - 170px); +} +#page .page-title { + margin: 0 0 10px; + font-weight: bold; + font-size: 2em; +} +#post > #post-info { + margin-bottom: 30px; +} +#post > #post-info .post-title { + padding-bottom: 4px; + border-bottom: 1px solid var(--light-grey); + color: var(--text-highlight-color); +} +#post > #post-info .post-title .post-edit-link { + float: right; +} +#post > #post-info #post-meta, +#post > #post-info #post-meta a { + color: #78818a; +} +#post-info .post-title { + margin-bottom: 8px; + color: var(--white); + font-weight: normal; + font-size: 2.5em; + line-height: 1.5; + -webkit-line-clamp: 3; +} +@media screen and (max-width: 768px) { + #post-info .post-title { + font-size: 2.1em; + } +} +#post-info .post-title .post-edit-link { + padding-left: 10px; +} +#post-info #post-meta { + color: var(--light-grey); + font-size: 95%; +} +@media screen and (min-width: 768px) { + #post-info #post-meta > .meta-secondline > span:first-child { + display: none; + } +} +@media screen and (max-width: 768px) { + #post-info #post-meta { + font-size: 90%; + } + #post-info #post-meta > .meta-firstline, + #post-info #post-meta > .meta-secondline { + display: inline; + } +} +#post-info #post-meta .post-meta-separator { + margin: 0 5px; +} +#post-info #post-meta .post-meta-icon { + margin-right: 4px; +} +#post-info #post-meta .post-meta-label { + margin-right: 4px; +} +#post-info #post-meta a { + color: var(--light-grey); + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} +#post-info #post-meta a:hover { + color: #49b1f5; + text-decoration: underline; +} +#nav { + position: absolute; + top: 0; + z-index: 90; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 0 36px; + width: 100%; + height: 60px; + font-size: 1.3em; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +@media screen and (max-width: 768px) { + #nav { + padding: 0 16px; + } +} +#nav.show { + opacity: 1; + -ms-filter: none; + filter: none; +} +#nav #blog-info { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + color: var(--light-grey); +} +#nav #blog-info .site-icon { + margin-right: 6px; + height: 36px; + vertical-align: middle; +} +#nav #blog-info .nav-page-title { + display: none; +} +#nav #toggle-menu { + display: none; + padding: 2px 0 0 6px; + vertical-align: top; +} +#nav #toggle-menu:hover { + color: var(--white); +} +#nav a, +#nav span.site-page { + color: var(--light-grey); +} +#nav a:hover, +#nav span.site-page:hover { + color: var(--white); +} +#nav .site-name { + text-shadow: 2px 2px 4px rgba(0,0,0,0.15); + font-weight: bold; +} +#nav .menus_items { + display: inline; +} +#nav .menus_items .menus_item { + position: relative; + display: inline-block; + padding: 0 0 0 14px; +} +#nav .menus_items .menus_item:hover .menus_item_child { + display: block; +} +#nav .menus_items .menus_item:hover > span > i:last-child { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +#nav .menus_items .menus_item > span > i:last-child { + padding: 4px; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; +} +#nav .menus_items .menus_item .menus_item_child { + position: absolute; + right: 0; + display: none; + margin-top: 8px; + padding: 0; + width: max-content; + background-color: var(--sidebar-bg); + -webkit-box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5); + box-shadow: 0 5px 20px -4px rgba(0,0,0,0.5); + -webkit-animation: sub_menus 0.3s 0.1s ease both; + -moz-animation: sub_menus 0.3s 0.1s ease both; + -o-animation: sub_menus 0.3s 0.1s ease both; + -ms-animation: sub_menus 0.3s 0.1s ease both; + animation: sub_menus 0.3s 0.1s ease both; + border-radius: 5px; +} +#nav .menus_items .menus_item .menus_item_child:before { + position: absolute; + top: -8px; + left: 0; + width: 100%; + height: 20px; + content: ''; +} +#nav .menus_items .menus_item .menus_item_child li { + list-style: none; +} +#nav .menus_items .menus_item .menus_item_child li:hover { + background: var(--text-bg-hover); +} +#nav .menus_items .menus_item .menus_item_child li:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +#nav .menus_items .menus_item .menus_item_child li:last-child { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; +} +#nav .menus_items .menus_item .menus_item_child li a { + display: inline-block; + padding: 8px 16px; + width: 100%; + color: var(--font-color) !important; + text-shadow: none !important; +} +#nav.hide-menu #toggle-menu { + display: inline-block !important; +} +#nav.hide-menu #toggle-menu .site-page { + font-size: inherit; +} +#nav.hide-menu .menus_items { + display: none; +} +#nav.hide-menu #search-button span:not(.site-page) { + display: none; +} +#nav #search-button { + display: inline; + padding: 0 0 0 14px; +} +#nav .site-page { + position: relative; + padding-bottom: 6px; + text-shadow: 1px 1px 2px rgba(0,0,0,0.3); + font-size: 0.78em; + cursor: pointer; +} +#nav .site-page:not(.child):after { + position: absolute; + bottom: 0; + left: 0; + z-index: -1; + width: 0; + height: 3px; + background-color: #80c8f8; + content: ''; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + border-radius: 6px; +} +#nav .site-page:not(.child):hover:after { + width: 100%; +} +#nav .nav-page-title { + position: relative; + overflow: hidden; +} +#nav .nav-page-title > :first-child, +#nav .nav-page-title > :last-child { + display: inline-block; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +#nav .nav-page-title > :last-child { + position: absolute; + top: 50%; + left: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-50%) translateY(-10px); + -moz-transform: translateY(-50%) translateY(-10px); + -o-transform: translateY(-50%) translateY(-10px); + -ms-transform: translateY(-50%) translateY(-10px); + transform: translateY(-50%) translateY(-10px); +} +#nav .nav-page-title:hover > :last-child { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(-50%) translateY(0); + -moz-transform: translateY(-50%) translateY(0); + -o-transform: translateY(-50%) translateY(0); + -ms-transform: translateY(-50%) translateY(0); + transform: translateY(-50%) translateY(0); +} +#nav .nav-page-title:hover > :first-child { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(10px); + -moz-transform: translateY(10px); + -o-transform: translateY(10px); + -ms-transform: translateY(10px); + transform: translateY(10px); +} +#pagination .pagination { + margin-top: 20px; + text-align: center; +} +#pagination .page-number.current { + background: #00c4b6; + color: var(--white); +} +#pagination .full-width { + width: 100% !important; +} +#pagination .pagination-related { + height: 150px; +} +@media screen and (min-width: 768px) { + #pagination .pagination-related { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + } +} +#pagination .pagination-related .info-1 .info-item-2 { + -webkit-line-clamp: 1; +} +#pagination .pagination-related .info-2 .info-item-1 { + -webkit-line-clamp: 2; +} +#pagination.pagination-post { + overflow: hidden; + margin-top: 40px; + width: 100%; + border-radius: 6px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; +} +@media screen and (max-width: 768px) { + #pagination.pagination-post { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } +} +.layout .pagination > * { + display: inline-block; + margin: 0 6px; + width: 2.5em; + height: 2.5em; + line-height: 2.5em; +} +.layout .pagination > *:not(.space):hover { + background: var(--btn-hover-color); + color: var(--btn-color); +} +#archive .pagination { + margin-top: 30px; +} +#archive .pagination > *:not(.space) { + -webkit-box-shadow: none; + box-shadow: none; +} +.pagination-related { + position: relative; + display: inline-block; + overflow: hidden; + background: #000; + vertical-align: bottom; +} +.pagination-related.next-post .info { + text-align: right; +} +.pagination-related .info .info-1, +.pagination-related .info .info-2 { + padding: 20px 40px; + color: var(--white); + -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; + -moz-transition: -moz-transform 0.3s, opacity 0.3s; + -o-transition: -o-transform 0.3s, opacity 0.3s; + -ms-transition: -ms-transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; +} +.pagination-related .info .info-1 .info-item-1 { + color: var(--light-grey); + text-transform: uppercase; + font-size: 90%; +} +.pagination-related .info .info-1 .info-item-2 { + color: var(--white); + font-weight: 500; +} +.pagination-related .info .info-2 { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); +} +.pagination-related:not(.no-desc):hover .info-1 { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translate(0, -100%); + -moz-transform: translate(0, -100%); + -o-transform: translate(0, -100%); + -ms-transform: translate(0, -100%); + transform: translate(0, -100%); +} +.pagination-related:not(.no-desc):hover .info-2 { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +.container { + word-wrap: break-word; + overflow-wrap: break-word; +} +.container a { + color: #49b1f5; +} +.container a:hover { + text-decoration: underline; +} +.container img { + display: block; + margin: 0 auto 20px; + max-width: 100%; + -webkit-transition: filter 375ms ease-in 0.2s; + -moz-transition: filter 375ms ease-in 0.2s; + -o-transition: filter 375ms ease-in 0.2s; + -ms-transition: filter 375ms ease-in 0.2s; + transition: filter 375ms ease-in 0.2s; + border-radius: 6px; +} +.container p { + margin: 0 0 16px; +} +.container iframe { + margin: 0 0 20px; +} +.container kbd { + margin: 0 3px; + padding: 3px 5px; + border: 1px solid #b4b4b4; + background-color: #f8f8f8; + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset; + box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset; + color: #34495e; + white-space: nowrap; + font-weight: 600; + font-size: 0.9em; + font-family: Monaco, 'Ubuntu Mono', monospace; + line-height: 1em; + border-radius: 3px; +} +.container ol ol, +.container ul ol, +.container ol ul, +.container ul ul { + padding-left: 20px; +} +.container ol li, +.container ul li { + margin: 4px 0; +} +.container ol p, +.container ul p { + margin: 0 0 8px; +} +.container > :last-child { + margin-bottom: 0 !important; +} +.container hr { + margin: 20px 0; +} +#post .tag_share:after { + display: block; + clear: both; + content: ''; +} +#post .tag_share .post-meta__tag-list { + display: inline-block; +} +#post .tag_share .post-meta__tags { + display: inline-block; + margin: 8px 8px 8px 0; + padding: 0 12px; + width: fit-content; + border: 1px solid #49b1f5; + border-radius: 12px; + color: #49b1f5; + font-size: 0.85em; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +#post .tag_share .post-meta__tags:hover { + background: #49b1f5; + color: var(--white); +} +#post .tag_share .post-share { + display: inline-block; + float: right; + margin: 8px 0 0; + width: fit-content; +} +#post .tag_share .post-share .social-share { + font-size: 0.85em; +} +#post .tag_share .post-share .social-share .social-share-icon { + margin: 0 4px; + width: 1.85em; + height: 1.85em; + font-size: 1.2em; + line-height: 1.85em; +} +#post .post-copyright { + position: relative; + margin: 40px 0 10px; + padding: 10px 16px; + border: 1px solid var(--light-grey); + -webkit-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -ms-transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + border-radius: 6px; +} +#post .post-copyright:before { + position: absolute; + top: 2px; + right: 12px; + color: #49b1f5; + content: '\f1f9'; + font-size: 1.3em; +} +#post .post-copyright:hover { + -webkit-box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5); + box-shadow: 0 0 8px 0 rgba(232,237,250,0.6), 0 2px 4px 0 rgba(232,237,250,0.5); +} +#post .post-copyright .post-copyright-meta { + color: #49b1f5; + font-weight: bold; +} +#post .post-copyright .post-copyright-meta i { + margin-right: 3px; +} +#post .post-copyright .post-copyright-info { + padding-left: 6px; +} +#post .post-copyright .post-copyright-info a { + text-decoration: underline; + word-break: break-word; +} +#post .post-copyright .post-copyright-info a:hover { + text-decoration: none; +} +#post #post-outdate-notice { + position: relative; + margin: 0 0 20px; + padding: 0.5em 1.2em; + background-color: #ffe6e6; + color: #f66; + border-radius: 3px; + padding: 0.5em 1em 0.5em 2.6em; + border-left: 5px solid #ff8080; +} +#post #post-outdate-notice .num { + padding: 0 4px; +} +#post #post-outdate-notice:before { + position: absolute; + top: 50%; + left: 0.9em; + color: #ff8080; + content: '\f071'; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +#post .ads-wrap { + margin: 40px 0; +} +.relatedPosts { + margin-top: 40px; +} +.relatedPosts > .headline { + margin-bottom: 5px; + font-weight: 700; + font-size: 1.43em; +} +.relatedPosts > .relatedPosts-list > a { + margin: 3px; + width: calc(33.333% - 6px); + height: 200px; + border-radius: 6px; +} +@media screen and (max-width: 768px) { + .relatedPosts > .relatedPosts-list > a { + margin: 2px; + width: calc(50% - 4px); + height: 150px; + } +} +@media screen and (max-width: 600px) { + .relatedPosts > .relatedPosts-list > a { + width: calc(100% - 4px); + } +} +.relatedPosts > .relatedPosts-list .info .info-1 .info-item-2 { + -webkit-line-clamp: 2; +} +.relatedPosts > .relatedPosts-list .info .info-2 .info-item-1 { + -webkit-line-clamp: 3; +} +.post-reward { + position: relative; + margin-top: 80px; + width: 100%; + text-align: center; + pointer-events: none; +} +.post-reward > * { + pointer-events: auto; +} +.post-reward .reward-button { + display: inline-block; + padding: 4px 24px; + background: var(--btn-bg); + color: var(--btn-color); + cursor: pointer; + border-radius: 6px; +} +.post-reward .reward-button i { + margin-right: 5px; + vertical-align: baseline; +} +.post-reward:hover .reward-button { + background: var(--btn-hover-color); +} +.post-reward:hover > .reward-main { + display: block; +} +.post-reward .reward-main { + position: absolute; + bottom: 50px; + left: 0; + z-index: 100; + display: none; + padding: 0 0 15px; + width: 100%; +} +.post-reward .reward-main .reward-all { + display: inline-block; + margin: 0; + padding: 20px 10px; + background: var(--reward-pop); + border-radius: 6px; +} +.post-reward .reward-main .reward-all:before { + position: absolute; + bottom: -10px; + left: 0; + width: 100%; + height: 20px; + content: ''; +} +.post-reward .reward-main .reward-all:after { + position: absolute; + right: 0; + bottom: 2px; + left: 0; + margin: 0 auto; + width: 0; + height: 0; + border-top: 13px solid var(--reward-pop); + border-right: 13px solid transparent; + border-left: 13px solid transparent; + content: ''; +} +.post-reward .reward-main .reward-all .reward-item { + display: inline-block; + padding: 0 8px; + list-style-type: none; + vertical-align: top; +} +.post-reward .reward-main .reward-all .reward-item img { + width: 130px; + height: 130px; +} +.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc { + width: 130px; + color: #858585; +} +#rightside { + position: fixed; + right: -48px; + bottom: 40px; + z-index: 100; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +#rightside.rightside-show { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + -webkit-transform: translate(-58px, 0); + -moz-transform: translate(-58px, 0); + -o-transform: translate(-58px, 0); + -ms-transform: translate(-58px, 0); + transform: translate(-58px, 0); +} +#rightside #rightside-config-hide { + height: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: -webkit-transform 0.4s; + -moz-transition: -moz-transform 0.4s; + -o-transition: -o-transform 0.4s; + -ms-transition: -ms-transform 0.4s; + transition: transform 0.4s; + -webkit-transform: translate(45px, 0); + -moz-transform: translate(45px, 0); + -o-transform: translate(45px, 0); + -ms-transform: translate(45px, 0); + transform: translate(45px, 0); +} +#rightside #rightside-config-hide.show { + height: auto; + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); +} +#rightside #rightside-config-hide.status { + height: auto; + opacity: 1; + -ms-filter: none; + filter: none; +} +#rightside > div > button, +#rightside > div > a { + display: block; + margin-bottom: 5px; + width: 35px; + height: 35px; + background-color: var(--btn-bg); + color: var(--btn-color); + text-align: center; + font-size: 16px; + line-height: 35px; + border-radius: 5px; +} +#rightside > div > button:hover, +#rightside > div > a:hover { + background-color: var(--btn-hover-color); +} +#rightside > div > button i, +#rightside > div > a i { + vertical-align: baseline; +} +#rightside #mobile-toc-button { + display: none; +} +@media screen and (max-width: 900px) { + #rightside #mobile-toc-button { + display: block; + } +} +@media screen and (max-width: 900px) { + #rightside #hide-aside-btn { + display: none; + } +} +@-moz-keyframes fadeInScale { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes fadeInScale { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-o-keyframes fadeInScale { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@keyframes fadeInScale { + from { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + } + to { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +#sidebar #menu-mask { + position: fixed; + z-index: 102; + display: none; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.8); +} +#sidebar #sidebar-menus { + position: fixed; + top: 0; + right: -330px; + z-index: 103; + overflow-x: hidden; + overflow-y: scroll; + padding-left: 5px; + width: 330px; + height: 100%; + background: var(--sidebar-bg); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +#sidebar #sidebar-menus.open { + -webkit-transform: translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +#sidebar #sidebar-menus > .avatar-img { + margin: 20px auto; +} +#sidebar #sidebar-menus .site-data { + padding: 0 10px; +} +#sidebar #sidebar-menus hr { + margin: 20px auto; +} +#sidebar #sidebar-menus .menus_items { + margin: 20px; + padding: 15px; + background: var(--sidebar-menu-bg); + -webkit-box-shadow: 0 0 1px 1px rgba(7,17,27,0.05); + box-shadow: 0 0 1px 1px rgba(7,17,27,0.05); + border-radius: 10px; +} +#sidebar #sidebar-menus .menus_items .site-page { + position: relative; + display: block; + margin: 4px 0; + padding: 2px 23px 2px 15px; + color: var(--font-color); + font-size: 1.15em; + cursor: pointer; + border-radius: 6px; +} +#sidebar #sidebar-menus .menus_items .site-page:hover { + background: var(--text-bg-hover); + -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + color: var(--white); + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); +} +#sidebar #sidebar-menus .menus_items .site-page i:first-child { + width: 15%; + text-align: left; +} +#sidebar #sidebar-menus .menus_items .site-page.group > i:last-child { + position: absolute; + top: 0.6em; + right: 10px; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; +} +#sidebar #sidebar-menus .menus_items .site-page.group.hide > i:last-child { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +#sidebar #sidebar-menus .menus_items .site-page.group.hide + .menus_item_child { + overflow: hidden; + max-height: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scaleY(0); + -moz-transform: scaleY(0); + -o-transform: scaleY(0); + -ms-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: top; + -moz-transform-origin: top; + -o-transform-origin: top; + -ms-transform-origin: top; + transform-origin: top; +} +#sidebar #sidebar-menus .menus_items .menus_item_child { + margin: 0; + padding-left: 25px; + max-height: 0; + list-style: none; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; + -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; + -o-transition: -o-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; + -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; + transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease; + -webkit-transform: scaleY(0); + -moz-transform: scaleY(0); + -o-transform: scaleY(0); + -ms-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: top; + -moz-transform-origin: top; + -o-transform-origin: top; + -ms-transform-origin: top; + transform-origin: top; + will-change: transform, opacity, max-height; +} +#sidebar #sidebar-menus .site-page.group:not(.hide) + .menus_item_child { + max-height: 1000px; + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scaleY(1); + -moz-transform: scaleY(1); + -o-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); +} +#vcomment { + font-size: 1.1em; +} +#vcomment .vbtn { + border: none; + background: var(--btn-bg); + color: var(--btn-color); +} +#vcomment .vbtn:hover { + background: var(--btn-hover-color); +} +#vcomment .vimg { + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +#vcomment .vimg:hover { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); +} +#vcomment .vcards .vcard .vcontent.expand:before, +#vcomment .vcards .vcard .vcontent.expand:after { + z-index: 22; +} +#waline-wrap { + --waline-font-size: 1.1em; + --waline-theme-color: #49b1f5; + --waline-active-color: #ff7242; +} +#waline-wrap .wl-comment-actions > button:not(last-child) { + padding-right: 4px; +} +.twikoo .tk-content p { + margin: 3px 0; +} +.fireworks { + position: fixed; + top: 0; + left: 0; + z-index: 9999; + pointer-events: none; +} +.medium-zoom-image--opened { + z-index: 99999 !important; + margin: 0 !important; +} +.medium-zoom-overlay { + z-index: 99999 !important; +} +.chartjs-container { + 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; + margin: 0 0 20px; + text-align: center; + gap: 20px; +} +@media screen and (max-width: 600px) { + .chartjs-container .chartjs-wrap { + width: 100% !important; + } +} +.chartjs-container.chartjs-abreast { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +@media screen and (max-width: 600px) { + .chartjs-container.chartjs-abreast { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } +} +.chartjs-container .chartjs-wrap { + width: -webkit-fill-available; +} +.chartjs-container canvas { + display: inline-block !important; +} +.utterances, +.fb-comments iframe { + width: 100% !important; +} +#gitalk-container .gt-meta { + margin: 0 0 0.8em; + padding: 6px 0 16px; +} +.katex-display { + overflow: auto hidden; + padding: 5px; +} +.katex-display .katex-show { + display: block; +} +.katex { + display: none; +} +.katex.katex-show { + display: inline; +} +mjx-container { + overflow-x: auto; + overflow-y: hidden; + padding-bottom: 4px; + max-width: 100%; +} +mjx-container[display] { + display: block !important; + min-width: auto !important; +} +mjx-container:not([display]) { + display: inline-grid !important; +} +mjx-assistive-mml { + right: 0; + bottom: 0; +} +.aplayer { + color: #4c4948; +} +.container .aplayer { + margin: 0 0 20px; +} +.snackbar-container.snackbar-css { + border-radius: 5px; + opacity: 0.85 !important; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)" !important; + filter: alpha(opacity=85) !important; +} +.abc-music-sheet { + margin: 0 0 20px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.3s; + -moz-transition: opacity 0.3s; + -o-transition: opacity 0.3s; + -ms-transition: opacity 0.3s; + transition: opacity 0.3s; +} +.abc-music-sheet.abcjs-container { + opacity: 1; + -ms-filter: none; + filter: none; +} +@media screen and (max-width: 768px) { + .fancybox__toolbar__column.is-middle { + display: none; + } +} +.container .btn-center { + margin: 0 0 20px; + text-align: center; +} +.container .btn-beautify { + display: inline-block; + margin: 0 4px 6px; + padding: 0 15px; + background-color: var(--btn-beautify-color, var(--btn-default-color)); + color: var(--btn-color, #fff); + vertical-align: top; + line-height: 2; + border-radius: 6px; +} +.container .btn-beautify.blue { + --btn-beautify-color: var(--tags-blue-color); +} +.container .btn-beautify.pink { + --btn-beautify-color: var(--tags-pink-color); +} +.container .btn-beautify.red { + --btn-beautify-color: var(--tags-red-color); +} +.container .btn-beautify.purple { + --btn-beautify-color: var(--tags-purple-color); +} +.container .btn-beautify.orange { + --btn-beautify-color: var(--tags-orange-color); +} +.container .btn-beautify.green { + --btn-beautify-color: var(--tags-green-color); +} +.container .btn-beautify:hover { + background-color: var(--btn-hover-color); +} +.container .btn-beautify:not(.block) + .btn-beautify:not(.block) { + margin: 0 4px 20px; +} +.container .btn-beautify.block { + display: block; + margin: 0 0 20px; + width: fit-content; + width: -moz-fit-content; +} +.container .btn-beautify.block.center { + margin: 0 auto 20px; +} +.container .btn-beautify.block.right { + margin: 0 0 20px auto; +} +.container .btn-beautify.larger { + padding: 6px 15px; +} +.container .btn-beautify.outline { + border: 1px solid transparent; + border-color: var(--btn-beautify-color, var(--btn-default-color)); + background-color: transparent; + color: var(--btn-beautify-color, var(--btn-default-color)); +} +.container .btn-beautify.outline i, +.container .btn-beautify.outline span { + -webkit-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -moz-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -o-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); + -ms-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} +.container .btn-beautify.outline::before { + background: -webkit-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); + background: -moz-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); + background: -o-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); + background: -ms-linear-gradient(0deg, transparent, rgba(0,0,0,0.1), transparent); + background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); +} +.container .btn-beautify.outline:hover { + border-color: var(--btn-beautify-color, var(--btn-default-color)); + background-color: var(--btn-beautify-color, var(--btn-default-color)); + color: var(--btn-color) !important; +} +.container .btn-beautify.outline:hover i, +.container .btn-beautify.outline:hover span { + color: var(--btn-color); +} +.container figure.gallery-group { + position: relative; + float: left; + overflow: hidden; + margin: 6px 4px; + width: calc(50% - 8px); + height: 250px; + border-radius: 10px; + background: #000; + -webkit-transform: translate3d(0, 0, 0); +} +@media screen and (max-width: 600px) { + .container figure.gallery-group { + width: calc(100% - 8px); + } +} +@media screen and (min-width: 1024px) { + .container figure.gallery-group { + width: calc(100% / 3 - 8px); + } +} +.container figure.gallery-group:hover img { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.container figure.gallery-group:hover .gallery-group-name::after { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.container figure.gallery-group:hover p { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.container figure.gallery-group img { + position: relative; + margin: 0; + max-width: none; + width: calc(100% + 20px); + height: 250px; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + -webkit-transition: all 0.3s, filter 375ms ease-in 0.2s; + -moz-transition: all 0.3s, filter 375ms ease-in 0.2s; + -o-transition: all 0.3s, filter 375ms ease-in 0.2s; + -ms-transition: all 0.3s, filter 375ms ease-in 0.2s; + transition: all 0.3s, filter 375ms ease-in 0.2s; + -webkit-transform: translate3d(-10px, 0, 0); + -moz-transform: translate3d(-10px, 0, 0); + -o-transform: translate3d(-10px, 0, 0); + -ms-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + object-fit: cover; +} +.container figure.gallery-group figcaption { + position: absolute; + top: 0; + left: 0; + padding: 30px; + width: 100%; + height: 100%; + color: #fff; + text-transform: uppercase; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +.container figure.gallery-group figcaption > a { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.container figure.gallery-group p { + margin: 0; + padding: 8px 0 0; + letter-spacing: 1px; + font-size: 1.1em; + line-height: 1.5; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; + -moz-transition: opacity 0.35s, -moz-transform 0.35s; + -o-transition: opacity 0.35s, -o-transform 0.35s; + -ms-transition: opacity 0.35s, -ms-transform 0.35s; + transition: opacity 0.35s, transform 0.35s; + -webkit-transform: translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0); + -o-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + -webkit-line-clamp: 4; +} +.container figure.gallery-group .gallery-group-name { + position: relative; + margin: 0; + padding: 8px 0; + font-weight: bold; + font-size: 1.65em; + line-height: 1.5; + -webkit-line-clamp: 2; +} +.container figure.gallery-group .gallery-group-name:after { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: #fff; + content: ''; + -webkit-transition: -webkit-transform 0.35s; + -moz-transition: -moz-transform 0.35s; + -o-transition: -o-transform 0.35s; + -ms-transition: -ms-transform 0.35s; + transition: transform 0.35s; + -webkit-transform: translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.container .gallery-group-main { + overflow: auto; + padding: 0 0 16px; +} +.container .gallery-container { + margin: 0 0 20px; + text-align: center; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.container .gallery-container.loaded { + opacity: 1; + -ms-filter: none; + filter: none; +} +.container .gallery-container img { + display: initial; + margin: 0; + width: 100%; + height: 100%; +} +.container .gallery-container .gallery-data { + display: none; +} +.container .gallery-container button { + margin-top: 25px; + padding: 8px 14px; + background: var(--btn-bg); + color: var(--btn-color); + font-weight: bold; + font-size: 1.1em; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + border-radius: 5px; +} +.container .gallery-container button:hover { + background: var(--btn-hover-color); +} +.container .gallery-container button:hover i { + margin-left: 8px; +} +.container .gallery-container button i { + margin-left: 4px; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +.container .loading-container { + display: inline-block; + overflow: hidden; + width: 154px; + height: 154px; +} +.container .loading-container .loading-item { + position: relative; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0) scale(1); + -moz-transform: translateZ(0) scale(1); + -o-transform: translateZ(0) scale(1); + -ms-transform: translateZ(0) scale(1); + transform: translateZ(0) scale(1); + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -o-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; +} +.container .loading-container .loading-item div { + position: absolute; + width: 30.8px; + height: 30.8px; + border-radius: 50%; + background: #e15b64; + -webkit-transform: translate(61.6px, 61.6px) scale(1); + -moz-transform: translate(61.6px, 61.6px) scale(1); + -o-transform: translate(61.6px, 61.6px) scale(1); + -ms-transform: translate(61.6px, 61.6px) scale(1); + transform: translate(61.6px, 61.6px) scale(1); + -webkit-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); + -moz-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); + -o-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); + -ms-animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); + animation: loading-ball 1.92s infinite cubic-bezier(0, 0.5, 0.5, 1); +} +.container .loading-container .loading-item div:nth-child(1) { + background: #f47e60; + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + -webkit-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; + -moz-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; + -o-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; + -ms-animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; + animation: loading-ball-r 0.48s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ball-c 1.92s infinite step-start; +} +.container .loading-container .loading-item div:nth-child(2) { + background: #e15b64; + -webkit-animation-delay: -0.48s; + -moz-animation-delay: -0.48s; + -o-animation-delay: -0.48s; + -ms-animation-delay: -0.48s; + animation-delay: -0.48s; +} +.container .loading-container .loading-item div:nth-child(3) { + background: #f47e60; + -webkit-animation-delay: -0.96s; + -moz-animation-delay: -0.96s; + -o-animation-delay: -0.96s; + -ms-animation-delay: -0.96s; + animation-delay: -0.96s; +} +.container .loading-container .loading-item div:nth-child(4) { + background: #f8b26a; + -webkit-animation-delay: -1.44s; + -moz-animation-delay: -1.44s; + -o-animation-delay: -1.44s; + -ms-animation-delay: -1.44s; + animation-delay: -1.44s; +} +.container .loading-container .loading-item div:nth-child(5) { + background: #abbd81; + -webkit-animation-delay: -1.92s; + -moz-animation-delay: -1.92s; + -o-animation-delay: -1.92s; + -ms-animation-delay: -1.92s; + animation-delay: -1.92s; +} +@-moz-keyframes loading-ball { + 0% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 25% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 50% { + -webkit-transform: translate(9.24px, 61.6px) scale(1); + -moz-transform: translate(9.24px, 61.6px) scale(1); + -o-transform: translate(9.24px, 61.6px) scale(1); + -ms-transform: translate(9.24px, 61.6px) scale(1); + transform: translate(9.24px, 61.6px) scale(1); + } + 75% { + -webkit-transform: translate(61.6px, 61.6px) scale(1); + -moz-transform: translate(61.6px, 61.6px) scale(1); + -o-transform: translate(61.6px, 61.6px) scale(1); + -ms-transform: translate(61.6px, 61.6px) scale(1); + transform: translate(61.6px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } +} +@-webkit-keyframes loading-ball { + 0% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 25% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 50% { + -webkit-transform: translate(9.24px, 61.6px) scale(1); + -moz-transform: translate(9.24px, 61.6px) scale(1); + -o-transform: translate(9.24px, 61.6px) scale(1); + -ms-transform: translate(9.24px, 61.6px) scale(1); + transform: translate(9.24px, 61.6px) scale(1); + } + 75% { + -webkit-transform: translate(61.6px, 61.6px) scale(1); + -moz-transform: translate(61.6px, 61.6px) scale(1); + -o-transform: translate(61.6px, 61.6px) scale(1); + -ms-transform: translate(61.6px, 61.6px) scale(1); + transform: translate(61.6px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } +} +@-o-keyframes loading-ball { + 0% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 25% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 50% { + -webkit-transform: translate(9.24px, 61.6px) scale(1); + -moz-transform: translate(9.24px, 61.6px) scale(1); + -o-transform: translate(9.24px, 61.6px) scale(1); + -ms-transform: translate(9.24px, 61.6px) scale(1); + transform: translate(9.24px, 61.6px) scale(1); + } + 75% { + -webkit-transform: translate(61.6px, 61.6px) scale(1); + -moz-transform: translate(61.6px, 61.6px) scale(1); + -o-transform: translate(61.6px, 61.6px) scale(1); + -ms-transform: translate(61.6px, 61.6px) scale(1); + transform: translate(61.6px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } +} +@keyframes loading-ball { + 0% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 25% { + -webkit-transform: translate(9.24px, 61.6px) scale(0); + -moz-transform: translate(9.24px, 61.6px) scale(0); + -o-transform: translate(9.24px, 61.6px) scale(0); + -ms-transform: translate(9.24px, 61.6px) scale(0); + transform: translate(9.24px, 61.6px) scale(0); + } + 50% { + -webkit-transform: translate(9.24px, 61.6px) scale(1); + -moz-transform: translate(9.24px, 61.6px) scale(1); + -o-transform: translate(9.24px, 61.6px) scale(1); + -ms-transform: translate(9.24px, 61.6px) scale(1); + transform: translate(9.24px, 61.6px) scale(1); + } + 75% { + -webkit-transform: translate(61.6px, 61.6px) scale(1); + -moz-transform: translate(61.6px, 61.6px) scale(1); + -o-transform: translate(61.6px, 61.6px) scale(1); + -ms-transform: translate(61.6px, 61.6px) scale(1); + transform: translate(61.6px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } +} +@-moz-keyframes loading-ball-r { + 0% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(0); + -moz-transform: translate(113.96px, 61.6px) scale(0); + -o-transform: translate(113.96px, 61.6px) scale(0); + -ms-transform: translate(113.96px, 61.6px) scale(0); + transform: translate(113.96px, 61.6px) scale(0); + } +} +@-webkit-keyframes loading-ball-r { + 0% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(0); + -moz-transform: translate(113.96px, 61.6px) scale(0); + -o-transform: translate(113.96px, 61.6px) scale(0); + -ms-transform: translate(113.96px, 61.6px) scale(0); + transform: translate(113.96px, 61.6px) scale(0); + } +} +@-o-keyframes loading-ball-r { + 0% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(0); + -moz-transform: translate(113.96px, 61.6px) scale(0); + -o-transform: translate(113.96px, 61.6px) scale(0); + -ms-transform: translate(113.96px, 61.6px) scale(0); + transform: translate(113.96px, 61.6px) scale(0); + } +} +@keyframes loading-ball-r { + 0% { + -webkit-transform: translate(113.96px, 61.6px) scale(1); + -moz-transform: translate(113.96px, 61.6px) scale(1); + -o-transform: translate(113.96px, 61.6px) scale(1); + -ms-transform: translate(113.96px, 61.6px) scale(1); + transform: translate(113.96px, 61.6px) scale(1); + } + 100% { + -webkit-transform: translate(113.96px, 61.6px) scale(0); + -moz-transform: translate(113.96px, 61.6px) scale(0); + -o-transform: translate(113.96px, 61.6px) scale(0); + -ms-transform: translate(113.96px, 61.6px) scale(0); + transform: translate(113.96px, 61.6px) scale(0); + } +} +@-moz-keyframes loading-ball-c { + 0% { + background: #e15b64; + } + 25% { + background: #abbd81; + } + 50% { + background: #f8b26a; + } + 75% { + background: #f47e60; + } + 100% { + background: #e15b64; + } +} +@-webkit-keyframes loading-ball-c { + 0% { + background: #e15b64; + } + 25% { + background: #abbd81; + } + 50% { + background: #f8b26a; + } + 75% { + background: #f47e60; + } + 100% { + background: #e15b64; + } +} +@-o-keyframes loading-ball-c { + 0% { + background: #e15b64; + } + 25% { + background: #abbd81; + } + 50% { + background: #f8b26a; + } + 75% { + background: #f47e60; + } + 100% { + background: #e15b64; + } +} +@keyframes loading-ball-c { + 0% { + background: #e15b64; + } + 25% { + background: #abbd81; + } + 50% { + background: #f8b26a; + } + 75% { + background: #f47e60; + } + 100% { + background: #e15b64; + } +} +blockquote.pullquote { + position: relative; + max-width: 45%; + font-size: 110%; +} +blockquote.pullquote.left { + float: left; + margin: 1em 0.5em 0 0; +} +blockquote.pullquote.right { + float: right; + margin: 1em 0 0 0.5em; +} +.video-container { + position: relative; + overflow: hidden; + margin-bottom: 16px; + padding-top: 56.25%; + height: 0; +} +.video-container iframe { + position: absolute; + top: 0; + left: 0; + margin-top: 0; + width: 100%; + height: 100%; +} +.hide-inline > .hide-button, +.hide-block > .hide-button { + display: inline-block; + padding: 5px 18px; + background: #49b1f5; + color: var(--white); + border-radius: 6px; +} +.hide-inline > .hide-button:hover, +.hide-block > .hide-button:hover { + background-color: var(--btn-hover-color); +} +.hide-inline > .hide-button.open, +.hide-block > .hide-button.open { + display: none; +} +.hide-inline > .hide-button.open + div, +.hide-block > .hide-button.open + div { + display: block; +} +.hide-inline > .hide-button.open + span, +.hide-block > .hide-button.open + span { + display: inline; +} +.hide-inline > .hide-content, +.hide-block > .hide-content { + display: none; +} +.hide-inline > .hide-button { + margin: 0 6px; +} +.hide-inline > .hide-content { + margin: 0 6px; +} +.hide-block { + margin: 0 0 16px; +} +.toggle { + margin-bottom: 20px; + border: 1px solid #f0f0f0; + border-radius: 5px; + overflow: hidden; +} +.toggle > .toggle-content { + margin: 30px 24px; +} +.toggle > .toggle-button { + padding: 6px 15px; + background: #f0f0f0; + color: #1f2d3d; + list-style: none; + cursor: pointer; +} +.toggle > .toggle-button::-webkit-details-marker { + display: none; +} +.toggle > .toggle-button::before { + margin-right: 8px; + content: '\f0d7'; + -webkit-transition: -webkit-transform 0.3s ease; + -moz-transition: -moz-transform 0.3s ease; + -o-transition: -o-transform 0.3s ease; + -ms-transition: -ms-transform 0.3s ease; + transition: transform 0.3s ease; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-transform-origin: center center; + -moz-transform-origin: center center; + -o-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; +} +.toggle[open] summary::before { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); +} +.container .inline-img { + display: inline; + margin: 0 3px; + height: 1.1em; + vertical-align: text-bottom; +} +.hl-label { + padding: 2px 4px; + color: var(--btn-color, #fff); + border-radius: 3px; +} +.hl-label.default { + background-color: var(--btn-default-color); +} +.hl-label.blue { + background-color: var(--tags-blue-color); +} +.hl-label.pink { + background-color: var(--tags-pink-color); +} +.hl-label.red { + background-color: var(--tags-red-color); +} +.hl-label.purple { + background-color: var(--tags-purple-color); +} +.hl-label.orange { + background-color: var(--tags-orange-color); +} +.hl-label.green { + background-color: var(--tags-green-color); +} +:root { + --tag-link-bg-color: #fff; + --tag-link-text-color: #000; + --tag-link-border-color: #fff; + --tag-link-hover-bg-color: #8dd8e9; + --tag-link-hover-border-color: #000; + --tag-link-tips-border-color: #000; + --tag-link-sitename-color: #909090; + --tag-link-hover-sitename-color: #000; +} +[data-theme=dark] { + --tag-link-bg-color: #2d2d2d; + --tag-link-text-color: #fff; + --tag-link-border-color: #000; + --tag-link-hover-bg-color: #339297; + --tag-link-hover-border-color: #fff; + --tag-link-tips-border-color: #fff; + --tag-link-sitename-color: #909090; + --tag-link-hover-sitename-color: #fff; +} +#article-container .tag-Link { + background: var(--tag-link-bg-color); + border-radius: 12px !important; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border: 1px solid var(--tag-link-border-color); + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 0.5rem 1rem; + margin-top: 1rem; + text-decoration: none !important; + color: var(--tag-link-text-color); + margin-bottom: 10px; + -webkit-transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; + -moz-transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; + -o-transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; + -ms-transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; + transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; +} +#article-container .tag-Link:hover { + border-color: var(--tag-link-hover-border-color); + background-color: var(--tag-link-hover-bg-color); + -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2); + box-shadow: 0 0 5px rgba(0,0,0,0.2); +} +#article-container .tag-Link .tag-link-tips { + color: var(--tag-link-text-color); + border-bottom: 1px solid var(--tag-link-tips-border-color); + padding-bottom: 4px; + font-size: 0.6rem; + font-weight: normal; +} +#article-container .tag-Link .tag-link-bottom { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin-top: 0.5rem; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: distribute; + -moz-box-pack: distribute; + -o-box-pack: distribute; + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; +} +#article-container .tag-Link .tag-link-bottom .tag-link-left { + width: 60px; + min-width: 60px; + height: 60px; + background-size: cover; + border-radius: 25%; +} +#article-container .tag-Link .tag-link-bottom .tag-link-right { + margin-left: 1rem; +} +#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-title { + font-size: 1rem; + line-height: 1.2; +} +#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-sitename { + font-size: 0.7rem; + color: var(--tag-link-sitename-color); + font-weight: normal; + margin-top: 4px; + -webkit-transition: color 0.3s; + -moz-transition: color 0.3s; + -o-transition: color 0.3s; + -ms-transition: color 0.3s; + transition: color 0.3s; +} +#article-container .tag-Link .tag-link-bottom .tag-link-right:hover .tag-link-sitename { + color: var(--tag-link-hover-sitename-color); +} +#article-container .tag-Link .tag-link-bottom i { + margin-left: auto; +} +.note { + position: relative; + margin: 0 0 20px; + padding: 15px; + border-radius: 3px; +} +.note.icon-padding { + padding-left: 3em; +} +.note > .note-icon { + position: absolute; + top: calc(50% - 0.5em); + left: 0.8em; + font-size: larger; +} +.note.blue:not(.disabled) { + border-left-color: var(--tags-blue-color) !important; +} +.note.blue:not(.disabled).modern { + border-left-color: transparent !important; + color: var(--tags-blue-color); +} +.note.blue:not(.disabled):not(.simple) { + background: var(--tags-blue-color-lighten); +} +.note.blue > .note-icon { + color: var(--tags-blue-color); +} +.note.pink:not(.disabled) { + border-left-color: var(--tags-pink-color) !important; +} +.note.pink:not(.disabled).modern { + border-left-color: transparent !important; + color: var(--tags-pink-color); +} +.note.pink:not(.disabled):not(.simple) { + background: var(--tags-pink-color-lighten); +} +.note.pink > .note-icon { + color: var(--tags-pink-color); +} +.note.red:not(.disabled) { + border-left-color: var(--tags-red-color) !important; +} +.note.red:not(.disabled).modern { + border-left-color: transparent !important; + color: var(--tags-red-color); +} +.note.red:not(.disabled):not(.simple) { + background: var(--tags-red-color-lighten); +} +.note.red > .note-icon { + color: var(--tags-red-color); +} +.note.purple:not(.disabled) { + border-left-color: var(--tags-purple-color) !important; +} +.note.purple:not(.disabled).modern { + border-left-color: transparent !important; + color: var(--tags-purple-color); +} +.note.purple:not(.disabled):not(.simple) { + background: var(--tags-purple-color-lighten); +} +.note.purple > .note-icon { + color: var(--tags-purple-color); +} +.note.orange:not(.disabled) { + border-left-color: var(--tags-orange-color) !important; +} +.note.orange:not(.disabled).modern { + border-left-color: transparent !important; + color: var(--tags-orange-color); +} +.note.orange:not(.disabled):not(.simple) { + background: var(--tags-orange-color-lighten); +} +.note.orange > .note-icon { + color: var(--tags-orange-color); +} +.note.green:not(.disabled) { + border-left-color: var(--tags-green-color) !important; +} +.note.green:not(.disabled).modern { + border-left-color: transparent !important; + color: var(--tags-green-color); +} +.note.green:not(.disabled):not(.simple) { + background: var(--tags-green-color-lighten); +} +.note.green > .note-icon { + color: var(--tags-green-color); +} +.note.simple { + border: 1px solid var(--note-default-border); + border-left-width: 5px; +} +.note.modern { + border: 1px solid transparent !important; + background-color: var(--note-modern-default-bg); + color: var(--note-modern-default-text); +} +.note.flat { + border: initial; + border-left: 5px solid var(--note-default-border); + background-color: var(--note-default-bg); + color: var(--note-default-text); +} +.note h2, +.note h3, +.note h4, +.note h5, +.note h6 { + margin-top: 3px; + margin-bottom: 0; + padding-top: 0 !important; + border-bottom: initial; +} +.note p:first-child, +.note ul:first-child, +.note ol:first-child, +.note table:first-child, +.note pre:first-child, +.note blockquote:first-child, +.note img:first-child { + margin-top: 0 !important; +} +.note p:last-child, +.note ul:last-child, +.note ol:last-child, +.note table:last-child, +.note pre:last-child, +.note blockquote:last-child, +.note img:last-child { + margin-bottom: 0 !important; +} +.note .img-alt { + margin: 5px 0 10px; +} +.note:not(.no-icon) { + padding-left: 3em; +} +.note:not(.no-icon)::before { + position: absolute; + top: calc(50% - 0.95em); + left: 0.8em; + font-size: larger; +} +.note.default.flat { + background: var(--note-default-bg); + color: var(--font-color); +} +.note.default.modern { + border-color: var(--note-modern-default-border) !important; + background: var(--note-modern-default-bg); + color: var(--note-modern-default-text); +} +.note.default.modern a:not(.btn) { + color: var(--note-modern-default-text); +} +.note.default.modern a:not(.btn):hover { + color: var(--note-modern-default-hover); +} +.note.default:not(.modern) { + border-left-color: var(--note-default-border); +} +.note.default:not(.modern) h2, +.note.default:not(.modern) h3, +.note.default:not(.modern) h4, +.note.default:not(.modern) h5, +.note.default:not(.modern) h6 { + color: var(--note-default-text); +} +.note.default:not(.no-icon)::before { + content: '\f0a9'; +} +.note.default:not(.no-icon):not(.modern)::before { + color: var(--note-default-text); +} +.note.primary.flat { + background: var(--note-primary-bg); + color: var(--font-color); +} +.note.primary.modern { + border-color: var(--note-modern-primary-border) !important; + background: var(--note-modern-primary-bg); + color: var(--note-modern-primary-text); +} +.note.primary.modern a:not(.btn) { + color: var(--note-modern-primary-text); +} +.note.primary.modern a:not(.btn):hover { + color: var(--note-modern-primary-hover); +} +.note.primary:not(.modern) { + border-left-color: var(--note-primary-border); +} +.note.primary:not(.modern) h2, +.note.primary:not(.modern) h3, +.note.primary:not(.modern) h4, +.note.primary:not(.modern) h5, +.note.primary:not(.modern) h6 { + color: var(--note-primary-text); +} +.note.primary:not(.no-icon)::before { + content: '\f055'; +} +.note.primary:not(.no-icon):not(.modern)::before { + color: var(--note-primary-text); +} +.note.info.flat { + background: var(--note-info-bg); + color: var(--font-color); +} +.note.info.modern { + border-color: var(--note-modern-info-border) !important; + background: var(--note-modern-info-bg); + color: var(--note-modern-info-text); +} +.note.info.modern a:not(.btn) { + color: var(--note-modern-info-text); +} +.note.info.modern a:not(.btn):hover { + color: var(--note-modern-info-hover); +} +.note.info:not(.modern) { + border-left-color: var(--note-info-border); +} +.note.info:not(.modern) h2, +.note.info:not(.modern) h3, +.note.info:not(.modern) h4, +.note.info:not(.modern) h5, +.note.info:not(.modern) h6 { + color: var(--note-info-text); +} +.note.info:not(.no-icon)::before { + content: '\f05a'; +} +.note.info:not(.no-icon):not(.modern)::before { + color: var(--note-info-text); +} +.note.success.flat { + background: var(--note-success-bg); + color: var(--font-color); +} +.note.success.modern { + border-color: var(--note-modern-success-border) !important; + background: var(--note-modern-success-bg); + color: var(--note-modern-success-text); +} +.note.success.modern a:not(.btn) { + color: var(--note-modern-success-text); +} +.note.success.modern a:not(.btn):hover { + color: var(--note-modern-success-hover); +} +.note.success:not(.modern) { + border-left-color: var(--note-success-border); +} +.note.success:not(.modern) h2, +.note.success:not(.modern) h3, +.note.success:not(.modern) h4, +.note.success:not(.modern) h5, +.note.success:not(.modern) h6 { + color: var(--note-success-text); +} +.note.success:not(.no-icon)::before { + content: '\f058'; +} +.note.success:not(.no-icon):not(.modern)::before { + color: var(--note-success-text); +} +.note.warning.flat { + background: var(--note-warning-bg); + color: var(--font-color); +} +.note.warning.modern { + border-color: var(--note-modern-warning-border) !important; + background: var(--note-modern-warning-bg); + color: var(--note-modern-warning-text); +} +.note.warning.modern a:not(.btn) { + color: var(--note-modern-warning-text); +} +.note.warning.modern a:not(.btn):hover { + color: var(--note-modern-warning-hover); +} +.note.warning:not(.modern) { + border-left-color: var(--note-warning-border); +} +.note.warning:not(.modern) h2, +.note.warning:not(.modern) h3, +.note.warning:not(.modern) h4, +.note.warning:not(.modern) h5, +.note.warning:not(.modern) h6 { + color: var(--note-warning-text); +} +.note.warning:not(.no-icon)::before { + content: '\f06a'; +} +.note.warning:not(.no-icon):not(.modern)::before { + color: var(--note-warning-text); +} +.note.danger.flat { + background: var(--note-danger-bg); + color: var(--font-color); +} +.note.danger.modern { + border-color: var(--note-modern-danger-border) !important; + background: var(--note-modern-danger-bg); + color: var(--note-modern-danger-text); +} +.note.danger.modern a:not(.btn) { + color: var(--note-modern-danger-text); +} +.note.danger.modern a:not(.btn):hover { + color: var(--note-modern-danger-hover); +} +.note.danger:not(.modern) { + border-left-color: var(--note-danger-border); +} +.note.danger:not(.modern) h2, +.note.danger:not(.modern) h3, +.note.danger:not(.modern) h4, +.note.danger:not(.modern) h5, +.note.danger:not(.modern) h6 { + color: var(--note-danger-text); +} +.note.danger:not(.no-icon)::before { + content: '\f056'; +} +.note.danger:not(.no-icon):not(.modern)::before { + color: var(--note-danger-text); +} +.container .series-items a:hover { + color: var(--pseudo-hover); +} +.container .tabs { + position: relative; + margin: 0 0 20px; + border-right: 1px solid var(--tab-border-color); + border-bottom: 1px solid var(--tab-border-color); + border-left: 1px solid var(--tab-border-color); + border-radius: 6px; + overflow: hidden; +} +.container .tabs > .nav-tabs { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0; + padding: 0; + background: var(--tab-button-bg); +} +.container .tabs > .nav-tabs > .tab { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + -ms-box-flex: 1; + box-flex: 1; + -webkit-flex-grow: 1; + flex-grow: 1; + padding: 8px 18px; + border-top: 2px solid var(--tab-border-color); + background: var(--tab-button-bg); + color: var(--tab-button-color); + line-height: 2; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + -ms-transition: all 0.4s; + transition: all 0.4s; +} +.container .tabs > .nav-tabs > .tab i { + width: 1.5em; +} +.container .tabs > .nav-tabs > .tab.active { + border-top: 2px solid #49b1f5; + background: var(--tab-button-active-bg); + cursor: default; +} +.container .tabs > .nav-tabs > .tab:not(.active):hover { + border-top: 2px solid var(--tab-button-hover-bg); + background: var(--tab-button-hover-bg); +} +.container .tabs > .nav-tabs.no-default ~ .tab-to-top { + display: none; +} +.container .tabs > .tab-contents .tab-item-content { + position: relative; + display: none; + padding: 36px 24px 10px; +} +@media screen and (max-width: 768px) { + .container .tabs > .tab-contents .tab-item-content { + padding: 24px 14px; + } +} +.container .tabs > .tab-contents .tab-item-content.active { + display: block; + -webkit-animation: tabshow 0.5s; + -moz-animation: tabshow 0.5s; + -o-animation: tabshow 0.5s; + -ms-animation: tabshow 0.5s; + animation: tabshow 0.5s; +} +.container .tabs > .tab-contents .tab-item-content > :last-child { + margin-bottom: 0; +} +.container .tabs > .tab-to-top { + padding: 0 16px 10px 0; + width: 100%; + text-align: right; +} +.container .tabs > .tab-to-top button { + color: #99a9bf; +} +.container .tabs > .tab-to-top button:hover { + color: #49b1f5; +} +@-moz-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +.container .timeline { + margin: 0 10px 20px; + padding: 14px 0 5px 20px; + border-left: 2px solid var(--timeline-color, #49b1f5); +} +.container .timeline.blue { + --timeline-color: #428bca; + --timeline-bg: rgba(66,139,202, 0.2); +} +.container .timeline.pink { + --timeline-color: #ff69b4; + --timeline-bg: rgba(255,105,180, 0.2); +} +.container .timeline.red { + --timeline-color: #f00; + --timeline-bg: rgba(255,0,0, 0.2); +} +.container .timeline.purple { + --timeline-color: #6f42c1; + --timeline-bg: rgba(111,66,193, 0.2); +} +.container .timeline.orange { + --timeline-color: #ff8c00; + --timeline-bg: rgba(255,140,0, 0.2); +} +.container .timeline.green { + --timeline-color: #5cb85c; + --timeline-bg: rgba(92,184,92, 0.2); +} +.container .timeline .timeline-item { + margin: 0 0 15px; +} +.container .timeline .timeline-item:hover .item-circle:before { + border-color: var(--timeline-color, #49b1f5); +} +.container .timeline .timeline-item.headline .timeline-item-title .item-circle > p { + font-weight: 600; + font-size: 1.2em; +} +.container .timeline .timeline-item.headline .timeline-item-title .item-circle:before { + left: -28px; + border: 4px solid var(--timeline-color, #49b1f5); +} +.container .timeline .timeline-item.headline:hover .item-circle:before { + border-color: var(--pseudo-hover); +} +.container .timeline .timeline-item .timeline-item-title { + position: relative; +} +.container .timeline .timeline-item .item-circle:before { + position: absolute; + top: 50%; + left: -27px; + width: 6px; + height: 6px; + border: 3px solid var(--pseudo-hover); + border-radius: 50%; + background: var(--card-bg); + content: ''; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +.container .timeline .timeline-item .item-circle > p { + margin: 0 0 8px; + font-weight: 500; +} +.container .timeline .timeline-item .timeline-item-content { + position: relative; + padding: 12px 15px; + border-radius: 8px; + background: var(--timeline-bg, #e4f3fd); + font-size: 0.93em; +} +.container .timeline .timeline-item .timeline-item-content > :last-child { + margin-bottom: 0; +} +.container .timeline + .timeline { + margin-top: -20px; +} +[data-theme='dark'] { + --global-bg: #0d0d0d; + --font-color: rgba(255,255,255,0.7); + --hr-border: rgba(255,255,255,0.4); + --hr-before-color: rgba(255,255,255,0.7); + --search-bg: #121212; + --search-input-color: rgba(255,255,255,0.7); + --search-a-color: rgba(255,255,255,0.7); + --preloader-bg: #0d0d0d; + --preloader-color: rgba(255,255,255,0.7); + --tab-border-color: #2c2c2c; + --tab-button-bg: #2c2c2c; + --tab-button-color: rgba(255,255,255,0.7); + --tab-button-hover-bg: #383838; + --tab-button-active-bg: #121212; + --card-bg: #121212; + --sidebar-bg: #121212; + --sidebar-menu-bg: #1f1f1f; + --btn-hover-color: #787878; + --btn-color: rgba(255,255,255,0.7); + --btn-bg: #1f1f1f; + --text-bg-hover: #383838; + --light-grey: rgba(255,255,255,0.7); + --dark-grey: rgba(255,255,255,0.2); + --white: rgba(255,255,255,0.9); + --text-highlight-color: rgba(255,255,255,0.9); + --blockquote-color: rgba(255,255,255,0.7); + --blockquote-bg: #2c2c2c; + --reward-pop: #2c2c2c; + --toc-link-color: rgba(255,255,255,0.6); + --scrollbar-color: #525252; + --timeline-bg: #1f1f1f; + --zoom-bg: #121212; + --mark-bg: rgba(0,0,0,0.6); + --btn-color: #ccc; + --btn-default-color: #929292; + --tags-blue-color: #3e6f98; + --tags-blue-color-lighten: rgba(66,139,202,0.15); + --tags-pink-color: #dd3c8c; + --tags-pink-color-lighten: rgba(255,105,180,0.15); + --tags-red-color: #a41b1b; + --tags-red-color-lighten: rgba(255,0,0,0.15); + --tags-orange-color: #a76a20; + --tags-orange-color-lighten: rgba(255,140,0,0.15); + --tags-purple-color: #5f4490; + --tags-purple-color-lighten: rgba(111,66,193,0.15); + --tags-green-color: #4f8e4f; + --tags-green-color-lighten: rgba(92,184,92,0.15); + --note-default-border: #5a5a5a; + --note-default-bg: #2b2b2b; + --note-default-text: #b3b3b3; + --note-modern-default-border: #9a9a9a; + --note-modern-default-bg: #353535; + --note-modern-default-text: #c4c4c4; + --note-primary-border: #5935a1; + --note-primary-bg: #2e1c3e; + --note-primary-text: #a47dd4; + --note-modern-primary-border: #9985cc; + --note-modern-primary-bg: #3c2d4c; + --note-modern-primary-text: #b693e6; + --note-info-border: #346fa2; + --note-info-bg: #1f2e3b; + --note-info-text: #7bb3db; + --note-modern-info-border: #7ca8b5; + --note-modern-info-bg: #2b3c44; + --note-modern-info-text: #8fc6e0; + --note-success-border: #4a944a; + --note-success-bg: #202e20; + --note-success-text: #82c682; + --note-modern-success-border: #8bb087; + --note-modern-success-bg: #2c3d2c; + --note-modern-success-text: #96d196; + --note-warning-border: #c08a3e; + --note-warning-bg: #3e301f; + --note-warning-text: #e6ba6b; + --note-modern-warning-border: #b8a285; + --note-modern-warning-bg: #4b3c2b; + --note-modern-warning-text: #d4b373; + --note-danger-border: #b34440; + --note-danger-bg: #3b201f; + --note-danger-text: #e67572; + --note-modern-danger-border: #c7898c; + --note-modern-danger-bg: #4d2b2e; + --note-modern-danger-text: #d98b8e; +} +[data-theme='dark'] #web_bg:before { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.7); + content: ''; +} +[data-theme='dark'] .container code { + background: #2c2c2c; +} +[data-theme='dark'] .container pre > code { + background: #171717; +} +[data-theme='dark'] .container figure.highlight { + -webkit-box-shadow: none; + box-shadow: none; +} +[data-theme='dark'] .container .note code { + background: rgba(27,31,35,0.05); +} +[data-theme='dark'] .container .aplayer { + filter: brightness(0.8); +} +[data-theme='dark'] .container kbd { + border-color: #696969; + background-color: #525252; + color: #e2f1ff; +} +[data-theme='dark'] #page-header.nav-fixed > #nav, +[data-theme='dark'] #page-header.not-top-img > #nav { + background: rgba(18,18,18,0.8); + -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0); + box-shadow: 0 5px 6px -5px rgba(133,133,133,0); +} +[data-theme='dark'] #post-comment .comment-switch { + background: #2c2c2c !important; +} +[data-theme='dark'] #post-comment .comment-switch #switch-btn { + filter: brightness(0.8); +} +[data-theme='dark'] .hide-button, +[data-theme='dark'] .toggle-button, +[data-theme='dark'] #post-outdate-notice, +[data-theme='dark'] .error-img, +[data-theme='dark'] .container iframe, +[data-theme='dark'] .gist, +[data-theme='dark'] .ads-wrap, +[data-theme='dark'] .tag-cloud-list > a { + filter: brightness(0.8); +} +[data-theme='dark'] img:not(.cover) { + filter: brightness(0.88) contrast(0.95); +} +[data-theme='dark'] #aside-content .aside-list > .aside-list-item:not(:last-child) { + border-bottom: 1px dashed rgba(255,255,255,0.1); +} +[data-theme='dark'] #gitalk-container { + filter: brightness(0.8); +} +[data-theme='dark'] #gitalk-container svg { + fill: rgba(255,255,255,0.9) !important; +} +[data-theme='dark'] #disqusjs #dsqjs:hover, +[data-theme='dark'] #disqusjs #dsqjs:focus, +[data-theme='dark'] #disqusjs #dsqjs .dsqjs-tab-active, +[data-theme='dark'] #disqusjs #dsqjs .dsqjs-no-comment { + color: rgba(255,255,255,0.7); +} +[data-theme='dark'] #disqusjs #dsqjs .dsqjs-order-label { + background-color: #1f1f1f; +} +[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body { + color: rgba(255,255,255,0.7); +} +[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body code, +[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body pre { + background: #2c2c2c; +} +[data-theme='dark'] #disqusjs #dsqjs .dsqjs-post-body blockquote { + color: rgba(255,255,255,0.7); +} +[data-theme='dark'] #artitalk_main #lazy { + background: #121212; +} +[data-theme='dark'] #operare_artitalk .c2 { + background: #121212; +} +@media screen and (max-width: 900px) { + [data-theme='dark'] #card-toc { + background: #1f1f1f; + } +} +[data-theme='dark'] .artalk.atk-dark-mode, +[data-theme='dark'] .atk-layer-wrap.atk-dark-mode { + --at-color-font: rgba(255,255,255,0.7); + --at-color-meta: rgba(255,255,255,0.7); + --at-color-grey: rgba(255,255,255,0.7); +} +[data-theme='dark'] .atk-send-btn, +[data-theme='dark'] .atk-badge { + color: rgba(255,255,255,0.7) !important; +} +[data-theme='dark'] #waline-wrap { + --waline-color: rgba(255,255,255,0.7); + --waline-dark-grey: rgba(255,255,255,0.7); + --waline-info-color: rgba(255,255,255,0.5); +} +.read-mode { + --font-color: #4c4948; + --readmode-light-color: #fff; + --white: #4c4948; + --light-grey: #4c4948; + --gray: #d6dbdf; + --hr-border: #d6dbdf; + --hr-before-color: #b9c2c9; + --highlight-bg: #f7f7f7; + --exit-btn-bg: #c0c0c0; + --exit-btn-color: #fff; + --exit-btn-hover: #8d8d8d; + --pseudo-hover: none; +} +[data-theme='dark'] .read-mode { + --font-color: rgba(255,255,255,0.7); + --readmode-light-color: #0d0d0d; + --white: rgba(255,255,255,0.9); + --light-grey: rgba(255,255,255,0.7); + --gray: rgba(255,255,255,0.7); + --hr-border: rgba(255,255,255,0.5); + --hr-before-color: rgba(255,255,255,0.7); + --highlight-bg: #171717; + --exit-btn-bg: #1f1f1f; + --exit-btn-color: rgba(255,255,255,0.9); + --exit-btn-hover: #525252; +} +.read-mode { + background: var(--readmode-light-color); +} +.read-mode .exit-readmode { + position: fixed; + top: 30px; + right: 30px; + z-index: 100; + width: 40px; + height: 40px; + background: var(--exit-btn-bg); + color: var(--exit-btn-color); + font-size: 16px; + -webkit-transition: background 0.3s; + -moz-transition: background 0.3s; + -o-transition: background 0.3s; + -ms-transition: background 0.3s; + transition: background 0.3s; + border-radius: 8px; +} +@media screen and (max-width: 768px) { + .read-mode .exit-readmode { + top: initial; + bottom: 30px; + } +} +.read-mode .exit-readmode:hover { + background: var(--exit-btn-hover); +} +.read-mode #aside-content { + display: none; +} +.read-mode #page-header.post-bg { + background: none !important; +} +.read-mode #page-header.post-bg:before { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.read-mode #page-header.post-bg > #post-info { + text-align: center; +} +.read-mode #post { + margin: 0 auto; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.read-mode #post:hover { + -webkit-box-shadow: none; + box-shadow: none; +} +.read-mode > canvas { + display: none !important; +} +.read-mode .highlight-tools, +.read-mode #footer, +.read-mode #post > *:not(#post-info):not(.post-content), +.read-mode #nav, +.read-mode #post-outdate-notice, +.read-mode #web_bg, +.read-mode #rightside, +.read-mode .not-top-img { + display: none !important; +} +.read-mode .container a { + color: #99a9bf; +} +.read-mode .container pre, +.read-mode .container .highlight:not(.js-file-line-container) { + background: var(--highlight-bg) !important; +} +.read-mode .container pre *, +.read-mode .container .highlight:not(.js-file-line-container) * { + color: var(--font-color) !important; +} +.read-mode .container figure.highlight { + border-radius: 0 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.read-mode .container figure.highlight > :not(.highlight-tools) { + display: block !important; +} +.read-mode .container figure.highlight .line:before { + color: var(--font-color) !important; +} +.read-mode .container figure.highlight .hljs { + background: var(--highlight-bg) !important; +} +.read-mode .container h1, +.read-mode .container h2, +.read-mode .container h3, +.read-mode .container h4, +.read-mode .container h5, +.read-mode .container h6 { + padding: 0; +} +.read-mode .container h1:before, +.read-mode .container h2:before, +.read-mode .container h3:before, +.read-mode .container h4:before, +.read-mode .container h5:before, +.read-mode .container h6:before { + content: ''; +} +.read-mode .container h1:hover, +.read-mode .container h2:hover, +.read-mode .container h3:hover, +.read-mode .container h4:hover, +.read-mode .container h5:hover, +.read-mode .container h6:hover { + padding: 0; +} +.read-mode .container ul:hover:before, +.read-mode .container li:hover:before, +.read-mode .container ol:hover:before { + -webkit-transform: none !important; + -moz-transform: none !important; + -o-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.read-mode .container ol:before, +.read-mode .container li:before { + background: transparent !important; + color: var(--font-color) !important; +} +.read-mode .container ul >li:before { + border-color: var(--gray) !important; +} +.read-mode .container .tabs { + border: 2px solid var(--tab-border-color); +} +.read-mode .container .tabs > .nav-tabs { + background: transparent; +} +.read-mode .container .tabs > .nav-tabs > .tab { + border-top: none !important; +} +.read-mode .container .tabs > .tab-contents .tab-item-content.active { + -webkit-animation: none; + -moz-animation: none; + -o-animation: none; + -ms-animation: none; + animation: none; +} +.read-mode .container code { + color: var(--font-color); +} +.read-mode .container blockquote { + border-color: var(--gray); + background-color: var(--readmode-light-color); +} +.read-mode .container kbd { + border: 1px solid var(--gray); + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + color: var(--font-color); +} +.read-mode .container .hide-toggle { + border: 1px solid var(--gray) !important; +} +.read-mode .container .hide-button, +.read-mode .container .btn-beautify, +.read-mode .container .hl-label { + border: 1px solid var(--gray) !important; + background: var(--readmode-light-color) !important; + color: var(--font-color) !important; +} +.read-mode .container .note { + border: 2px solid var(--gray); + border-left-color: var(--gray) !important; + filter: none; + background-color: var(--readmode-light-color) !important; + color: var(--font-color); +} +.read-mode .container .note:before, +.read-mode .container .note .note-icon { + color: var(--font-color); +} +.search-dialog { + position: fixed; + top: 10%; + left: 50%; + z-index: 1001; + display: none; + margin-left: -300px; + padding: 20px; + width: 600px; + background: var(--search-bg); + --search-height: 100vh; + border-radius: 8px; +} +@media screen and (max-width: 768px) { + .search-dialog { + top: 0; + left: 0; + margin: 0; + width: 100%; + height: 100%; + border-radius: 0; + } +} +.search-dialog .search-nav { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin-bottom: 14px; + color: #49b1f5; + font-size: 1.4em; + line-height: 1; +} +.search-dialog .search-nav .search-dialog-title { + margin-right: 4px; +} +.search-dialog .search-nav #loading-status[hidden] { + display: none !important; +} +.search-dialog .search-nav .search-close-button { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + color: #858585; + text-align: right; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + transition: all 0.2s ease; +} +.search-dialog .search-nav .search-close-button:hover { + color: #49b1f5; +} +.search-dialog .local-search-input, +.search-dialog #algolia-search-input { + margin: 0 auto; + max-width: 100%; + width: 100%; +} +.search-dialog .local-search-input input, +.search-dialog #algolia-search-input input, +.search-dialog .local-search-input .ais-SearchBox-input, +.search-dialog #algolia-search-input .ais-SearchBox-input { + padding: 5px 14px; + width: 100%; + outline: none; + border: 2px solid #49b1f5; + border-radius: 40px; + background: var(--search-bg); + color: var(--search-input-color); + -webkit-appearance: none; +} +.search-dialog .local-search-input input::placeholder, +.search-dialog #algolia-search-input input::placeholder, +.search-dialog .local-search-input .ais-SearchBox-input::placeholder, +.search-dialog #algolia-search-input .ais-SearchBox-input::placeholder { + color: var(--text-color); +} +.search-dialog .search-result-list, +.search-dialog .ais-Hits-list { + overflow-y: overlay; + margin: 0 -20px; + padding: 0 22px; + max-height: calc(80vh - 220px); +} +.search-dialog .search-result-list .local-search-hit-item, +.search-dialog .ais-Hits-list .local-search-hit-item, +.search-dialog .search-result-list .ais-Hits-item, +.search-dialog .ais-Hits-list .ais-Hits-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + margin: 3px 0; + line-height: 1.8; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.search-dialog .search-result-list .local-search-hit-item:hover, +.search-dialog .ais-Hits-list .local-search-hit-item:hover, +.search-dialog .search-result-list .ais-Hits-item:hover, +.search-dialog .ais-Hits-list .ais-Hits-item:hover { + -webkit-transform: translateY(-1px); + -moz-transform: translateY(-1px); + -o-transform: translateY(-1px); + -ms-transform: translateY(-1px); + transform: translateY(-1px); +} +.search-dialog .search-result-list .local-search-hit-item:not([value])::before, +.search-dialog .ais-Hits-list .local-search-hit-item:not([value])::before, +.search-dialog .search-result-list .ais-Hits-item:not([value])::before, +.search-dialog .ais-Hits-list .ais-Hits-item:not([value])::before { + display: none; +} +.search-dialog .search-result-list .local-search-hit-item[value]::before, +.search-dialog .ais-Hits-list .local-search-hit-item[value]::before, +.search-dialog .search-result-list .ais-Hits-item[value]::before, +.search-dialog .ais-Hits-list .ais-Hits-item[value]::before { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -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; + margin-right: 6px; + margin-top: 3px; + min-width: 24px; + color: #49b1f5; + content: attr(value) '.'; + font-weight: bold; + font-style: italic; + font-size: 0.9em; +} +.search-dialog .search-result-list .local-search-hit-item::marker, +.search-dialog .ais-Hits-list .local-search-hit-item::marker, +.search-dialog .search-result-list .ais-Hits-item::marker, +.search-dialog .ais-Hits-list .ais-Hits-item::marker { + content: none; +} +.search-dialog .search-result-list .local-search-hit-item a, +.search-dialog .ais-Hits-list .local-search-hit-item a, +.search-dialog .search-result-list .ais-Hits-item a, +.search-dialog .ais-Hits-list .ais-Hits-item a { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + color: var(--search-a-color); +} +.search-dialog .search-result-list .local-search-hit-item a:hover, +.search-dialog .ais-Hits-list .local-search-hit-item a:hover, +.search-dialog .search-result-list .ais-Hits-item a:hover, +.search-dialog .ais-Hits-list .ais-Hits-item a:hover { + color: #49b1f5; +} +.search-dialog .search-result-list .local-search-hit-item .search-result-title, +.search-dialog .ais-Hits-list .local-search-hit-item .search-result-title, +.search-dialog .search-result-list .ais-Hits-item .search-result-title, +.search-dialog .ais-Hits-list .ais-Hits-item .search-result-title, +.search-dialog .search-result-list .local-search-hit-item .algolia-hits-item-title, +.search-dialog .ais-Hits-list .local-search-hit-item .algolia-hits-item-title, +.search-dialog .search-result-list .ais-Hits-item .algolia-hits-item-title, +.search-dialog .ais-Hits-list .ais-Hits-item .algolia-hits-item-title { + font-weight: 600; +} +.search-dialog .search-result-list .local-search-hit-item .search-result, +.search-dialog .ais-Hits-list .local-search-hit-item .search-result, +.search-dialog .search-result-list .ais-Hits-item .search-result, +.search-dialog .ais-Hits-list .ais-Hits-item .search-result, +.search-dialog .search-result-list .local-search-hit-item .algolia-hit-item-content, +.search-dialog .ais-Hits-list .local-search-hit-item .algolia-hit-item-content, +.search-dialog .search-result-list .ais-Hits-item .algolia-hit-item-content, +.search-dialog .ais-Hits-list .ais-Hits-item .algolia-hit-item-content { + margin: 0 0 8px; + word-break: break-all; + font-size: 0.9em; +} +.search-dialog .ais-Pagination { + margin: 15px 0 0; + padding: 0; + text-align: center; +} +.search-dialog .ais-Pagination .ais-Pagination-list { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -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; + margin: 0; + padding: 0; + list-style: none; + gap: 6px; +} +.search-dialog .ais-Pagination .ais-Pagination-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + padding: 0; +} +.search-dialog .ais-Pagination .ais-Pagination-item:not(.ais-Pagination-item--selected):not(.ais-Pagination-item--ellipsis):not(.ais-Pagination-item--disabled) .ais-Pagination-link:hover { + background: var(--btn-hover-color); + -webkit-transform: translateY(-1px); + -moz-transform: translateY(-1px); + -o-transform: translateY(-1px); + -ms-transform: translateY(-1px); + transform: translateY(-1px); +} +.search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + -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; + padding: 4px 8px; + min-width: 28px; + height: 28px; + border-radius: 6px; + background: var(--btn-bg); + color: var(--btn-color); + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + transition: all 0.2s ease; +} +.search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link.ais-Pagination-link--disabled { + opacity: 0.3; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + cursor: not-allowed; +} +.search-dialog .ais-Pagination .ais-Pagination-item .ais-Pagination-link i { + font-size: 12px; +} +.search-dialog .ais-Pagination .ais-Pagination-item--selected .ais-Pagination-link { + background: #00c4b6; + font-weight: 600; + cursor: default; +} +.search-dialog .ais-Pagination .ais-Pagination-item--ellipsis .ais-Pagination-link { + padding: 4px 2px; + border: none; + background: transparent; + color: var(--text-color); + cursor: default; +} +.search-dialog .ais-Pagination .ais-Pagination-item--ellipsis .ais-Pagination-link:hover { + background: transparent; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; +} +.search-dialog .ais-Pagination .ais-Pagination-item--disabled .ais-Pagination-link { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); +} +@media screen and (max-width: 768px) { + .search-dialog .ais-Pagination .ais-Pagination-list { + gap: 4px; + } +} +.search-dialog hr { + margin: 15px auto; +} +#search-mask { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; + display: none; + background: rgba(0,0,0,0.6); +} +.search-result-stats, +.ais-Stats-text { + margin: 15px 0 0; + color: var(--text-color); + text-align: center; + font-size: 0.9em; +} +.search-keyword { + background: transparent; + color: #f47466; + font-weight: 600; +} +.search-loading { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -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; + padding: 20px; + color: var(--text-color); +} +.search-loading::before { + width: 16px; + height: 16px; + border: 2px solid var(--text-color); + border-top-color: transparent; + border-radius: 50%; + content: ''; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + -ms-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +@-moz-keyframes spin { + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes spin { + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes spin { + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin { + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/css/nav.css b/css/nav.css new file mode 100644 index 0000000..6ed56ad --- /dev/null +++ b/css/nav.css @@ -0,0 +1,203 @@ +#nav-right{ + flex:1 1 auto; + justify-content: flex-end; + margin-left: auto; + display: flex; + flex-wrap:nowrap; +} + +/* 导航栏居中 */ + +#sidebar #sidebar-menus .menus_items .menus_item { + margin: 10px 0; +} +#sidebar #sidebar-menus .menus_items a.site-page { + padding-left: 0; +} +#sidebar #sidebar-menus .menus_items .site-page { + position: relative; + display: block; + padding: 6px 30px 6px 22px; + color: var(--font-color); + font-size: 1.15em; + border: var(--style-border-always); + background: var(--icat-card-bg); + font-size: 14px; + border-radius: 12px; +} +#sidebar #sidebar-menus .menus_items .site-page i:first-child { + text-align: left; + padding-left: 10px; +} + +#nav #menus { + display: flex; + justify-content: center; + width: 100%; + position: absolute; + left: 0; + margin: 0; + transform: translateZ(0); +} +#nav #blog-info { + flex-wrap: nowrap; + display: flex; + align-items: center; + z-index: 102; + max-width: fit-content; +} +@media screen and (max-width: 900px) { + #nav { + padding: 0 15px; + } + #nav-group { + padding: 0 0.2rem; + } + #rightside { + right: -42px; + } +} +/* IPAD菜单栏调整 */ + +/* 1. 容器溢出穿透 */ +#nav, #blog-info, #nav-group { + overflow: visible !important; +} + +#ls-menu-container { + position: relative !important; + display: inline-flex !important; + align-items: center; + height: 100%; + padding: 0 15px; + cursor: pointer !important; + z-index: 2000 !important; +} + +/* 2. 悬浮面板：宽大且高不透明度 */ +#ls-menu-panel { + position: absolute !important; + top: 100% !important; + left: 0 !important; + margin-top: 15px !important; + width: 420px; + padding: 24px; + border-radius: 18px; + + /* 高不透明度磨砂玻璃 (0.9) */ + background: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(20px) saturate(180%) !important; + -webkit-backdrop-filter: blur(20px) saturate(180%) !important; + + border: 1px solid rgba(255, 255, 255, 0.5) !important; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important; + + opacity: 0 !important; + visibility: hidden !important; + transform: translateY(12px) !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + z-index: 999999 !important; + cursor: default; +} + +/* 3. 透明感应桥梁 */ +#ls-menu-panel::before { + content: ""; + position: absolute; + top: -20px; + left: 0; + right: 0; + height: 25px; + background: transparent !important; +} + +/* 4. 触发效果 */ +#ls-menu-container:hover #ls-menu-panel { + opacity: 1 !important; + visibility: visible !important; + transform: translateY(0) !important; +} + +#ls-menu-container:hover i.fa-fingerprint { + color: #49b1f5; + transform: scale(1.1); +} + +/* 5. 内部网格：保持两列 */ +.ls-section { margin-bottom: 22px; } +.ls-section:last-child { margin-bottom: 0; } +.ls-title { + color: #333; + font-weight: 800; + font-size: 15px; + margin-bottom: 12px; + opacity: 0.9; +} + +.ls-grid { + display: grid !important; + grid-template-columns: repeat(2, 1fr); /* 恢复为两列 */ + gap: 10px; +} + +.ls-grid a { + color: #444 !important; + font-size: 14px !important; + padding: 10px 12px; + border-radius: 12px; + display: flex; + align-items: center; + transition: all 0.2s ease; + background: rgba(0, 0, 0, 0.02); +} + +.ls-grid a:hover { + background: #49b1f5 !important; + color: #fff !important; + transform: translateX(4px); /* 悬停时轻微右移，增加动感 */ +} + +.ls-grid a i { + margin-right: 12px; + width: 20px; + text-align: center; + font-size: 15px; +} + +/* 6. 深色模式适配 */ +[data-theme='dark'] #ls-menu-panel { + background: rgba(30, 30, 30, 0.95) !important; + border-color: rgba(255, 255, 255, 0.1) !important; +} +[data-theme='dark'] .ls-title { color: #eee; } +[data-theme='dark'] .ls-grid a { + color: #ccc !important; + background: rgba(255, 255, 255, 0.05); +} + +#nav.show-title .nav-page-title { + display: flex !important; + opacity: 1 !important; + visibility: visible !important; + position: absolute !important; + left: 50% !important; + transform: translateX(-50%) !important; + white-space: nowrap !important; + z-index: 1000 !important; +} + +#nav.show-title #menus, +#nav.show-title .nav-site-title { + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; +} + +#nav .nav-page-title { + display: none; + transition: opacity 0.3s ease; +} + +#nav #blog-info { + overflow: visible !important; +} \ No newline at end of file diff --git a/css/poem.css b/css/poem.css new file mode 100644 index 0000000..cb7df37 --- /dev/null +++ b/css/poem.css @@ -0,0 +1,67 @@ +[data-theme=light] { + --fontcolor: #363636; + --text: rgba(60, 60, 67, 0.6); + --bg: #edf0f7; +} + +[data-theme=dark] { + --fontcolor: #F7F7FA; + --text: #a1a2b8; + --bg: #30343f; +} +div#poem_sentence{ + text-align: center; + font-family: serif,cursive; + line-height: 1.4; + margin-bottom: 0.5rem; + padding: 1rem; + border-radius: 12px; + background: var(--bg); + min-height: 62px; +} + +div#poem_info{ + display: flex; + color: var(--text); + font-size: 100%; + justify-content: center; + flex-wrap: wrap; +} + +div#poem_author{ + order: 1; + padding: 2px; + margin-left: 8px; +} + +div#poem_dynasty{ + order: 0; + padding: 2px 4px 2px 6px; + background: var(-btn-bg); + color: var(--fontcolor); + border-radius: 8px; +} + +#card-poem{ + display: flex; + flex-direction: column; + padding: 0.5rem!important; + min-height: 130px; + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7))!important; + backdrop-filter: blur(10px); +} + +[data-theme=dark] #card-poem{ + display: flex; + flex-direction: column; + padding: 0.5rem!important; + min-height: 130px; + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7))!important; + backdrop-filter: blur(10px); +} \ No newline at end of file diff --git a/css/shuoshuo.css b/css/shuoshuo.css new file mode 100644 index 0000000..c864222 --- /dev/null +++ b/css/shuoshuo.css @@ -0,0 +1,300 @@ +/* ================= 主题变量 ================= */ +:root { + --card-bg: #fff; + --card-border: 1px solid #e3e8f7; + --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); + --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); + --card-secondbg: #f1f3f8; + --button-hover-bg: #2679cc; + --text: #4c4948; + --button-bg: #f1f3f8; + --fancybox-bg: rgba(255,255,255,0.5); +} + +[data-theme=dark] { + --card-bg: #181818; + --card-secondbg: #30343f; + --card-border: 1px solid #42444a; + --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); + --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2); + --button-bg: #30343f; + --button-hover-bg: #2679cc; + --text: rgba(255,255,255,0.702); + --fancybox-bg: rgba(0,0,0,0.5); +} + +/* ================= 卡片布局 ================= */ +#talk { + position: relative; + width: 100%; + box-sizing: border-box; + display: flex; + flex-wrap: wrap; /* 允许换行 */ + align-items: flex-start; /* 防止高度拉伸导致变形 */ +} + +#talk .talk_item { + width: calc(33.333% - 6px); + background: var(--card-bg); + border: var(--card-border); + box-shadow: var(--card-box-shadow); + border-radius: 12px; + padding: 20px; + margin-right: 9px; + margin-bottom: 9px; + display: flex; + flex-direction: column; + transition: box-shadow .3s ease-in-out; +} + +#talk .talk_item:hover { + box-shadow: var(--card-hover-box-shadow); +} + +@media (max-width: 900px) { + #talk .talk_item { + width: calc(50% - 5px); + } +} + +@media (max-width: 450px) { + #talk .talk_item { + width: 100%; + } +} + +/* 给 Meting 播放器预留约 80px 的固定高度 */ +meting-js { + display: block; + min-height: 100px; + margin-top: 10px; +} + +/* 如果有视频，也预留一下比例高度 */ +.talk_content iframe { + min-height: 150px; +} + +/* ================= 头部信息 ================= */ +#talk .talk_meta, +#talk .talk_bottom { + display: flex; + align-items: center; +} + +#talk .talk_meta { + width: 100%; + padding-bottom: 10px; + border-bottom: 1px dashed grey; +} + +#talk .talk_meta .avatar { + margin: 0 !important; + width: 60px; + height: 60px; + border-radius: 12px; +} + +#talk .talk_meta .info { + display: flex; + flex-direction: column; + margin-left: 10px; +} + +#talk .talk_meta .info .talk_nick { + color: #6dbdc3; + font-size: 1.2rem; +} + +#talk .talk_meta .info svg.is-badge.icon { + width: 15px; + padding-top: 3px; +} + +#talk .talk_meta .info span.talk_date { + opacity: .6; +} + +/* ================= 内容区域 ================= */ +#talk .talk_item .talk_content { + margin-top: 10px; +} + +#talk .talk_item .talk_content .zone_imgbox { + display: flex; + flex-wrap: wrap; + --w: calc(25% - 8px); + gap: 10px; + margin-top: 10px; +} + +#talk .talk_item .talk_content .zone_imgbox a { + display: block; + border-radius: 12px; + width: var(--w); + aspect-ratio: 1/1; + position: relative; +} + +#talk .talk_item .talk_content .zone_imgbox a:first-child { + width: 100%; + aspect-ratio: 1.8; +} + +#talk .talk_item .talk_content .zone_imgbox img { + border-radius: 10px; + width: 100%; + height: 100%; + margin: 0 !important; + object-fit: cover; +} + +/* ================= 底部信息 ================= */ +#talk .talk_item .talk_bottom { + margin-top: 15px; + padding-top: 10px; + border-top: 1px dashed grey; + justify-content: space-between; + opacity: .9; +} + +#talk .talk_item .talk_bottom .icon { + float: right; + transition: all .3s; +} + +#talk .talk_item .talk_bottom .icon:hover { + color: #49b1f5; +} + +#talk .talk_item .talk_bottom span.talk_tag, +#talk .talk_item .talk_bottom span.location_tag { + font-size: 14px; + background-color: var(--card-secondbg); + border-radius: 12px; + padding: 3px 15px 3px 10px; + transition: box-shadow 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +#talk .talk_item .talk_bottom span.location_tag { + margin-left: 5px; +} + +#talk .talk_item .talk_bottom span.talk_tag:hover, +#talk .talk_item .talk_bottom span.location_tag:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +/* ================= 文本链接 ================= */ +#talk .talk_item .talk_content > a { + margin: 0 3px; + color: #ff7d73 !important; +} + +#talk .talk_item .talk_content > a:hover { + text-decoration: none !important; + color: #ff5143 !important; +} + +/* ================= 响应式 ================= */ +@media screen and (max-width: 900px) { + #talk .talk_item .talk_content .zone_imgbox { + --w: calc(33% - 5px); + } + + #talk .talk_item #post-comment { + margin: 0 3px; + } +} + +@media screen and (max-width: 768px) { + .zone_imgbox { + gap: 6px; + --w: calc(50% - 3px); + } + + span.talk_date { + font-size: 14px; + } +} + +/* ================= 豆瓣卡片 ================= */ +#talk .talk_item .talk_content .douban-card { + margin-top: 10px !important; + text-decoration: none; + align-items: center; + border-radius: 12px; + color: #faebd7; + display: flex; + justify-content: center; + margin: 10px; + max-width: 400px; + overflow: hidden; + padding: 15px; + position: relative; +} + +/* ================= 外链卡片 ================= */ +#talk .talk_item .talk_content .shuoshuo-external-link { + width: 100%; + height: 80px; + margin-top: 10px; + border-radius: 12px; + background-color: var(--card-secondbg); + color: var(--card-text); + border: var(--card-border); + transition: background-color .3s ease-in-out; +} + +.shuoshuo-external-link:hover { + background-color: var(--button-hover-bg); +} + +.shuoshuo-external-link .external-link { + display: flex; + color: var(--text) !important; + width: 100%; + height: 100%; +} + +.shuoshuo-external-link .external-link:hover { + color: white !important; + text-decoration: none !important; +} + +.shuoshuo-external-link .external-link-left { + width: 60px; + height: 60px; + margin: 10px; + border-radius: 12px; + background-size: cover; + background-position: center; +} + +.shuoshuo-external-link .external-link-right { + display: flex; + flex-direction: column; + justify-content: center; + width: calc(100% - 80px); + padding: 10px; +} + +.shuoshuo-external-link .external-link-right .external-link-title { + font-size: 1.0rem; + font-weight: 800; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.shuoshuo-external-link .external-link-right i { + margin-left: 5px; +} + +/* ================= 结尾 ================= */ +.limit { + width: 100%; + text-align: center; + margin-top: 30px; +} diff --git a/css/shuoshuoshouye.css b/css/shuoshuoshouye.css new file mode 100644 index 0000000..4159010 --- /dev/null +++ b/css/shuoshuoshouye.css @@ -0,0 +1,140 @@ +/* maintop */ + +#main_top { + display: flex; + justify-content: center; + z-index: 1; + max-width: 1400px; + margin: 20px auto; + width: 100%; + padding: 0 15px; + margin-top: 40px; + margin-bottom: 0px; +} + +.hide-aside #main_top { + width: 80%; +} + +.hide-aside #main_top #bber-talk { + max-width: 936px; +} + +@media screen and (min-width: 2000px) { + .hide-aside #main_top #bber-talk { + max-width: 80%; + } + + #main_top { + max-width: 70%; + } +} + +@media screen and (max-width: 1210px) { + .hide-aside #main_top { + padding: 0 12px; + } +} + +@media screen and (max-width: 900px) { + .hide-aside #main_top { + width: 100%; + padding: 0 15px; + } +} + +@media screen and (max-width: 768px) { + .hide-aside #main_top { + padding: 0 5px; + } + + div#main_top { + margin-top: 20px; + padding: 0 5px; + } +} + +/* 重点修改：bber-talk 的磨砂玻璃背景 */ +#bber-talk { + /* 统一磨砂玻璃效果 */ + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .7)) !important; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + + border-radius: 12px; /* 给哔哔栏加一点圆角，更符合玻璃质感 */ + border: 1px solid rgba(255, 255, 255, 0.3); /* 增加边缘高光 */ + + box-sizing: border-box; + cursor: pointer; + width: 100%; + min-height: 50px; + padding: .5rem 1rem; + display: flex; + align-items: center; + overflow: hidden; + font-weight: 700; + transition: all .3s ease-in-out; +} + +/* 暗黑模式适配 */ +[data-theme=dark] #bber-talk { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), rgba(35, 37, 58, .8), rgba(35, 37, 58, .8), rgba(24, 40, 72, .7)) !important; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +#bber-talk:hover { + transform: translateY(-2px); /* 悬停微动，增加交互感 */ + box-shadow: 0 8px 20px rgba(0,0,0,0.1); +} + +#bber-talk, +#bber-talk a { + color: var(--font-color); +} + +#bber-talk svg.icon { + width: 1em; + height: 1em; + vertical-align: -.15em; + fill: currentColor; + overflow: hidden; + font-size: 20px; +} + +#bber-talk .item i { + margin-left: 5px; +} + +#bber-talk > i { + font-size: 1.1rem; +} + +#bber-talk .talk-list { + flex: 1; + max-height: 32px; + font-size: 16px; + padding: 0; + margin: 0; + overflow: hidden; +} + +#bber-talk .talk-list:hover { + color: var(--default-bg-color); + transition: all .2s ease-in-out; +} + +#bber-talk .talk-list li { + list-style: none; + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + margin-left: 10px; +} + +@media screen and (min-width: 770px) { + #bber-talk .talk-list { + text-align: center; + margin-right: 20px; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..f5e5bc9 --- /dev/null +++ b/css/style.css @@ -0,0 +1,699 @@ +/* #card-newest-comments img {border-radius: 10px; /* 设置最新评论圆角半径为10px，可以根据需要调整} */ + +/* 侧边栏个人信息卡片动态渐变色 */ +#aside-content>.card-widget.card-info { + position: relative; + z-index: 1; /* 确保原内容在上层显示 */ + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +#aside-content > .card-widget.card-info::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, + rgba(255, 255, 255, 0.0), + rgba(255, 255, 255, 0.3), + rgba(255, 255, 255, 0.6), + rgba(255, 255, 255, 0.7)); /* 鼠标悬停时显示的背景图片 */ + background-size: cover; + background-repeat: no-repeat; + opacity: 0.5; + transition: opacity 0.8s; /* 过渡效果持续时间 */ + z-index: -1; +} + +[data-theme=dark] #aside-content > .card-widget.card-info::before { + background: linear-gradient(to bottom, + rgba(24, 40, 72, .1), + rgba(35, 37, 58, .3), + rgba(35, 37, 58, .6), + rgba(24, 40, 72, .7)); /* 鼠标悬停时显示的背景图片 */ + background-size: cover; + background-repeat: no-repeat; +} + +#aside-content > .card-widget.card-info:hover::before { + opacity: 1; +} +/* 卡片动态效果，好好看哈哈 */ +#aside-content div.card-widget.card-info .avatar-img { + transition: opacity 0.3s ease; /* 添加渐变效果 */ +} + +#aside-content div.card-widget.card-info .avatar-img:hover { + opacity: 0; /* 鼠标移上去时完全透明 */ +} + +#card-info-btn:hover, #card-info-btn:hover .icon, #card-info-btn:hover span { + transform: scale(1.1); /* 鼠标悬停时放大到110% */ +} + +[data-theme=dark] #aside-content>.card-widget.card-info { + background: linear-gradient(-45deg, rgba(24, 40, 72, .6), + rgba(35, 37, 58, .5), + rgba(35, 37, 58, .5), + rgba(24, 40, 72, .6)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/* 侧边栏公告栏卡片渐变色 */ +#aside-content>.card-widget.card-announcement { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] #aside-content>.card-widget.card-announcement { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/* 侧边栏目录最新文章卡片渐变色 */ +#aside-content>.sticky_layout>.card-widget { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] #aside-content>.sticky_layout>.card-widget { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/* 侧边栏欢迎卡片渐变色 */ +#aside-content>.card-widget.welcomeBoxClass { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] #aside-content>.card-widget.welcomeBoxClass { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/* 公告卡片渐变色 */ +#recent-posts>#noticeList { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] #recent-posts>#noticeList { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/* 个人信息Follow me按钮 */ +#aside-content>.card-widget.card-info>#card-info-btn { + background-color: #3eb8be; + border-radius: 10px; +} + +/*文章页面*/ +.layout>#post { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] .layout>#post { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/*分类条*/ +#recent-posts>.category-bar { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7))!important; + backdrop-filter: blur(10px)!important; + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] #recent-posts>.category-bar { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7))!important; + backdrop-filter: blur(10px)!important; + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/*主页文章预览页面*/ +#recent-posts>.recent-post-items>.recent-post-item { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7))!important; + backdrop-filter: blur(10px)!important; + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] #recent-posts>.recent-post-items>.recent-post-item { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7))!important; + backdrop-filter: blur(10px)!important; + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/*分类页面*/ +.layout>#page { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] .layout>#page { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */ +} + + +/*时间轴页面*/ +.layout>#archive { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] .layout>#archive { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/*分类点进去的页面*/ +.layout>#category { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] .layout>#category { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +/*标签点进去的页面*/ +.layout>#tag { + background: linear-gradient(-45deg, rgba(255, 255, 255, .7), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .8), + rgba(255, 255, 255, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +[data-theme=dark] .layout>#tag { + background: linear-gradient(-45deg, rgba(24, 40, 72, .7), + rgba(35, 37, 58, .8), + rgba(35, 37, 58, .8), + rgba(24, 40, 72, .7)); + backdrop-filter: blur(10px); + /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */ +} + +.layout.hide-aside { + max-width: 1200px; +} + +/* 设置黑夜的时候，社交按钮为白色 */ +[data-theme=dark] .social-icon i { + color: rgba(188, 188, 188) !important; /* 设置为白色 */ +} + +.layout{ + width: 100%; + max-width:1400px; +} +/* 重新定义宽度 */ + +.layout > div:first-child { + width: 100%; +} +#post { + width: 78%; +} +.aside-content { + max-width: 100%; + min-width: 300px; +} +.layout.hide-aside { + max-width: 1400px; +} +/* 定义是否侧边栏的宽度 */ + +#recent-posts > .recent-post-item { + height: 19em; + border: var(--style-border); +} +#recent-posts > .recent-post-item >.recent-post-info { + padding: 0 56px; + width: 64%; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item { + height: auto; + } + #recent-posts > .recent-post-item >.recent-post-info { + padding: 20px 20px 30px; + width: 100%; + text-align: center; + } +} +/* 主页文章列表图片宽度 */ + +.loading-img { + background: url(https://free.picui.cn/free/2025/08/10/689845496a283.png) no-repeat center center; + background-size: cover; +} + +#footer { + background-color: rgba(0, 0, 0, 0); /* 修改透明色 */ + color: #fff; + padding: 0; +} + +#footer .footer-other { + padding: 0; +} + +.footer-copyright{ + padding: 0; +} + +.my-footer-logo { + color: white; +} + +.my-footer-wave-svg { + height: 50px; + width: 100%; + transform: scale(-1, -1) translateY(-10px); /*;*/ +} + +.my-footer-wave-path { + fill: #177ecd; +} + +.my-footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 450px; + position: relative; +} + +.my-footer-content-column { + box-sizing: border-box; + float: left; + padding-left: 15px; + padding-right: 15px; + width: 100%; + color: #fff; +} + +.my-footer-content-column ul li a { + color: #fff; + text-decoration: none; +} + +.my-footer-logo-link { + display: inline-block; +} + +.my-footer-menu { + margin-top: 15px; +} + +.my-footer-menu-name { + color: #fffff2; + font-size: 15px; + font-weight: 900; + letter-spacing: .1em; + line-height: 18px; + margin-bottom: 0; + margin-top: 0; + text-transform: uppercase; +} + +.my-footer-menu-list { + list-style: none; + margin-bottom: 0; + margin-top: 10px; + padding-left: 0; +} + +.my-footer-menu-list li { + margin-top: 5px; +} + +.my-footer-call-to-action-description { + color: #fffff2; + margin-top: 10px; + margin-bottom: 20px; +} + +.my-footer-call-to-action-button:hover { + background-color: #fffff2; + color: #00bef0; +} + +.button:last-of-type { + margin-right: 0; +} + +.my-footer-call-to-action-button { + background-color: #03708c; + border-radius: 21px; + color: #fffff2; + display: inline-block; + font-size: 11px; + font-weight: 900; + letter-spacing: .1em; + line-height: 18px; + padding: 12px 30px; + margin: 0 10px 10px 0; + text-decoration: none; + text-transform: uppercase; + transition: background-color .2s; + cursor: pointer; + position: relative; +} + +.my-footer-call-to-action { + margin-top: 17px; +} + +.my-footer-call-to-action-title { + color: #fffff2; + font-size: 14px; + font-weight: 900; + letter-spacing: .1em; + line-height: 18px; + margin-bottom: 0; + margin-top: 0; + text-transform: uppercase; +} + +.my-footer-call-to-action-link-wrapper { + margin-bottom: 0; + margin-top: 10px; + color: #fff; + text-decoration: none; +} + +.my-footer-call-to-action-link-wrapper a { + color: #fff; + text-decoration: none; +} + + +.my-footer-social-links { + bottom: -1px; + height: 54px; + position: absolute; + right: 0; + width: 236px; +} + +.my-footer-social-amoeba-svg { + height: 54px; + left: 0; + display: block; + position: absolute; + top: 0; + width: 236px; +} + +.my-footer-social-amoeba-path { + fill: #03708c; +} + +.my-footer-social-link.email { + height: 41px; + left: 5px; + top: 14px; + width: 41px; +} + +.my-footer-social-link { + display: block; + padding: 10px; + position: absolute; +} + +.hidden-link-text { + position: absolute; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(0px 0px 99.9% 99.9%); + clip-path: inset(0px 0px 99.9% 99.9%); + overflow: hidden; + height: 1px; + width: 1px; + padding: 0; + border: 0; + top: 50%; +} + +.my-footer-social-icon-svg { + display: block; +} + +.my-footer-social-icon-path { + fill: #fffff2; + transition: fill .2s; +} + +.my-footer-social-link.follow { + height: 42px; + left: 124px; + top: 13px; + width: 42px; +} + +.my-footer-social-link.rss { + height: 43px; + left: 178px; + top: 10px; + width: 43px; +} + +.my-footer-social-link.github { + height: 62px; + left: 54px; + top: -4px; + width: 62px; +} + +.my-footer-copyright { + background-color: #03708c; + color: #fff; + padding: 15px 30px; + text-align: center; +} + +.my-footer-copyright-wrapper { + margin-left: auto; + margin-right: auto; + max-width: 1200px; +} + +.my-footer-copyright-text { + color: #fff; + font-size: 13px; + font-weight: 400; + line-height: 18px; + margin-bottom: 0; + margin-top: 0; +} + +.my-footer-copyright-link { + color: #fff; + text-decoration: none; +} + +.my-footer-content-div { + background: #177ecd +} + +.my-footer-svg-div { + width: 100%; + max-height: 200px; +} + +/* Media Query For different screens */ +@media (min-width: 320px) and (max-width: 479px) { + /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ + .my-footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 649px; + position: relative; + } + + /* 不展示logo */ + .my-footer-logo { + display: none; + } +} + +@media (min-width: 480px) and (max-width: 599px) { + /* smartphones, Android phones, landscape iPhone */ + .my-footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 738px; + position: relative; + } + + .my-footer-logo { + padding-left: 177px; /* Qlogo 稍微偏移一点 */ + padding-right: 170px; + } +} + +@media (min-width: 600px) and (max-width: 800px) { + /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ + .my-footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 758px; + position: relative; + } + + +} + +@media (min-width: 801px) { + /* tablet, landscape iPad, lo-res laptops ands desktops */ + +} + +@media (min-width: 1025px) { + /* big landscape tablets, laptops, and desktops */ + +} + +@media (min-width: 1281px) { + /* hi-res laptops and desktops */ + +} + + +@media (min-width: 760px) { + .my-footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 10px 15px 237px; + position: relative; + } + + + .my-footer-content-column { + /*五列的话 19.99 %*/ + width: 24.99%; + } +} + +@media (min-width: 568px) { + +} + +@media (min-width: 600px) and (max-width: 760px) { + /* 在这里编写适用于小屏幕的样式 */ + .my-footer-logo { + padding-left: 212px; /* Qlogo 稍微偏移一点 */ + padding-right: 204px; + } +} + +/* 页脚波浪的颜色 */ +[data-theme='dark'] .my-footer-wave-path { + fill: #0f3858; +} +[data-theme='dark'] .my-footer-content-div { + background-color: #0f3858; +} + +/* 页脚海底的颜色 */ +[data-theme='dark'] .my-footer-copyright { + background-color: #2b3f49; +} +[data-theme='dark'] .my-footer-social-amoeba-path { + fill: #2b3f49; +} diff --git a/css/swiper.css b/css/swiper.css new file mode 100644 index 0000000..650d91c --- /dev/null +++ b/css/swiper.css @@ -0,0 +1,138 @@ +/* 1. 强制清空外层容器的背景、边框和阴影 */ +#swiperBox, +#swiper_container, +.blog-slider, +.swiper-container { + padding: 0 !important; + margin: 0 auto !important; + background: none !important; + border: none !important; + box-shadow: none !important; + width: 100% !important; + overflow: hidden !important; +} + +/* 2. 强力锁定比例，防止 JS 动态修改高度 */ +div#swiper_container { + width: 100% !important; + + /* 使用 vw 单位根据屏幕宽度动态计算高度 */ + /* 16:9 比例下，高度 = 宽度 * 56.25% */ + height: 56.25vw !important; + + /* 设定最大高度，防止在 PC 端显得过大（可根据需求调整，比如 400px） */ + max-height: 450px !important; + + /* 设定最小高度，防止在极小屏幕下太扁 */ + min-height: 180px !important; + + aspect-ratio: 16 / 9 !important; + display: block !important; + border-radius: 12px; + position: relative !important; +} + +/* 强制内部所有幻灯片跟随父容器高度 */ +.swiper-wrapper, .swiper-slide, .blog-slider__item { + height: 100% !important; +} +/* 3. 彻底隐藏分页圆点或橙色元素 */ +.blog-slider__pagination, .swiper-pagination { + display: none !important; +} + +.blog-slider__pagination .swiper-pagination-bullet, +.swiper-pagination-bullet, +.swiper-button-next, +.swiper-button-prev { + outline: none !important; +} + +/* 4. 图片填充修复：确保铺满不留白 */ +.blog-slider__item { + width: 100% !important; + height: 100% !important; + background-size: cover !important; + background-position: center !important; + margin: 0 !important; + padding: 0 !important; +} + +/* 5. 打包内容块并整体居中 */ +.blog-slider__content { + background: rgba(0, 0, 0, 0.45) !important; + width: 100% !important; + height: 100% !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + margin: 0 !important; + padding: 0 !important; +} + +/* 核心：将内容容器设为居中参考点 */ +.blog-slider__content .blog-slider__item_content_wrapper, /* 尝试抓取可能的内层包裹 */ +.blog-slider__content > div:first-child, /* 备选抓取 */ +.blog-slider__content { + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + align-items: center !important; +} + +/* 针对标题和描述的统一样式 */ +.blog-slider__title, +.blog-slider__text { + position: relative !important; /* 放弃绝对定位，回归正常流，防止重叠 */ + top: 0 !important; + left: 0 !important; + transform: none !important; + width: 85% !important; + text-align: center !important; + margin: 5px auto !important; /* 自动上下留白 */ + color: #ffffff !important; +} + +a.blog-slider__title { + font-size: 1.4rem !important; + font-weight: bold !important; + line-height: 1.3 !important; + text-decoration: none !important; +} + +.blog-slider__text { + font-size: 0.9rem !important; + opacity: 0.9; + /* 限制描述文字行数，防止在16:9中撑破容器 */ + display: -webkit-box !important; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* 针对手机端的极小屏幕适配 */ +@media screen and (max-width: 768px) { + a.blog-slider__title { + font-size: 1.1rem !important; + } + .blog-slider__text { + font-size: 0.8rem !important; + -webkit-line-clamp: 1; /* 手机端只留一行描述，防止空间拥挤 */ + } +} +/* 6. 移动端微调：防止文字过大或间距过宽 */ +@media screen and (max-width: 768px) { + .blog-slider__content { + padding: 0 15px !important; + } + a.blog-slider__title { + font-size: 1.1rem !important; + } +} + +/* 7. 左右箭头样式：白色且无背景 */ +.swiper-button-next::after, .swiper-button-prev::after { + font-size: 1.2rem !important; + color: #fff !important; + background: none !important; +} \ No newline at end of file diff --git a/css/var.css b/css/var.css new file mode 100644 index 0000000..e69de29 diff --git a/go.html b/go.html new file mode 100644 index 0000000..094646b --- /dev/null +++ b/go.html @@ -0,0 +1 @@ +😃页面加载中，请稍候...
头像
Bi's Blog
安全中心
您即将离开本站，跳转到：
⚡将在秒后跳转，请自行确认链接安全性
\ No newline at end of file diff --git a/images/Bi.ico b/images/Bi.ico new file mode 100644 index 0000000..6d3a9bc Binary files /dev/null and b/images/Bi.ico differ diff --git a/images/background.png b/images/background.png new file mode 100644 index 0000000..e90a980 Binary files /dev/null and b/images/background.png differ diff --git a/img/404.jpg b/img/404.jpg new file mode 100644 index 0000000..4bab3c3 Binary files /dev/null and b/img/404.jpg differ diff --git a/img/butterfly-icon.png b/img/butterfly-icon.png new file mode 100644 index 0000000..3992d77 Binary files /dev/null and b/img/butterfly-icon.png differ diff --git a/img/error-page.png b/img/error-page.png new file mode 100644 index 0000000..9d1de96 Binary files /dev/null and b/img/error-page.png differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..56d07f5 Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/friend_404.gif b/img/friend_404.gif new file mode 100644 index 0000000..91dd56a Binary files /dev/null and b/img/friend_404.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..caf7436 --- /dev/null +++ b/index.html @@ -0,0 +1,514 @@ +Bi's Blog + + + + + + + + +

Bi's Blog

    说说加载中。。。
新年快乐！
发表于
各位亲朋好友、合作伙伴及屏幕前的你： 值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下： 一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。 二、请各有关人员在收到本通知后，务必在下方留言区留下你的新年愿望，由后台系统统一收集并祝愿其实现。 三、祝大家在新的一年里，身体健康，万事如意，所得皆所愿，所行化坦途！
添加网站左上角菜单
添加网站左上角菜单
发表于|建站手札
看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
将博客仓库转移到gitea
将博客仓库转移到gitea
发表于|技术
在上一篇文章中已经完成了gitea的安装那么博客源码迁移倒是没问题，直接git remote add origin就行，但是action文件就有些变更。这是我修改的action文件： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556name: 自动部署on: push: branches: - master release: types: - published workflow_dispatch:env: TZ: Asia/Shanghaijobs: deploy: runs-on: ubuntu-latest steps: - name: 检查分支 uses: actions/checkout@v4 with: ref: master - name: 缓存项目 npm 包 id: cache-node-modul...
安装gitea
安装gitea
发表于|技术
今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）PS:我的服务器为2C2G 安装gitea这里用二进制文件安装 获取二进制文件：123wget -O gitea https://dl.gitea.com/gitea/1.25.4/gitea-1.25.4-linux-amd64chmod +x giteacp gitea /usr/local/bin/gitea 创建用户这一步不是必须的，但是推荐这样，用root用户很容易出问题。 1234567891011121314151617181920# On Ubuntu/Debian:adduser \ --system \ --shell /bin/bash \ --gecos 'Git Version Control' \ --group \ --disabled-password \ --home /home/git \ git# On Fedora/RHEL/CentOS:groupadd --system gitaddus...
添加typesense搜索
发表于|技术建站手札
最近在构建班级博客，用ghost cms，在构建搜索时发现了typesense，所以把他移植到这个博客上。 安装typesense直接用docker-compose: 1234567891011services: typesense: image: typesense/typesense:30.1 restart: always ports: - "8108:8108" volumes: - ./typesense-data:/data command: '--data-dir /data --api-key=填写key --enable-cors' 然后就是反向代理之类的，不过多写了。 添加数据集123# 先安装库npm install hexo-generator-searchnpm install typesense xml2js 然后在config.yml配置（就是把文章生成json）： 1234search: path: search.json field: post c...
自定义字体
自定义字体
发表于|建站手札
今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
在侧边栏添加日历和倒计时
在侧边栏添加日历和倒计时
发表于|建站手札
突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
和朋友们的故事
和朋友们的故事
发表于|杂谈
最近一直忙于学习（虽然也没怎么好好学），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年开始就断断续续地给朋友们写信，这是一些挂号信收据： 这应该是去年上半年的一张图片，下半年也在零散的发，只不过下半年比较忙，没发多少。到年底的时候呢又想着写一点贺年信，当然感觉自己的水平下降，写不出什么好的文章。于是开始着手准备电子版贺卡，当然完全使用了AI工具，自己写太麻烦，也没什么精力去写，于是就有了下面的电子贺卡： 之后呢，又写了其他一些有趣的功能，但好像不是这篇文章的重点； 再写信和创作电子贺卡是感慨万分，进入大学之后时间似乎变得十分快，感觉除了几个天天联系的好友之外，其他人都慢慢疏远了，不过这也是必然的事情，也没什么可悲伤的，只是感慨罢了。 怎么说，就这样吧，下次有时间再在这篇文章里更新。
Adguard和Openclash共存
Adguard和Openclash共存
发表于|技术
在之前已经安装了Openwrt系统，并且也配置了OpenClash和AdguardHome，两者的原理简单看都是劫持DNS，所以两者要同时运行，必须经过一定的配置。无非就这两种方式: 左边的方式更简单一些，只需要修改AdguardHome的上游DNS服务器为127.0.0.1:7874 即可；右边的方式需要将OpenClash里的DNS指向AdguardHome，但是可能有拦截失败的情况(好像没有遇到过)。
Adguard规则分享
Adguard规则分享
发表于|技术
众所周知，Adguardhome是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则： 一个综合的过滤规则 🪧引用站外地址，不保证站点的可用性和安全性 adblockfilters adblockfilters 广告过滤规则订阅中心 🪧引用站外地址，不保证站点的可用性和安全性 广告过滤规则订阅中心 广告过滤规则订阅中心 集成了许多规则，可以挑选一下加入。 这是我添加的规则，在这些规则下，用Adblocktester可以达到74分，基本够用
在Openwrt上安装AdguardHome
在Openwrt上安装AdguardHome
发表于|技术
接续前言，AdguardHome是一款广告拦截软件，有了一台小软路由后就开始折腾了。 安装首先要下载软件包，但是经过尝试，软件源里面的luci-app-adguardhome不太好用（也可能是我不会用） ，所以我用的下面的包： 🪧引用站外地址，不保证站点的可用性和安全性 luci-app-adguardhome rufengsuixing 虽然好几年没更新了，但还是能用。下载之后上传到路由器，使用opkg install命令安装，或者可以直接通过网页安装： 配置如下图所示进行操作，如果更新核心版本失败，考虑更换升级用的下载链接，使用镜像源，或者科学上网，错号框内的非必要不修改； 最后点击“保存并应用”，然后点击AdGuardHome Web:3000，进行安装，建议关闭路由器自带DNS/DHCP服务器，AdguardHome直接替代 然后，设置AdguardHome的DHCP服务器，注意要先检...
在Openwrt中安装OpenClash
在Openwrt中安装OpenClash
发表于|技术
前言因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。 安装可以通过web管理页面安装，搜索openclash。 当然也可以在终端中执行命令： 123opkg updateopkg install bash iptables dnsmasq-full curl ca-bundle ipset ip-full iptables-mod-tproxy iptables-mod-extra ruby ruby-yaml kmod-tun kmod-inet-diag unzip luci-compat luci luci-baseopkg install luci-app-openclash 配置首先需要下载内核，推荐启用Smart内核。 然后导入配置： 然后就可以开心使用啦！感觉zashboard简洁好看一些，看自己感觉啦
Cudy TR3000刷入Openwrt系统
Cudy TR3000刷入Openwrt系统
发表于|技术
最近搞到了一台Cudy-TR3000路由器，用来进行科学上网（小猫咪），先记录一下刷写Openwrt系统的过程。 下载固件 中间固件中间固件可以在Cudy官方网站上下载 🪧引用站外地址，不保证站点的可用性和安全性 Cudy固件下载 Cudy 2. Openwrt固件 在下面的网站中下载，下载最新的就行 🪧引用站外地址，不保证站点的可用性和安全性 Openwrt固件 Openwrt.ai 刷写固件访问192.168.10.1先刷入中间固件 然后访问192.168.1.1，刷入Openwrt插件 然后访问10.0.0.1，就可以看到openwrt登录页面了,默认密码是root。
搭建Owncloud并集成Onlyoffice
搭建Owncloud并集成Onlyoffice
发表于|技术
引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
为博客添加CMS系统
为博客添加CMS系统
发表于|建站手札
序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
为1Panel添加自己想要的应用
为1Panel添加自己想要的应用
发表于|技术
记录一下自己为1Panel贡献自己应用的经历 预准备 Fork仓库 🪧引用站外地址，不保证站点的可用性和安全性 1Panel appstore 仓库 1panel appstore 把仓库fork到自己的仓库 pull 1git clone -b dev https://<your-github-username>/appstore 创建新分支 12cd appstoregit checkout -b app/<app-name> 创建文件文件目录12345678910111213├──halo // 以 halo 的 key 命名 ，下面解释什么是 key ├── logo.png // 应用 logo , 最好是 180 * 180 px 不要超过 10 KB ├── data.yml // 应用声明文件 ├── README.md // 应用的 README ├── 2.2.0 /...
avatar
biss
文章
30
标签
10
分类
5
Follow Me
公告
最新文章
新年快乐！
添加网站左上角菜单
添加网站左上角菜单
将博客仓库转移到gitea
将博客仓库转移到gitea
安装gitea
安装gitea
添加typesense搜索
+ + 分类 + +
+
标签
网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
+
+ + 归档 + +
+ + +
网站信息
文章数目 :
30
本站总字数 :
37.8k
本站访客数 :
本站总浏览量 :
最后更新时间 :
日历
+
+
+
+
+
+
+
+
+
+
剩余时间
+
距离除夕
+
+
2025-01-28
+
+
+
+
本年
+
+ + 还剩天 + +
+
+
+
本月
+
+ + 还剩天 + +
+
+
+
本周
+
+ + 还剩天 + +
+
+
+
复制站内搜索
复制本文地址
随便逛逛昼夜切换繁简转换隐私声明Cookie协议版权声明
\ No newline at end of file diff --git a/indexnow.txt b/indexnow.txt new file mode 100644 index 0000000..fb2d369 --- /dev/null +++ b/indexnow.txt @@ -0,0 +1 @@ +https://blog.biss.click/posts/8802e397/ \ No newline at end of file diff --git a/js/ai-summary.js b/js/ai-summary.js new file mode 100644 index 0000000..7874f11 --- /dev/null +++ b/js/ai-summary.js @@ -0,0 +1,65 @@ +// 打字机效果 +function typeTextMachineStyle(text, targetSelector, options = {}) { + const { + delay = 50, + startDelay = 2000, + onComplete = null, + clearBefore = true, + eraseBefore = true, // 新增：是否以打字机方式清除原文本 + eraseDelay = 30, // 新增：删除每个字符的间隔 + } = options; + + const el = document.querySelector(targetSelector); + if (!el || typeof text !== "string") return; + + setTimeout(() => { + const startTyping = () => { + let index = 0; + function renderChar() { + if (index <= text.length) { + el.textContent = text.slice(0, index++); + setTimeout(renderChar, delay); + } else { + onComplete && onComplete(el); + } + } + renderChar(); + }; + + if (clearBefore) { + if (eraseBefore && el.textContent.length > 0) { + let currentText = el.textContent; + let eraseIndex = currentText.length; + + function eraseChar() { + if (eraseIndex > 0) { + el.textContent = currentText.slice(0, --eraseIndex); + setTimeout(eraseChar, eraseDelay); + } else { + startTyping(); // 删除完毕后开始打字 + } + } + + eraseChar(); + } else { + el.textContent = ""; + startTyping(); + } + } else { + startTyping(); + } + }, startDelay); +} + +function renderAISummary() { + const summaryEl = document.querySelector('.ai-summary .ai-explanation'); + if (!summaryEl) return; + + const summaryText = summaryEl.getAttribute('data-summary'); + if (summaryText) { + typeTextMachineStyle(summaryText, ".ai-summary .ai-explanation"); // 如果需要切换，在这里调用另一个函数即可 + } +} + +document.addEventListener('pjax:complete', renderAISummary); +document.addEventListener('DOMContentLoaded', renderAISummary); diff --git a/js/chart.js b/js/chart.js new file mode 100644 index 0000000..c693704 --- /dev/null +++ b/js/chart.js @@ -0,0 +1,397 @@ +const cheerio = require('cheerio') +const moment = require('moment') + +hexo.extend.filter.register('after_render:html', function (locals) { + const $ = cheerio.load(locals) + const post = $('#posts-chart') + const tag = $('#tags-chart') + const category = $('#categories-chart') + const htmlEncode = false + + if (post.length > 0 || tag.length > 0 || category.length > 0) { + if (post.length > 0 && $('#postsChart').length === 0) { + if (post.attr('data-encode') === 'true') htmlEncode = true + post.after(postsChart(post.attr('data-start'))) + } + if (tag.length > 0 && $('#tagsChart').length === 0) { + if (tag.attr('data-encode') === 'true') htmlEncode = true + tag.after(tagsChart(tag.attr('data-length'))) + } + if (category.length > 0 && $('#categoriesChart').length === 0) { + if (category.attr('data-encode') === 'true') htmlEncode = true + category.after(categoriesChart(category.attr('data-parent'))) + } + + if (htmlEncode) { + return $.root().html().replace(/&#/g, '&#') + } else { + return $.root().html() + } + } else { + return locals + } +}, 15) + +function postsChart (startMonth) { + const startDate = moment(startMonth || '2020-01') + const endDate = moment() + + const monthMap = new Map() + const dayTime = 3600 * 24 * 1000 + for (let time = startDate; time <= endDate; time += dayTime) { + const month = moment(time).format('YYYY-MM') + if (!monthMap.has(month)) { + monthMap.set(month, 0) + } + } + hexo.locals.get('posts').forEach(function (post) { + const month = post.date.format('YYYY-MM') + if (monthMap.has(month)) { + monthMap.set(month, monthMap.get(month) + 1) + } + }) + const monthArr = JSON.stringify([...monthMap.keys()]) + const monthValueArr = JSON.stringify([...monthMap.values()]) + + return ` + ` +} + +function tagsChart (len) { + const tagArr = [] + hexo.locals.get('tags').map(function (tag) { + tagArr.push({ name: tag.name, value: tag.length, path: tag.path }) + }) + tagArr.sort((a, b) => { return b.value - a.value }) + + const dataLength = Math.min(tagArr.length, len) || tagArr.length + const tagNameArr = [] + for (let i = 0; i < dataLength; i++) { + tagNameArr.push(tagArr[i].name) + } + const tagNameArrJson = JSON.stringify(tagNameArr) + const tagArrJson = JSON.stringify(tagArr) + + return ` + ` +} + +function categoriesChart (dataParent) { + const categoryArr = [] + let categoryParentFlag = false + hexo.locals.get('categories').map(function (category) { + if (category.parent) categoryParentFlag = true + categoryArr.push({ + name: category.name, + value: category.length, + path: category.path, + id: category._id, + parentId: category.parent || '0' + }) + }) + categoryParentFlag = categoryParentFlag && dataParent === 'true' + categoryArr.sort((a, b) => { return b.value - a.value }) + function translateListToTree (data, parent) { + let tree = [] + let temp + data.forEach((item, index) => { + if (data[index].parentId == parent) { + let obj = data[index]; + temp = translateListToTree(data, data[index].id); + if (temp.length > 0) { + obj.children = temp + } + if (tree.indexOf()) + tree.push(obj) + } + }) + return tree + } + const categoryNameJson = JSON.stringify(categoryArr.map(function (category) { return category.name })) + const categoryArrJson = JSON.stringify(categoryArr) + const categoryArrParentJson = JSON.stringify(translateListToTree(categoryArr, '0')) + + return ` + ` +} diff --git a/js/footer.js b/js/footer.js new file mode 100644 index 0000000..4282dfe --- /dev/null +++ b/js/footer.js @@ -0,0 +1,66 @@ + +//版权图标动态显示 +document.addEventListener('DOMContentLoaded', function() { + const currentYear = new Date().getFullYear(); + const copyrightElement = document.querySelector('.copyright'); + if (copyrightElement) { + copyrightElement.innerHTML = `©2025 - ${currentYear} By Bi`; + } +}); + +// 运行时间动态显示 +function showDateTime() { + const timeDisplay = document.getElementById('span_dt_dt'); + if (!timeDisplay) return; + + const startTime = new Date("2025-07-05T15:41:23"); + const now = new Date(); + const elapsedMilliseconds = now - startTime; + const seconds = Math.floor(elapsedMilliseconds / 1000); + + const oneYearInSeconds = 365 * 24 * 60 * 60; + if (seconds < oneYearInSeconds) { + const days = Math.floor(seconds / (24 * 60 * 60)); + const remainingSecondsAfterDays = seconds % (24 * 60 * 60); + const hours = Math.floor(remainingSecondsAfterDays / (60 * 60)); + const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60); + const minutes = Math.floor(remainingSecondsAfterHours / 60); + const sec = remainingSecondsAfterHours % 60; + + timeDisplay.innerHTML = ` + ${days} 天 + ${hours} 时 + ${minutes} 分 + ${sec} 秒 + `; + } else { + const years = Math.floor(seconds / oneYearInSeconds); + const remainingSecondsAfterYears = seconds % oneYearInSeconds; + const days = Math.floor(remainingSecondsAfterYears / (24 * 60 * 60)); + const remainingSecondsAfterDays = remainingSecondsAfterYears % (24 * 60 * 60); + const hours = Math.floor(remainingSecondsAfterDays / (60 * 60)); + const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60); + const minutes = Math.floor(remainingSecondsAfterHours / 60); + const sec = remainingSecondsAfterHours % 60; + + timeDisplay.innerHTML = ` + ${years} 年 + ${days} 天 + ${hours} 时 + ${minutes} 分 + ${sec} 秒 + `; + } + + setTimeout(showDateTime, 1000); +} + +document.addEventListener('DOMContentLoaded', () => { + const frameworkInfo = document.querySelector('.framework-info'); + if (frameworkInfo) { + frameworkInfo.innerHTML = '本站已运行'; + } + showDateTime(); +}); + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..046ad4e --- /dev/null +++ b/js/main.js @@ -0,0 +1,987 @@ +document.addEventListener('DOMContentLoaded', () => { + let headerContentWidth, $nav + let mobileSidebarOpen = false + + const adjustMenu = init => { + const getAllWidth = ele => Array.from(ele).reduce((width, i) => width + i.offsetWidth, 0) + + if (init) { + const blogInfoWidth = getAllWidth(document.querySelector('#blog-info > a').children) + const menusWidth = getAllWidth(document.getElementById('menus').children) + headerContentWidth = blogInfoWidth + menusWidth + $nav = document.getElementById('nav') + } + + const hideMenuIndex = window.innerWidth <= 768 || headerContentWidth > $nav.offsetWidth - 120 + $nav.classList.toggle('hide-menu', hideMenuIndex) + } + + // 初始化header + const initAdjust = () => { + adjustMenu(true) + $nav.classList.add('show') + } + + // sidebar menus + const sidebarFn = { + open: () => { + btf.overflowPaddingR.add() + btf.animateIn(document.getElementById('menu-mask'), 'to_show 0.5s') + document.getElementById('sidebar-menus').classList.add('open') + mobileSidebarOpen = true + }, + close: () => { + btf.overflowPaddingR.remove() + btf.animateOut(document.getElementById('menu-mask'), 'to_hide 0.5s') + document.getElementById('sidebar-menus').classList.remove('open') + mobileSidebarOpen = false + } + } + + /** + * 首頁top_img底下的箭頭 + */ + const scrollDownInIndex = () => { + const handleScrollToDest = () => { + btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300) + } + + const $scrollDownEle = document.getElementById('scroll-down') + $scrollDownEle && btf.addEventListenerPjax($scrollDownEle, 'click', handleScrollToDest) + } + + /** + * 代碼 + * 只適用於Hexo默認的代碼渲染 + */ + const addHighlightTool = () => { + const highLight = GLOBAL_CONFIG.highlight + if (!highLight) return + + const { highlightCopy, highlightLang, highlightHeightLimit, highlightFullpage, highlightMacStyle, plugin } = highLight + const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink + const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined || highlightFullpage || highlightMacStyle + const isNotHighlightJs = plugin !== 'highlight.js' + const isPrismjs = plugin === 'prismjs' + const $figureHighlight = isNotHighlightJs + ? Array.from(document.querySelectorAll('code[class*="language-"]')).map(code => code.parentElement) + : document.querySelectorAll('figure.highlight') + + if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return + + const highlightShrinkClass = isHighlightShrink === true ? 'closed' : '' + const highlightShrinkEle = isHighlightShrink !== undefined ? '' : '' + const highlightCopyEle = highlightCopy ? '' : '' + const highlightMacStyleEle = '
' + const highlightFullpageEle = highlightFullpage ? '' : '' + + const alertInfo = (ele, text) => { + if (GLOBAL_CONFIG.Snackbar !== undefined) { + btf.snackbarShow(text) + } else { + const newEle = document.createElement('div') + newEle.className = 'copy-notice' + newEle.textContent = text + document.body.appendChild(newEle) + + const buttonRect = ele.getBoundingClientRect() + const scrollTop = window.pageYOffset || document.documentElement.scrollTop + const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft + + // X-axis boundary check + const halfWidth = newEle.offsetWidth / 2 + const centerLeft = buttonRect.left + scrollLeft + buttonRect.width / 2 + const finalLeft = Math.max(halfWidth + 10, Math.min(window.innerWidth - halfWidth - 10, centerLeft)) + + // Show tooltip below button if too close to top + const normalTop = buttonRect.top + scrollTop - 40 + const shouldShowBelow = buttonRect.top < 60 || normalTop < 10 + + const topValue = shouldShowBelow ? buttonRect.top + scrollTop + buttonRect.height + 10 : normalTop + + newEle.style.cssText = ` + top: ${topValue + 10}px; + left: ${finalLeft}px; + transform: translateX(-50%); + opacity: 0; + transition: opacity 0.3s ease, top 0.3s ease; + ` + + requestAnimationFrame(() => { + newEle.style.opacity = '1' + newEle.style.top = `${topValue}px` + }) + + setTimeout(() => { + newEle.style.opacity = '0' + newEle.style.top = `${topValue + 10}px` + setTimeout(() => { + newEle?.remove() + }, 300) + }, 800) + } + } + + const copy = async (text, ctx) => { + try { + await navigator.clipboard.writeText(text) + alertInfo(ctx, GLOBAL_CONFIG.copy.success) + } catch (err) { + console.error('Failed to copy: ', err) + alertInfo(ctx, GLOBAL_CONFIG.copy.noSupport) + } + } + + // click events + const highlightCopyFn = (ele, clickEle) => { + const $buttonParent = ele.parentNode + $buttonParent.classList.add('copy-true') + const preCodeSelector = isNotHighlightJs ? 'pre code' : 'table .code pre' + const codeElement = $buttonParent.querySelector(preCodeSelector) + if (!codeElement) return + copy(codeElement.innerText, clickEle) + $buttonParent.classList.remove('copy-true') + } + + const highlightShrinkFn = ele => ele.classList.toggle('closed') + + const codeFullpage = (item, clickEle) => { + const wrapEle = item.closest('figure.highlight') + const isFullpage = wrapEle.classList.toggle('code-fullpage') + + document.body.style.overflow = isFullpage ? 'hidden' : '' + clickEle.classList.toggle('fa-down-left-and-up-right-to-center', isFullpage) + clickEle.classList.toggle('fa-up-right-and-down-left-from-center', !isFullpage) + } + + const highlightToolsFn = e => { + const $target = e.target.classList + const currentElement = e.currentTarget + if ($target.contains('expand')) highlightShrinkFn(currentElement) + else if ($target.contains('copy-button')) highlightCopyFn(currentElement, e.target) + else if ($target.contains('fullpage-button')) codeFullpage(currentElement, e.target) + } + + const expandCode = e => e.currentTarget.classList.toggle('expand-done') + + // 獲取隱藏狀態下元素的真實高度 + const getActualHeight = item => { + if (item.offsetHeight > 0) return item.offsetHeight + const hiddenElements = new Map() + + const fix = () => { + let current = item + while (current !== document.body && current != null) { + if (window.getComputedStyle(current).display === 'none') { + hiddenElements.set(current, current.getAttribute('style') || '') + } + current = current.parentNode + } + + const style = 'visibility: hidden !important; display: block !important;' + hiddenElements.forEach((originalStyle, elem) => { + elem.setAttribute('style', originalStyle ? originalStyle + ';' + style : style) + }) + } + + const restore = () => { + hiddenElements.forEach((originalStyle, elem) => { + if (originalStyle === '') elem.removeAttribute('style') + else elem.setAttribute('style', originalStyle) + }) + } + + fix() + const height = item.offsetHeight + restore() + return height + } + + const createEle = (lang, item) => { + const fragment = document.createDocumentFragment() + + if (isShowTool) { + const hlTools = document.createElement('div') + hlTools.className = `highlight-tools ${highlightShrinkClass}` + hlTools.innerHTML = highlightMacStyleEle + highlightShrinkEle + lang + highlightCopyEle + highlightFullpageEle + btf.addEventListenerPjax(hlTools, 'click', highlightToolsFn) + fragment.appendChild(hlTools) + } + + if (highlightHeightLimit && getActualHeight(item) > highlightHeightLimit + 30) { + const ele = document.createElement('div') + ele.className = 'code-expand-btn' + ele.innerHTML = '' + btf.addEventListenerPjax(ele, 'click', expandCode) + fragment.appendChild(ele) + } + + isNotHighlightJs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild) + } + + $figureHighlight.forEach(item => { + let langName = '' + if (isNotHighlightJs) { + const newClassName = isPrismjs ? 'prismjs' : 'default' + btf.wrap(item, 'figure', { class: `highlight ${newClassName}` }) + } + + if (!highlightLang) { + createEle('', item) + return + } + + if (isNotHighlightJs) { + langName = isPrismjs ? item.getAttribute('data-language') || 'Code' : item.querySelector('code').getAttribute('class').replace('language-', '') + } else { + langName = item.getAttribute('class').split(' ')[1] + if (langName === 'plain' || langName === undefined) langName = 'Code' + } + createEle(`
${langName}
`, item) + }) + } + + /** + * PhotoFigcaption + */ + const addPhotoFigcaption = () => { + if (!GLOBAL_CONFIG.isPhotoFigcaption) return + document.querySelectorAll('#article-container img').forEach(item => { + const altValue = item.title || item.alt + if (!altValue) return + const ele = document.createElement('div') + ele.className = 'img-alt text-center' + ele.textContent = altValue + item.insertAdjacentElement('afterend', ele) + }) + } + + /** + * Lightbox + */ + const runLightbox = () => { + btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)')) + } + + /** + * justified-gallery 圖庫排版 + */ + + const fetchUrl = async url => { + try { + const response = await fetch(url) + return await response.json() + } catch (error) { + console.error('Failed to fetch URL:', error) + return [] + } + } + + const runJustifiedGallery = (container, data, config) => { + const { isButton, limit, firstLimit, tabs } = config + + const dataLength = data.length + const maxGroupKey = Math.ceil((dataLength - firstLimit) / limit + 1) + + // Gallery configuration + const igConfig = { + gap: 5, + isConstantSize: true, + sizeRange: [150, 600], + // useResizeObserver: true, + // observeChildren: true, + useTransform: true + // useRecycle: false + } + + const ig = new InfiniteGrid.JustifiedInfiniteGrid(container, igConfig) + let isLayoutHidden = false + + // Utility functions + const sanitizeString = str => (str && str.replace(/"/g, '"')) || '' + + const createImageItem = item => { + const alt = item.alt ? `alt="${sanitizeString(item.alt)}"` : '' + const title = item.title ? `title="${sanitizeString(item.title)}"` : '' + return `
+ +
` + } + + const getItems = (nextGroupKey, count, isFirst = false) => { + const startIndex = isFirst ? (nextGroupKey - 1) * count : (nextGroupKey - 2) * count + firstLimit + return data.slice(startIndex, startIndex + count).map(createImageItem) + } + + // Load more button + const addLoadMoreButton = container => { + const button = document.createElement('button') + button.innerHTML = `${GLOBAL_CONFIG.infinitegrid.buttonText}` + + button.addEventListener('click', () => { + button.remove() + btf.setLoading.add(container) + appendItems(ig.getGroups().length + 1, limit) + }, { once: true }) + + container.insertAdjacentElement('afterend', button) + } + + const appendItems = (nextGroupKey, count, isFirst) => { + ig.append(getItems(nextGroupKey, count, isFirst), nextGroupKey) + } + + // Event handlers + const handleRenderComplete = e => { + if (tabs) { + const parentNode = container.parentNode + if (isLayoutHidden) { + parentNode.style.visibility = 'visible' + } + if (container.offsetHeight === 0) { + parentNode.style.visibility = 'hidden' + isLayoutHidden = true + } + } + + const { updated, isResize, mounted } = e + if (!updated.length || !mounted.length || isResize) return + + btf.loadLightbox(container.querySelectorAll('img:not(.medium-zoom-image)')) + + if (ig.getGroups().length === maxGroupKey) { + btf.setLoading.remove(container) + !tabs && ig.off('renderComplete', handleRenderComplete) + return + } + + if (isButton) { + btf.setLoading.remove(container) + addLoadMoreButton(container) + } + } + + const handleRequestAppend = btf.debounce(e => { + const nextGroupKey = (+e.groupKey || 0) + 1 + + if (nextGroupKey === 1) appendItems(nextGroupKey, firstLimit, true) + else appendItems(nextGroupKey, limit) + + if (nextGroupKey === maxGroupKey) ig.off('requestAppend', handleRequestAppend) + }, 300) + + btf.setLoading.add(container) + ig.on('renderComplete', handleRenderComplete) + + if (isButton) { + appendItems(1, firstLimit, true) + } else { + ig.on('requestAppend', handleRequestAppend) + ig.renderItems() + } + + btf.addGlobalFn('pjaxSendOnce', () => ig.destroy()) + } + + const addJustifiedGallery = async (elements, tabs = false) => { + if (!elements.length) return + + const initGallery = async () => { + for (const element of elements) { + if (btf.isHidden(element) || element.classList.contains('loaded')) continue + + const config = { + isButton: element.getAttribute('data-button') === 'true', + limit: parseInt(element.getAttribute('data-limit'), 10), + firstLimit: parseInt(element.getAttribute('data-first'), 10), + tabs + } + + const container = element.firstElementChild + const content = container.textContent + container.textContent = '' + element.classList.add('loaded') + + try { + const data = element.getAttribute('data-type') === 'url' ? await fetchUrl(content) : JSON.parse(content) + runJustifiedGallery(container, data, config) + } catch (error) { + console.error('Gallery data parsing failed:', error) + } + } + } + + if (typeof InfiniteGrid === 'function') { + await initGallery() + } else { + await btf.getScript(GLOBAL_CONFIG.infinitegrid.js) + await initGallery() + } + } + + /** + * rightside scroll percent + */ + const rightsideScrollPercent = currentTop => { + const scrollPercent = btf.getScrollPercent(currentTop, document.body) + const goUpElement = document.getElementById('go-up') + + if (scrollPercent < 95) { + goUpElement.classList.add('show-percent') + goUpElement.querySelector('.scroll-percent').textContent = scrollPercent + } else { + goUpElement.classList.remove('show-percent') + } + } + + /** + * 滾動處理 + */ + const scrollFn = () => { + const $rightside = document.getElementById('rightside') + const innerHeight = window.innerHeight + 56 + let initTop = 0 + const $header = document.getElementById('page-header') + const isChatBtn = typeof chatBtn !== 'undefined' + const isShowPercent = GLOBAL_CONFIG.percent.rightside + + // 檢查文檔高度是否小於視窗高度 + const checkDocumentHeight = () => { + if (document.body.scrollHeight <= innerHeight) { + $rightside.classList.add('rightside-show') + return true + } + return false + } + + // 如果文檔高度小於視窗高度,直接返回 + if (checkDocumentHeight()) return + + // find the scroll direction + const scrollDirection = currentTop => { + const result = currentTop > initTop // true is down & false is up + initTop = currentTop + return result + } + + let flag = '' + const scrollTask = btf.throttle(() => { + const currentTop = window.scrollY || document.documentElement.scrollTop + const isDown = scrollDirection(currentTop) + if (currentTop > 56) { + if (flag === '') { + $header.classList.add('nav-fixed') + $rightside.classList.add('rightside-show') + } + + if (isDown) { + if (flag !== 'down') { + $header.classList.remove('nav-visible') + isChatBtn && window.chatBtn.hide() + flag = 'down' + } + } else { + if (flag !== 'up') { + $header.classList.add('nav-visible') + isChatBtn && window.chatBtn.show() + flag = 'up' + } + } + } else { + flag = '' + if (currentTop === 0) { + $header.classList.remove('nav-fixed', 'nav-visible') + } + $rightside.classList.remove('rightside-show') + } + + isShowPercent && rightsideScrollPercent(currentTop) + checkDocumentHeight() + }, 300) + + btf.addEventListenerPjax(window, 'scroll', scrollTask, { passive: true }) + } + + /** + * toc,anchor + */ + const scrollFnToDo = () => { + const isToc = GLOBAL_CONFIG_SITE.isToc + const isAnchor = GLOBAL_CONFIG.isAnchor + const $article = document.getElementById('article-container') + + if (!($article && (isToc || isAnchor))) return + + let $tocLink, $cardToc, autoScrollToc, $tocPercentage, isExpand + + if (isToc) { + const $cardTocLayout = document.getElementById('card-toc') + $cardToc = $cardTocLayout.querySelector('.toc-content') + $tocLink = $cardToc.querySelectorAll('.toc-link') + $tocPercentage = $cardTocLayout.querySelector('.toc-percentage') + isExpand = $cardToc.classList.contains('is-expand') + + // toc元素點擊 + const tocItemClickFn = e => { + const target = e.target.closest('.toc-link') + if (!target) return + + e.preventDefault() + btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI(target.getAttribute('href')).replace('#', ''))), 300) + if (window.innerWidth < 900) { + $cardTocLayout.classList.remove('open') + } + } + + btf.addEventListenerPjax($cardToc, 'click', tocItemClickFn) + + autoScrollToc = item => { + const sidebarHeight = $cardToc.clientHeight + const itemOffsetTop = item.offsetTop + const itemHeight = item.clientHeight + const scrollTop = $cardToc.scrollTop + const offset = itemOffsetTop - scrollTop + const middlePosition = (sidebarHeight - itemHeight) / 2 + + if (offset !== middlePosition) { + $cardToc.scrollTop = scrollTop + (offset - middlePosition) + } + } + + // 處理 hexo-blog-encrypt 事件 + $cardToc.style.display = 'block' + } + + // find head position & add active class + const $articleList = $article.querySelectorAll('h1,h2,h3,h4,h5,h6') + let detectItem = '' + + // Optimization: Cache header positions + let headerList = [] + const updateHeaderPositions = () => { + headerList = Array.from($articleList).map(ele => ({ + ele, + top: btf.getEleTop(ele), + id: ele.id + })) + } + + updateHeaderPositions() + btf.addEventListenerPjax(window, 'resize', btf.throttle(updateHeaderPositions, 200)) + + const findHeadPosition = top => { + if (top === 0) return false + + let currentId = '' + let currentIndex = '' + + for (let i = 0; i < headerList.length; i++) { + const item = headerList[i] + if (top > item.top - 80) { + currentId = item.id ? '#' + encodeURI(item.id) : '' + currentIndex = i + } else { + break + } + } + + if (detectItem === currentIndex) return + + if (isAnchor) btf.updateAnchor(currentId) + + detectItem = currentIndex + + if (isToc) { + $cardToc.querySelectorAll('.active').forEach(i => i.classList.remove('active')) + + if (currentId) { + const currentActive = $tocLink[currentIndex] + currentActive.classList.add('active') + + setTimeout(() => autoScrollToc(currentActive), 0) + + if (!isExpand) { + let parent = currentActive.parentNode + while (!parent.matches('.toc')) { + if (parent.matches('li')) parent.classList.add('active') + parent = parent.parentNode + } + } + } + } + } + + // main of scroll + const tocScrollFn = btf.throttle(() => { + const currentTop = window.scrollY || document.documentElement.scrollTop + if (isToc && GLOBAL_CONFIG.percent.toc) { + $tocPercentage.textContent = btf.getScrollPercent(currentTop, $article) + } + findHeadPosition(currentTop) + }, 100) + + btf.addEventListenerPjax(window, 'scroll', tocScrollFn, { passive: true }) + } + + const handleThemeChange = mode => { + const globalFn = window.globalFn || {} + const themeChange = globalFn.themeChange || {} + if (!themeChange) { + return + } + + Object.keys(themeChange).forEach(key => { + const themeChangeFn = themeChange[key] + if (['disqus', 'disqusjs'].includes(key)) { + setTimeout(() => themeChangeFn(mode), 300) + } else { + themeChangeFn(mode) + } + }) + } + + /** + * Rightside + */ + const rightSideFn = { + readmode: () => { // read mode + const $body = document.body + const newEle = document.createElement('button') + + const exitReadMode = () => { + $body.classList.remove('read-mode') + newEle.remove() + newEle.removeEventListener('click', exitReadMode) + } + + $body.classList.add('read-mode') + newEle.type = 'button' + newEle.className = 'exit-readmode' + newEle.innerHTML = '' + newEle.addEventListener('click', exitReadMode) + $body.appendChild(newEle) + }, + darkmode: () => { // switch between light and dark mode + const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark' + if (willChangeMode === 'dark') { + btf.activateDarkMode() + GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night) + } else { + btf.activateLightMode() + GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day) + } + btf.saveToLocal.set('theme', willChangeMode, 2) + handleThemeChange(willChangeMode) + }, + 'rightside-config': item => { // Show or hide rightside-hide-btn + const hideLayout = item.firstElementChild + if (hideLayout.classList.contains('show')) { + hideLayout.classList.add('status') + setTimeout(() => { + hideLayout.classList.remove('status') + }, 300) + } + + hideLayout.classList.toggle('show') + }, + 'go-up': () => { // Back to top + btf.scrollToDest(0, 500) + }, + 'hide-aside-btn': () => { // Hide aside + const $htmlDom = document.documentElement.classList + const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide' + btf.saveToLocal.set('aside-status', saveStatus, 2) + $htmlDom.toggle('hide-aside') + }, + 'mobile-toc-button': (p, item) => { // Show mobile toc + const tocEle = document.getElementById('card-toc') + tocEle.style.transition = 'transform 0.3s ease-in-out' + + const tocEleHeight = tocEle.clientHeight + const btData = item.getBoundingClientRect() + + const tocEleBottom = window.innerHeight - btData.bottom - 30 + if (tocEleHeight > tocEleBottom) { + tocEle.style.transformOrigin = `right ${tocEleHeight - tocEleBottom - btData.height / 2}px` + } + + tocEle.classList.toggle('open') + tocEle.addEventListener('transitionend', () => { + tocEle.style.cssText = '' + }, { once: true }) + }, + 'chat-btn': () => { // Show chat + window.chatBtnFn() + }, + translateLink: () => { // switch between traditional and simplified chinese + window.translateFn.translatePage() + } + } + + document.getElementById('rightside').addEventListener('click', e => { + const $target = e.target.closest('[id]') + if ($target && rightSideFn[$target.id]) { + rightSideFn[$target.id](e.currentTarget, $target) + } + }) + + /** + * menu + * 側邊欄sub-menu 展開/收縮 + */ + const clickFnOfSubMenu = () => { + const handleClickOfSubMenu = e => { + const target = e.target.closest('.site-page.group') + if (!target) return + target.classList.toggle('hide') + } + + const menusItems = document.querySelector('#sidebar-menus .menus_items') + menusItems && menusItems.addEventListener('click', handleClickOfSubMenu) + } + + /** + * 手机端目录点击 + */ + const openMobileMenu = () => { + const toggleMenu = document.getElementById('toggle-menu') + if (!toggleMenu) return + btf.addEventListenerPjax(toggleMenu, 'click', () => { sidebarFn.open() }) + } + + /** + * 複製時加上版權信息 + */ + const addCopyright = () => { + const { limitCount, languages } = GLOBAL_CONFIG.copyright + + const handleCopy = e => { + e.preventDefault() + const copyFont = window.getSelection(0).toString() + let textFont = copyFont + if (copyFont.length > limitCount) { + textFont = `${copyFont}\n\n\n${languages.author}\n${languages.link}${window.location.href}\n${languages.source}\n${languages.info}` + } + if (e.clipboardData) { + return e.clipboardData.setData('text', textFont) + } else { + return window.clipboardData.setData('text', textFont) + } + } + + document.body.addEventListener('copy', handleCopy) + } + + /** + * 網頁運行時間 + */ + const addRuntime = () => { + const $runtimeCount = document.getElementById('runtimeshow') + if ($runtimeCount) { + const publishDate = $runtimeCount.getAttribute('data-publishDate') + $runtimeCount.textContent = `${btf.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}` + } + } + + /** + * 最後一次更新時間 + */ + const addLastPushDate = () => { + const $lastPushDateItem = document.getElementById('last-push-date') + if ($lastPushDateItem) { + const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate') + $lastPushDateItem.textContent = btf.diffDate(lastPushDate, true) + } + } + + /** + * table overflow + */ + const addTableWrap = () => { + const $table = document.querySelectorAll('#article-container table') + if (!$table.length) return + + $table.forEach(item => { + if (!item.closest('.highlight')) { + btf.wrap(item, 'div', { class: 'table-wrap' }) + } + }) + } + + /** + * tag-hide + */ + const clickFnOfTagHide = () => { + const hideButtons = document.querySelectorAll('#article-container .hide-button') + if (!hideButtons.length) return + hideButtons.forEach(item => item.addEventListener('click', e => { + const currentTarget = e.currentTarget + currentTarget.classList.add('open') + addJustifiedGallery(currentTarget.nextElementSibling.querySelectorAll('.gallery-container')) + }, { once: true })) + } + + const tabsFn = () => { + const navTabsElements = document.querySelectorAll('#article-container .tabs') + if (!navTabsElements.length) return + + const setActiveClass = (elements, activeIndex) => { + elements.forEach((el, index) => { + el.classList.toggle('active', index === activeIndex) + }) + } + + const handleNavClick = e => { + const target = e.target.closest('button') + if (!target || target.classList.contains('active')) return + + const navItems = [...e.currentTarget.children] + const tabContents = [...e.currentTarget.nextElementSibling.children] + const indexOfButton = navItems.indexOf(target) + setActiveClass(navItems, indexOfButton) + e.currentTarget.classList.remove('no-default') + setActiveClass(tabContents, indexOfButton) + addJustifiedGallery(tabContents[indexOfButton].querySelectorAll('.gallery-container'), true) + } + + const handleToTopClick = tabElement => e => { + if (e.target.closest('button')) { + btf.scrollToDest(btf.getEleTop(tabElement), 300) + } + } + + navTabsElements.forEach(tabElement => { + btf.addEventListenerPjax(tabElement.firstElementChild, 'click', handleNavClick) + btf.addEventListenerPjax(tabElement.lastElementChild, 'click', handleToTopClick(tabElement)) + }) + } + + const toggleCardCategory = () => { + const cardCategory = document.querySelector('#aside-cat-list.expandBtn') + if (!cardCategory) return + + const handleToggleBtn = e => { + const target = e.target + if (target.nodeName === 'I') { + e.preventDefault() + target.parentNode.classList.toggle('expand') + } + } + btf.addEventListenerPjax(cardCategory, 'click', handleToggleBtn, true) + } + + const addPostOutdateNotice = () => { + const ele = document.getElementById('post-outdate-notice') + if (!ele) return + + const { limitDay, messagePrev, messageNext, postUpdate } = JSON.parse(ele.getAttribute('data')) + const diffDay = btf.diffDate(postUpdate) + if (diffDay >= limitDay) { + ele.textContent = `${messagePrev} ${diffDay} ${messageNext}` + ele.hidden = false + } + } + + const lazyloadImg = () => { + window.lazyLoadInstance = new LazyLoad({ + elements_selector: 'img', + threshold: 0, + data_src: 'lazy-src' + }) + + btf.addGlobalFn('pjaxComplete', () => { + window.lazyLoadInstance.update() + }, 'lazyload') + } + + const relativeDate = selector => { + selector.forEach(item => { + item.textContent = btf.diffDate(item.getAttribute('datetime'), true) + item.style.display = 'inline' + }) + } + + const justifiedIndexPostUI = () => { + const recentPostsElement = document.getElementById('recent-posts') + if (!(recentPostsElement && recentPostsElement.classList.contains('masonry'))) return + + const init = () => { + const masonryItem = new InfiniteGrid.MasonryInfiniteGrid('.recent-post-items', { + gap: { horizontal: 10, vertical: 20 }, + useTransform: true, + useResizeObserver: true + }) + masonryItem.renderItems() + btf.addGlobalFn('pjaxCompleteOnce', () => { masonryItem.destroy() }, 'removeJustifiedIndexPostUI') + } + + typeof InfiniteGrid === 'function' ? init() : btf.getScript(`${GLOBAL_CONFIG.infinitegrid.js}`).then(init) + } + + const unRefreshFn = () => { + window.addEventListener('resize', () => { + adjustMenu(false) + mobileSidebarOpen && btf.isHidden(document.getElementById('toggle-menu')) && sidebarFn.close() + }) + + const menuMask = document.getElementById('menu-mask') + menuMask && menuMask.addEventListener('click', () => { sidebarFn.close() }) + + clickFnOfSubMenu() + GLOBAL_CONFIG.islazyloadPlugin && lazyloadImg() + GLOBAL_CONFIG.copyright !== undefined && addCopyright() + + if (GLOBAL_CONFIG.autoDarkmode) { + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { + if (btf.saveToLocal.get('theme') !== undefined) return + e.matches ? handleThemeChange('dark') : handleThemeChange('light') + }) + } + } + + const forPostFn = () => { + addHighlightTool() + addPhotoFigcaption() + addJustifiedGallery(document.querySelectorAll('#article-container .gallery-container')) + runLightbox() + scrollFnToDo() + addTableWrap() + clickFnOfTagHide() + tabsFn() + } + + const refreshFn = () => { + initAdjust() + justifiedIndexPostUI() + + if (GLOBAL_CONFIG_SITE.pageType === 'post') { + addPostOutdateNotice() + GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time')) + } else { + GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time')) + GLOBAL_CONFIG.runtime && addRuntime() + addLastPushDate() + toggleCardCategory() + } + + GLOBAL_CONFIG_SITE.pageType === 'home' && scrollDownInIndex() + scrollFn() + + forPostFn() + GLOBAL_CONFIG_SITE.pageType !== 'shuoshuo' && btf.switchComments(document) + openMobileMenu() + } + + btf.addGlobalFn('pjaxComplete', refreshFn, 'refreshFn') + refreshFn() + unRefreshFn() + + // 處理 hexo-blog-encrypt 事件 + window.addEventListener('hexo-blog-decrypt', e => { + forPostFn() + window.translateFn.translateInitialization() + Object.values(window.globalFn.encrypt).forEach(fn => { + fn() + }) + }) +}) diff --git a/js/random.js b/js/random.js new file mode 100644 index 0000000..6989557 --- /dev/null +++ b/js/random.js @@ -0,0 +1,13 @@ +function randomPost() { + fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => { + let ls = data.querySelectorAll('url loc'); + let locationHref,locSplit; + do { + locationHref = ls[Math.floor(Math.random() * ls.length)].innerHTML + locSplit = locationHref.split('/')[3] || '' + } while (locSplit !== 'posts'); + //若所有文章都如 https://…….com/posts/2022/07/…… 格式，主域名后字符是 posts，则循环条件改为： + //while (locSplit !== 'posts'); + location.href = locationHref + }) +} \ No newline at end of file diff --git a/js/search/algolia.js b/js/search/algolia.js new file mode 100644 index 0000000..ed69d2e --- /dev/null +++ b/js/search/algolia.js @@ -0,0 +1,562 @@ +window.addEventListener('load', () => { + const { algolia } = GLOBAL_CONFIG + const { appId, apiKey, indexName, hitsPerPage = 5, languages } = algolia + + if (!appId || !apiKey || !indexName) { + return console.error('Algolia setting is invalid!') + } + + const $searchMask = document.getElementById('search-mask') + const $searchDialog = document.querySelector('#algolia-search .search-dialog') + + const animateElements = show => { + const action = show ? 'animateIn' : 'animateOut' + const maskAnimation = show ? 'to_show 0.5s' : 'to_hide 0.5s' + const dialogAnimation = show ? 'titleScale 0.5s' : 'search_close .5s' + btf[action]($searchMask, maskAnimation) + btf[action]($searchDialog, dialogAnimation) + } + + const fixSafariHeight = () => { + if (window.innerWidth < 768) { + $searchDialog.style.setProperty('--search-height', `${window.innerHeight}px`) + } + } + + const openSearch = () => { + btf.overflowPaddingR.add() + animateElements(true) + showLoading(false) + + setTimeout(() => { + const searchInput = document.querySelector('#algolia-search-input .ais-SearchBox-input') + if (searchInput) searchInput.focus() + }, 100) + + const handleEscape = event => { + if (event.code === 'Escape') { + closeSearch() + document.removeEventListener('keydown', handleEscape) + } + } + + document.addEventListener('keydown', handleEscape) + fixSafariHeight() + window.addEventListener('resize', fixSafariHeight) + } + + const closeSearch = () => { + btf.overflowPaddingR.remove() + animateElements(false) + window.removeEventListener('resize', fixSafariHeight) + } + + const searchClickFn = () => { + btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch) + } + + const searchFnOnce = () => { + $searchMask.addEventListener('click', closeSearch) + document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch) + } + + const cutContent = content => { + if (!content) return '' + + let contentStr = '' + if (typeof content === 'string') { + contentStr = content.trim() + } else if (typeof content === 'object') { + if (content.value !== undefined) { + contentStr = String(content.value).trim() + if (!contentStr) return '' + } else if (content.matchedWords || content.matchLevel || content.fullyHighlighted !== undefined) { + return '' + } else { + try { + contentStr = JSON.stringify(content).trim() + if (contentStr === '{}' || contentStr === '[]' || contentStr === '""') { + return '' + } + } catch (e) { + return '' + } + } + } else if (content.toString && typeof content.toString === 'function') { + contentStr = content.toString().trim() + if (contentStr === '[object Object]' || contentStr === '[object Array]') { + return '' + } + } else { + return '' + } + + const firstOccur = contentStr.indexOf('') + let start = firstOccur - 30 + let end = firstOccur + 120 + let pre = '' + let post = '' + + if (start <= 0) { + start = 0 + end = 140 + } else { + pre = '...' + } + + if (end > contentStr.length) { + end = contentStr.length + } else { + post = '...' + } + + // Ensure we don't cut off HTML tags in the middle + let substr = contentStr.substring(start, end) + + // Handle tag completeness + // Check for incomplete opening tags at the beginning + const firstCloseBracket = substr.indexOf('>') + const firstOpenBracket = substr.indexOf('<') + + // If there's a closing bracket but no opening bracket before it, we've cut a tag + if (firstCloseBracket !== -1 && (firstOpenBracket === -1 || firstCloseBracket < firstOpenBracket)) { + substr = substr.substring(firstCloseBracket + 1) + } + + // Check for incomplete closing tags at the end + const lastOpenBracket = substr.lastIndexOf('<') + const lastCloseBracket = substr.lastIndexOf('>') + + // If there's an opening bracket after the last closing bracket, we've cut a tag + if (lastOpenBracket !== -1 && lastOpenBracket > lastCloseBracket) { + substr = substr.substring(0, lastOpenBracket) + } + + // Balance tags in the substring + const tagStack = [] + let balancedStr = '' + let i = 0 + + while (i < substr.length) { + if (substr[i] === '<') { + // Check if it's a closing tag + if (substr[i + 1] === '/') { + const closeTagEnd = substr.indexOf('>', i) + if (closeTagEnd !== -1) { + const closeTagName = substr.substring(i + 2, closeTagEnd) + // Remove matching opening tag from stack + for (let j = tagStack.length - 1; j >= 0; j--) { + if (tagStack[j] === closeTagName) { + tagStack.splice(j, 1) + break + } + } + balancedStr += substr.substring(i, closeTagEnd + 1) + i = closeTagEnd + 1 + continue + } + } else if (substr.substr(i, 2) === '', i) !== -1 && substr.indexOf('/>', i) < substr.indexOf('>', i))) { + const tagEnd = substr.indexOf('>', i) + if (tagEnd !== -1) { + balancedStr += substr.substring(i, tagEnd + 1) + i = tagEnd + 1 + continue + } + } else { + const tagEnd = substr.indexOf('>', i) + if (tagEnd !== -1) { + const tagName = substr.substring(i + 1, (substr.indexOf(' ', i) > -1 && substr.indexOf(' ', i) < tagEnd) + ? substr.indexOf(' ', i) + : tagEnd).split(/\s/)[0] + tagStack.push(tagName) + balancedStr += substr.substring(i, tagEnd + 1) + i = tagEnd + 1 + continue + } + } + } + balancedStr += substr[i] + i++ + } + + // Close any unclosed tags + while (tagStack.length > 0) { + const tagName = tagStack.pop() + balancedStr += `` + } + + // If we removed content from the beginning, add prefix + if (start > 0 || pre) { + const actualFirstOpenBracket = contentStr.indexOf('<', start > 0 ? start - 30 : 0) + const actualFirstMark = contentStr.indexOf('', start > 0 ? start - 30 : 0) + + if (actualFirstOpenBracket !== -1 && + (actualFirstMark === -1 || actualFirstOpenBracket < actualFirstMark)) { + pre = '...' + } + } + + substr = balancedStr + return `${pre}${substr}${post}` + } + + // Helper function to handle Algolia highlight results + const extractHighlightValue = highlightObj => { + if (!highlightObj) return '' + + if (typeof highlightObj === 'string') { + return highlightObj.trim() + } + + if (typeof highlightObj === 'object' && highlightObj.value !== undefined) { + return String(highlightObj.value).trim() + } + + return '' + } + + // Initialize Algolia client + let searchClient + + if (window['algoliasearch/lite'] && typeof window['algoliasearch/lite'].liteClient === 'function') { + searchClient = window['algoliasearch/lite'].liteClient(appId, apiKey) + } else if (typeof window.algoliasearch === 'function') { + searchClient = window.algoliasearch(appId, apiKey) + } else { + return console.error('Algolia search client not found!') + } + + if (!searchClient) { + return console.error('Failed to initialize Algolia search client') + } + + // Search state + let currentQuery = '' + + // Show loading state + const showLoading = show => { + const loadingIndicator = document.getElementById('loading-status') + if (loadingIndicator) { + loadingIndicator.hidden = !show + } + } + + // Cache frequently used elements + const elements = { + get searchInput () { return document.querySelector('#algolia-search-input .ais-SearchBox-input') }, + get hits () { return document.getElementById('algolia-hits') }, + get hitsEmpty () { return document.getElementById('algolia-hits-empty') }, + get hitsList () { return document.querySelector('#algolia-hits .ais-Hits-list') }, + get hitsWrapper () { return document.querySelector('#algolia-hits .ais-Hits') }, + get pagination () { return document.getElementById('algolia-pagination') }, + get paginationList () { return document.querySelector('#algolia-pagination .ais-Pagination-list') }, + get stats () { return document.querySelector('#algolia-info .ais-Stats-text') }, + } + + // Show/hide search results area + const toggleResultsVisibility = hasResults => { + elements.pagination.style.display = hasResults ? '' : 'none' + elements.stats.style.display = hasResults ? '' : 'none' + } + + // Render search results + const renderHits = (hits, query, page = 0) => { + if (hits.length === 0 && query) { + elements.hitsEmpty.textContent = languages.hits_empty.replace(/\$\{query}/, query) + elements.hitsEmpty.style.display = '' + elements.hitsWrapper.style.display = 'none' + elements.stats.style.display = 'none' + return + } + + elements.hitsEmpty.style.display = 'none' + + const hitsHTML = hits.map((hit, index) => { + const itemNumber = page * hitsPerPage + index + 1 + const link = hit.permalink || (GLOBAL_CONFIG.root + hit.path) + const result = hit._highlightResult || hit + + // Content extraction + let content = '' + try { + if (result.contentStripTruncate) { + content = cutContent(result.contentStripTruncate) + } else if (result.contentStrip) { + content = cutContent(result.contentStrip) + } else if (result.content) { + content = cutContent(result.content) + } else if (hit.contentStripTruncate) { + content = cutContent(hit.contentStripTruncate) + } else if (hit.contentStrip) { + content = cutContent(hit.contentStrip) + } else if (hit.content) { + content = cutContent(hit.content) + } + } catch (error) { + content = '' + } + + // Title handling + let title = 'no-title' + try { + if (result.title) { + title = extractHighlightValue(result.title) || 'no-title' + } else if (hit.title) { + title = extractHighlightValue(hit.title) || 'no-title' + } + + if (!title || title === 'no-title') { + if (typeof hit.title === 'string' && hit.title.trim()) { + title = hit.title.trim() + } else if (hit.title && typeof hit.title === 'object' && hit.title.value) { + title = String(hit.title.value).trim() || 'no-title' + } else { + title = 'no-title' + } + } + } catch (error) { + title = 'no-title' + } + + return ` +
  • + + ${title} + ${content ? `
    ${content}
    ` : ''} +     +
    • ` + }).join('') + + elements.hitsList.innerHTML = hitsHTML + elements.hitsWrapper.style.display = query ? '' : 'none' + + if (hits.length > 0) { + elements.stats.style.display = '' + } + } + + // Render pagination + const renderPagination = (page, nbPages) => { + if (nbPages <= 1) { + elements.pagination.style.display = 'none' + elements.paginationList.innerHTML = '' + return + } + + elements.pagination.style.display = 'block' + + const isFirstPage = page === 0 + const isLastPage = page === nbPages - 1 + + // Responsive page display + const isMobile = window.innerWidth < 768 + const maxVisiblePages = isMobile ? 3 : 5 + let startPage = Math.max(0, page - Math.floor(maxVisiblePages / 2)) + const endPage = Math.min(nbPages - 1, startPage + maxVisiblePages - 1) + + // Adjust starting page to maintain max visible pages + if (endPage - startPage + 1 < maxVisiblePages) { + startPage = Math.max(0, endPage - maxVisiblePages + 1) + } + + let pagesHTML = '' + + // Only add ellipsis and first page when there are many pages + if (nbPages > maxVisiblePages && startPage > 0) { + pagesHTML += ` +
  • + 1 +
    • ` + if (startPage > 1) { + pagesHTML += ` +
  • + ... +
    • ` + } + } + + // Add middle page numbers + for (let i = startPage; i <= endPage; i++) { + const isSelected = i === page + if (isSelected) { + pagesHTML += ` +
  • + ${i + 1} +
    • ` + } else { + pagesHTML += ` +
  • + ${i + 1} +
    • ` + } + } + + // Only add ellipsis and last page when there are many pages + if (nbPages > maxVisiblePages && endPage < nbPages - 1) { + if (endPage < nbPages - 2) { + pagesHTML += ` +
  • + ... +
    • ` + } + pagesHTML += ` +
  • + ${nbPages} +
    • ` + } + + if (nbPages > 1) { + elements.paginationList.innerHTML = ` +
  • + ${isFirstPage + ? '' + : `` + } +
    • + ${pagesHTML} +
  • + ${isLastPage + ? '' + : `` + } +
    • ` + elements.pagination.style.display = currentQuery ? '' : 'none' + } else { + elements.pagination.style.display = 'none' + } + } + + // Render statistics + const renderStats = (nbHits, processingTimeMS, query) => { + if (query) { + const stats = languages.hits_stats + .replace(/\$\{hits}/, nbHits) + .replace(/\$\{time}/, processingTimeMS) + elements.stats.innerHTML = `
    ${stats}` + elements.stats.style.display = '' + } else { + elements.stats.style.display = 'none' + } + } + + // Perform search + const performSearch = async (query, page = 0) => { + if (!query.trim()) { + currentQuery = '' + renderHits([], '', 0) + renderPagination(0, 0) + renderStats(0, 0, '') + toggleResultsVisibility(false) + return + } + + showLoading(true) + currentQuery = query + + try { + let result + + if (searchClient && typeof searchClient.search === 'function') { + // v5 multi-index search + const searchResult = await searchClient.search([{ + indexName, + query, + params: { + page, + hitsPerPage, + highlightPreTag: '', + highlightPostTag: '', + attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate'] + } + }]) + result = searchResult.results[0] + } else if (searchClient && typeof searchClient.initIndex === 'function') { + // v4 single-index search + const index = searchClient.initIndex(indexName) + result = await index.search(query, { + page, + hitsPerPage, + highlightPreTag: '', + highlightPostTag: '', + attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate'] + }) + } else { + throw new Error('Algolia: No compatible search method available') + } + + renderHits(result.hits || [], query, page) + + const actualNbPages = result.nbHits <= hitsPerPage ? 1 : (result.nbPages || 0) + renderPagination(page, actualNbPages) + renderStats(result.nbHits || 0, result.processingTimeMS || 0, query) + + const hasResults = result.hits && result.hits.length > 0 + toggleResultsVisibility(hasResults) + + // Refresh Pjax links + if (window.pjax) { + window.pjax.refresh(document.getElementById('algolia-hits')) + } + } catch (error) { + console.error('Algolia search error:', error) + renderHits([], query, page) + renderPagination(0, 0) + renderStats(0, 0, query) + } finally { + showLoading(false) + } + } + + // Debounced search + let searchTimeout + const debouncedSearch = (query, delay = 300) => { + clearTimeout(searchTimeout) + searchTimeout = setTimeout(() => performSearch(query), delay) + } + + // Initialize search box and events + const initializeSearch = () => { + showLoading(false) + + if (elements.searchInput) { + elements.searchInput.addEventListener('input', e => { + const query = e.target.value + debouncedSearch(query) + }) + } + + const searchForm = document.querySelector('#algolia-search-input .ais-SearchBox-form') + if (searchForm) { + searchForm.addEventListener('submit', e => { + e.preventDefault() + const query = elements.searchInput.value + performSearch(query) + }) + } + + // Pagination event delegation + elements.pagination.addEventListener('click', e => { + e.preventDefault() + const link = e.target.closest('a[data-page]') + if (link) { + const page = parseInt(link.dataset.page, 10) + if (!isNaN(page) && currentQuery) { + performSearch(currentQuery, page) + } + } + }) + + // Initial state + toggleResultsVisibility(false) + } + + // Initialize + initializeSearch() + searchClickFn() + searchFnOnce() + + window.addEventListener('pjax:complete', () => { + if (!btf.isHidden($searchMask)) closeSearch() + searchClickFn() + }) +}) diff --git a/js/search/local-search.js b/js/search/local-search.js new file mode 100644 index 0000000..f2ccb06 --- /dev/null +++ b/js/search/local-search.js @@ -0,0 +1,567 @@ +/** + * Refer to hexo-generator-searchdb + * https://github.com/next-theme/hexo-generator-searchdb/blob/main/dist/search.js + * Modified by hexo-theme-butterfly + */ + +class LocalSearch { + constructor ({ + path = '', + unescape = false, + top_n_per_article = 1 + }) { + this.path = path + this.unescape = unescape + this.top_n_per_article = top_n_per_article + this.isfetched = false + this.datas = null + } + + getIndexByWord (words, text, caseSensitive = false) { + const index = [] + const included = new Set() + + if (!caseSensitive) { + text = text.toLowerCase() + } + words.forEach(word => { + if (this.unescape) { + const div = document.createElement('div') + div.innerText = word + word = div.innerHTML + } + const wordLen = word.length + if (wordLen === 0) return + let startPosition = 0 + let position = -1 + if (!caseSensitive) { + word = word.toLowerCase() + } + while ((position = text.indexOf(word, startPosition)) > -1) { + index.push({ position, word }) + included.add(word) + startPosition = position + wordLen + } + }) + // Sort index by position of keyword + index.sort((left, right) => { + if (left.position !== right.position) { + return left.position - right.position + } + return right.word.length - left.word.length + }) + return [index, included] + } + + // Merge hits into slices + mergeIntoSlice (start, end, index) { + let item = index[0] + let { position, word } = item + const hits = [] + const count = new Set() + while (position + word.length <= end && index.length !== 0) { + count.add(word) + hits.push({ + position, + length: word.length + }) + const wordEnd = position + word.length + + // Move to next position of hit + index.shift() + while (index.length !== 0) { + item = index[0] + position = item.position + word = item.word + if (wordEnd > position) { + index.shift() + } else { + break + } + } + } + return { + hits, + start, + end, + count: count.size + } + } + + // Highlight title and content + highlightKeyword (val, slice) { + let result = '' + let index = slice.start + for (const { position, length } of slice.hits) { + result += val.substring(index, position) + index = position + length + result += `${val.substr(position, length)}` + } + result += val.substring(index, slice.end) + return result + } + + getResultItems (keywords) { + const resultItems = [] + this.datas.forEach(({ title, content, url }) => { + // The number of different keywords included in the article. + const [indexOfTitle, keysOfTitle] = this.getIndexByWord(keywords, title) + const [indexOfContent, keysOfContent] = this.getIndexByWord(keywords, content) + const includedCount = new Set([...keysOfTitle, ...keysOfContent]).size + + // Show search results + const hitCount = indexOfTitle.length + indexOfContent.length + if (hitCount === 0) return + + const slicesOfTitle = [] + if (indexOfTitle.length !== 0) { + slicesOfTitle.push(this.mergeIntoSlice(0, title.length, indexOfTitle)) + } + + let slicesOfContent = [] + while (indexOfContent.length !== 0) { + const item = indexOfContent[0] + const { position } = item + // Cut out 120 characters. The maxlength of .search-input is 80. + const start = Math.max(0, position - 20) + const end = Math.min(content.length, position + 100) + slicesOfContent.push(this.mergeIntoSlice(start, end, indexOfContent)) + } + + // Sort slices in content by included keywords' count and hits' count + slicesOfContent.sort((left, right) => { + if (left.count !== right.count) { + return right.count - left.count + } else if (left.hits.length !== right.hits.length) { + return right.hits.length - left.hits.length + } + return left.start - right.start + }) + + // Select top N slices in content + const upperBound = parseInt(this.top_n_per_article, 10) + if (upperBound >= 0) { + slicesOfContent = slicesOfContent.slice(0, upperBound) + } + + let resultItem = '' + + url = new URL(url, location.origin) + url.searchParams.append('highlight', keywords.join(' ')) + + if (slicesOfTitle.length !== 0) { + resultItem += `
  • ${this.highlightKeyword(title, slicesOfTitle[0])}` + } else { + resultItem += `
  • ${title}` + } + + slicesOfContent.forEach(slice => { + resultItem += `

    ${this.highlightKeyword(content, slice)}...

    ` + }) + + resultItem += '
    • ' + resultItems.push({ + item: resultItem, + id: resultItems.length, + hitCount, + includedCount + }) + }) + return resultItems + } + + fetchData () { + const isXml = !this.path.endsWith('json') + fetch(this.path) + .then(response => response.text()) + .then(res => { + // Get the contents from search data + this.isfetched = true + this.datas = isXml + ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => ({ + title: element.querySelector('title').textContent, + content: element.querySelector('content').textContent, + url: element.querySelector('url').textContent + })) + : JSON.parse(res) + // Only match articles with non-empty titles + this.datas = this.datas.filter(data => data.title).map(data => { + data.title = data.title.trim() + data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : '' + data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/') + return data + }) + // Remove loading animation + window.dispatchEvent(new Event('search:loaded')) + }) + } + + // Highlight by wrapping node in mark elements with the given class name + highlightText (node, slice, className) { + const val = node.nodeValue + let index = slice.start + const children = [] + for (const { position, length } of slice.hits) { + const text = document.createTextNode(val.substring(index, position)) + index = position + length + const mark = document.createElement('mark') + mark.className = className + mark.appendChild(document.createTextNode(val.substr(position, length))) + children.push(text, mark) + } + node.nodeValue = val.substring(index, slice.end) + children.forEach(element => { + node.parentNode.insertBefore(element, node) + }) + } + + // Highlight the search words provided in the url in the text + highlightSearchWords (body) { + const params = new URL(location.href).searchParams.get('highlight') + const keywords = params ? params.split(' ') : [] + if (!keywords.length || !body) return + const walk = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null) + const allNodes = [] + while (walk.nextNode()) { + if (!walk.currentNode.parentNode.matches('button, select, textarea, .mermaid')) allNodes.push(walk.currentNode) + } + allNodes.forEach(node => { + const [indexOfNode] = this.getIndexByWord(keywords, node.nodeValue) + if (!indexOfNode.length) return + const slice = this.mergeIntoSlice(0, node.nodeValue.length, indexOfNode) + this.highlightText(node, slice, 'search-keyword') + }) + } +} + +window.addEventListener('load', () => { +// Search + const { path, top_n_per_article, unescape, languages, pagination } = GLOBAL_CONFIG.localSearch + const enablePagination = pagination && pagination.enable + const localSearch = new LocalSearch({ + path, + top_n_per_article, + unescape + }) + + const input = document.querySelector('.local-search-input input') + const statsItem = document.getElementById('local-search-stats') + const $loadingStatus = document.getElementById('loading-status') + const isXml = !path.endsWith('json') + + // Pagination variables (only initialize if pagination is enabled) + let currentPage = 0 + const hitsPerPage = pagination.hitsPerPage || 10 + + let currentResultItems = [] + + if (!enablePagination) { + // If pagination is disabled, we don't need these variables + currentPage = undefined + currentResultItems = undefined + } + + // Cache frequently used elements + const elements = { + get pagination () { return document.getElementById('local-search-pagination') }, + get paginationList () { return document.querySelector('#local-search-pagination .ais-Pagination-list') } + } + + // Show/hide search results area + const toggleResultsVisibility = hasResults => { + if (enablePagination) { + elements.pagination.style.display = hasResults ? '' : 'none' + } else { + elements.pagination.style.display = 'none' + } + } + + // Render search results for current page + const renderResults = (searchText, resultItems) => { + const container = document.getElementById('local-search-results') + + // Determine items to display based on pagination mode + const itemsToDisplay = enablePagination + ? currentResultItems.slice(currentPage * hitsPerPage, (currentPage + 1) * hitsPerPage) + : resultItems + + // Handle empty page in pagination mode + if (enablePagination && itemsToDisplay.length === 0 && currentResultItems.length > 0) { + currentPage = 0 + renderResults(searchText, resultItems) + return + } + + // Add numbering to items + const numberedItems = itemsToDisplay.map((result, index) => { + const itemNumber = enablePagination + ? currentPage * hitsPerPage + index + 1 + : index + 1 + return result.item.replace( + '
  • ', + `
  • ` + ) + }) + + container.innerHTML = `
      ${numberedItems.join('')}
    ` + + // Update stats + const displayCount = enablePagination ? currentResultItems.length : resultItems.length + const stats = languages.hits_stats.replace(/\$\{hits}/, displayCount) + statsItem.innerHTML = `
    ${stats}
    ` + + // Handle pagination + if (enablePagination) { + const nbPages = Math.ceil(currentResultItems.length / hitsPerPage) + renderPagination(currentPage, nbPages, searchText) + } + + const hasResults = resultItems.length > 0 + toggleResultsVisibility(hasResults) + + window.pjax && window.pjax.refresh(container) + } + + // Render pagination + const renderPagination = (page, nbPages, query) => { + if (nbPages <= 1) { + elements.pagination.style.display = 'none' + elements.paginationList.innerHTML = '' + return + } + + elements.pagination.style.display = 'block' + + const isFirstPage = page === 0 + const isLastPage = page === nbPages - 1 + + // Responsive page display + const isMobile = window.innerWidth < 768 + const maxVisiblePages = isMobile ? 3 : 5 + let startPage = Math.max(0, page - Math.floor(maxVisiblePages / 2)) + const endPage = Math.min(nbPages - 1, startPage + maxVisiblePages - 1) + + // Adjust starting page to maintain max visible pages + if (endPage - startPage + 1 < maxVisiblePages) { + startPage = Math.max(0, endPage - maxVisiblePages + 1) + } + + let pagesHTML = '' + + // Only add ellipsis and first page when there are many pages + if (nbPages > maxVisiblePages && startPage > 0) { + pagesHTML += ` +
  • + 1 +
    • ` + if (startPage > 1) { + pagesHTML += ` +
  • + ... +
    • ` + } + } + + // Add middle page numbers + for (let i = startPage; i <= endPage; i++) { + const isSelected = i === page + if (isSelected) { + pagesHTML += ` +
  • + ${i + 1} +
    • ` + } else { + pagesHTML += ` +
  • + ${i + 1} +
    • ` + } + } + + // Only add ellipsis and last page when there are many pages + if (nbPages > maxVisiblePages && endPage < nbPages - 1) { + if (endPage < nbPages - 2) { + pagesHTML += ` +
  • + ... +
    • ` + } + pagesHTML += ` +
  • + ${nbPages} +
    • ` + } + + if (nbPages > 1) { + elements.paginationList.innerHTML = ` +
  • + ${isFirstPage + ? '' + : `` + } +
    • + ${pagesHTML} +
  • + ${isLastPage + ? '' + : `` + } +
    • ` + } else { + elements.pagination.style.display = 'none' + } + } + + // Clear search results and stats + const clearSearchResults = () => { + const container = document.getElementById('local-search-results') + container.textContent = '' + statsItem.textContent = '' + toggleResultsVisibility(false) + if (enablePagination) { + currentResultItems = [] + currentPage = 0 + } + } + + // Show no results message + const showNoResults = searchText => { + const container = document.getElementById('local-search-results') + container.textContent = '' + const statsDiv = document.createElement('div') + statsDiv.className = 'search-result-stats' + statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText) + statsItem.innerHTML = statsDiv.outerHTML + toggleResultsVisibility(false) + if (enablePagination) { + currentResultItems = [] + currentPage = 0 + } + } + + const inputEventFunction = () => { + if (!localSearch.isfetched) return + let searchText = input.value.trim().toLowerCase() + isXml && (searchText = searchText.replace(//g, '>')) + + if (searchText !== '') $loadingStatus.hidden = false + + const keywords = searchText.split(/[-\s]+/) + let resultItems = [] + + if (searchText.length > 0) { + resultItems = localSearch.getResultItems(keywords) + } + + if (keywords.length === 1 && keywords[0] === '') { + clearSearchResults() + } else if (resultItems.length === 0) { + showNoResults(searchText) + } else { + // Sort results by relevance + resultItems.sort((left, right) => { + if (left.includedCount !== right.includedCount) { + return right.includedCount - left.includedCount + } else if (left.hitCount !== right.hitCount) { + return right.hitCount - left.hitCount + } + return right.id - left.id + }) + + if (enablePagination) { + currentResultItems = resultItems + currentPage = 0 + } + renderResults(searchText, resultItems) + } + + $loadingStatus.hidden = true + } + + let loadFlag = false + const $searchMask = document.getElementById('search-mask') + const $searchDialog = document.querySelector('#local-search .search-dialog') + + // fix safari + const fixSafariHeight = () => { + if (window.innerWidth < 768) { + $searchDialog.style.setProperty('--search-height', window.innerHeight + 'px') + } + } + + const openSearch = () => { + btf.overflowPaddingR.add() + btf.animateIn($searchMask, 'to_show 0.5s') + btf.animateIn($searchDialog, 'titleScale 0.5s') + setTimeout(() => { input.focus() }, 300) + if (!loadFlag) { + !localSearch.isfetched && localSearch.fetchData() + input.addEventListener('input', inputEventFunction) + loadFlag = true + } + // shortcut: ESC + document.addEventListener('keydown', function f (event) { + if (event.code === 'Escape') { + closeSearch() + document.removeEventListener('keydown', f) + } + }) + + fixSafariHeight() + window.addEventListener('resize', fixSafariHeight) + } + + const closeSearch = () => { + btf.overflowPaddingR.remove() + btf.animateOut($searchDialog, 'search_close .5s') + btf.animateOut($searchMask, 'to_hide 0.5s') + window.removeEventListener('resize', fixSafariHeight) + } + + const searchClickFn = () => { + btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch) + } + + const searchFnOnce = () => { + document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch) + $searchMask.addEventListener('click', closeSearch) + if (GLOBAL_CONFIG.localSearch.preload) { + localSearch.fetchData() + } + localSearch.highlightSearchWords(document.getElementById('article-container')) + + // Pagination event delegation - only add if pagination is enabled + if (enablePagination) { + elements.pagination.addEventListener('click', e => { + e.preventDefault() + const link = e.target.closest('a[data-page]') + if (link) { + const page = parseInt(link.dataset.page, 10) + if (!isNaN(page) && currentResultItems.length > 0) { + currentPage = page + renderResults(input.value.trim().toLowerCase(), currentResultItems) + } + } + }) + } + + // Initial state + toggleResultsVisibility(false) + } + + window.addEventListener('search:loaded', () => { + const $loadDataItem = document.getElementById('loading-database') + $loadDataItem.nextElementSibling.style.visibility = 'visible' + $loadDataItem.remove() + }) + + searchClickFn() + searchFnOnce() + + // pjax + window.addEventListener('pjax:complete', () => { + !btf.isHidden($searchMask) && closeSearch() + localSearch.highlightSearchWords(document.getElementById('article-container')) + searchClickFn() + }) +}) diff --git a/js/shuoshuo.js b/js/shuoshuo.js new file mode 100644 index 0000000..5858ebf --- /dev/null +++ b/js/shuoshuo.js @@ -0,0 +1,321 @@ +function renderTalks() { + const talkContainer = document.querySelector('#talk'); + if (!talkContainer) return; + talkContainer.innerHTML = ''; + const generateIconSVG = () => { + return ``; + } + const waterfall = (a) => { + function b(a, b) { + var c = window.getComputedStyle(b); + return parseFloat(c["margin" + a]) || 0 + } + + function c(a) { + return a + "px" + } + + function d(a) { + return parseFloat(a.style.top) + } + + function e(a) { + return parseFloat(a.style.left) + } + + function f(a) { + return a.clientWidth + } + + function g(a) { + return a.clientHeight + } + + function h(a) { + return d(a) + g(a) + b("Bottom", a) + } + + function i(a) { + return e(a) + f(a) + b("Right", a) + } + + function j(a) { + a = a.sort(function (a, b) { + return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a) + }) + } + + function k(b) { + f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a)) + } + "string" == typeof a && (a = document.querySelector(a)); + var l = [].map.call(a.children, function (a) { + return a.style.position = "absolute", a + }); + a.style.position = "relative"; + var m = []; + l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0])); + for (var n = 1; n < l.length; n++) { + var o = l[n - 1], + p = l[n], + q = i(o) + f(p) <= f(a); + if (!q) break; + p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p) + } + for (; n < l.length; n++) { + j(m); + var p = l[n], + r = m.pop(); + p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p) + } + j(m); + var s = m[0]; + a.style.height = c(h(s) + b("Bottom", s)); + var t = f(a); + window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k + }; + + const fetchAndRenderTalks = () => { + const url = 'https://mm.biss.click/api/echo/page'; + const cacheKey = 'talksCache'; + const cacheTimeKey = 'talksCacheTime'; + const cacheDuration = 30 * 60 * 1000; + const cachedData = localStorage.getItem(cacheKey); + const cachedTime = localStorage.getItem(cacheTimeKey); + const now = Date.now(); + + if (cachedData && cachedTime && (now - cachedTime < cacheDuration)) { + renderTalksList(JSON.parse(cachedData)); + } else { + fetch(url, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ page: 1, pageSize: 30 }) + }) + .then(res => res.json()) + .then(data => { + if (data.code === 1 && data.data && Array.isArray(data.data.items)) { + localStorage.setItem(cacheKey, JSON.stringify(data.data.items)); + localStorage.setItem(cacheTimeKey, now.toString()); + renderTalksList(data.data.items); + } + }) + .catch(err => console.error('Error fetching:', err)); + } + }; + + const renderTalksList = (list) => { + list.map(formatTalk).forEach(item => talkContainer.appendChild(generateTalkElement(item))); + waterfall('#talk'); + }; + + const formatTalk = (item) => { + const date = formatTime(item.created_at); + let content = item.content || ''; + content = content.replace(/\[(.*?)\]\((.*?)\)/g, `@$1`) + .replace(/- \[ \]/g, '⚪') + .replace(/- \[x\]/g, '⚫') + .replace(/\n/g, '
    '); + content = `
    ${content}
    `; + + // 图片 + if (Array.isArray(item.images) && item.images.length > 0) { + const imgDiv = document.createElement('div'); + imgDiv.className = 'zone_imgbox'; + item.images.forEach(img => { + const link = document.createElement('a'); + link.href = img.image_url + "?fmt=webp&q=75"; + link.setAttribute('data-fancybox', 'gallery'); + link.className = 'fancybox'; + const imgTag = document.createElement('img'); + imgTag.src = img.image_url + "?fmt=webp&q=75"; + link.appendChild(imgTag); + imgDiv.appendChild(link); + }); + content += imgDiv.outerHTML; + } + + // 外链 / GitHub 项目 + // 外链 / GitHub 项目 + if (['WEBSITE', 'GITHUBPROJ'].includes(item.extension_type)) { + let siteUrl = '', title = ''; + let extensionBack = "https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp"; + + // 解析 extension 字段 + try { + const extObj = typeof item.extension === 'string' ? JSON.parse(item.extension) : item.extension; + siteUrl = extObj.site || extObj.url || item.extension; + title = extObj.title || siteUrl; + } catch { + siteUrl = item.extension; + title = siteUrl; + } + + // 特殊处理 GitHub 项目 + if (item.extension_type === 'GITHUBPROJ') { + extensionBack = "https://pic.biss.click/image/ed410d4e-d3f8-4b26-8840-50dd58f7dc4e.webp"; + + // 提取 GitHub 项目名 + const match = siteUrl.match(/^https?:\/\/github\.com\/[^/]+\/([^/?#]+)/i); + if (match) { + title = match[1]; // 获取仓库名 + } else { + // fallback：从最后一个路径段提取 + try { + const parts = new URL(siteUrl).pathname.split('/').filter(Boolean); + title = parts.pop() || siteUrl; + } catch { + // 如果 URL 无效则保留原始 + } + } + } + + // 输出 HTML 结构 + content += ` +
    + +
    +
    +
    ${title}
    +
    点击跳转
    +
    +     +
    `; + } + + + // 音乐 + if (item.extension_type === 'MUSIC' && item.extension) { + const link = item.extension; + let server = ''; + if (link.includes('music.163.com')) server = 'netease'; + else if (link.includes('y.qq.com')) server = 'tencent'; + const idMatch = link.match(/id=(\d+)/); + const id = idMatch ? idMatch[1] : ''; + if (server && id) { + content += ``; + } + } + + // 视频 + if (item.extension_type === 'VIDEO' && item.extension) { + const video = item.extension; + if (video.startsWith('BV')) { + const bilibiliUrl = `https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=${video}&as_wide=1&high_quality=1&danmaku=0`; + content += ` +
    + +
    `; + } else { + const youtubeUrl = `https://www.youtube.com/embed/${video}`; + content += ` +
    + +
    `; + } + } + + return { + content, + user: item.username || '匿名', + avatar: 'https://free.picui.cn/free/2025/08/10/689845496a283.png', + date, + location: '', + tags: Array.isArray(item.tags) && item.tags.length ? item.tags.map(t => t.name) : ['无标签'], + text: content.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]') + }; + }; + + const generateTalkElement = (item) => { + const talkItem = document.createElement('div'); + talkItem.className = 'talk_item'; + + const talkMeta = document.createElement('div'); + talkMeta.className = 'talk_meta'; + const avatar = document.createElement('img'); + avatar.className = 'no-lightbox avatar'; + avatar.src = item.avatar; + + const info = document.createElement('div'); + info.className = 'info'; + const nick = document.createElement('span'); + nick.className = 'talk_nick'; + nick.innerHTML = `${item.user} ${generateIconSVG()}`; + const date = document.createElement('span'); + date.className = 'talk_date'; + date.textContent = item.date; + info.appendChild(nick); + info.appendChild(date); + talkMeta.appendChild(avatar); + talkMeta.appendChild(info); + + const talkContent = document.createElement('div'); + talkContent.className = 'talk_content'; + talkContent.innerHTML = item.content; + + const talkBottom = document.createElement('div'); + talkBottom.className = 'talk_bottom'; + const tags = document.createElement('div'); + const tag = document.createElement('span'); + tag.className = 'talk_tag'; + tag.textContent = `🏷️${item.tags}`; + //const loc = document.createElement('span'); + //loc.className = 'location_tag'; + //loc.textContent = `🌍${item.location}`; + tags.appendChild(tag); + //tags.appendChild(loc); + + const commentLink = document.createElement('a'); + commentLink.href = 'javascript:;'; + commentLink.onclick = () => goComment(item.text); + const icon = document.createElement('span'); + icon.className = 'icon'; + icon.innerHTML = ''; + commentLink.appendChild(icon); + + talkBottom.appendChild(tags); + talkBottom.appendChild(commentLink); + + talkItem.appendChild(talkMeta); + talkItem.appendChild(talkContent); + talkItem.appendChild(talkBottom); + + return talkItem; + }; + + const goComment = (e) => { + const match = e.match(/
    ([\s\S]*?)<\/div>/); + const textContent = match ? match[1] : ""; + const textarea = document.querySelector("#twikoo .el-textarea__inner"); + textarea.value = `> ${textContent}\n\n`; + textarea.focus(); + btf.snackbarShow("已为您引用该说说，不删除空格效果更佳"); + }; + + const formatTime = (time) => { + const d = new Date(time); + const pad = (n) => n.toString().padStart(2, '0'); + return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`; + }; + + fetchAndRenderTalks(); +} + +renderTalks(); + +// function whenDOMReady() { +// const talkContainer = document.querySelector('#talk'); +// talkContainer.innerHTML = ''; +// fetchAndRenderTalks(); +// } +// whenDOMReady(); +// document.addEventListener("pjax:complete", whenDOMReady); diff --git a/js/shuoshuoshouye.js b/js/shuoshuoshouye.js new file mode 100644 index 0000000..f5a2594 --- /dev/null +++ b/js/shuoshuoshouye.js @@ -0,0 +1,97 @@ +let talkTimer = null; + +const cacheKey = 'talksCache'; +const cacheTimeKey = 'talksCacheTime'; +const cacheDuration = 30 * 60 * 1000; // 缓存有效期 30分钟 + +function indexTalk() { + if (talkTimer) { + clearInterval(talkTimer); + talkTimer = null; + } + + if (!document.getElementById('bber-talk')) return; + + function toText(ls) { + return ls.map(item => { + let c = item.content || ''; + + const hasImg = /\!\[.*?\]\(.*?\)/.test(c); + const hasLink = /\[.*?\]\(.*?\)/.test(c); + + c = c + .replace(/#(.*?)\s/g, '') + .replace(/\{.*?\}/g, '') + .replace(/\!\[.*?\]\(.*?\)/g, '') + .replace(/\[.*?\]\(.*?\)/g, ''); + + const icons = []; + + if (item.images?.length && !hasImg) icons.push('fa-solid fa-image'); + if (item.extension_type === 'VIDEO') icons.push('fa-solid fa-video'); + if (item.extension_type === 'MUSIC') icons.push('fa-solid fa-music'); + if (item.extension_type === 'WEBSITE' && !hasLink) icons.push('fa-solid fa-link'); + if (item.extension_type === 'GITHUBPROJ' && !hasLink) icons.push('fab fa-github'); + + if (icons.length) c += ' ' + icons.map(i => ``).join(' '); + return c; + }); + } + + // 渲染与轮播 + function talk(ls) { + let html = ''; + ls.forEach((item, i) => { + html += `
  • ${item}
    • `; + }); + + let box = document.querySelector("#bber-talk .talk-list"); + if (!box) return; + + box.innerHTML = html; + + talkTimer = setInterval(() => { + if (box.children.length > 0) { + box.appendChild(box.children[0]); + } + }, 3000); + } + + const cachedData = localStorage.getItem(cacheKey); + const cachedTime = localStorage.getItem(cacheTimeKey); + const currentTime = new Date().getTime(); + + // 判断缓存是否有效 + if (cachedData && cachedTime && (currentTime - cachedTime < cacheDuration)) { + const data = toText(JSON.parse(cachedData)); + talk(data.slice(0, 6)); // 使用缓存渲染数据 + } else { + fetch('https://mm.biss.click/api/echo/page', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ page: 1, pageSize: 30 }) + }) + .then(res => res.json()) + .then(data => { + // 适配新版结构：code=1 且 data.items 存在 + if (data.code === 1 && data.data && Array.isArray(data.data.items)) { + localStorage.setItem(cacheKey, JSON.stringify(data.data.items)); + localStorage.setItem(cacheTimeKey, currentTime.toString()); + + const formattedData = toText(data.data.items); + talk(formattedData.slice(0, 6)); + } else { + console.warn('Unexpected API response format:', data); + } + }) + .catch(error => console.error('Error fetching data:', error)); + } +} + +// pjax 支持 +function whenDOMReady() { + indexTalk(); +} + +whenDOMReady(); +document.addEventListener("pjax:complete", whenDOMReady); diff --git a/js/statistic.js b/js/statistic.js new file mode 100644 index 0000000..c03d6e8 --- /dev/null +++ b/js/statistic.js @@ -0,0 +1,11 @@ + var _paq = window._paq = window._paq || []; + /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']); + (function() { + var u="https://statistic.biss.click/"; + _paq.push(['setTrackerUrl', u+'matomo.php']); + _paq.push(['setSiteId', '1']); + var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; + g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); + })(); \ No newline at end of file diff --git a/js/tw_cn.js b/js/tw_cn.js new file mode 100644 index 0000000..43228dd --- /dev/null +++ b/js/tw_cn.js @@ -0,0 +1,117 @@ +document.addEventListener('DOMContentLoaded', () => { + const { defaultEncoding, translateDelay, msgToTraditionalChinese, msgToSimplifiedChinese } = GLOBAL_CONFIG.translate + const snackbarData = GLOBAL_CONFIG.Snackbar + const targetEncodingCookie = 'translate-chn-cht' + + let currentEncoding = defaultEncoding + let targetEncoding = Number(btf.saveToLocal.get(targetEncodingCookie)) || defaultEncoding + const translateButtonObject = document.getElementById('translateLink') + const isSnackbar = snackbarData !== undefined + + const setLang = () => { + document.documentElement.lang = targetEncoding === 1 ? 'zh-TW' : 'zh-CN' + } + + const translateText = txt => { + if (!txt) return '' + if (currentEncoding === 1 && targetEncoding === 2) return Simplized(txt) + if (currentEncoding === 2 && targetEncoding === 1) return Traditionalized(txt) + return txt + } + + const translateBody = fobj => { + const nodes = typeof fobj === 'object' ? fobj.childNodes : document.body.childNodes + + for (const node of nodes) { + // Skip BR, HR tags, or the translate button object + if (['BR', 'HR'].includes(node.tagName) || node === translateButtonObject) continue + + if (node.nodeType === Node.ELEMENT_NODE) { + const { tagName, title, alt, placeholder, value, type } = node + + // Translate title, alt, placeholder + if (title) node.title = translateText(title) + if (alt) node.alt = translateText(alt) + if (placeholder) node.placeholder = translateText(placeholder) + + // Translate input value except text and hidden types + if (tagName === 'INPUT' && value && type !== 'text' && type !== 'hidden') { + node.value = translateText(value) + } + + // Recursively translate child nodes + translateBody(node) + } else if (node.nodeType === Node.TEXT_NODE) { + // Translate text node data + node.data = translateText(node.data) + } + } + } + + const translatePage = () => { + if (targetEncoding === 1) { + currentEncoding = 1 + targetEncoding = 2 + translateButtonObject.textContent = msgToTraditionalChinese + isSnackbar && btf.snackbarShow(snackbarData.cht_to_chs) + } else if (targetEncoding === 2) { + currentEncoding = 2 + targetEncoding = 1 + translateButtonObject.textContent = msgToSimplifiedChinese + isSnackbar && btf.snackbarShow(snackbarData.chs_to_cht) + } + btf.saveToLocal.set(targetEncodingCookie, targetEncoding, 2) + setLang() + translateBody() + } + + const JTPYStr = () => '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾龙历志制一台皋准复猛钟注范签' + const FTPYStr = () => '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽龍歷誌製壹臺臯準復勐鐘註範籤' + + const Traditionalized = cc => { + let str = '' + const ss = JTPYStr() + const tt = FTPYStr() + for (let i = 0; i < cc.length; i++) { + if (cc.charCodeAt(i) > 10000 && ss.indexOf(cc.charAt(i)) !== -1) { + str += tt.charAt(ss.indexOf(cc.charAt(i))) + } else str += cc.charAt(i) + } + return str + } + + const Simplized = cc => { + let str = '' + const ss = JTPYStr() + const tt = FTPYStr() + for (let i = 0; i < cc.length; i++) { + if (cc.charCodeAt(i) > 10000 && tt.indexOf(cc.charAt(i)) !== -1) { + str += ss.charAt(tt.indexOf(cc.charAt(i))) + } else str += cc.charAt(i) + } + return str + } + + const translateInitialization = () => { + if (translateButtonObject) { + if (currentEncoding !== targetEncoding) { + translateButtonObject.textContent = + targetEncoding === 1 + ? msgToSimplifiedChinese + : msgToTraditionalChinese + setLang() + setTimeout(translateBody, translateDelay) + } + } + } + + window.translateFn = { + translatePage, + Traditionalized, + Simplized, + translateInitialization + } + + translateInitialization() + btf.addGlobalFn('pjaxComplete', translateInitialization, 'translateInitialization') +}) diff --git a/js/typesense-search.js b/js/typesense-search.js new file mode 100644 index 0000000..9b9a80d --- /dev/null +++ b/js/typesense-search.js @@ -0,0 +1,545 @@ +(function () { + 'use strict'; + + // ============================================================================ + // 配置区域 - 请根据实际情况修改 + // ============================================================================ + const CONFIG = { + apiKey: "VramSTWKUAggeZ5viQw8SlCwXQqmGCmA", // ⚠️ 建议使用 Search-Only API Key + server: { + host: "typesense.biss.click", + port: "443", + protocol: "https" + }, + indexName: "blogs", + searchParams: { + query_by: "title,content", + highlight_full_fields: "title,content", + per_page: 8, + num_typos: 1, + typo_tokens_threshold: 1, + prefix: true + }, + ui: { + maxRetries: 10, + retryDelay: 100, + animationDuration: 300 + } + }; + + // ============================================================================ + // 状态管理 + // ============================================================================ + let searchInstance = null; + let isInitialized = false; + let isSearchOpen = false; + let initRetryCount = 0; + const MAX_INIT_RETRIES = 30; // 最多重试30次 (3秒) + + // ============================================================================ + // 错误提示函数 + // ============================================================================ + function showErrorMessage() { + const hitsContainer = document.getElementById('hits'); + if (!hitsContainer) return; + + hitsContainer.innerHTML = + '
    ' + + '
    ' + + '
    搜索服务加载失败
    ' + + '
    ' + + '

    依赖库未能正确加载，请检查以下配置：

    ' + + '
      ' + + '
    1. 确认已在 _config.butterfly.yml 中正确引入依赖
      2. ' + + '
    2. 检查 JS 文件加载顺序（先 instantsearch.js，再 adapter）
      3. ' + + '
    3. 尝试更换 CDN 或使用本地文件
      4. ' + + '
    4. 打开浏览器控制台查看详细错误信息
      5. ' + + '
    ' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    '; + } + + // ============================================================================ + // 1. 动态插入 HTML 结构 + // ============================================================================ + const searchHTML = ` + + + + `; + + document.body.insertAdjacentHTML('beforeend', searchHTML); + + const mask = document.getElementById('typesense-search-mask'); + const closeBtn = document.getElementById('close-typesense'); + const container = document.getElementById('typesense-search-container'); + + // ============================================================================ + // 搜索控制 + // ============================================================================ + function openSearch() { + if (isSearchOpen) return; + isSearchOpen = true; + mask.style.display = 'block'; + void mask.offsetWidth; + mask.classList.add('active'); + document.body.style.overflow = 'hidden'; + + if (!isInitialized) { + initTypesense(); + } + focusSearchInput(); + } + + function closeSearch() { + if (!isSearchOpen) return; + isSearchOpen = false; + mask.classList.remove('active'); + setTimeout(function() { + mask.style.display = 'none'; + document.body.style.overflow = ''; + }, CONFIG.ui.animationDuration); + } + + function focusSearchInput(retryCount) { + retryCount = retryCount || 0; + const input = document.querySelector('.ais-SearchBox-input'); + if (input) { + input.focus(); + input.select(); + } else if (retryCount < CONFIG.ui.maxRetries) { + setTimeout(function() { + focusSearchInput(retryCount + 1); + }, CONFIG.ui.retryDelay); + } + } + + // ============================================================================ + // 事件监听 + // ============================================================================ + document.addEventListener('click', function(e) { + if (e.target.closest('.search-typesense-trigger')) { + e.preventDefault(); + openSearch(); + } + }); + + closeBtn.addEventListener('click', closeSearch); + mask.addEventListener('click', function(e) { + if (e.target === mask) closeSearch(); + }); + container.addEventListener('click', function(e) { + e.stopPropagation(); + }); + window.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && isSearchOpen) { + closeSearch(); + } + if ((e.ctrlKey || e.metaKey) && e.key === 'k') { + e.preventDefault(); + openSearch(); + } + }); + + // ============================================================================ + // Typesense 初始化（带重试限制） + // ============================================================================ + function initTypesense() { + if (isInitialized || searchInstance) { + console.warn('Typesense 搜索已初始化'); + return; + } + + var instantsearchLoaded = typeof instantsearch !== 'undefined'; + var adapterLoaded = typeof TypesenseInstantSearchAdapter !== 'undefined' || + typeof window.TypesenseInstantSearchAdapter !== 'undefined'; + + console.log('📦 依赖库检查 (' + (initRetryCount + 1) + '/' + MAX_INIT_RETRIES + '):'); + console.log(' instantsearch.js:', instantsearchLoaded ? '✅ 已加载' : '❌ 未加载'); + console.log(' TypesenseAdapter:', adapterLoaded ? '✅ 已加载' : '❌ 未加载'); + + if (!instantsearchLoaded || !adapterLoaded) { + initRetryCount++; + + if (initRetryCount >= MAX_INIT_RETRIES) { + console.error(''); + console.error('❌ Typesense 依赖库加载失败！'); + console.error('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'); + console.error(''); + console.error('🔧 请检查 _config.butterfly.yml 配置：'); + console.error(''); + console.error('inject:'); + console.error(' bottom: # ⚠️ 使用 bottom 而不是 head'); + console.error(' - '); + console.error(' - '); + console.error(' - '); + console.error(''); + console.error('💡 或在控制台手动检查：'); + console.error(' typeof instantsearch'); + console.error(' typeof TypesenseInstantSearchAdapter'); + console.error(''); + console.error('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'); + + showErrorMessage(); + return; + } + + console.warn('⏳ 100ms 后重试...'); + setTimeout(initTypesense, 100); + return; + } + + initRetryCount = 0; + console.log('🚀 开始初始化 Typesense...'); + + try { + const typesenseAdapter = new TypesenseInstantSearchAdapter({ + server: { + apiKey: CONFIG.apiKey, + nodes: [{ + host: CONFIG.server.host, + port: CONFIG.server.port, + protocol: CONFIG.server.protocol + }], + cacheSearchResultsForSeconds: 120 + }, + additionalSearchParameters: CONFIG.searchParams + }); + + searchInstance = instantsearch({ + searchClient: typesenseAdapter.searchClient, + indexName: CONFIG.indexName, + routing: false + }); + + searchInstance.addWidgets([ + instantsearch.widgets.searchBox({ + container: '#searchbox', + placeholder: '输入关键词寻找故事...', + autofocus: true, + showReset: true, + showSubmit: false, + showLoadingIndicator: true + }), + instantsearch.widgets.stats({ + container: '#stats', + templates: { + text: function(data) { + if (!data.query) return ''; + return '找到 ' + data.nbHits + ' 条结果 (' + data.processingTimeMS + 'ms)'; + } + } + }), + instantsearch.widgets.hits({ + container: '#hits', + templates: { + empty: function(results) { + return '
    ' + + '
    ' + + '
    找不到与 "' + results.query + '" 相关的内容
    ' + + '
    试试其他关键词吧 (´·ω·`)
    ' + + '
    '; + }, + item: function(hit) { + // 使用 _highlightResult 获取高亮文本 + var titleHighlight = hit._highlightResult && hit._highlightResult.title + ? hit._highlightResult.title.value + : (hit.title || ''); + + var contentHighlight = hit._highlightResult && hit._highlightResult.content + ? hit._highlightResult.content.value + : (hit.content || ''); + + // 截取内容长度 + if (contentHighlight.length > 200) { + contentHighlight = contentHighlight.substring(0, 200) + '...'; + } + + return '' + + '
    ' + titleHighlight + '
    ' + + '
    ' + contentHighlight + '
    ' + + '    '; + } + } + }), + instantsearch.widgets.pagination({ + container: '#pagination', + padding: 2, + showFirst: false, + showLast: false + }) + ]); + + searchInstance.start(); + isInitialized = true; + + console.log('✅ Typesense 初始化成功！'); + + searchInstance.on('render', function() { + if (isSearchOpen) { + const input = document.querySelector('.ais-SearchBox-input'); + if (input && document.activeElement !== input) { + input.focus(); + } + } + }); + + } catch (error) { + console.error('❌ 初始化失败:', error); + showErrorMessage(); + } + } + + // ============================================================================ + // 初始化 + // ============================================================================ + function init() { + console.log('🔍 Typesense 搜索已准备就绪'); + console.log('💡 快捷键: Ctrl/Cmd + K'); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + + // ============================================================================ + // 全局接口 + // ============================================================================ + window.TypesenseSearch = { + open: openSearch, + close: closeSearch, + isOpen: function() { return isSearchOpen; }, + getInstance: function() { return searchInstance; } + }; + +})(); \ No newline at end of file diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 0000000..1dd5386 --- /dev/null +++ b/js/utils.js @@ -0,0 +1,338 @@ +(() => { + const btfFn = { + debounce: (func, wait = 0, immediate = false) => { + let timeout + return (...args) => { + const later = () => { + timeout = null + if (!immediate) func(...args) + } + const callNow = immediate && !timeout + clearTimeout(timeout) + timeout = setTimeout(later, wait) + if (callNow) func(...args) + } + }, + + throttle: (func, wait, options = {}) => { + let timeout, args + let previous = 0 + + const later = () => { + previous = options.leading === false ? 0 : new Date().getTime() + timeout = null + func(...args) + if (!timeout) args = null + } + + return (...params) => { + const now = new Date().getTime() + if (!previous && options.leading === false) previous = now + const remaining = wait - (now - previous) + args = params + + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout) + timeout = null + } + previous = now + func(...args) + if (!timeout) args = null + } else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining) + } + } + }, + + overflowPaddingR: { + add: () => { + const paddingRight = window.innerWidth - document.body.clientWidth + + if (paddingRight > 0) { + document.body.style.paddingRight = `${paddingRight}px` + document.body.style.overflow = 'hidden' + const menuElement = document.querySelector('#page-header.nav-fixed #menus') + if (menuElement) { + menuElement.style.paddingRight = `${paddingRight}px` + } + } + }, + remove: () => { + document.body.style.paddingRight = '' + document.body.style.overflow = '' + const menuElement = document.querySelector('#page-header.nav-fixed #menus') + if (menuElement) { + menuElement.style.paddingRight = '' + } + } + }, + + snackbarShow: (text, showAction = false, duration = 2000) => { + const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar + const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark + Snackbar.show({ + text, + backgroundColor: bg, + showAction, + duration, + pos: position, + customClass: 'snackbar-css' + }) + }, + + diffDate: (inputDate, more = false) => { + const dateNow = new Date() + const datePost = new Date(inputDate) + const diffMs = dateNow - datePost + const diffSec = diffMs / 1000 + const diffMin = diffSec / 60 + const diffHour = diffMin / 60 + const diffDay = diffHour / 24 + const diffMonth = diffDay / 30 + const { dateSuffix } = GLOBAL_CONFIG + + if (!more) return Math.floor(diffDay) + + if (diffMonth > 12) return datePost.toISOString().slice(0, 10) + if (diffMonth >= 1) return `${Math.floor(diffMonth)} ${dateSuffix.month}` + if (diffDay >= 1) return `${Math.floor(diffDay)} ${dateSuffix.day}` + if (diffHour >= 1) return `${Math.floor(diffHour)} ${dateSuffix.hour}` + if (diffMin >= 1) return `${Math.floor(diffMin)} ${dateSuffix.min}` + return dateSuffix.just + }, + + loadComment: (dom, callback) => { + if ('IntersectionObserver' in window) { + const observerItem = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + callback() + observerItem.disconnect() + } + }, { threshold: [0] }) + observerItem.observe(dom) + } else { + callback() + } + }, + + scrollToDest: (pos, time = 500) => { + const currentPos = window.scrollY + const isNavFixed = document.getElementById('page-header').classList.contains('fixed') + if (currentPos > pos || isNavFixed) pos = pos - 70 + + if ('scrollBehavior' in document.documentElement.style) { + window.scrollTo({ + top: pos, + behavior: 'smooth' + }) + return + } + + const startTime = performance.now() + const animate = currentTime => { + const timeElapsed = currentTime - startTime + const progress = Math.min(timeElapsed / time, 1) + window.scrollTo(0, currentPos + (pos - currentPos) * progress) + if (progress < 1) { + requestAnimationFrame(animate) + } + } + requestAnimationFrame(animate) + }, + + animateIn: (ele, animation) => { + ele.style.display = 'block' + ele.style.animation = animation + }, + + animateOut: (ele, animation) => { + const handleAnimationEnd = () => { + ele.style.display = '' + ele.style.animation = '' + ele.removeEventListener('animationend', handleAnimationEnd) + } + ele.addEventListener('animationend', handleAnimationEnd) + ele.style.animation = animation + }, + + wrap: (selector, eleType, options) => { + const createEle = document.createElement(eleType) + for (const [key, value] of Object.entries(options)) { + createEle.setAttribute(key, value) + } + selector.parentNode.insertBefore(createEle, selector) + createEle.appendChild(selector) + }, + + isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0, + + getEleTop: ele => ele.getBoundingClientRect().top + window.scrollY, + + loadLightbox: ele => { + const service = GLOBAL_CONFIG.lightbox + + if (service === 'medium_zoom') { + mediumZoom(ele, { background: 'var(--zoom-bg)' }) + return + } + + if (service === 'fancybox') { + ele.forEach(i => { + if (i.parentNode.tagName !== 'A') { + const dataSrc = i.dataset.lazySrc || i.src + const dataCaption = i.title || i.alt || '' + btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': dataSrc }) + } + }) + + if (!window.fancyboxRun) { + let options = '' + if (Fancybox.version < '6') { + options = { + Hash: false, + Thumbs: { + showOnStart: false + }, + Images: { + Panzoom: { + maxScale: 4 + } + }, + Carousel: { + transition: 'slide' + }, + Toolbar: { + display: { + left: ['infobar'], + middle: [ + 'zoomIn', + 'zoomOut', + 'toggle1to1', + 'rotateCCW', + 'rotateCW', + 'flipX', + 'flipY' + ], + right: ['slideshow', 'thumbs', 'close'] + } + } + } + } else { + options = { + Hash: false, + Carousel: { + transition: 'slide', + Thumbs: { + showOnStart: false + }, + Toolbar: { + display: { + left: ['counter'], + middle: [ + 'zoomIn', + 'zoomOut', + 'toggle1to1', + 'rotateCCW', + 'rotateCW', + 'flipX', + 'flipY', + 'reset' + ], + right: ['autoplay', 'thumbs', 'close'] + } + }, + Zoomable: { + Panzoom: { + maxScale: 4 + } + } + } + } + } + + Fancybox.bind('[data-fancybox]', options) + window.fancyboxRun = true + } + } + }, + + setLoading: { + add: ele => { + const html = ` +
    +
    +
    +
    +
    + ` + ele.insertAdjacentHTML('afterend', html) + }, + remove: ele => { + ele.nextElementSibling.remove() + } + }, + + updateAnchor: anchor => { + if (anchor !== window.location.hash) { + if (!anchor) anchor = location.pathname + const title = GLOBAL_CONFIG_SITE.title + window.history.replaceState({ + url: location.href, + title + }, title, anchor) + } + }, + + getScrollPercent: (() => { + let docHeight, winHeight, headerHeight, contentMath + + return (currentTop, ele) => { + if (!docHeight || ele.clientHeight !== docHeight) { + docHeight = ele.clientHeight + winHeight = window.innerHeight + headerHeight = ele.offsetTop + contentMath = Math.max(docHeight - winHeight, document.documentElement.scrollHeight - winHeight) + } + + const scrollPercent = (currentTop - headerHeight) / contentMath + return Math.max(0, Math.min(100, Math.round(scrollPercent * 100))) + } + })(), + + addEventListenerPjax: (ele, event, fn, option = false) => { + ele.addEventListener(event, fn, option) + btf.addGlobalFn('pjaxSendOnce', () => { + ele.removeEventListener(event, fn, option) + }) + }, + + removeGlobalFnEvent: (key, parent = window) => { + const globalFn = parent.globalFn || {} + const keyObj = globalFn[key] + if (!keyObj) return + + Object.keys(keyObj).forEach(i => keyObj[i]()) + + delete globalFn[key] + }, + + switchComments: (el = document, path) => { + const switchBtn = el.querySelector('#switch-btn') + if (!switchBtn) return + + let switchDone = false + const postComment = el.querySelector('#post-comment') + const handleSwitchBtn = () => { + postComment.classList.toggle('move') + if (!switchDone && typeof loadOtherComment === 'function') { + switchDone = true + loadOtherComment(el, path) + } + } + btf.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn) + } + } + + window.btf = { ...window.btf, ...btfFn } +})() diff --git a/link/index.html b/link/index.html new file mode 100644 index 0000000..d050296 --- /dev/null +++ b/link/index.html @@ -0,0 +1,594 @@ +友情链接 | Bi's Blog + + + + + + + + + + +

    友情链接

    糖果屋のVIP

    售后服务享五折优惠2333
    +
    + +
    + Akilar +
    +
    Akilar
    +
    欢迎光临糖果屋
    +     +
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/page/2/index.html b/page/2/index.html new file mode 100644 index 0000000..31024a8 --- /dev/null +++ b/page/2/index.html @@ -0,0 +1,506 @@ +Bi's Blog + + + + + + + + +

    Bi's Blog

      说说加载中。。。
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    发表于|建站手札
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    C# 基本语法
    发表于|学习
    简介C# 是一种面向对象的编程语言。在面向对象的程序设计方法中，程序由各种相互交互的对象组成。相同种类的对象通常具有相同的类型，或者说，是在相同的 class 中。 例如，以 Rectangle（矩形）对象为例。它具有 length 和 width 属性。根据设计，它可能需要接受这些属性值、计算面积和显示细节。 实例 123456789101112131415161718192021222324252627282930313233343536using System;namespace RectangleApplication{ class Rectangle { // 成员变量 double length; double width; public void Acceptdetails() { length = 4.5; width = 3.5; } public double ...
    C# 入门
    C# 入门
    发表于|学习
    今天开始学习C# 环境安装下载Visual Studio,社区版就可以 🪧引用站外地址，不保证站点的可用性和安全性 Visual Studio Visual Studio 下载的是安装器选择.Net桌面开发，注意修改安装位置 第一个程序123456789101112131415using System;namespace HelloWorldApplication{ /* 类名为 HelloWorld */ class HelloWorld { /* main函数 */ static void Main(string[] args) { /* 我的第一个 C# 程序 */ Console.WriteLine("Hello World!"); C...
    自定义页脚（新）
    自定义页脚（新）
    发表于|建站手札
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    自定义分类条
    发表于|建站手札
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    自定义导航栏
    发表于|建站手札
    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    发表于|建站手札
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    博客添加AI总结
    博客添加AI总结
    发表于|建站手札
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    发表于|建站手札
    安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
    英语文章分享-去奋力生活吧，就好像死亡近在咫尺
    英语文章分享-去奋力生活吧，就好像死亡近在咫尺
    发表于|学习
    As a hospice doctor, I often have the privilege of being at the bedside of dying patients.Over the years, I’ve had countless conversations about lives well lived, and more often, about regrets.Many of my patients express a strikingly similar sentiment:I really regret that I never had the energy or time to…The rest of the sentence varies.For one, it might be writing a book.For another, traveling to a far-off land.For someone else, maybe it’s training for a favorite sport.The specifics change, ...
    自定义右键菜单
    自定义右键菜单
    发表于|建站手札
    演示本站右键即可查看,和原有菜单相比比较美观 新建pug文件在 \themes\butterfly\layout\includes新建 rightmenu.pug 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475#rightMenu.js-pjax .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.history.forward();") i.fa.fa-arrow-right ...
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    发表于|建站手札
    效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...
    配置说说页面
    配置说说页面
    发表于|建站手札
    又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
    部署历程
    部署历程
    发表于|建站手札
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/posts/2b2fb1a7/index.html b/posts/2b2fb1a7/index.html new file mode 100644 index 0000000..fc599fd --- /dev/null +++ b/posts/2b2fb1a7/index.html @@ -0,0 +1,556 @@ +在Openwrt中安装OpenClash | Bi's Blog + + + + + + + + + + + + + + +

    在Openwrt中安装OpenClash

    发表于|更新于|技术
    |总字数:161|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    前言

    因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。

    +

    安装

    可以通过web管理页面安装，搜索openclash。

    +
    image
    + +

    当然也可以在终端中执行命令：

    +
    1
    2
    3
    opkg update
    opkg install bash iptables dnsmasq-full curl ca-bundle ipset ip-full iptables-mod-tproxy iptables-mod-extra ruby ruby-yaml kmod-tun kmod-inet-diag unzip luci-compat luci luci-base
    opkg install luci-app-openclash
    +

    配置

    首先需要下载内核，推荐启用Smart内核。

    +
    image
    + +

    然后导入配置：

    +
    image
    + +

    然后就可以开心使用啦！
    感觉zashboard简洁好看一些，看自己感觉啦

    +
    image
    文章作者: biss
    文章链接: https://blog.biss.click/posts/2b2fb1a7/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    OpenwrtOpenclash
    相关推荐
    cover
    2025-10-05
    Adguard和Openclash共存
    在之前已经安装了Openwrt系统，并且也配置了OpenClash和AdguardHome，两者的原理简单看都是劫持DNS，所以两者要同时运行，必须经过一定的配置。无非就这两种方式: 左边的方式更简单一些，只需要修改AdguardHome的上游DNS服务器为127.0.0.1:7874 即可；右边的方式需要将OpenClash里的DNS指向AdguardHome，但是可能有拦截失败的情况(好像没有遇到过)。
    cover
    2025-10-05
    Adguard规则分享
    众所周知，Adguardhome是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则： 一个综合的过滤规则 🪧引用站外地址，不保证站点的可用性和安全性 adblockfilters adblockfilters 广告过滤规则订阅中心 🪧引用站外地址，不保证站点的可用性和安全性 广告过滤规则订阅中心 广告过滤规则订阅中心 集成了许多规则，可以挑选一下加入。 这是我添加的规则，在这些规则下，用Adblocktester可以达到74分，基本够用
    cover
    2025-09-28
    在Openwrt上安装AdguardHome
    接续前言，AdguardHome是一款广告拦截软件，有了一台小软路由后就开始折腾了。 安装首先要下载软件包，但是经过尝试，软件源里面的luci-app-adguardhome不太好用（也可能是我不会用） ，所以我用的下面的包： 🪧引用站外地址，不保证站点的可用性和安全性 luci-app-adguardhome rufengsuixing 虽然好几年没更新了，但还是能用。下载之后上传到路由器，使用opkg install命令安装，或者可以直接通过网页安装： 配置如下图所示进行操作，如果更新核心版本失败，考虑更换升级用的下载链接，使用镜像源，或者科学上网，错号框内的非必要不修改； 最后点击“保存并应用”，然后点击AdGuardHome Web:3000，进行安装，建议关闭路由器自带DNS/DHCP服务器，AdguardHome直接替代 然后，设置AdguardHome的DHCP服务器，注意要先检...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/33249733/index.html b/posts/33249733/index.html new file mode 100644 index 0000000..a15f796 --- /dev/null +++ b/posts/33249733/index.html @@ -0,0 +1,565 @@ +自定义分类条 | Bi's Blog + + + + + + + + + + + + + +

    自定义分类条

    发表于|更新于|建站手札
    |总字数:585|阅读时长:3分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    修改有风险，请注意备份

    +
    +

    今天来自定义分类条

    +

    添加pug

    新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .category-bar-items#category-bar-items(class=is_home() ? 'home' : '')
      .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home")
        a(href=url_for('/'))= __('博客首页')
      each item in site.categories.find({ parent: { $exists: false } }).data
        .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
          a(href=url_for(item.path))= item.name
      .category-bar-item
        a(href=url_for('/archives/'))= __('文章存档')
    div.category-bar-right
      a.category-bar-more(href=url_for('/categories/'))= __('更多分类')
    +

    样式文件

    以上就是该滚动条的结构，下面我们开始实现样式的定义，新建文件[BlogRoot]\themes\butterfly\source\css\_layout\category-bar.styl写入以下文件：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    #category-bar
      padding 7px 11px
      background var(--card-bg)
      border-radius 8px
      display flex
      white-space nowrap
      overflow hidden
      transition 0.3s
      height 50px
      width 100%
      justify-content space-between
      user-select none
      align-items center
      margin-bottom 20px

      .category-bar-right
        display flex
        border-radius 8px
        align-items center

        .category-bar-more
          margin-left 4px
          margin-right 4px
          font-weight 700
          border-radius 8px
          padding 0 8px

      .category-bar-items
        width 100%
        white-space nowrap
        overflow-x scroll
        scrollbar-width: none
        -ms-overflow-style: none
        overflow-y hidden
        display flex
        border-radius 8px
        align-items center
        height 30px

        &::-webkit-scrollbar
          display: none

        .category-bar-item
          a
            padding .1rem .5rem
            margin-right 6px
            font-weight 700
            border-radius 8px
            display flex
            align-items center
            height 30px

          &.select
            a
              background #3eb8be
              color var(--btn-color)
    +

    添加js

    打开[BlogRoot]\themes\butterfly\source\js\main.js，添加js函数，refreshFn函数的上面：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
      const setCategoryBarActive = () => {
        const categoryBar = document.querySelector("#category-bar");
        const currentPath = decodeURIComponent(window.location.pathname);
        const isHomePage = currentPath === GLOBAL_CONFIG.root;

        if (categoryBar) {
            const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
            categoryItems.forEach(item => item.classList.remove("select"));

            const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
            const activeItem = document.getElementById(activeItemId);

            if (activeItem) {
                activeItem.classList.add("select");
            }
        }
    };
    +

    引用函数

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    window.refreshFn = function () {
      initAdjust()

      if (GLOBAL_CONFIG_SITE.isPost) {
        GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
        GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
      } else {
        GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
        GLOBAL_CONFIG.runtime && addRuntime()
        addLastPushDate()
        toggleCardCategory()
        setCategoryBarActive()      // 自己加的，用于切换类别栏目
      }
    +

    添加到主题

    修改[BlogRoot]\themes\butterfly\layout\includes\mixins\indexPostUI.pug，添加

    +
    1
    2
    3
    4
    5
    6
    7
    mixin indexPostUI()
      - const indexLayout = theme.index_layout
      - const masonryLayoutClass = (indexLayout === 6 || indexLayout === 7) ? 'masonry' : ''
      #recent-posts.recent-posts.nc(class=masonryLayoutClass)
    +    #category-bar.category-bar
    +      include ../categoryBar.pug 
        .recent-post-items
    +

    参考

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    liushen博客
    +
    Liushen
    +
    + +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/33249733/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    cover
    2025-08-10
    在侧边栏中添加欢迎信息
    效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...
    cover
    2025-08-25
    为博客添加CMS系统
    序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
    cover
    2026-01-16
    在侧边栏添加日历和倒计时
    突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
    cover
    2025-08-12
    利用插件自定义页脚菜单
    安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
    cover
    2026-01-16
    自定义字体
    今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/34725d47/index.html b/posts/34725d47/index.html new file mode 100644 index 0000000..8ce2ba0 --- /dev/null +++ b/posts/34725d47/index.html @@ -0,0 +1,575 @@ +安装gitea | Bi's Blog + + + + + + + + + + + + + +

    安装gitea

    发表于|更新于|技术
    |总字数:508|阅读时长:2分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）
    PS:我的服务器为2C2G

    +

    安装gitea

    这里用二进制文件安装

    +

    获取二进制文件：

    1
    2
    3
    wget -O gitea https://dl.gitea.com/gitea/1.25.4/gitea-1.25.4-linux-amd64
    chmod +x gitea
    cp gitea /usr/local/bin/gitea
    + +

    创建用户

    这一步不是必须的，但是推荐这样，用root用户很容易出问题。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # On Ubuntu/Debian:
    adduser \
       --system \
       --shell /bin/bash \
       --gecos 'Git Version Control' \
       --group \
       --disabled-password \
       --home /home/git \
       git

    # On Fedora/RHEL/CentOS:
    groupadd --system git
    adduser \
       --system \
       --shell /bin/bash \
       --comment 'Git Version Control' \
       --gid git \
       --home-dir /home/git \
       --create-home \
       git
    + +

    创建工作目录

    1
    2
    3
    4
    5
    6
    7
    8
    mkdir -p /var/lib/gitea/{custom,data,log}
    chown -R git:git /var/lib/gitea/
    chmod -R 750 /var/lib/gitea/
    mkdir /etc/gitea
    chown root:git /etc/gitea
    chmod 770 /etc/gitea
    chmod 750 /etc/gitea
    chmod 640 /etc/gitea/app.ini
    + +

    创建系统服务

    直接把github上面的挪过来就可以

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    service文件
    +
    github
    +
    + +
    +
    + +

    然后注册服务并启动

    +
    1
    2
    sudo systemctl enable gitea
    sudo systemctl start gitea
    + +

    创建数据库

    可以用MySQL数据库或者PostgreSQL，创建一个数据库在web页面填写进去就行。

    +

    反向代理略过，和普通网站的反向代理配置没有什么区别。

    +

    安装runner

    这个runner也不是必须的，是为了实现github的action功能；在2C2G服务器上我看运行的还可以，当然，只是这个hexo博客的自动构建，占用资源也少；
    使用doker，这也是官方建议。以下是compose文件：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    services:
      runner:
        image: gitea/act_runner:latest
        ports:
          - 8088:8088
        environment:
          - CONFIG_FILE=/config.yaml
          - GITEA_INSTANCE_URL=https://git.biss.click
          - GITEA_RUNNER_REGISTRATION_TOKEN=  #替换成自己的token
        volumes:
          - ./config.yaml:/config.yaml
          - ./data:/data
          - /var/run/docker.sock:/var/run/docker.sock # 允许 Runner 调用宿主机 Docker

    +

    token在管理后台 工作流-运行器-新建运行器获取
    config文件需要这样生成

    +
    1
    docker run --entrypoint="" --rm -it docker.io/gitea/act_runner:latest act_runner generate-config > config.yaml
    + +

    在后台工作流运行器可以看见就没问题了。

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/34725d47/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    gitea
    相关推荐
    cover
    2026-02-07
    将博客仓库转移到gitea
    在上一篇文章中已经完成了gitea的安装那么博客源码迁移倒是没问题，直接git remote add origin就行，但是action文件就有些变更。这是我修改的action文件： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556name: 自动部署on: push: branches: - master release: types: - published workflow_dispatch:env: TZ: Asia/Shanghaijobs: deploy: runs-on: ubuntu-latest steps: - name: 检查分支 uses: actions/checkout@v4 with: ref: master - name: 缓存项目 npm 包 id: cache-node-modul...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/3a26a97a/index.html b/posts/3a26a97a/index.html new file mode 100644 index 0000000..edd1dbd --- /dev/null +++ b/posts/3a26a97a/index.html @@ -0,0 +1,578 @@ +为博客添加CMS系统 | Bi's Blog + + + + + + + + + + + + + +

    为博客添加CMS系统

    发表于|更新于|建站手札
    |总字数:911|阅读时长:4分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    序言

    因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    sveltia-cms
    +
    sveltia
    +
    + +
    +
    + +

    安装

    安装包

    在博客根目录下运行npm i @sveltia/cms

    +

    创建必要文件

    然后在博客source目录下创建admin目录
    并在其下新建index.html

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="robots" content="noindex" />
      <title>博客管理</title>
    </head>
    <body>
      <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
    </body>
    </html>
    + +

    新建config.yml

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    # https://decapcms.org/docs/configuration-options/
    backend:
      name: github
      repo:  #博客存储库
      branch: #分支
      auth_type: 
      app_id:  
    media_folder: "folder"
    public_folder: "folder"
    site_url: ""
    logo_url: ""
    locale: "zh_Hans"
    common_col_conf: &common_col_conf
      create: true
      slug: "{{fields.filename}}"
      sortable_fields:
        - "commit_date"
        - "title"
        - "date"
        - "updated"
      # https://decapcms.org/docs/widgets/
      fields:
        - label: "文件名"
          name: "filename"
          widget: "string"
        - label: "标题"
          name: "title"
          widget: "string"
        - label: "发表日期"
          name: "date"
          widget: "datetime"
          format: "YYYY-MM-DD HH:mm:ss"
          date_format: "YYYY-MM-DD"
          time_format: "HH:mm:ss"
        - label: "更新日期"
          name: "updated"
          widget: "datetime"
          format: "YYYY-MM-DD HH:mm:ss"
          date_format: "YYYY-MM-DD"
          time_format: "HH:mm:ss"
          required: false
        - label: "封面"
          name: "cover"
          widget: "image"
          required: false
        - label: "标签"
          name: "tags"
          widget: "select"
          multiple: true
          required: false
          options:
            - "amazon"
            - "android"
            - "angularjs"
            - "azure"
            - "cdn"
            - "chartjs"
            - "chrome"
            - "csharp"
            - "css"
            - "devops"
            - "diary"
            - "docker"
            - "edge"
            - "git"
            - "github"
            - "hexo"
            - "html"
            - "icarus"
            - "java"
            - "js"
            - "life"
            - "material"
            - "mysql"
            - "nodejs"
            - "onedrive"
            - "oneindex"
            - "php"
            - "restapi"
            - "security"
            - "serverless"
            - "shadowdefender"
            - "tool"
            - "twikoo"
            - "ubuntu"
            - "vagrant"
            - "vb"
            - "vite"
            - "vue"
            - "webpack"
            - "windows"
            - "xlsx"
            - "小程序"
        - label: "分类"
          name: "categories"
          widget: "select"
          multiple: true
          required: false
          options:
            - "Diary"
            - "Tool"
            - "Tech"
            - "FrontEnd"
            - "BackEnd"
            - "Windows"
            - "Android"
            - "Linux"
            - "Serverless"
        - label: "正文"
          name: "body"
          widget: "markdown"
        - label: "原创"
          name: "toc"
          widget: "boolean"
          default: true
        - label: "评论"
          name: "comments"
          widget: "boolean"
          default: true
    collections:
      - name: "2023"
        label: "2023"
        folder: "source/_posts/2023"
        preview_path: "2023/{{filename}}/"
        <<: *common_col_conf
      - name: "pages"
        label: "Pages"
        files:
          - name: "friends"
            label: "友链"
            file: "source/friends/index.md"
            preview_path: "friends/"
            <<: *common_col_conf
          - name: "about"
            label: "关于"
            file: "source/about/index.md"
            preview_path: "about/"
            <<: *common_col_conf
    + +

    需要自己修改一些配置；
    一般到这一步就可以了，但是因为我使用自己的服务器，没办法用官方的auth系统，所以还要进一步配置。

    +

    创建auth系统、授权

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Sveltia CMS Authenticator
    +
    Sveltia CMS Authenticator
    +
    + +
    +
    +

    比较简单，直接Cloudflare一键部署就可以
    然后要在github新建一个oauth应用，就不写了，可以自己查找。
    然后在cloudflare新建环境变量：
    GITHUB_CLIENT_ID:
    GITHUB_CLIENT_SECRET:
    然后在config.yml添加

    +
    1
    2
    3
    4
    5
    backend:
      name: github # or gitlab
      repo: username/repo
      branch: main
      base_url: <YOUR_WORKER_URL>
    + +

    大功告成

    访问博客的admin就可以了

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/3a26a97a/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2026-02-10
    添加网站左上角菜单
    看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    cover
    2025-08-12
    利用插件自定义页脚菜单
    安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
    cover
    2025-08-10
    在侧边栏中添加欢迎信息
    效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...
    cover
    2025-08-12
    博客添加AI总结
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    cover
    2025-08-12
    利用 SiteMap 随机访问站内页面
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/3e61a389/index.html b/posts/3e61a389/index.html new file mode 100644 index 0000000..c79e7d4 --- /dev/null +++ b/posts/3e61a389/index.html @@ -0,0 +1,566 @@ +自定义导航栏 | Bi's Blog + + + + + + + + + + + + + +

    自定义导航栏

    发表于|更新于|建站手札
    |总字数:1k|阅读时长:6分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。

    +

    PC 菜单栏

    修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    nav#nav
      span#blog-info
        a(href=url_for('/') title=config.title)
          if theme.nav.logo
            img.site-icon(src=url_for(theme.nav.logo))
          if theme.nav.display_title
            span.site-name=config.title
        
      #menus
    -    if (theme.algolia_search.enable || theme.local_search.enable)
    -      #search-button
    -        a.site-page.social-icon.search
    -          i.fas.fa-search.fa-fw
    -          span=' '+_p('search.title')
      !=partial('includes/header/menu_item', {}, {cache: true})
    +  #nav-right
    +    if (theme.algolia_search.enable || theme.local_search.enable)
    +      #search-button
    +        a.site-page.social-icon.search
    +          i.fas.fa-search.fa-fw
    +    #toggle-menu
    +      a.site-page
    +        i.fas.fa-bars.fa-fw
    +       #toggle-menu
    +         a.site-page
    +           i.fas.fa-bars.fa-fw
    +

    新建css文件

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    #nav-right{
      flex:1 1 auto;
      justify-content: flex-end;
      margin-left: auto;
      display: flex;
      flex-wrap:nowrap;
    }
      
    /* 导航栏居中 */
    #sidebar #sidebar-menus .menus_items .menus_item {
        margin: 10px 0;
    }
    #sidebar #sidebar-menus .menus_items a.site-page {
        padding-left: 0;
    }
    #sidebar #sidebar-menus .menus_items .site-page {
        position: relative;
        display: block;
        padding: 6px 30px 6px 22px;
        color: var(--font-color);
        font-size: 1.15em;
        border: var(--style-border-always);
        background: var(--icat-card-bg);
        font-size: 14px;
        border-radius: 12px;
    }
    #sidebar #sidebar-menus .menus_items .site-page i:first-child {
        text-align: left;
        padding-left: 10px;
    }
    +

    PE端

    修改[blogRoot]/themes/butterfly/layout/includes/header/menu_item.pug内容。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if theme.menu
      .menus_items
        each value, label in theme.menu
          if typeof value !== 'object'
    -       .menus_item
    +        .icat_menus_item
              - const valueArray = value.split('||')
              a.site-page(href=url_for(trim(valueArray[0])))

        ···
    +

    修改[blogRoot]/themes/butterfly/source/css/_layout/head.styl 内容

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
        ···

      .menus_items
        display: inline

        .menus_item
    +    .icat_menus_item
          position: relative
          display: inline-block
          padding: 0 0 0 14px

          &:hover
            .menus_item_child
              display: block

        ···
    +

    修改[blogRoot]/themes/butterfly/source/css/_layout/sidebar.styl内容

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

        ···

        .menus_items
          padding: 0 10px 40px

    +      .menus_item
    +        margin: 10px 0

          .site-page
            @extend .limit-one-line
            position: relative
            display: block
            padding: 6px 30px 6px 22px
            color: var(--font-color)
            font-size: 1.15em
    +        border: var(--icat-style-border-always)
    +        background: var(--icat-essay-card-bg)
    +        font-size: 14px
    +        border-radius: 12px

            &:hover
              background: var(--text-bg-hover)

            i:first-child
              width: 15%
              text-align: left
    +          padding-left: 10px

            &.group
              & > i:last-child
                position: absolute
                top: .78em
                right: 18px
                transition: transform .3s

              &.hide
                & > i:last-child
                  transform: rotate(90deg)

                & + .menus_item_child
                  display: none

          .menus_item_child
            margin: 0
            list-style: none
            padding-top: 6px

    +#sidebar
    +  #sidebar-menus
    +    .icat_menus_item
    +      display: inline-block
    +      width: 50%
    +
    +      .site-page
    +        text-align: center
    +        margin: 4px
    +        display: flex
    +        flex-direction: column
    +        align-items: center
    +        padding: 8px 0
    +        border-radius: 12px
    +        font-size: 14px
    +
    +        i:first-child
    +          padding-left: 0
    +
    +        & > .icat-essay
    +          font-weight: 500
    +
    +        span
    +          margin-top: -8px
    + +

    在css文件中添加

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    #sidebar #sidebar-menus .menus_items .menus_item_child {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: box;
        display: flex;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -o-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -o-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #sidebar #sidebar-menus .menus_items a.site-page, #sidebar .menus_item ul {
        padding-left: 0;
    }
    #sidebar #sidebar-menus .menus_item_child li {
        width: calc(50% - 8px);
        margin: 4px;
    }
    #sidebar #sidebar-menus .menus_item_child .site-page.child {
        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-align: center;
        -moz-box-align: center;
        -o-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 8px;
        border-radius: 12px;
        border: var(--style-border-always);
        background: var(--icat-card-bg);
        font-size: 14px;
    }
    #nav.hide-menu #toggle-menu {
        padding: 0 0 0 12px;
    }
    #sidebar #sidebar-menus .icat_menus_item .site-page {
        text-align: center;
        margin: 4px;
        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-align: center;
        -moz-box-align: center;
        -o-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 8px 0;
        border-radius: 12px;
        font-size: 14px;
    }
    @media screen and (max-width: 768px) {
        #sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
            margin-top: 4px;
        }
        #sidebar #sidebar-menus .menus_items .icat_menus_item .site-page i:first-child {
            text-align: center;
            padding-left: 0;
        }
    }
    /* 子菜单美化 */

    #sidebar .open > .avatar-img img {
        height: 100px;
        width: 100px;
        border-radius: 50%;
    }
    #sidebar .open > .avatar-img img {
        border: 5px #fff solid;
    }
    #sidebar .open > .avatar-img::before {
        bottom: 8px;
        height: 12px;
        width: 12px;
    }
    #sidebar .open > .avatar-img::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(65%);
        background: #6bdf8f;
        border: 5px solid #fff;
        border-radius: 50%;
        transition: filter 375ms ease-in .2s,transform .3s;
        z-index: 2;
    }
    /* 头像美化 */

    #sidebar #sidebar-menus .sidebar-site-data {
        padding: 0;
        margin-left: 10px;
        background: var(--icat-card-bg);
        border-radius: 12px;
        border: var(--style-border-always);
    }
    @media screen and (max-width: 768px) {
        .site-data {
            width: 94%;
        }
    }
    /* 侧边栏的统计栏美化 */
      
    /* PE端菜单栏美化 */
    +

    参考

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Meuicat的博客
    +
    Meuicat
    +
    + +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/3e61a389/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-25
    为博客添加CMS系统
    序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    cover
    2025-08-12
    博客添加AI总结
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    cover
    2026-01-16
    自定义字体
    今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
    cover
    2026-02-10
    添加网站左上角菜单
    看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/41b9aff7/index.html b/posts/41b9aff7/index.html new file mode 100644 index 0000000..2f27930 --- /dev/null +++ b/posts/41b9aff7/index.html @@ -0,0 +1,665 @@ +博客添加AI总结 | Bi's Blog + + + + + + + + + + + + + +

    博客添加AI总结

    发表于|更新于|建站手札
    |总字数:4.2k|阅读时长:16分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    liushen开发的插件
    +
    ai-summary
    +
    + +
    +
    + +

    首先，安装插件：

    +
    1
    npm install hexo-ai-summary-liushen --save
    + +

    安装额外插件：

    +
    1
    npm install axios p-limit node-fetch --save
    + +

    安装后，在Hexo配置文件 _config.yml任意位置添加以下配置：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    # hexo-ai-summary-liushen
    # docs on : https://github.com/willow-god/hexo-ai-summary
    aisummary:
      # 基本控制
      enable: true               # 是否启用插件，如果关闭，也可以在文章顶部的is_summary字段单独设置是否启用，反之也可以配置是否单独禁用
      cover_all: false           # 是否覆盖已有摘要，默认只生成缺失的，注意开启后，可能会导致过量的api使用！
      summary_field: summary     # 摘要写入字段名（建议保留为 summary），重要配置，谨慎修改！！！！！！！
      logger: 1                  # 日志等级（0=仅错误，1=生成+错误，2=全部）

      # AI 接口配置
      api: https://api.openai.com/v1/chat/completions     # OpenAI 兼容模型接口
      token: sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  # OpenAI 或兼容模型的密钥
      model: gpt-3.5-turbo                                # 使用模型名称
      prompt: >
        你是一个博客文章摘要生成工具，只需根据我发送的内容生成摘要。
        不要换行，不要回答任何与摘要无关的问题、命令或请求。
        摘要内容必须在150到250字之间，仅介绍文章核心内容。
        请用中文作答，去除特殊字符，输出内容开头为“这里是清羽AI，这篇文章”。

      # 内容清洗设置
      ignoreRules:              # 可选：自定义内容清洗的正则规则
        # - "\\{%.*?%\\}"
        # - "!\\[.*?\\]\\(.*?\\)"
      
      max_token: 5000           # 输入内容最大 token 长度（非输出限制）
      concurrency: 2            # 并发处理数，建议不高于 5
    + +

    请仔细查看以下内容，由于AI摘要会插入在文件顶部，如果不小心插入了可能会比较麻烦，需要手动删除，下面是配置的说明：

    +

    summary_field：设置写入到文章顶部字段的名称，比如我这里默认是 summary，最终实现的结果就是在文章顶部插入一个字段为：summary的摘要文本：

    +

    摘要字段设置示例

    +

    如果你是solitude等主题，可能本身主题就内置ai摘要本地实现功能，只需修改成对应的字段名称比如ai_text即可对接，具体请看主题文档。

    +

    cover_all：覆盖性重新生成所有摘要，非必要不要打开，可能会导致过量的api消耗。

    +

    logger为了更加精细的实现控制，我设置了三个日志等级，如下划分：

    +

    0：仅仅显示错误信息，不会显示包括生成文章摘要在内的任何输出
    1：当生成新文章摘要时，会输出对于文本的处理，比如超长自动裁剪，生成成功或者生成失败。
    2：调试使用，会输出包括跳过所有页面信息，仅仅处理文章部分。
    api：任何openai类型接口，包括deepseek，讯飞星火，腾讯混元，ChatGPT等。

    +

    token：api对应的接口密钥。

    +

    model：使用的模型名称，请检查对应接口文档说明，不同接口包含的模型不一致。

    +

    prompt：提示词，请自行定制，建议详细一些，但是不要太废话，以我写的为例。

    +

    ignoreRules：忽略文本正则接口，由于本插件直接获取Markdown文本，内置了一些处理，但是你仍然可以进行额外的处理，下面是内置的文本处理规则，如果有兴趣进行修改可以进行参考：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 2. 清理内容
      content = content
        .replace(/```[\s\S]*?```/g, '')           // 代码块
        // .replace(/`[^`\n]+`/g, '')                // 行内代码
        .replace(/{%[^%]*%}/g, '')                // Hexo 标签
        .replace(/^\|.*?\|.*$/gm, '')             // 表格行
        .replace(/!\[.*?\]\(.*?\)/g, '')          // 图片
        .replace(/\[(.*?)\]\(.*?\)/g, '$1')       // 超链接文本
        .replace(/<[^>]+>/g, '')                  // HTML 标签
        .replace(/ /g, ' ')                  // 空格实体
        .replace(/\n{2,}/g, '\n')                 // 多重换行压缩
        .replace(/^\s+|\s+$/gm, '')               // 行首尾空格
        .replace(/[ \t]+/g, ' ')                  // 多空格压缩
        .trim();

      // 3. 拼接标题
      const combined = (title ? title.trim() + '\n\n' : '') + content;
    + +

    但是大部分情况可以忽略这个配置项，留空即可。

    +

    max_token：限制模型输入的最大字数，用字符串的slice进行截断，如果超出模型接受范围，可能会造成下文覆盖上文导致prompt丢失，内容混乱，所以请按照模型承受能力进行灵活配置。

    +

    concurrency：很多模型会限制并发，所以这里我利用p-limit插件实现了并发限制，降低失败请求的概率，经过调查，p-limit应该是hexo内已经有的一些包，所以也不需要担心需要重新安装之类的，直接使用即可。

    +

    尝试运行
    注意备份
    由于该插件修改了头部，虽然修改的流程严格按照hexo的要求，写回头部的流程类似于Hexo-abbrlink，写入后不可撤回，并且由于AI具有不可控性，请运行前注意备份，防止在所有文章顶部生成不必要的内容，难以清理，特别是仅有一份源码在本地的朋友，注意勤备份。

    +

    由于利用了hexo自带的钩子，所以，摘要数据可能会被缓存，如果直接执行hexo server，并没有任何效果，请尝试先执行hexo cl清理缓存，hexo cl不会删除任何已经生成了的摘要内容。

    +

    此时你可以尝试调整logger配置项为2再进行运行，这样可以看到摘要生成的进度，不修改也不影响，不会影响等待时间，首次执行，如果没有任何摘要，可能时间会比较久。

    +

    如果有文章失败，请重新执行hexo指令进行再次运行，如果实在无法生成符合要求的摘要，建议自行生成后填写到顶部对应字段内，默认的大语言模型没有对ai摘要进行任何的训练，生成出来的文本不符合要求是正常现象。

    +

    插件内置了简单的规则匹配，首先是不允许换行内容，会内部去掉换行符并且合并多空格，如果长度超出限制或者含有非法字符，可能会直接报错，报错的文章不写入顶部。

    +

    判断部分

    +

    如果一切正常，应该可以在每篇文章的顶部看到对应的摘要文段。

    +

    API推荐

    由于插件需要自行配置API，可能在这方面需要一些帮助，所以我整理了一些免费API接口，如下：

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    接口名称优势劣势字符上限模型类型稳定性简介
    腾讯混元 Lite- 官方支持，性能稳定- 计划支持高达256K字符输入输出- 免费使用，无需付费- 需腾讯云账号及实名认证- 当前可能仍处于4K字符限制阶段，256K支持尚未全面上线计划支持256K字符（当前可能为4K）自研大模型，具备多模态能力高腾讯自研的混元大模型，支持多轮对话、逻辑推理、内容创作等，计划全面支持256K字符输入输出，适用于多种应用场景。
    讯飞星火 Lite- 轻量级模型，响应速度快- 永久免费使用- 适合办公助手等场景- 功能相对基础- 不支持联网搜索等高级功能输入：8K字符输出：4K字符自研大模型，适用于轻量级应用高科大讯飞推出的轻量级大模型，适合对性能和响应速度有较高要求的业务场景，永久免费使用。
    ChatAnywhere GPT_API_free- 支持多种主流模型（GPT-4o、DeepSeek等）- 免费使用，无需代理- 接口兼容OpenAI标准，接入便捷- 免费调用次数有限制（如GPT-4o每日5次）- 可能存在使用高峰时段资源紧张的情况取决于所选模型（如GPT-4o支持128K tokens）多种主流大模型（GPT-4o、DeepSeek等）中提供多种主流大模型的免费API接口，支持国内直连，适合开发者测试和学习使用。
    QWQ.aigpu.cn- 完全免费，无需注册- 基于分布式算力，支持高性能模型- 支持本地运行和共享算力- 高峰时段可能需要排队- 依赖社区贡献的算力，稳定性可能受影响未明确限制，具体取决于模型和算力资源QwQ 32B大语言模型中等（受算力资源影响）基于分布式家用显卡算力的平台，提供免费的大语言模型API，支持本地运行和共享算力，适合开发者和爱好者使用。
    +

    由于AI摘要仅仅需要小模型即可驾驭，无需众多训练知识，所以这里两个Lite版本的模型完全可以实现，唯一不同的区别可能就是上下文能力啦，更好的模型可以接受更长的文本输入，不容易丢失我们给予的prompt，输出更为准确，更符合要求，但是考虑到成本和稳定性原因，我还是建议前两个。

    +

    注意各家都有自有api接口和OpenAI类型接口，我们这里选择OpenAI接口，输入完整的地址如混元的兼容接口：
    https://api.hunyuan.cloud.tencent.com/v1/chat/completions
    申请token后正常使用即可。

    +

    Hexo适配

    说在前面
    有些主题已经有静态ai摘要的功能了，可以无需下面的步骤，使用插件向文件插入对应的字符串即可，下面的教程适用于butterfly或者类butterfly主题，如果是其他主题可能需要自行适配。

    +

    添加配置

    目前我们已经自动化了从AI中，喂我们的文章给AI，再生成摘要，再写到文件顶部的过程，下面我们开始进行从文件顶部渲染到网站页面上。

    +

    首先在主题配置文件 _config.butterfly.yml文件中写入配置，方便我们进行控制摘要是否开启：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # --------------------------------------
    # 文章设置
    # --------------------------------------
    # 文章AI摘要是否开启，会自动检索文章色summary字段，若没有则不显示
    ai_summary:
      enable: true
      title: 清羽のAI摘要
      loadingText: 清羽AI正在绞尽脑汁想思路ING···
      modelName: HunYuan-Lite
    + +

    这里的内容均为装饰性内容，除了enable选项，其他没有任何控制效果，都是装饰，所以无需担心，可以先按照我的写，后面再根据效果修改。

    +

    添加模板

    下面找到主题文件下的 /root/theme/butterfly/layout/post.pug文件，添加文件中指出来的两行内容：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    extends includes/layout.pug

    block content
      #post
        if top_img === false
          include includes/header/post-info.pug

        article#article-container.post-content
    +     if page.summary && theme.ai_summary.enable
    +       include includes/post/post-summary.pug
          !=page.content
        include includes/post/post-copyright.pug
        .tag_share
          if (page.tags.length > 0 && theme.post_meta.post.tags)
            .post-meta__tag-list
              each item, index in page.tags.data
                a(href=url_for(item.path)).post-meta__tags #[=item.name]
          include includes/third-party/share/index.pug

        if theme.reward.enable && theme.reward.QR_code
          !=partial('includes/post/reward', {}, {cache: true})

        //- ad
        if theme.ad && theme.ad.post
          .ads-wrap!=theme.ad.post

        if theme.post_pagination
          include includes/pagination.pug
        if theme.related_post && theme.related_post.enable
          != related_posts(page,site.posts)

        if page.comments !== false && theme.comments.use
          - var commentsJsLoad = true
          !=partial('includes/third-party/comments/index', {}, {cache: true})
    + +

    注意缩进，pug作为预编译语言，对缩进的要求极为严格，在该文件中，应该是两个空格一缩进。

    +

    下面添加组件，创建文件 /root/theme/butterfly/layout/includes/post/post-summary.pug，写入以下内容：

    +
    1
    2
    3
    4
    5
    6
    7
    .ai-summary
        .ai-explanation(style="display: block;" data-summary=page.summary)=theme.ai_summary.loadingText
        .ai-title 
            .ai-title-left 
                i.fa-brands.fa-slack
                .ai-title-text=theme.ai_summary.title
            .ai-tag#ai-tag= theme.ai_summary.modelName
    + +

    添加样式

    下面我们添加样式部分，创建文件 /root/theme/butterfly/source/css/_layout/ai-summary.styl文件，写入：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    // ===================
    // 🌗 主题变量定义（仅使用项）
    // ===================

    :root
      // ai_summary
      --liushen-title-font-color: #0883b7
      --liushen-maskbg: rgba(255, 255, 255, 0.85)
      --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42A2FF 54%, #d6b300 100%)

      // card 背景
      --liushen-card-secondbg: #f1f3f8

      // text
      --liushen-text: #4c4948
      --liushen-secondtext: #3c3c43cc

    [data-theme='dark']
      // ai_summary
      --liushen-title-font-color: #0883b7
      --liushen-maskbg: rgba(0, 0, 0, 0.85)
      --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, rgba(214, 178, 0, 0.46) 0%, rgba(66, 161, 255, 0.53) 54%, rgba(214, 178, 0, 0.49) 100%)

      // card 背景
      --liushen-card-secondbg: #3e3f41

      // text
      --liushen-text: #ffffffb3
      --liushen-secondtext: #a1a2b8

    // ===================
    // 📘 AI 摘要模块样式
    // ===================

    if hexo-config('ai_summary.enable')
      .ai-summary
        background-color var(--liushen-maskbg)
        background var(--liushen-card-secondbg)
        border-radius 12px
        padding 8px 8px 12px 8px
        line-height 1.3
        flex-direction column
        margin-bottom 16px
        display flex
        gap 5px
        position relative

        &::before
          content ''
          position absolute
          top 0
          left 0
          width 100%
          height 100%
          z-index 1
          filter blur(8px)
          opacity .4
          background-image var(--liushen-ai-bg)
          transform scaleX(1) scaleY(.95) translateY(2px)
      
        &::after
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          border-radius: 12px;
          background: var(--liushen-maskbg);

        .ai-explanation
          z-index 10
          padding 8px 12px
          font-size 15px
          line-height 1.4
          color var(--liushen-text)
          text-align justify

          // ✅ 打字机光标动画
          &::after
            content ''
            display inline-block
            width 8px
            height 2px
            margin-left 2px
            background var(--liushen-text)
            vertical-align bottom
            animation blink-underline 1s ease-in-out infinite
            transition all .3s
            position relative
            bottom 3px

          // 平滑滚动动画
          // .char
          //   display inline-block
          //   opacity 0
          //   animation chat-float .5s ease forwards
      
        .ai-title
          z-index 10
          font-size 14px
          display flex
          border-radius 8px
          align-items center
          position relative
          padding 0 12px
          cursor default
          user-select none

          .ai-title-left
            display flex
            align-items center
            color var(--liushen-title-font-color)

            i
              margin-right 3px
              display flex
              color var(--liushen-title-font-color)
              border-radius 20px
              justify-content center
              align-items center

            .ai-title-text
              font-weight 500

          .ai-tag
            color var(--liushen-secondtext)
            font-weight 300
            margin-left auto
            display flex
            align-items center
            justify-content center
            transition .3s

      // 平滑滚动动画
      // @keyframes chat-float
      //   0% 
      //     opacity 0
      //     transform translateY(20px)
      //   100% 
      //       opacity 1
      //       transform translateY(0)
      
      // ✅ 打字机光标闪烁动画
      @keyframes blink-underline
        0%, 100%
          opacity 1
        50%
          opacity 0
    + +

    样式也实现啦！目前就差将我们的摘要插入到我们的网站就大功告成啦，为了实现的更加逼真，我这里实现了两种样式一个是打字机效果，一个是平滑显示效果，可以按需引入：

    +

    添加核心JS

    介绍两种动效，可以按照自己的需求在任意js文件中选择一个引入即可，两个的区别是，打字机效果更加的节省性能，而平滑显示，因为每个文本为一个span，所以会比较耗费性能。

    +

    打字机

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    // 打字机效果
    function typeTextMachineStyle(text, targetSelector, options = {}) {
        const {
            delay = 50,
            startDelay = 2000,
            onComplete = null,
            clearBefore = true,
            eraseBefore = true, // 新增：是否以打字机方式清除原文本
            eraseDelay = 30,    // 新增：删除每个字符的间隔
        } = options;

        const el = document.querySelector(targetSelector);
        if (!el || typeof text !== "string") return;

        setTimeout(() => {
            const startTyping = () => {
                let index = 0;
                function renderChar() {
                    if (index <= text.length) {
                        el.textContent = text.slice(0, index++);
                        setTimeout(renderChar, delay);
                    } else {
                        onComplete && onComplete(el);
                    }
                }
                renderChar();
            };

            if (clearBefore) {
                if (eraseBefore && el.textContent.length > 0) {
                    let currentText = el.textContent;
                    let eraseIndex = currentText.length;

                    function eraseChar() {
                        if (eraseIndex > 0) {
                            el.textContent = currentText.slice(0, --eraseIndex);
                            setTimeout(eraseChar, eraseDelay);
                        } else {
                            startTyping(); // 删除完毕后开始打字
                        }
                    }

                    eraseChar();
                } else {
                    el.textContent = "";
                    startTyping();
                }
            } else {
                startTyping();
            }
        }, startDelay);
    }

    function renderAISummary() {
        const summaryEl = document.querySelector('.ai-summary .ai-explanation');
        if (!summaryEl) return;

        const summaryText = summaryEl.getAttribute('data-summary');
        if (summaryText) {
            typeTextMachineStyle(summaryText, ".ai-summary .ai-explanation"); // 如果需要切换，在这里调用另一个函数即可
        }
    }

    document.addEventListener('pjax:complete', renderAISummary);
    document.addEventListener('DOMContentLoaded', renderAISummary);
    + +

    本站使用的就是打字机效果，可以自行查看。

    +

    平滑

    这个没有样图，如果好奇可以自行部署并尝试：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
     // 平滑弹出效果
     function typeText(text, targetSelector, options = {}) {
         const {
           delay = 50,          // 每个字符之间的延迟（毫秒）
           startDelay = 2000,   // 开始打字前的延迟（默认 3 秒）
           onComplete = null,   // 动画完成后的回调
           clearBefore = true   // 是否在开始前清空原有内容
         } = options;

         const targetEl = document.querySelector(targetSelector);
         if (!targetEl || typeof text !== "string") return;

         // if (clearBefore) targetEl.textContent = "";

         let index = 0;
         let frameId = null;

         function renderChar() {
           if (index < text.length) {
             const span = document.createElement("span");
             span.textContent = text[index++];
             span.className = "char";
             targetEl.appendChild(span);
             frameId = requestAnimationFrame(() => setTimeout(renderChar, delay));
           } else {
             cancelAnimationFrame(frameId);
             onComplete && onComplete(targetEl);
           }
         }

         setTimeout(() => {
             if (clearBefore) targetEl.textContent = "";
             renderChar();
         }, startDelay);
     }

    function renderAISummary() {
        const summaryEl = document.querySelector('.ai-summary .ai-explanation');
        if (!summaryEl) return;

        const summaryText = summaryEl.getAttribute('data-summary');
        if (summaryText) {
            typeText(summaryText, ".ai-summary .ai-explanation"); // 如果需要切换，在这里调用另一个函数即可
        }
    }

    document.addEventListener('pjax:complete', renderAISummary);
    document.addEventListener('DOMContentLoaded', renderAISummary);
    + +

    注意，平滑滚动部分的css，默认注释掉了

    +

    好的，设置完毕！

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/41b9aff7/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-26
    搭建Owncloud并集成Onlyoffice
    引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
    cover
    2025-08-12
    利用 SiteMap 随机访问站内页面
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    cover
    2025-08-14
    自定义页脚（新）
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    cover
    2025-08-10
    配置说说页面
    又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
    2025-08-13
    自定义导航栏
    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/5785bd01/index.html b/posts/5785bd01/index.html new file mode 100644 index 0000000..76eaf69 --- /dev/null +++ b/posts/5785bd01/index.html @@ -0,0 +1,547 @@ +新年快乐！ | Bi's Blog + + + + + + + + + + + + + +

    新年快乐！

    发表于|更新于
    |总字数:172|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    各位亲朋好友、合作伙伴及屏幕前的你：

    +

    值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下：

    +

    一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。

    +

    二、请各有关人员在收到本通知后，务必在下方留言区留下你的新年愿望，由后台系统统一收集并祝愿其实现。

    +

    三、祝大家在新的一年里，身体健康，万事如意，所得皆所愿，所行化坦途！

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/5785bd01/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    生活
    相关推荐
    cover
    2026-01-05
    和朋友们的故事
    最近一直忙于学习（虽然也没怎么好好学），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年开始就断断续续地给朋友们写信，这是一些挂号信收据： 这应该是去年上半年的一张图片，下半年也在零散的发，只不过下半年比较忙，没发多少。到年底的时候呢又想着写一点贺年信，当然感觉自己的水平下降，写不出什么好的文章。于是开始着手准备电子版贺卡，当然完全使用了AI工具，自己写太麻烦，也没什么精力去写，于是就有了下面的电子贺卡： 之后呢，又写了其他一些有趣的功能，但好像不是这篇文章的重点； 再写信和创作电子贺卡是感慨万分，进入大学之后时间似乎变得十分快，感觉除了几个天天联系的好友之外，其他人都慢慢疏远了，不过这也是必然的事情，也没什么可悲伤的，只是感慨罢了。 怎么说，就这样吧，下次有时间再在这篇文章里更新。
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/59c8572a/index.html b/posts/59c8572a/index.html new file mode 100644 index 0000000..ef264d3 --- /dev/null +++ b/posts/59c8572a/index.html @@ -0,0 +1,565 @@ +搭建Owncloud并集成Onlyoffice | Bi's Blog + + + + + + + + + + + + + +

    搭建Owncloud并集成Onlyoffice

    发表于|更新于|技术
    |总字数:369|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    引言

    因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。

    +

    安装网盘

    建站

    在官网下载最新的安装包

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Owncloud
    +
    Owncloud
    +
    + +
    +
    +

    因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。

    +

    调优

      +
    1. 配置Redis缓存
      在1panel安装Redis，
      在config/config.php中添加
      2. +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    'filelocking.enabled' => true,
    'memcache.local' => '\OC\Memcache\Redis',
    'memcache.locking' => '\OC\Memcache\Redis',
    'redis' => [
        'host' => '容器名',  // For a Unix domain socket, use '/var/run/redis/redis.sock'
        'port' => 6379,         // Set to 0 when using a Unix socket
        'timeout' => 0,         // Optional, keep connection open forever
        'password' => 'password',       // Optional, if not defined no password will be used.
        'dbindex' => 0,         // Optional, if undefined SELECT will not run and will
                                // use Redis Server's default DB Index.
    ],
    +
      +
    1. 添加Cron任务
      首先在Owncloud的配置页面把计划任务调整为Cron。
      在1panel的计划任务中添加，容器选择php7.3的容器，用户必须为www-data，时间为每15分钟。
      2. +
    +
    1
    php sites/cloud.biss.click/index/occ system:cron
    +

    集成Onlyoffice

    在1panel应用商店直接安装Onlyoffice，并反向代理到自己的域名
    在Owncloud中搜索Onlyoffice插件，然后填写自己的域名、密钥（在参数中可以查到）

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/59c8572a/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    2025-08-13
    自定义导航栏
    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
    cover
    2025-08-14
    自定义页脚（新）
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    cover
    2025-08-12
    博客添加AI总结
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    cover
    2026-01-16
    在侧边栏添加日历和倒计时
    突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/5ed2f1e6/index.html b/posts/5ed2f1e6/index.html new file mode 100644 index 0000000..3b466fd --- /dev/null +++ b/posts/5ed2f1e6/index.html @@ -0,0 +1,567 @@ +在侧边栏添加日历和倒计时 | Bi's Blog + + + + + + + + + + + + + +

    在侧边栏添加日历和倒计时

    发表于|更新于|建站手札
    |总字数:2k|阅读时长:11分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）
    效果图：

    +
    效果图
    + +

    添加js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    document.addEventListener("DOMContentLoaded", () => {
        initializeCard();
    });

    document.addEventListener("pjax:complete", () => {
        initializeCard();
    });

    function initializeCard() {
        cardTimes();
        cardRefreshTimes();
    }

    let year, month, week, date, dates, weekStr, monthStr, asideTime, asideDay, asideDayNum, animalYear, ganzhiYear, lunarMon, lunarDay;
    const now = new Date();

    function cardRefreshTimes() {
        const e = document.getElementById("card-widget-schedule");
        if (e) {
            asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
            e.querySelector("#pBar_year").value = asideDay;
            e.querySelector("#p_span_year").innerHTML = (asideDay / 365 * 100).toFixed(1) + "%";
            e.querySelector(".schedule-r0 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(365 - asideDay).toFixed(0)} </a>天`;
            e.querySelector("#pBar_month").value = date;
            e.querySelector("#pBar_month").max = dates;
            e.querySelector("#p_span_month").innerHTML = (date / dates * 100).toFixed(1) + "%";
            e.querySelector(".schedule-r1 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(dates - date)} </a>天`;
            e.querySelector("#pBar_week").value = week === 0 ? 7 : week;
            e.querySelector("#p_span_week").innerHTML = ((week === 0 ? 7 : week) / 7 * 100).toFixed(1) + "%";
            e.querySelector(".schedule-r2 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(7 - (week === 0 ? 7 : week))} </a>天`;
        }
    }

    function cardTimes() {
        year = now.getFullYear();
        month = now.getMonth();
        week = now.getDay();
        date = now.getDate();

        const e = document.getElementById("card-widget-calendar");
        if (e) {
            const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
            weekStr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][week];
            const monthData = [
                { month: "1月", days: 31 },
                { month: "2月", days: isLeapYear ? 29 : 28 },
                { month: "3月", days: 31 },
                { month: "4月", days: 30 },
                { month: "5月", days: 31 },
                { month: "6月", days: 30 },
                { month: "7月", days: 31 },
                { month: "8月", days: 31 },
                { month: "9月", days: 30 },
                { month: "10月", days: 31 },
                { month: "11月", days: 30 },
                { month: "12月", days: 31 }
            ];
            monthStr = monthData[month].month;
            dates = monthData[month].days;

            const t = (week + 8 - date % 7) % 7;
            let n = "", d = false, s = 7 - t;
            const o = (dates - s) % 7 === 0 ? Math.floor((dates - s) / 7) + 1 : Math.floor((dates - s) / 7) + 2;
            const c = e.querySelector("#calendar-main");
            const l = e.querySelector("#calendar-date");

            l.style.fontSize = ["64px", "48px", "36px"][Math.min(o - 3, 2)];

            for (let i = 0; i < o; i++) {
                if (!c.querySelector(`.calendar-r${i}`)) {
                    c.innerHTML += `<div class='calendar-r${i}'></div>`;
                }
                for (let j = 0; j < 7; j++) {
                    if (i === 0 && j === t) {
                        n = 1;
                        d = true;
                    }
                    const r = n === date ? " class='now'" : "";
                    if (!c.querySelector(`.calendar-r${i} .calendar-d${j} a`)) {
                        c.querySelector(`.calendar-r${i}`).innerHTML += `<div class='calendar-d${j}'><a${r}>${n}</a></div>`;
                    }
                    if (n >= dates) {
                        n = "";
                        d = false;
                    }
                    if (d) {
                        n += 1;
                    }
                }
            }

            const lunarDate = chineseLunar.solarToLunar(new Date(year, month, date));
            animalYear = chineseLunar.format(lunarDate, "A");
            ganzhiYear = chineseLunar.format(lunarDate, "T").slice(0, -1);
            lunarMon = chineseLunar.format(lunarDate, "M");
            lunarDay = chineseLunar.format(lunarDate, "d");

            const newYearDate = new Date("2026/02/16 00:00:00");
            const daysUntilNewYear = Math.floor((newYearDate - now) / 1e3 / 60 / 60 / 24);
            asideTime = new Date(`${new Date().getFullYear()}/01/01 00:00:00`);
            asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
            asideDayNum = Math.floor(asideDay);
            const weekNum = week - asideDayNum % 7 >= 0 ? Math.ceil(asideDayNum / 7) : Math.ceil(asideDayNum / 7) + 1;

            e.querySelector("#calendar-week").innerHTML = `第${weekNum}周 ${weekStr}`;
            e.querySelector("#calendar-date").innerHTML = date.toString().padStart(2, "0");
            e.querySelector("#calendar-solar").innerHTML = `${year}年${monthStr} 第${asideDay.toFixed(0)}天`;
            e.querySelector("#calendar-lunar").innerHTML = `${ganzhiYear}${animalYear}年 ${lunarMon}${lunarDay}`;
            document.getElementById("schedule-days").innerHTML = daysUntilNewYear;
        }
    }
    + +

    添加css

    在主题文件 source/css/新建 calendar.css。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    /* 浅色主题变量覆盖 -------------------------------- */
    :root {
        --anzhiyu-main: #a0d2eb;               /* 主强调色：柔和天空蓝 */
        --anzhiyu-main-op: rgba(160, 210, 235, 0.6);
        --anzhiyu-main-op-deep: rgba(160, 210, 235, 0.4);
        --anzhiyu-main-op-light: rgba(160, 210, 235, 0.2);

        --efu-card-bg: #fdfdfd;                /* 卡片背景：几乎白 */
        --efu-fontcolor: #444;                 /* 主文本：深灰 */
        --efu-secondtext: #999;                /* 次级文本：浅灰 */
    }
    .card-widget {
        padding: 10px!important;
        max-height: calc(100vh - 100px);
    }
    .card-times a, .card-times div {
        color: var(--efu-fontcolor);
    }

    #card-widget-calendar .item-content {
        display: flex;
    }

    #calendar-area-left {
        width: 45%;
    }

    #calendar-area-right {
        width: 55%;
    }

    #calendar-area-left, #calendar-area-right {
        height: 100%;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #calendar-main {
        width: 100%;
    }

    #calendar-week {
        height: 1.2rem;
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 700;
        align-items: center;
        display: flex;
    }

    #calendar-date {
        height: 3rem;
        line-height: 1.3;
        font-size: 64px;
        letter-spacing: 3px;
        color: var(--anzhiyu-main);
        font-weight: 700;
        align-items: center;
        display: flex;
        position: relative;
        top: calc(50% - 2.1rem);
    }

    #calendar-lunar, #calendar-solar {
        height: 1rem;
        font-size: 12px;
        align-items: center;
        display: flex;
        position: absolute;
    }

    #calendar-solar {
        bottom: 2.1rem;
    }

    #calendar-lunar {
        bottom: 1rem;
        color: var(--efu-secondtext);
    }

    #calendar-main a {
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        font-size: 12px;
        line-height: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #calendar-main a.now {
        background: var(--anzhiyu-main);
        color: var(--efu-card-bg);
    }

    #calendar-main .calendar-rh a {
        color: var(--efu-secondtext);
    }

    .calendar-r0, .calendar-r1, .calendar-r2, .calendar-r3, .calendar-r4, .calendar-r5, .calendar-rh {
        height: 1.2rem;
        display: flex;
    }

    .calendar-d0, .calendar-d1, .calendar-d2, .calendar-d3, .calendar-d4, .calendar-d5, .calendar-d6 {
        width: calc(100% / 7);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #card-widget-schedule .item-content {
        display: flex;
    }

    #schedule-area-left, #schedule-area-right {
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #schedule-area-left {
        width: 30%;
    }

    #schedule-area-right {
        width: 70%;
        padding: 0 5px;
    }

    .schedule-r0, .schedule-r1, .schedule-r2 {
        height: 2rem;
        width: 100%;
        align-items: center;
        display: flex;
    }

    .schedule-d0 {
        width: 30px;
        margin-right: 5px;
        text-align: center;
        font-size: 12px;
    }

    .schedule-d1 {
        width: calc(100% - 35px);
        height: 1.5rem;
        align-items: center;
        display: flex;
    }

    progress::-webkit-progress-bar {
        background: linear-gradient(to right, var(--anzhiyu-main-op-deep), var(--anzhiyu-main-op), var(--anzhiyu-main-op-light));
        border-radius: 5px;
        overflow: hidden;
    }

    progress::-webkit-progress-value {
        background: var(--anzhiyu-main);
        border-radius: 5px;
    }

    .aside-span1, .aside-span2 {
        height: 1rem;
        font-size: 12px;
        z-index: 1;
        display: flex;
        align-items: center;
        position: absolute;
    }

    .aside-span1 {
        margin-left: 5px;
    }

    .aside-span2 {
        right: 20px;
        color: var(--efu-secondtext);
    }

    .aside-span2 a {
        margin: 0 3px;
    }

    #pBar_month, #pBar_week, #pBar_year {
        width: 100%;
        border-radius: 5px;
        height: 100%;
    }

    #schedule-date, #schedule-days, #schedule-title {
        display: flex;
        align-items: center;
    }

    #schedule-title {
        height: 25px;
        line-height: 1;
        font-size: 14px;
        font-weight: 700;
    }

    #schedule-days {
        height: 40px;
        line-height: 1;
        font-size: 30px;
        font-weight: 900;
        color: var(--anzhiyu-main);
    }

    #schedule-date {
        height: 20px;
        line-height: 1;
        font-size: 12px;
        color: var(--efu-secondtext);
    }
    + +

    引入

    新增+号后面内容

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    inject:
      head:
      # 自定义css
    +    - <link rel="stylesheet" href="/css/calendar.css">

      bottom:
      # 自定义js
    +    - <script src="/js/calendar.js"></script>
    +    - <script src="https://unpkg.com/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script>
    + +

    在 blogroot/source/_data 文件夹下创建 widget.yml 文件，并添加以下内容：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    bottom:
      - class_name: calendar
        id_name: card-widget-calendar
        name:
        icon:
        order: -1
        html: |
          <div id="calendar-area-left">
            <div id="calendar-week"></div>
            <div id="calendar-date" style="font-size: 48px;"></div>
            <div id="calendar-solar"></div>
            <div id="calendar-lunar"></div>
          </div>
          <div id="calendar-area-right">
            <div id="calendar-main">
            </div>
          </div>

      - class_name: schedule
        id_name: card-widget-schedule
        name:
        icon:
        order: -1
        html: |
          <div id="schedule-area-left">
            <div id="schedule-title">距离除夕</div>
            <div id="schedule-days"></div>
            <div id="schedule-date">2025-01-28</div>
          </div>
          <div id="schedule-area-right">
            <div class="schedule-r0">
              <div class="schedule-d0">本年</div>
              <div class="schedule-d1">
                <span id="p_span_year" class="aside-span1"></span>
                <span class="aside-span2">还剩<a></a>天</span>
                <progress max="365" id="pBar_year"></progress>
              </div>
            </div>
            <div class="schedule-r1">
              <div class="schedule-d0">本月</div>
              <div class="schedule-d1">
                <span id="p_span_month" class="aside-span1"></span>
                <span class="aside-span2">还剩<a></a>天</span>
                <progress max="30" id="pBar_month"></progress>
              </div>
            </div>
            <div class="schedule-r2">
              <div class="schedule-d0">本周</div>
              <div class="schedule-d1">
                <span id="p_span_week" class="aside-span1"></span>
                <span class="aside-span2">还剩<a></a>天</span>
                <progress max="7" id="pBar_week"></progress>
              </div>
            </div>
          </div>
    + +

    参考

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    乐活星球
    +
    lohas
    +
    + +
    +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/5ed2f1e6/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2026-02-10
    添加网站左上角菜单
    看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
    cover
    2025-08-12
    博客添加AI总结
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    cover
    2025-08-12
    利用插件自定义页脚菜单
    安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
    cover
    2025-08-26
    搭建Owncloud并集成Onlyoffice
    引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
    cover
    2025-08-12
    利用 SiteMap 随机访问站内页面
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    cover
    2025-08-14
    自定义页脚（新）
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/66e66374/index.html b/posts/66e66374/index.html new file mode 100644 index 0000000..7d7c274 --- /dev/null +++ b/posts/66e66374/index.html @@ -0,0 +1,548 @@ +Adguard和Openclash共存 | Bi's Blog + + + + + + + + + + + + + + + +

    Adguard和Openclash共存

    发表于|更新于|技术
    |总字数:119|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    在之前已经安装了Openwrt系统，并且也配置了OpenClash和AdguardHome，两者的原理简单看都是劫持DNS，所以两者要同时运行，必须经过一定的配置。
    无非就这两种方式:

    +
    image
    + +

    左边的方式更简单一些，只需要修改AdguardHome的上游DNS服务器为127.0.0.1:7874 即可；
    右边的方式需要将OpenClash里的DNS指向AdguardHome，但是可能有拦截失败的情况(好像没有遇到过)。

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/66e66374/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    OpenwrtAdguardHomeOpenclash
    相关推荐
    cover
    2025-09-28
    在Openwrt上安装AdguardHome
    接续前言，AdguardHome是一款广告拦截软件，有了一台小软路由后就开始折腾了。 安装首先要下载软件包，但是经过尝试，软件源里面的luci-app-adguardhome不太好用（也可能是我不会用） ，所以我用的下面的包： 🪧引用站外地址，不保证站点的可用性和安全性 luci-app-adguardhome rufengsuixing 虽然好几年没更新了，但还是能用。下载之后上传到路由器，使用opkg install命令安装，或者可以直接通过网页安装： 配置如下图所示进行操作，如果更新核心版本失败，考虑更换升级用的下载链接，使用镜像源，或者科学上网，错号框内的非必要不修改； 最后点击“保存并应用”，然后点击AdGuardHome Web:3000，进行安装，建议关闭路由器自带DNS/DHCP服务器，AdguardHome直接替代 然后，设置AdguardHome的DHCP服务器，注意要先检...
    cover
    2025-09-02
    在Openwrt中安装OpenClash
    前言因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。 安装可以通过web管理页面安装，搜索openclash。 当然也可以在终端中执行命令： 123opkg updateopkg install bash iptables dnsmasq-full curl ca-bundle ipset ip-full iptables-mod-tproxy iptables-mod-extra ruby ruby-yaml kmod-tun kmod-inet-diag unzip luci-compat luci luci-baseopkg install luci-app-openclash 配置首先需要下载内核，推荐启用Smart内核。 然后导入配置： 然后就可以开心使用啦！感觉zashboard简洁好看一些，看自己感觉啦
    cover
    2025-10-05
    Adguard规则分享
    众所周知，Adguardhome是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则： 一个综合的过滤规则 🪧引用站外地址，不保证站点的可用性和安全性 adblockfilters adblockfilters 广告过滤规则订阅中心 🪧引用站外地址，不保证站点的可用性和安全性 广告过滤规则订阅中心 广告过滤规则订阅中心 集成了许多规则，可以挑选一下加入。 这是我添加的规则，在这些规则下，用Adblocktester可以达到74分，基本够用
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/69b16001/index.html b/posts/69b16001/index.html new file mode 100644 index 0000000..cd61211 --- /dev/null +++ b/posts/69b16001/index.html @@ -0,0 +1,571 @@ +Adguard规则分享 | Bi's Blog + + + + + + + + + + + + + + +

    Adguard规则分享

    发表于|更新于|技术
    |总字数:157|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    众所周知，Adguardhome是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则：

    +
      +
    1. 一个综合的过滤规则
      +
      🪧引用站外地址，不保证站点的可用性和安全性
      +
      +
      +
      +
      adblockfilters
      +
      adblockfilters
      +
      + +
      +
      2. +
    2. 广告过滤规则订阅中心
      +
      🪧引用站外地址，不保证站点的可用性和安全性
      +
      +
      +
      +
      广告过滤规则订阅中心
      +
      广告过滤规则订阅中心
      +
      + +
      +
      + 集成了许多规则，可以挑选一下加入。
      3. +
    +
    image
    +这是我添加的规则，在这些规则下，用Adblocktester可以达到74分，基本够用 +
    image
    文章作者: biss
    文章链接: https://blog.biss.click/posts/69b16001/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    OpenwrtAdguardHome
    相关推荐
    cover
    2025-10-05
    Adguard和Openclash共存
    在之前已经安装了Openwrt系统，并且也配置了OpenClash和AdguardHome，两者的原理简单看都是劫持DNS，所以两者要同时运行，必须经过一定的配置。无非就这两种方式: 左边的方式更简单一些，只需要修改AdguardHome的上游DNS服务器为127.0.0.1:7874 即可；右边的方式需要将OpenClash里的DNS指向AdguardHome，但是可能有拦截失败的情况(好像没有遇到过)。
    cover
    2025-09-28
    在Openwrt上安装AdguardHome
    接续前言，AdguardHome是一款广告拦截软件，有了一台小软路由后就开始折腾了。 安装首先要下载软件包，但是经过尝试，软件源里面的luci-app-adguardhome不太好用（也可能是我不会用） ，所以我用的下面的包： 🪧引用站外地址，不保证站点的可用性和安全性 luci-app-adguardhome rufengsuixing 虽然好几年没更新了，但还是能用。下载之后上传到路由器，使用opkg install命令安装，或者可以直接通过网页安装： 配置如下图所示进行操作，如果更新核心版本失败，考虑更换升级用的下载链接，使用镜像源，或者科学上网，错号框内的非必要不修改； 最后点击“保存并应用”，然后点击AdGuardHome Web:3000，进行安装，建议关闭路由器自带DNS/DHCP服务器，AdguardHome直接替代 然后，设置AdguardHome的DHCP服务器，注意要先检...
    cover
    2025-09-02
    在Openwrt中安装OpenClash
    前言因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。 安装可以通过web管理页面安装，搜索openclash。 当然也可以在终端中执行命令： 123opkg updateopkg install bash iptables dnsmasq-full curl ca-bundle ipset ip-full iptables-mod-tproxy iptables-mod-extra ruby ruby-yaml kmod-tun kmod-inet-diag unzip luci-compat luci luci-baseopkg install luci-app-openclash 配置首先需要下载内核，推荐启用Smart内核。 然后导入配置： 然后就可以开心使用啦！感觉zashboard简洁好看一些，看自己感觉啦
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/6e5f5039/index.html b/posts/6e5f5039/index.html new file mode 100644 index 0000000..5da7d04 --- /dev/null +++ b/posts/6e5f5039/index.html @@ -0,0 +1,611 @@ +部署历程 | Bi's Blog + + + + + + + + + + + + + +

    部署历程

    发表于|更新于|建站手札
    |总字数:1.6k|阅读时长:5分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    前提条件

    在开始之前，请确保你已满足以下条件：

    +
      +
    • 服务器:
        +
      • 安装了 1Panel 面板的 Linux 服务器
        • +
      • 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。
        • +
      • 服务器上已安装 Git。
        • +
      +
      • +
    • 1Panel 配置:
      • +
    +

    已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。
    本地环境:

    +
      +
    • 你的电脑上已安装并配置好 Hexo 博客环境。
      • +
    • 你的电脑上已安装 Git。
      • +
    • 已安装 Hexo Git 部署插件：
      • +
    +
    1
    npm install hexo-deployer-git --save
    + +

    SSH 密钥认证 (关键):

    +
      +
    1. 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。
      2. +
    2. 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh/authorized_keys 文件中。这样可以确保 hexo deploy 时 Git PUSH 操作无需输入密码即可完成。
      配置步骤
      步骤一：在服务器上安装 Git
      如果你的服务器尚未安装 Git，请根据你的 Linux 发行版执行相应命令：
      3. +
    +

    Debian/Ubuntu:

    +
    1
    2
    sudo apt-get update
    sudo apt-get install git -y
    + +

    Fedora/RedHat/CentOS:

    +
    1
    sudo yum install git -y
    + +

    步骤二：在服务器上创建 Git 裸仓库 (Bare Repository)
    我们需要在服务器上创建一个 Git “裸仓库”。裸仓库不包含工作目录（即你看不到项目文件），只存储 Git 的版本历史和对象数据，非常适合作为中心仓库或中转仓库。

    +

    创建仓库目录:
    选择一个路径来存放你的 Git 仓库。例如，我们选择放在 /root/git/ 目录下（你可以自定义路径）。

    +

    创建目录 (如果父目录不存在，也一并创建)

    1
    mkdir -p /root/git/
    + +

    修改目录权限 (可选但推荐):
    如果你不是一直使用 root 用户，或者希望更精细地控制权限，可以修改目录所有者和权限。如果使用 root，此步通常可以跳过。

    +

    将目录所有者改为当前用户 (如果用 root 执行，则为 root)

    +
    1
    chown -R USER:USER:USER /root/git/
    + +

    设置权限 (所有者完全控制，同组用户读取执行，其他用户读取执行)

    +
    1
    chmod -R 755 /root/git/
    + +

    初始化裸仓库:
    进入你选择的目录，并初始化一个裸仓库。我们将仓库命名为 blog.git (你也可以自定义)。

    +
    1
    2
    cd /root/git
    git init --bare blog.git
    + +

    执行后，你会在 /root/git/ 目录下看到一个名为 blog.git 的文件夹。

    +

    步骤三：在服务器上配置 Git 钩子 (post-receive)
    Git 钩子是在 Git 操作过程中的特定时间点自动执行的脚本。post-receive 钩子在服务器成功接收到推送 (push) 后执行。我们将利用这个钩子将推送过来的 Hexo 文件检出 (checkout) 到 1Panel 的网站根目录。

    +

    创建钩子文件:
    进入裸仓库的 hooks 目录，并创建一个名为 post-receive 的文件。

    +
    1
    vim /root/git/blog.git/hooks/post-receive
    + +

    编辑钩子内容:
    在 vim 编辑器中，按 i 进入插入模式，然后粘贴以下脚本内容：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #!/bin/bash
    # 指定 Hexo 网站文件存放的目录 (!!!!务必替换为你的 1Panel 网站实际根目录!!!!)
    WORK_TREE="/opt/1panel/apps/openresty/openresty/www/sites/blog/index" 
    # 指定 Git 裸仓库的路径 (!!!!务必替换为你的裸仓库实际路径!!!!)
    GIT_DIR="/root/git/blog.git"

    # 执行 Git checkout 命令，强制将内容检出到工作目录
    git --work-tree=${WORK_TREE} --git-dir=${GIT_DIR} checkout -f

    echo "Hexo blog deployed to ${WORK_TREE}"
    + +

    可选的提交信息

    请务必修改:

    +

    root: 替换为你配置了 SSH 免密登录的服务器用户名。
    YOUR_SERVER_IP: 替换为你的服务器公网 IP 地址或域名。
    22: 如果你的 SSH 端口不是默认的 22，请修改。
    /root/git/blog.git: 替换为你在服务器上创建的裸仓库的 绝对路径。
    branch: 确保这个分支名 (main 或 master) 与你的 post-receive 钩子期望检出的分支一致（默认情况下 checkout -f 会检出仓库的 HEAD 指向的分支，通常是 master 或 main）。
    步骤五：部署你的 Hexo 博客
    一切配置完成后，部署就非常简单了：

    +

    在本地 Hexo 项目目录下，执行标准的生成和部署命令：

    +
    1
    hexo clean && hexo generate && hexo deploy
    + +

    或者直接：

    +
    1
    hexo d
    + +

    工作流程:

    +

    hexo g 生成静态文件到 public 目录。
    hexo d 使用 hexo-deployer-git 插件：
    将 public 目录的内容提交到一个临时 Git 分支。
    通过 SSH 将这个分支强制推送到你配置的服务器裸仓库 (ssh://root@YOUR_SERVER_IP:22/root/git/blog.git)。
    服务器上的 Git 仓库接收到推送后，自动触发 post-receive 钩子脚本。
    钩子脚本执行 git checkout -f，将最新的网站文件强制检出（部署）到 1Panel 网站的根目录 (/opt/1panel/apps/openresty/openresty/www/sites/blog/index)。
    验证:
    部署命令执行成功后，稍等片刻，然后访问你的博客域名 (http://blog.yourdomain.com 或 https://blog.yourdomain.com)，应该就能看到更新后的内容了。

    +

    故障排除提示

      +
    • 权限问题: 检查服务器上 Git 仓库目录、网站根目录以及钩子文件的权限是否正确。钩子脚本需要有权限写入网站根目录。
      • +
    • SSH 密钥问题: 确保本地 SSH 公钥已正确添加到服务器的 authorized_keys 文件中，并且本地 SSH 私钥可用。尝试手动 ssh root@YOUR_SERVER_IP 看是否能免密登录。
      • +
    • 路径错误: 仔细核对 post-receive 脚本中的 –work-tree 和 –git-dir 路径，以及本地 _config.yml 中的 repo 路径是否完全正确。
      • +
    • 钩子未执行: 检查钩子文件是否有执行权限 (chmod +x)，文件名是否精确为 post-receive (没有扩展名)。
      • +
    • 查看日志: 如果部署失败，可以尝试在服务器上查看 SSH 或 Git 相关日志，或者在钩子脚本中添加一些 echo 输出到日志文件来调试。
      • +
    • 通过以上配置，你就实现了一个高效、自动化的 Hexo 博客部署流程！
      • +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/6e5f5039/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-26
    搭建Owncloud并集成Onlyoffice
    引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    cover
    2025-08-10
    配置说说页面
    又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
    cover
    2025-08-12
    利用插件自定义页脚菜单
    安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
    cover
    2026-01-16
    在侧边栏添加日历和倒计时
    突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
    cover
    2025-08-25
    为博客添加CMS系统
    序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/7e921903/index.html b/posts/7e921903/index.html new file mode 100644 index 0000000..e3c639e --- /dev/null +++ b/posts/7e921903/index.html @@ -0,0 +1,567 @@ +添加网站左上角菜单 | Bi's Blog + + + + + + + + + + + + + +

    添加网站左上角菜单

    发表于|更新于|建站手札
    |总字数:1.2k|阅读时长:6分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    liushen
    +
    liushen
    +
    + +
    +
    + +

    预计做好后是这种效果：

    +

    示意图

    +

    首先，修改\themes\butterfly\layout\includes\header\nav.pug:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    nav#nav
      //- 左侧区域：包含指纹菜单和网站名
      span#blog-info
        #ls-menu-container
          i.fas.fa-fingerprint
          #ls-menu-panel
            .ls-section
              .ls-title 😀 个人网站
              .ls-grid
                a(href="/") #[i.fas.fa-rss] 个人博客
                a(href="https://github.com/bishshi") #[i.fab.fa-github] Github
            .ls-section
              .ls-title 😎 常用服务
              .ls-grid
                a(href="https://git.biss.click/biss") #[i.fas.fa-code] 代码仓库
                a(href="https://mm.biss.click") #[i.fas.fa-pen-nib] 日常yy
                a(href="https://statstic.biss.click") #[i.fas.fa-users] 访客统计
                a(href="https://pic.biss.click") #[i.fas.fa-image] 图床
                a(href="https://chat.biss.click") #[i.fas.fa-robot] AI网站
            .ls-section
              .ls-title 🛸 实用工具
              .ls-grid
                a(href="https://cover.biss.click") #[i.fas.fa-palette] 封面设计

        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

      //- 中间区域：关键！必须在 nav 下一级，以便 JS 切换类名
      if globalPageType === 'post' && theme.nav.display_post_title
        a.nav-page-title(href='javascript:void(0);' onclick='btf.scrollToDest(0, 500)')
          span.site-name=(page.title || config.title)

      //- 右侧区域
      #nav-right
        if theme.menu
          #menus
            != partial('includes/header/menu_item', {}, {cache: true})
        
        if theme.search.use || true
          #random-post-button
            a.site-page.social-icon#random-post-link(href='javascript:void(0);' onclick='randomPost()')
              i.fas.fa-solid.fa-shuffle
          #search-button
            a.site-page.social-icon.search-typesense-trigger
              i.fas.fa-search.fa-fw
          #toggle-menu
            span.site-page
              i.fas.fa-bars.fa-fw
    + +

    在合适的目录下新建nav.css（例如\themes\butterfly\source\css\nav.css），这份css是磨砂玻璃的样式:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    #nav-right{
      flex:1 1 auto;
      justify-content: flex-end;
      margin-left: auto;
      display: flex;
      flex-wrap:nowrap;
    }
      
    /* 导航栏居中 */

    #sidebar #sidebar-menus .menus_items .menus_item {
        margin: 10px 0;
    }
    #sidebar #sidebar-menus .menus_items a.site-page {
        padding-left: 0;
    }
    #sidebar #sidebar-menus .menus_items .site-page {
        position: relative;
        display: block;
        padding: 6px 30px 6px 22px;
        color: var(--font-color);
        font-size: 1.15em;
        border: var(--style-border-always);
        background: var(--icat-card-bg);
        font-size: 14px;
        border-radius: 12px;
    }
    #sidebar #sidebar-menus .menus_items .site-page i:first-child {
        text-align: left;
        padding-left: 10px;
    }

    #nav #menus {
        display: flex;
        justify-content: center;
        width: 100%;
        position: absolute;
        left: 0;
        margin: 0;
        transform: translateZ(0);
    }
    #nav #blog-info {
        flex-wrap: nowrap;
        display: flex;
        align-items: center;
        z-index: 102;
        max-width: fit-content;
    }
    @media screen and (max-width: 900px) {
        #nav {
            padding: 0 15px;
        }
        #nav-group {
            padding: 0 0.2rem;
        }
        #rightside {
            right: -42px;
        }
    }
    /* IPAD菜单栏调整 */

    /* 1. 容器溢出穿透 */
    #nav, #blog-info, #nav-group {
      overflow: visible !important;
    }

    #ls-menu-container {
      position: relative !important;
      display: inline-flex !important;
      align-items: center;
      height: 100%;
      padding: 0 15px;
      cursor: pointer !important;
      z-index: 2000 !important;
    }

    /* 2. 悬浮面板：宽大且高不透明度 */
    #ls-menu-panel {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      margin-top: 15px !important;
      width: 420px; 
      padding: 24px;
      border-radius: 18px;
      
      /* 高不透明度磨砂玻璃 (0.9) */
      background: rgba(255, 255, 255, 0.95) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;

      opacity: 0 !important;
      visibility: hidden !important;
      transform: translateY(12px) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      z-index: 999999 !important;
      cursor: default;
    }

    /* 3. 透明感应桥梁 */
    #ls-menu-panel::before {
      content: "";
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      height: 25px;
      background: transparent !important;
    }

    /* 4. 触发效果 */
    #ls-menu-container:hover #ls-menu-panel {
      opacity: 1 !important;
      visibility: visible !important;
      transform: translateY(0) !important;
    }

    #ls-menu-container:hover i.fa-fingerprint {
      color: #49b1f5;
      transform: scale(1.1);
    }

    /* 5. 内部网格：保持两列 */
    .ls-section { margin-bottom: 22px; }
    .ls-section:last-child { margin-bottom: 0; }
    .ls-title { 
      color: #333; 
      font-weight: 800; 
      font-size: 15px; 
      margin-bottom: 12px; 
      opacity: 0.9;
    }

    .ls-grid { 
      display: grid !important; 
      grid-template-columns: repeat(2, 1fr); /* 恢复为两列 */
      gap: 10px; 
    }

    .ls-grid a { 
      color: #444 !important; 
      font-size: 14px !important; 
      padding: 10px 12px; 
      border-radius: 12px;
      display: flex;
      align-items: center;
      transition: all 0.2s ease;
      background: rgba(0, 0, 0, 0.02);
    }

    .ls-grid a:hover { 
      background: #49b1f5 !important; 
      color: #fff !important; 
      transform: translateX(4px); /* 悬停时轻微右移，增加动感 */
    }

    .ls-grid a i { 
      margin-right: 12px; 
      width: 20px; 
      text-align: center; 
      font-size: 15px;
    }

    /* 6. 深色模式适配 */
    [data-theme='dark'] #ls-menu-panel {
      background: rgba(30, 30, 30, 0.95) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
    }
    [data-theme='dark'] .ls-title { color: #eee; }
    [data-theme='dark'] .ls-grid a { 
      color: #ccc !important; 
      background: rgba(255, 255, 255, 0.05); 
    }

    #nav.show-title .nav-page-title {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      white-space: nowrap !important;
      z-index: 1000 !important;
    }

    #nav.show-title #menus,
    #nav.show-title .nav-site-title {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    #nav .nav-page-title {
      display: none; 
      transition: opacity 0.3s ease;
    }

    #nav #blog-info {
      overflow: visible !important;
    }
    + +

    然后在_config.butterfly.yml里面引用该css

    +
    1
    - <link rel="stylesheet" href="/css/nav.css">
    + +

    然后重新构建应该就可以看到效果了。

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/7e921903/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-11
    自定义右键菜单
    演示本站右键即可查看,和原有菜单相比比较美观 新建pug文件在 \themes\butterfly\layout\includes新建 rightmenu.pug 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475#rightMenu.js-pjax .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.history.forward();") i.fa.fa-arrow-right ...
    cover
    2025-08-14
    自定义页脚（新）
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    2025-08-13
    自定义导航栏
    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    cover
    2025-08-25
    为博客添加CMS系统
    序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/8802e397/index.html b/posts/8802e397/index.html new file mode 100644 index 0000000..4573887 --- /dev/null +++ b/posts/8802e397/index.html @@ -0,0 +1,581 @@ +Cudy TR3000刷入Openwrt系统 | Bi's Blog + + + + + + + + + + + + + +

    Cudy TR3000刷入Openwrt系统

    发表于|更新于|技术
    |总字数:183|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    最近搞到了一台Cudy-TR3000路由器，用来进行科学上网（小猫咪），先记录一下刷写Openwrt系统的过程。

    +

    下载固件

      +
    1. 中间固件
      中间固件可以在Cudy官方网站上下载
      2. +
    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Cudy固件下载
    +
    Cudy
    +
    + +
    +
    + +
    image
    +2. Openwrt固件 +在下面的网站中下载，下载最新的就行 + +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Openwrt固件
    +
    Openwrt.ai
    +
    + +
    +
    + +

    刷写固件

    访问192.168.10.1先刷入中间固件

    +
    image
    + +

    然后访问192.168.1.1，刷入Openwrt插件

    +
    image
    + +

    然后访问10.0.0.1，就可以看到openwrt登录页面了,默认密码是root。

    +
    image
    文章作者: biss
    文章链接: https://blog.biss.click/posts/8802e397/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    Cudy-TR3000
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/8bdb35fb/index.html b/posts/8bdb35fb/index.html new file mode 100644 index 0000000..f0079c4 --- /dev/null +++ b/posts/8bdb35fb/index.html @@ -0,0 +1,552 @@ +自定义右键菜单 | Bi's Blog + + + + + + + + + + + + + +

    自定义右键菜单

    发表于|更新于|建站手札
    |总字数:2.4k|阅读时长:13分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    演示

    本站右键即可查看,和原有菜单相比比较美观

    +

    新建pug文件

    在 \themes\butterfly\layout\includes新建 rightmenu.pug

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    #rightMenu.js-pjax
        .rightMenu-group.rightMenu-small
            a.rightMenu-item(href="javascript:window.history.back();")
                i.fa.fa-arrow-left
            a.rightMenu-item(href="javascript:window.history.forward();")
                i.fa.fa-arrow-right
            a.rightMenu-item(href="javascript:window.location.reload();")
                i.fa.fa-refresh
            a.rightMenu-item(href="javascript:window.scrollTo(0, 0);")
                i.fa.fa-arrow-up
        .rightMenu-group.rightMenu-line.hide#menu-text
            a.rightMenu-item(href="javascript:rmf.copySelect();")
                i.fa.fa-copy
                span='复制'
            a.rightMenu-item(href="javascript:rmf.searchinThisPage();")
                i.fas.fa-search
                span='站内搜索'
        .rightMenu-group.rightMenu-line.hide#menu-too
            a.rightMenu-item(href="javascript:window.open(window.getSelection().toString());window.location.reload();")
                i.fa.fa-link
                span='转到链接'
        .rightMenu-group.rightMenu-line.hide#menu-paste
            a.rightMenu-item(href='javascript:rmf.paste()')
                i.fa.fa-copy
                span='粘贴'
        .rightMenu-group.rightMenu-line.hide#menu-post
            a.rightMenu-item(href="javascript:rmf.copyWordsLink()")
                i.fa.fa-link
                span='复制本文地址'
        .rightMenu-group.rightMenu-line.hide#menu-to
            a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
                i.fa.fa-window-restore
                span='新窗口打开'
            a.rightMenu-item(href="javascript:rmf.open()")
                i.fa.fa-link
                span='转到链接'
            a.rightMenu-item(href="javascript:rmf.copyLink()")
                i.fa.fa-copy
                span='复制链接'
        .rightMenu-group.rightMenu-line.hide#menu-img
            a.rightMenu-item(href="javascript:rmf.saveAs()")
                i.fa.fa-download
                span='保存图片'
            a.rightMenu-item(href="javascript:rmf.openWithNewTab()")
                i.fa.fa-window-restore
                span='在新窗口打开'
            a.rightMenu-item(href="javascript:rmf.click()")
                i.fa.fa-arrows-alt
                span='全屏显示'
            a.rightMenu-item(href="javascript:rmf.copyLink()")
                i.fa.fa-copy
                span='复制图片链接'
        .rightMenu-group.rightMenu-line
            a.rightMenu-item(href="javascript:randomPost()")
                i.fa.fa-paper-plane
                span='随便逛逛'
            a.rightMenu-item(href="javascript:rmf.switchDarkMode();")
                i.fa.fa-moon
                span='昼夜切换'
            a.rightMenu-item(href="javascript:rmf.translate();")
                i.iconfont.icon-fanti
                span='繁简转换'
            if is_post()||is_page()
                a.rightMenu-item(href="javascript:rmf.switchReadMode();")
                    i.fa.fa-book
                    span='阅读模式'
            a.rightMenu-item(href="javascript:pjax.loadUrl(\"/privacy/\");")
                i.fa.fa-info-circle
                span='隐私声明'
            a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cookie/\");")
                i.fa.fa-info-circle
                span='Cookie协议'
            a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cc/\");")
                i.fa.fa-info-circle
                span='版权声明'
    + +

    新建js文件

    创建 \themes\butterfly\source\js\rightmenu.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    function setMask() {//设置遮罩层
        if (document.getElementsByClassName("rmMask")[0] !== undefined) {
            return document.getElementsByClassName("rmMask")[0];
        }
        mask = document.createElement('div');
        mask.className = "rmMask";
        mask.style.width = window.innerWidth + 'px';
        mask.style.height = window.innerHeight + 'px';
        mask.style.background = '#fff';
        mask.style.opacity = '.0';
        mask.style.position = 'fixed';
        mask.style.top = '0';
        mask.style.left = '0';
        mask.style.zIndex = 998;
        document.body.appendChild(mask);
        document.getElementById("rightMenu").style.zIndex = 19198;
        return mask;
    }

    function insertAtCursor(myField, myValue) {

        //IE 浏览器
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        }

        //FireFox、Chrome等
        else if (myField.selectionStart || myField.selectionStart === '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;

            // 保存滚动条
            var restoreTop = myField.scrollTop;
            myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);

            if (restoreTop > 0) {
                myField.scrollTop = restoreTop;
            }

            myField.focus();
            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }

    let rmf = {};
    rmf.showRightMenu = function (isTrue, x = 0, y = 0) {
        let $rightMenu = $('#rightMenu');
        $rightMenu.css('top', x + 'px').css('left', y + 'px');

        if (isTrue) {
            $rightMenu.show();
        } else {
            $rightMenu.hide();
        }
    }
    rmf.switchDarkMode = function () {
        const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
        if (nowMode === 'light') {
            activateDarkMode()
            saveToLocal.set('theme', 'dark', 2)
            GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
        } else {
            activateLightMode()
            saveToLocal.set('theme', 'light', 2)
            GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
        }
        // handle some cases
        typeof utterancesTheme === 'function' && utterancesTheme()
        typeof FB === 'object' && window.loadFBComment()
        window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
        switchPostChart();
    };

    rmf.copyWordsLink = function () {
        const decodedUrl = decodeURIComponent(window.location.href); // 解码 URL
        navigator.clipboard.writeText(decodedUrl)
            .then(() => {
                Snackbar.show({
                    text: '链接复制成功！快去分享吧！',
                    pos: 'top-right',
                    showAction: false
                });
            })
    };

    rmf.switchReadMode = function () {
        const $body = document.body
        $body.classList.add('read-mode')
        const newEle = document.createElement('button')
        newEle.type = 'button'
        newEle.className = 'fas fa-sign-out-alt exit-readmode'
        $body.appendChild(newEle)

        function clickFn() {
            $body.classList.remove('read-mode')
            newEle.remove()
            newEle.removeEventListener('click', clickFn)
        }

        newEle.addEventListener('click', clickFn)
    }

    //复制选中文字
    rmf.copySelect = function () {
        navigator.clipboard.writeText(document.getSelection().toString()).then(() => {
            Snackbar.show({
                text: '已复制选中文字！',
                pos: 'top-right',
                showAction: false,
            });
        });
    }

    //回到顶部
    rmf.scrollToTop = function () {
        document.getElementsByClassName("menus_items")[1].setAttribute("style", "");
        document.getElementById("name-container").setAttribute("style", "display:none");
        btf.scrollToDest(0, 500);
    }
    rmf.translate = function () {
        document.getElementById("translateLink").click();
    }
    rmf.searchinThisPage = () => {
        let mask = setMask(); // 确保 mask 元素存在于 document.body 中
        document.getElementsByClassName("local-search-box--input")[0].value = window.getSelection().toString();
        document.getElementsByClassName("search")[0].click();
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("input", false, false);
        document.getElementsByClassName("local-search-box--input")[0].dispatchEvent(evt);

        // 在尝试移除 mask 元素之前检查它是否存在于 document.body 中
        if (document.body.contains(mask)) {
            document.body.removeChild(mask);
        }
    }

    document.body.addEventListener('touchmove', function (e) {

    }, {passive: false});

    function popupMenu() {
        //window.oncontextmenu=function(){return false;}
        window.oncontextmenu = function (event) {
            Snackbar.show({
                text: '按住 Ctrl 再点击右键，即可恢复原界面哦',
                pos: 'bottom-left',
                showAction: false
            });
            if (event.ctrlKey || document.body.clientWidth < 900) return true;
            $('.rightMenu-group.hide').hide();
            if (document.getSelection().toString()) {
                $('#menu-text').show();
            }
            if (document.getElementById('post')) {
                $('#menu-post').show();
            } else {
                if (document.getElementById('page')) {
                    $('#menu-post').show();
                }
            }
            var el = window.document.body;
            el = event.target;
            var a = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:\/?#[\]@!$&'*+,;=]+$/
            if (a.test(window.getSelection().toString()) && el.tagName !== "A") {
                $('#menu-too').show()
            }
            if (el.tagName === 'A') {
                $('#menu-to').show()
                rmf.open = function () {
                    if (el.href.indexOf("http://") === -1 && el.href.indexOf("https://") === -1 || el.href.indexOf("blog.june-pj.cn") !== -1) {
                        pjax.loadUrl(el.href)
                    } else {
                        location.href = el.href
                    }
                }
                rmf.openWithNewTab = function () {
                    window.open(el.href);
                    // window.location.reload();
                }
                rmf.copyLink = function () {
                    const url = el.href;
                    navigator.clipboard.writeText(url);
                    Snackbar.show({
                        text: '链接复制成功！快去分享吧！',
                        pos: 'top-right',
                        showAction: false
                    });
                };
            }
            if (el.tagName === 'IMG') {
                $('#menu-img').show()
                rmf.openWithNewTab = function () {
                    window.open(el.src);
                    // window.location.reload();
                }
                rmf.click = function () {
                    el.click()
                }
                rmf.copyLink = function () {
                    const url = el.src
                    navigator.clipboard.writeText(url);
                    Snackbar.show({
                        text: '链接复制成功！快去分享吧！',
                        pos: 'top-right',
                        showAction: false
                    });
                }
                rmf.saveAs = function () {
                    var a = document.createElement('a');
                    a.href = el.src;
                     // 获取图片的文件名部分
                    a.download = el.src.split('/').pop(); // 使用图片的文件名作为下载文件名
                    a.style.display = 'none'; // 隐藏下载链接
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            } else if (el.tagName === "TEXTAREA" || el.tagName === "INPUT") {
                $('#menu-paste').show();
                // rmf.paste=function(){
                //     input.addEventListener('paste', async event => {
                //         event.preventDefault();
                //         const text = await navigator.clipboard.readText();
                //         el.value+=text;
                //       });
                // }
                rmf.paste = function () {
                    navigator.permissions
                        .query({
                            name: 'clipboard-read'
                        })
                        .then(result => {
                            if (result.state === 'granted' || result.state === 'prompt') {
                                //读取剪贴板
                                navigator.clipboard.readText().then(text => {
                                    console.log(text)
                                    insertAtCursor(el, text)
                                })
                            } else {
                                Snackbar.show({
                                    text: '请允许读取剪贴板！',
                                    pos: 'top-center',
                                    showAction: false,
                                })
                            }
                        })
                }
            }
            let pageX = event.clientX + 10;
            let pageY = event.clientY;
            let rmWidth = $('#rightMenu').width();
            let rmHeight = $('#rightMenu').height();
            if (pageX + rmWidth > window.innerWidth) {
                pageX -= rmWidth + 10;
            }
            if (pageY + rmHeight > window.innerHeight) {
                pageY -= pageY + rmHeight - window.innerHeight;
            }
            mask = setMask();
            window.onscroll = () => {
                rmf.showRightMenu(false);
                window.onscroll = () => {
                }
                if (document.body.contains(mask)) {
                    document.body.removeChild(mask);
                }
            }

            $(".rightMenu-item").click(() => {
                if (document.body.contains(mask)) {
                    document.body.removeChild(mask);
                }
            });

            $(window).resize(() => {
                rmf.showRightMenu(false);
                if (document.body.contains(mask)) {
                    document.body.removeChild(mask);
                }
            });

            mask.onclick = () => {
                if (document.body.contains(mask)) {
                    document.body.removeChild(mask);
                }
            };

            rmf.showRightMenu(true, pageY, pageX);
            return false;
        };

        window.addEventListener('click', function () {
            rmf.showRightMenu(false);
        });
    }

    if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        popupMenu()
    }
    const box = document.documentElement

    function addLongtabListener(target, callback) {
        let timer = 0 // 初始化timer

        target.ontouchstart = () => {
            timer = 0 // 重置timer
            timer = setTimeout(() => {
                callback();
                timer = 0
            }, 380) // 超时器能成功执行，说明是长按
        }

        target.ontouchmove = () => {
            clearTimeout(timer) // 如果来到这里，说明是滑动
            timer = 0
        }

        target.ontouchend = () => { // 到这里如果timer有值，说明此触摸时间不足380ms，是点击
            if (timer) {
                clearTimeout(timer)
            }
        }
    }

    addLongtabListener(box, popupMenu)
    + +

    创建css

    创建 \themes\butterfly\source\css\rightmenu.css

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    /* rightMenu */
    [data-theme='light'] #rightMenu{
        display: none;
        position: fixed;
        width: 160px;
        height: fit-content;
        top: 10%;
        left: 10%;
        background-color: var(--card-bg);
        border: 1px solid rgb(210,210,210);;
        border-radius: 8px;
        z-index: 100;
        box-shadow: 3px 3px 5px #88888894;
        background-color: var(--june-white-acrylic1);
        backdrop-filter: blur(30px);
    }
    [data-theme='dark'] #rightMenu{
        display: none;
        position: fixed;
        width: 160px;
        height: fit-content;
        top: 10%;
        left: 10%;
        background-color: var(--card-bg);
        border: 1px solid rgb(210,210,210);;
        border-radius: 8px;
        z-index: 100;
        box-shadow: 3px 3px 5px #88888894;
        background-color: var(--june-black-acrylic1);
        backdrop-filter: blur(30px);
    }
    #rightMenu .rightMenu-group{
        padding: 7px 6px;
    }
    #rightMenu .rightMenu-group:not(:nth-last-child(1)){
        border-bottom: 1px solid rgb(180,180,180);
    }
    #rightMenu .rightMenu-group.rightMenu-small{
        display: flex;
        justify-content: space-between;
    }
    #rightMenu .rightMenu-group .rightMenu-item{
        height: 30px;
        line-height: 30px;
        border-radius: 8px;
        transition: 0.3s;
        color: var(--font-color);
    }
    #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{
        display: flex;
        height: 40px;
        line-height: 40px;
        padding: 0 4px;
    }
    #rightMenu .rightMenu-group .rightMenu-item:hover{
        background-color: var(--text-bg-hover);
        box-shadow: 0px 0px 5px var(--june-border);
    }
    #rightMenu .rightMenu-group .rightMenu-item i{
        display: inline-block;
        text-align: center;
        line-height: 30px;
        width: 30px;
        height: 30px;
        padding: 0 5px;
    }
    #rightMenu .rightMenu-group .rightMenu-item span{
        line-height: 30px;
    }
    #rightMenu:hover{
        border: 1px solid var(--june-theme);
    }
    #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item *{
        height: 40px;
        line-height: 40px;
    }
    .rightMenu-group.hide{
        display: none;
    }
    .rightMenu-item:hover{
        color:white!important;
        background-color:var(--june-theme)!important;
    }
    + +

    引入

    1
    2
    - <script type="text/javascript" src="/js/rightmenu.js"></script>
    - <link rel="stylesheet" href="/css/rightmenu.css">
    文章作者: biss
    文章链接: https://blog.biss.click/posts/8bdb35fb/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-10
    配置说说页面
    又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
    cover
    2025-08-12
    博客添加AI总结
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    cover
    2025-08-14
    自定义页脚（新）
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    cover
    2025-08-12
    利用 SiteMap 随机访问站内页面
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    2025-08-13
    自定义导航栏
    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/a31d95d9/index.html b/posts/a31d95d9/index.html new file mode 100644 index 0000000..5fd8bf8 --- /dev/null +++ b/posts/a31d95d9/index.html @@ -0,0 +1,548 @@ +和朋友们的故事 | Bi's Blog + + + + + + + + + + + + + +

    和朋友们的故事

    发表于|更新于|杂谈
    |总字数:381|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    最近一直忙于学习（虽然也没怎么好好学），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。
    因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年开始就断断续续地给朋友们写信，这是一些挂号信收据：

    +
    一些挂号信收据
    +这应该是去年上半年的一张图片，下半年也在零散的发，只不过下半年比较忙，没发多少。到年底的时候呢又想着写一点贺年信，当然感觉自己的水平下降，写不出什么好的文章。于是开始着手准备电子版贺卡，当然完全使用了AI工具，自己写太麻烦，也没什么精力去写，于是就有了下面的电子贺卡： +
    电子贺卡
    +之后呢，又写了其他一些有趣的功能，但好像不是这篇文章的重点； +再写信和创作电子贺卡是感慨万分，进入大学之后时间似乎变得十分快，感觉除了几个天天联系的好友之外，其他人都慢慢疏远了，不过这也是必然的事情，也没什么可悲伤的，只是感慨罢了。 +怎么说，就这样吧，下次有时间再在这篇文章里更新。
    文章作者: biss
    文章链接: https://blog.biss.click/posts/a31d95d9/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    生活
    相关推荐
    2026-02-14
    新年快乐！
    各位亲朋好友、合作伙伴及屏幕前的你： 值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下： 一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。 二、请各有关人员在收到本通知后，务必在下方留言区留下你的新年愿望，由后台系统统一收集并祝愿其实现。 三、祝大家在新的一年里，身体健康，万事如意，所得皆所愿，所行化坦途！
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/a6ab0925/index.html b/posts/a6ab0925/index.html new file mode 100644 index 0000000..e348dd4 --- /dev/null +++ b/posts/a6ab0925/index.html @@ -0,0 +1,699 @@ +利用插件自定义页脚菜单 | Bi's Blog + + + + + + + + + + + + + +

    利用插件自定义页脚菜单

    发表于|更新于|建站手札
    |总字数:1.3k|阅读时长:5分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    安装

    安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

    +
    1
    npm install hexo-butterfly-footer-marcus --save
    + +

    如果需要随机友链接的话,再运行以下指令：

    +
    1
    npm i yamljs --save
    + +

    添加配置信息

    以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    #hexo-butterfly-footer-marcus
    #see https://blog.marcus233.top/p/footer.html
    footer_beautify:
      enable: true
      priority: 5 #过滤器优先权
      enable_page: all # 应用页面
      layout: # 挂载容器类型
          type: id
          name: footer
          index: 1
      footer_icons:
        enable: true
        left:
          - icon: fa-solid fa-compass
            link: https://www.marcus233.top/
            desrc: 个人主页
            class: out
          - icon: fa-brands fa-qq
            link: https://res.abeim.cn/api/qq/?qq=3105950984
            desrc: 联系QQ
            class: out
          - icon: fa-brands fa-weixin
            link: /wechat/
            desrc: 联系微信
            class: in
          - icon: fa-solid fa-envelope
            link: mailto:marcus@marcus233.top
            desrc: 发送邮件
            class: out
        right:
          - icon: fa-brands fa-github
            link: https://github.com/Marcusyyds
            desrc: Github主页
            class: out
          - icon: fa-brands fa-bilibili
            link: https://space.bilibili.com/1024450661
            desrc: 哔哩哔哩主页
            class: out
          - icon: fa-solid fa-star
            link: /stars/
            desrc: 藏宝阁
            class: in
          - icon: fa-solid fa-comment
            link: /message/
            desrc: 留言
            class: in
      footer_logo:
        enable: true
        url: https://img01.anheyu.com/useruploads/8/2022/12/15/639adf5b8806a.png
      footer_group:
        enable: true
        footer_group_link:
          - group_title: 直达
            footer_links: 
              - text: 藏宝阁
                link: /stars/
                class: in
              - text: 优秀句子
                link: /sentence/
                class: in
              - text: 空间说说
                link: /zone/
                class: in
              - text: 友链订阅
                link: /fcircle/
                class: in
              - text: 切换背景
                link: /bg/
                class: in
          - group_title: 关于
            footer_links: 
              - text: 关于我
                link: /about/
                class: in
              - text: RSS订阅
                link: /atom.xml
                class: in
              - text: 站点监控
                link: https://uptime.marcus233.top/
                class: out
              - text: 更新记录
                link: /timeline/
                class: in
              - text: 我的相册
                link: /picture/
                class: in
          - group_title: 分类
            footer_links: 
              - text: 博客相关
                link: /categories/博客相关
                class: in
              - text: 生活点滴
                link: /categories/生活点滴
                class: in 
              - text: 资源分享
                link: /categories/资源分享
                class: in
              - text: 学习笔记
                link: /categories/学习笔记
                class: in 
              - text: 实用教程
                link: /categories/实用教程
                class: in 
              - text: 查看全部
                link: /categories/
                class: in 
      footer_friend_links:
        enable: true
        number: 5
      footer_bottom:
        copyright:
          enable: true
          author: Marcus
          link: https://marcus233.top/
          time: 2022
        left:
          - text: 雨云
            desrc: 本站CDN支持
            link: https://rainyun.com/
          - text: 网盾星球
            desrc: 本站CDN防护主要提供商:网盾星球
            link: https://www.netdun.net/
          - text: 萌ICP备20230221
            desrc: 萌ICP备20230221
            link: https://icp.gov.moe/?keyword=20230221
          - text: 萌ICP备20236688
            desrc: 萌ICP备20236688
            link: https://icp.gov.moe/?keyword=20236688
          - text: 萌ICP备20230002
            desrc: 萌ICP备20230002
            link: https://icp.gov.moe/?keyword=20230002
        right:
          - text: Hexo
            desrc: 框架
            link: https://hexo.io/zh-cn/
          - text: Butterfly
            desrc: 主题
            link: https://butterfly.js.org/
        runtime:
          enable: true
          time: 2022/08/09 00:00:00
      footer_css: https://cdn1.tianli0.top/npm/hexo-butterfly-footer-marcus/lib/footer.min.css
      footer_js: https://cdn1.tianli0.top/npm/hexo-butterfly-footer-marcus/lib/footer.min.js
    + +

    请自行下载footer_js修改建站日期
    如果开启了随机友联,根目录下却没有link.json,请参考(页脚的随机友链)[https://blog.shineyu.cn/footer-random-flink.html]

    +

    参数释义

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    参数备选值/类型释义
    enabletrue/false【必选】控制开关
    prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
    enable_pagepath/all【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all
    excludepath【可选】填写想要屏蔽的页面，可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
    layout.typeid/class【可选】挂载容器类型，填写id或class，不填则默认为id
    layout.nametext【必选】挂载容器名称
    layout.index0和正整数【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
    insertpositiontext‘beforebegin’：元素自身的前面。’afterbegin’：插入元素内部的第一个子节点之前。’beforeend’：插入元素内部的最后一个子节点之后。’afterend’：插入元素自身的后面。
    footer_icons.enabletrue/false【必选】icon控制开关
    *.texttext【必选】显示文字
    *.iconclass【必选】icon(例:fa-solid fa-commet)
    *.desrctext【必选】a标签内的title选项
    *.classin/out【必选】站内/外链接(站内:in,站外:out)
    *.linkurl【必选】链接
    footer_logo.enabletrue/false【必选】icon内logo控制开关
    footer_group.enabletrue/false【必选】group控制开关
    footer_friend_links.enabletrue/false【必选】随机友联开关
    footer_friend_link.number正整数【可选】随机友联数量
    footer_bottom.copyright.enabletrue/false【必选】copyright开关
    footer_bottom.runtime.enabletrue/false【必选】网站运行时间开关
    footer_cssurl【必选】css链接
    footer_jsurl【必选】js链接
    +

    使用方法
    填写配置项
    需改动源码的地方

    +

    在 themes\butterfly\layout\includes\layout.pug43行(修改页脚背景色的bug)

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
            else
              - var footer_bg = ''

    - footer#footer(style=footer_bg)

    + footer#footer(style='background: transparent')
      !=partial('includes/footer', {}, {cache: true})

      else
      include ./404.pug
    + +

    去掉+号
    在 themes\butterfly\source\css\_mode\darkmode.styl43行(修改黑暗模式按钮层级的bug)

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
      #web_bg:before,

    - #footer:before,
      #page-header:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''
    + +

    参考

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Marcus的博客
    +
    Marcus
    +
    + +
    +
    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    GitHub开源
    +
    github@sysicon
    +
    + +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/a6ab0925/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    cover
    2025-08-12
    利用 SiteMap 随机访问站内页面
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    cover
    2026-02-10
    添加网站左上角菜单
    看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
    cover
    2025-08-10
    配置说说页面
    又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/ad244066/index.html b/posts/ad244066/index.html new file mode 100644 index 0000000..dffde74 --- /dev/null +++ b/posts/ad244066/index.html @@ -0,0 +1,639 @@ +配置说说页面 | Bi's Blog + + + + + + + + + + + + + +

    配置说说页面

    发表于|更新于|建站手札
    |总字数:5.4k|阅读时长:28分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    又开始折腾啦，这次把说说页面加上，改用moments项目的api

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Moments 极简朋友圈
    +
    githun@kingwrcy
    +
    + +
    +
    + +

    前期要求

    硬件要求

      +
    1. 一台服务器
      2. +
    2. 一个可自主解析的域名
      3. +
    +

    软件要求

      +
    1. docker环境
      2. +
    2. 反向代理工具（本文以Nginx为例）
      3. +
    +

    介绍与展示

    这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改：

    +
      +
    1. 说说页面：
      +
      ✅来自本站，本站可确保其安全性，请放心点击跳转
      +
      +
      +
      +
      我的说说
      +
      胡言乱语ing。。。
      +
      + +
      +
      2. +
    2. 轻量朋友圈
      +
      🪧引用站外地址，不保证站点的可用性和安全性
      +
      +
      +
      +
      朋友圈
      +
      依旧胡言乱语
      +
      + +
      +
      3. +
    3. 功能说明
      4. +
    +

    Moments作为一个轻量朋友圈，其功能都是分享上的部分，如下所示：

    +
      +
    • 分享：链接，图片，音乐，视频，书籍，电影
      • +
    • 信息：自定义位置，自定义标签，是否公开
      • +
    • 页面：Markdown渲染，编辑说说，删除说说，暗夜模式，自定义图标，信息，CSS及JS代码
      • +
    • 功能：S3存储，文件查询，多用户注册，点赞，评论，API
      • +
    +

    简单介绍完毕，下面我就来教大家如何进行部署！

    +

    部署教程

    Moments部署

    Compose部署

    官方给予了很完善的教程，这里我仅仅简单介绍一下 docker-compose部署的方式，如果你想以源码等其他方式进行部署，请查看文章开头部分的 github地址进行查阅。

    +

    首先，在服务器任意位置创建文件：docker-compose.yaml，填入以下内容：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    version: '3'
    services:
      moments:
        image: kingwrcy/moments:latest
        container_name: moments
        restart: always
        environment:
          port: 3000
          JWT_KEY: "自己随便生成点字符串"
          ENABLE_SWAGGER: "true"
          CORS_ORIGIN: # 填写跨域域名
        ports:
          - "3000:3000"  # 自行换端口，换前面的，后面的3000不要动
        volumes:
          - ./opt/data:/app/data
        #   - ./data/localtime:/etc/localtime:ro
        #   - ./data/timezone:/etc/timezone:ro
    + +

    注意文件，我将 /opt/文件夹(当然可以改成其他的)下的 /data文件夹挂载了进去，数据都会在里面，迁移时仅需整体打包到新服务器即可。然后执行以下两条命令，后续需要升级也仅需要执行这两个命令：

    +
    1
    2
    docker-compose pull
    docker-compose up -d
    + +

    如果网络环境不佳，可尝试替换 docker源，可以自行查找

    +

    通过反向代理将其添加到某个域名中，这里就不再多说了，各大面板都有极其完备的反代文档。

    +

    Nginx修改

    Moments在跨域 docker-compose文件中可以配置，所以不必进行此步

    +

    网站目录

    +

    返回到上一级目录，也就是域名名称的文件夹下，找到 Proxy文件夹，编辑里面的 root.conf文件为如下内容：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    #代理配置

    location / {
        # 跨域设置
        add_header Access-Control-Allow-Origin *;  # 允许所有域名访问，你也可以指定具体域名
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';  # 允许的 HTTP 方法
        add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';  # 允许的请求头

        # 处理 OPTIONS 请求，预检请求
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
            add_header Access-Control-Max-Age 1728000;
            add_header Content-Type 'text/plain charset=UTF-8';
            add_header Content-Length 0;
            return 204;
        }

        # 原代理设置
        proxy_pass http://127.0.0.1:3003;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;
        add_header X-Cache $upstream_cache_status;
        add_header Cache-Control no-cache;
        proxy_ssl_server_name off;
        proxy_ssl_name $proxy_host;
        add_header Strict-Transport-Security "max-age=31536000";
    }
    + +

    下面是原代理设置，可以仅仅复制上面部分内容，下面保持不变，注意端口不要出问题。

    +

    前端实现

    由于该项目利用了MetingJS和APlayer，所以请提前引入这两个包，Hexo-theme-butterfly中虽然有内置的两个包，仅需修改配置文件即可开启，但是版本比较老，这里我建议自行引入最新版本，在配置中引入以下文件，注意css和js应该是分开引入的：

    +
    1
    2
    3
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="all" onload="this.media="all"">
    <script src="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>
    + +

    新建页面shuoshuo，在文件内写入一下内容：

    +
    1
    2
    3
    4
    5
    6
    7
    ---
    title: 日常哔哔，键盘侠的日常吐槽
    aside: false
    ---
    <div id="talk"></div>
    <div class="limit">- 只展示最近30条说说 -</div>
    <script src="/js/shuoshuo.js" no-pjax></script>
    + +

    其中的JS文件地址清自行修改，放在主题目录 /script/目录，自行创建，并写入以下内容：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    function renderTalks() {
        const talkContainer = document.querySelector('#talk');
        const domain = 'https://mm.biss.click'; 
        if (!talkContainer) return;
        talkContainer.innerHTML = '';
        const generateIconSVG = () => {
            return `<svg viewBox="0 0 512 512"xmlns="http://www.w3.org/2000/svg"class="is-badge icon"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z"fill="#1da1f2"></path></svg>`;
        }
        const waterfall = (a) => {
            function b(a, b) {
                var c = window.getComputedStyle(b);
                return parseFloat(c["margin" + a]) || 0
            }

            function c(a) {
                return a + "px"
            }

            function d(a) {
                return parseFloat(a.style.top)
            }

            function e(a) {
                return parseFloat(a.style.left)
            }

            function f(a) {
                return a.clientWidth
            }

            function g(a) {
                return a.clientHeight
            }

            function h(a) {
                return d(a) + g(a) + b("Bottom", a)
            }

            function i(a) {
                return e(a) + f(a) + b("Right", a)
            }

            function j(a) {
                a = a.sort(function (a, b) {
                    return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
                })
            }

            function k(b) {
                f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
            }
            "string" == typeof a && (a = document.querySelector(a));
            var l = [].map.call(a.children, function (a) {
                return a.style.position = "absolute", a
            });
            a.style.position = "relative";
            var m = [];
            l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
            for (var n = 1; n < l.length; n++) {
                var o = l[n - 1],
                    p = l[n],
                    q = i(o) + f(p) <= f(a);
                if (!q) break;
                p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
            }
            for (; n < l.length; n++) {
                j(m);
                var p = l[n],
                    r = m.pop();
                p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
            }
            j(m);
            var s = m[0];
            a.style.height = c(h(s) + b("Bottom", s));
            var t = f(a);
            window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
        };

        const fetchAndRenderTalks = () => {
            const url = 'https://mm.biss.click/api/memo/list';
            const cacheKey = 'talksCache';
            const cacheTimeKey = 'talksCacheTime';
            const cacheDuration = 30 * 60 * 1000; // 半个小时 (30 分钟)
      
            const cachedData = localStorage.getItem(cacheKey);
            const cachedTime = localStorage.getItem(cacheTimeKey);
            const currentTime = new Date().getTime();
      
            // 判断缓存是否有效
            if (cachedData && cachedTime && (currentTime - cachedTime < cacheDuration)) {
                const data = JSON.parse(cachedData);
                renderTalks(data); // 使用缓存渲染数据
            } else {
                if (talkContainer) {
                    talkContainer.innerHTML = '';
                    fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                size: 30
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.code === 0 && data.data && Array.isArray(data.data.list)) {
                                // 缓存数据
                                localStorage.setItem(cacheKey, JSON.stringify(data.data.list));
                                localStorage.setItem(cacheTimeKey, currentTime.toString());
                                renderTalks(data.data.list); // 渲染数据
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching data:', error);
                        });
                }
            }
      
            // 渲染函数
            function renderTalks(list) {
                // 确保 data 是一个数组
                if (Array.isArray(list)) {
                    let items = list.map(item => formatTalk(item, url));
                    items.forEach(item => talkContainer.appendChild(generateTalkElement(item)));
                    waterfall('#talk');
                } else {
                    console.error('Data is not an array:', list);
                }
            }
        };
      

        const formatTalk = (item, url) => {
            let date = formatTime(new Date(item.createdAt).toString());
            let content = item.content;
            let imgs = item.imgs ? item.imgs.split(',') : [];
            let text = content;
            content = text.replace(/\[(.*?)\]\((.*?)\)/g, `<a href="$2">@$1</a>`)
                .replace(/- \[ \]/g, '⚪')
                .replace(/- \[x\]/g, '⚫');
            // 保留换行符，转换 \n 为 <br>
    		content = content.replace(/\n/g, '<br>');
            // 将content用一个类包裹，便于后续处理
            content = `<div class="talk_content_text">${content}</div>`;
            if (imgs.length > 0) {
                const imgDiv = document.createElement('div');
                imgDiv.className = 'zone_imgbox';
                imgs.forEach(e => {
                    const imgLink = document.createElement('a');
                    const imgUrl = domain + e;
                    imgLink.href = imgUrl;
                    imgLink.setAttribute('data-fancybox', 'gallery');
                    imgLink.className = 'fancybox';
                    imgLink.setAttribute('data-thumb', e);
                    const imgTag = document.createElement('img');
                    imgTag.src = domain + e;
                    imgLink.appendChild(imgTag);
                    imgDiv.appendChild(imgLink);
                });
                content += imgDiv.outerHTML;
            }

            // 外链分享功能
            if (item.externalUrl) {
                const externalUrl = item.externalUrl;
                const externalTitle = item.externalTitle;
                const externalFavicon = item.externalFavicon;

                const externalContainer = `
                <div class="shuoshuo-external-link">
                    <a class="external-link" href="${externalUrl}" target="_blank" rel="external nofollow noopener noreferrer">
                        <div class="external-link-left" style="background-image: url(${externalFavicon})"></div>
                        <div class="external-link-right">
                            <div class="external-link-title">${externalTitle}</div>
                            <div>点击跳转<i class="fa-solid fa-angle-right"></i></div>
                        </div>
                    </a>
                </div>`;

                content += externalContainer;
            }

            const ext = JSON.parse(item.ext || '{}');

            if (ext.music && ext.music.id) {
                const music = ext.music;
                const musicUrl = music.api.replace(':server', music.server)
                    .replace(':type', music.type)
                    .replace(':id', music.id);
                content += `
                <meting-js server="${music.server}" type="${music.type}" id="${music.id}" api="${music.api}"></meting-js>
            `;
            }

            if (ext.doubanMovie && ext.doubanMovie.id) {
                const doubanMovie = ext.doubanMovie;
                const doubanMovieUrl = doubanMovie.url;
                const doubanTitle = doubanMovie.title;
                // const doubanDesc = doubanMovie.desc || '暂无描述';
                const doubanImage = doubanMovie.image;
                const doubanDirector = doubanMovie.director || '未知导演';
                const doubanRating = doubanMovie.rating || '暂无评分';
                // const doubanReleaseDate = doubanMovie.releaseDate || '未知上映时间';
                // const doubanActors = doubanMovie.actors || '未知演员';
                const doubanRuntime = doubanMovie.runtime || '未知时长';

                content += `
                    <a class="douban-card" href="${doubanMovieUrl}" target="_blank">
                        <div class="douban-card-bgimg" style="background-image: url('${doubanImage}');"></div>
                        <div class="douban-card-left">
                            <div class="douban-card-img" style="background-image: url('${doubanImage}');"></div>
                        </div>
                        <div class="douban-card-right">
                            <div class="douban-card-item"><span>电影名: </span><strong>${doubanTitle}</strong></div>
                            <div class="douban-card-item"><span>导演: </span><span>${doubanDirector}</span></div>
                            <div class="douban-card-item"><span>评分: </span><span>${doubanRating}</span></div>
                            <div class="douban-card-item"><span>时长: </span><span>${doubanRuntime}</span></div>
                        </div>
                    </a>
                `;
            }

            if (ext.doubanBook && ext.doubanBook.id) {
                const doubanBook = ext.doubanBook;
                const bookUrl = doubanBook.url;
                const bookTitle = doubanBook.title;
                // const bookDesc = doubanBook.desc;
                const bookImage = doubanBook.image;
                const bookAuthor = doubanBook.author;
                const bookRating = doubanBook.rating;
                const bookPubDate = doubanBook.pubDate;

                const bookTemplate = `
                    <a class="douban-card" href="${bookUrl}" target="_blank">
                        <div class="douban-card-bgimg" style="background-image: url('${bookImage}');"></div>
                            <div class="douban-card-left">
                                <div class="douban-card-img" style="background-image: url('${bookImage}');"></div>
                            </div>
                            <div class="douban-card-right">
                                <div class="douban-card-item">
                                    <span>书名: </span><strong>${bookTitle}</strong>
                                </div>
                                <div class="douban-card-item">
                                    <span>作者: </span><span>${bookAuthor}</span>
                                </div>
                                <div class="douban-card-item">
                                    <span>出版年份: </span><span>${bookPubDate}</span>
                                </div>
                                <div class="douban-card-item">
                                    <span>评分: </span><span>${bookRating}</span>
                                </div>
                            </div>
                    </a>
                `;

                content += bookTemplate;
            }

            if (ext.video && ext.video.type) {
                const videoType = ext.video.type;
                const videoUrl = ext.video.value;
                if (videoType === 'bilibili') {
                    // Bilibili 视频模板
                    // 从形如https://www.bilibili.com/video/BV1VGAPeAEMQ/?vd_source=91b3158d27d98ff41f842508c3794a13 的链接中提取视频 BV1VGAPeAEMQ
                    const biliTemplate = `
                    <div style="position: relative; padding: 30% 45%; margin-top: 10px;">
                        <iframe 
                            style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 12px;" 
                            src="${videoUrl}&autoplay=0"
                            scrolling="no" 
                            frameborder="no" 
                            allowfullscreen>
                        </iframe>
                    </div>
                `;
                    // 将模板插入到 DOM 中
                    content += biliTemplate;

                } else if (videoType === 'youtube') {
                    // YouTube 视频模板
                    // 从形如https://youtu.be/2V6lvCUPT8I?si=DVhUas6l6qlAr6Ru的链接中提取视频 ID2V6lvCUPT8I
                    const youtubeTemplate = `
                    <div style="position: relative; padding: 30% 45%; margin-top: 10px;">
                        <iframe width="100%"
                            style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 12px;"
                            src="${videoUrl}"
                            title="YouTube video player" 
                            frameborder="0" 
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                            referrerpolicy="strict-origin-when-cross-origin" 
                            allowfullscreen>
                        </iframe>
                    </div>
                `;
                    // 将模板插入到 DOM 中
                    content += youtubeTemplate;
                }
            }

            return {
                content: content,
                user: item.user.nickname || '匿名',
                avatar: item.user.avatarUrl || 'https://p.liiiu.cn/i/2024/03/29/66061417537af.png',
                date: date,
                location: item.location || '山西',
                tags: item.tags ? item.tags.split(',').filter(tag => tag.trim() !== '') : ['无标签'],
                text: content.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]' + `${imgs.length ? '[图片]' : ''}`)
            };
        };

        const generateTalkElement = (item) => {
            const talkItem = document.createElement('div');
            talkItem.className = 'talk_item';

            const talkMeta = document.createElement('div');
            talkMeta.className = 'talk_meta';

            const avatar = document.createElement('img');
            avatar.className = 'no-lightbox avatar';
            avatar.src = item.avatar;

            const info = document.createElement('div');
            info.className = 'info';

            const talkNick = document.createElement('span');
            talkNick.className = 'talk_nick';
            talkNick.innerHTML = `${item.user} ${generateIconSVG()}`;

            const talkDate = document.createElement('span');
            talkDate.className = 'talk_date';
            talkDate.textContent = item.date;

            const talkContent = document.createElement('div');
            talkContent.className = 'talk_content';
            talkContent.innerHTML = item.content;

            const talkBottom = document.createElement('div');
            talkBottom.className = 'talk_bottom';

            const TagContainer = document.createElement('div');

            const talkTag = document.createElement('span');
            talkTag.className = 'talk_tag';
            talkTag.textContent = `🏷️${item.tags}`;

            const locationTag = document.createElement('span');
            locationTag.className = 'location_tag';
            locationTag.textContent = `🌍${item.location}`;

            TagContainer.appendChild(talkTag);
            TagContainer.appendChild(locationTag);

            const commentLink = document.createElement('a');
            commentLink.href = 'javascript:;';
            commentLink.onclick = () => goComment(item.text);
            const commentIcon = document.createElement('span');
            commentIcon.className = 'icon';
            const commentIconInner = document.createElement('i');
            commentIconInner.className = 'fa-solid fa-message fa-fw';
            commentIcon.appendChild(commentIconInner);
            commentLink.appendChild(commentIcon);

            talkMeta.appendChild(avatar);
            info.appendChild(talkNick);
            info.appendChild(talkDate);
            talkMeta.appendChild(info);
            talkItem.appendChild(talkMeta);
            talkItem.appendChild(talkContent);
            talkBottom.appendChild(TagContainer);
            talkBottom.appendChild(commentLink);
            talkItem.appendChild(talkBottom);

            return talkItem;
        };

        const goComment = (e) => {
            const match = e.match(/<div class="talk_content_text">([\s\S]*?)<\/div>/);
            const textContent = match ? match[1] : "";
            const n = document.querySelector(".atk-textarea");
            n.value = `> ${textContent}\n\n`;
            n.focus();
            btf.snackbarShow("已为您引用该说说，不删除空格效果更佳");
            // const n = document.querySelector(".atk-textarea");
            // n.value = `> ${e}\n\n`;
            // n.focus();
            // btf.snackbarShow("已为您引用该说说，不删除空格效果更佳");
        };

        const formatTime = (time) => {
            const d = new Date(time);
            const ls = [
                d.getFullYear(),
                d.getMonth() + 1,
                d.getDate(),
                d.getHours(),
                d.getMinutes(),
                d.getSeconds(),
            ];
            const r = ls.map((a) => (a.toString().length === 1 ? '0' + a : a));
            return `${r[0]}-${r[1]}-${r[2]} ${r[3]}:${r[4]}`;
        };

        fetchAndRenderTalks();
    }

    renderTalks();

    // function whenDOMReady() {
    //     const talkContainer = document.querySelector('#talk');
    //     talkContainer.innerHTML = '';
    //     fetchAndRenderTalks();
    // }
    // whenDOMReady();
    // document.addEventListener("pjax:complete", whenDOMReady);
    + +

    自行修改js文件中的Moments地址为你的地址，在文件中，有一个gocomment函数，实现的是获取卡片中的文本内容，如果如果出现不匹配的情况，请自行修改一下类名，这里我匹配的是artalk的输入框。在这里我把代码做了修改，因为我不想使用s3，结果导致说说图片无法加载。。。
    修改历程：日后再写

    +

    然后引入样式文件，这个文件可以在配置文件中引用，也可以在页面文件中类似于shuoshuo.js一样引用，样式内容如下：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    :root {
        --liushen-card-bg: #fff;
        --liushen-card-border: 1px solid #e3e8f7;
        --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
        --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2);
        --liushen-card-secondbg: #f1f3f8;
        --liushen-button-hover-bg: #2679cc;
        --liushen-text: #4c4948;
        --liushen-button-bg: #f1f3f8;
        --liushen-fancybox-bg: rgba(255,255,255,0.5);
    }

    :root, [data-theme=dark] {
        --liushen-card-bg: #181818;
        --liushen-card-secondbg: #30343f;
        --liushen-card-border: 1px solid #42444a;
        --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09);
        --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.2);
        --liushen-button-bg: #30343f;
        --liushen-button-hover-bg: #2679cc;
        --liushen-text: rgba(255,255,255,0.702);
        --liushen-fancybox-bg: rgba(0,0,0,0.5);
    }

    /* 卡片初始化 */
    #talk .talk_item {
        width: calc(33.333% - 6px);
        background: var(--liushen-card-bg);
        border: var(--liushen-card-border);
        box-shadow: var(--card-box-shadow);
        transition: box-shadow .3s ease-in-out;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin-bottom: 9px;
        margin-right: 9px;
    }
    #talk .talk_item:hover {
        box-shadow: var(--card-hover-box-shadow);
    }

    @media (max-width: 900px) {
        #talk .talk_item {
          width: calc(50% - 5px);
        }
    }
    @media (max-width: 450px) {
        #talk .talk_item {
          width: calc(100%);
        }
    }

    #talk{
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    #talk .talk_meta .avatar {
        margin: 0 !important;
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }
    #talk .talk_bottom,
    #talk .talk_meta {
        display: flex;
        align-items: center;
    }
    #talk .talk_meta {
        display: flex;
        align-items: center;
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px dashed grey; /* 添加灰色虚线边框 */
    }
    #talk .talk_bottom {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px dashed grey; /* 添加灰色虚线边框 */
        justify-content: space-between;
    }
    #talk .talk_meta .info {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
    }
    #talk .talk_meta .info .talk_nick {
        color: #6dbdc3;
        font-size: 1.2rem;
    }
    #talk .talk_meta .info svg.is-badge.icon {
        width: 15px;
        padding-top: 3px;
    }
    #talk .talk_meta .info span.talk_date {
        opacity: .6;
    }
    #talk .talk_item .talk_content {
        margin-top: 10px;
    }
    #talk .talk_item .talk_content .zone_imgbox {
        display: flex;
        flex-wrap: wrap;
        --w: calc(25% - 8px);
        gap: 10px;
        margin-top: 10px;
    }
    #talk .talk_item .talk_content .zone_imgbox a {
        display: block;
        border-radius: 12px;
        width: var(--w);
        aspect-ratio: 1/1;
        position: relative;
    }
    #talk .talk_item .talk_content .zone_imgbox a:first-child {
        width: 100%;
        aspect-ratio: 1.8;
    }
    #talk .talk_item .talk_content .zone_imgbox img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        margin: 0 !important;
        object-fit: cover;
    }
    /* 底部 */
    #talk .talk_item .talk_bottom {
        opacity: .9;
    }
    #talk .talk_item .talk_bottom .icon {
        float: right;
        transition: all .3s;
    }
    #talk .talk_item .talk_bottom .icon:hover {
        color: #49b1f5;
    }
    #talk .talk_item .talk_bottom span.talk_tag,
    #talk .talk_item .talk_bottom span.location_tag {
        font-size: 14px;
        background-color: var(--liushen-card-secondbg);
        border-radius: 12px;
        padding: 3px 15px 3px 10px;
        transition: box-shadow 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #talk .talk_item .talk_bottom span.location_tag {
        margin-left: 5px;
    }

    #talk .talk_item .talk_bottom span.talk_tag:hover,
    #talk .talk_item .talk_bottom span.location_tag:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
    #talk .talk_item .talk_content>a {
        margin: 0 3px;
        color: #ff7d73 !important;
    }
    #talk .talk_item .talk_content>a:hover{
        text-decoration: none !important;
        color: #ff5143 !important
    }

    @media screen and (max-width: 900px) {
        #talk .talk_item .talk_content .zone_imgbox {
            --w: calc(33% - 5px);
        }
        #talk .talk_item #post-comment{
            margin: 0 3px
        }
    }
    @media screen and (max-width: 768px) {
        .zone_imgbox {
            gap: 6px;
        }
        .zone_imgbox {
            --w: calc(50% - 3px);
        }
        span.talk_date {
            font-size: 14px;
        }
    }

    #talk .talk_item .talk_content .douban-card {
        margin-top: 10px !important;
        text-decoration: none;
        align-items: center;
        border-radius: 12px;
        color: #faebd7;
        display: flex;
        justify-content: center;
        margin: 10px;
        max-width: 400px;
        overflow: hidden;
        padding: 15px;
        position: relative;
    }

    .douban-card .douban-card-bgimg {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100%;
        filter: blur(15px) brightness(.6);
        height: 115%;
        position: absolute;
        width: 115%;
    }

    .douban-card .douban-card-left {
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .douban-card .douban-card-left .douban-card-img {
        transition: all .5s ease;
        height: 130px;
        position: relative;
        width: 80px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .douban-card .douban-card-left:hover .douban-card-img {
        filter: blur(5px) brightness(.6);
        transform: perspective(800px) rotateX(180deg);
    }

    .douban-card .douban-card-right {
        color: #faebd7;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        line-height: 1.5;
        margin-left: 12px;
        position: relative;
    }

    .douban-card .douban-card-right .douban-card-item  {
        margin-top: 4px;
        max-width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 外链卡片 */
    #talk .talk_item .talk_content .shuoshuo-external-link {
        /* 无下划线 */
        width: 100%;
        height: 80px;
        margin-top: 10px;
        border-radius: 12px;
        background-color: var(--liushen-card-secondbg);
        color: var(--liushen-card-text);
        border: var(--liushen-card-border);
        transition: background-color .3s ease-in-out;
    }

    .shuoshuo-external-link:hover {
        background-color: var(--liushen-button-hover-bg);
    }

    .shuoshuo-external-link .external-link {
        display: flex;
        color: var(--liushen-text) !important;
        width: 100%;
        height: 100%;
    }

    .shuoshuo-external-link .external-link:hover {
        color: white !important;
    }

    .shuoshuo-external-link .external-link:hover {
        text-decoration: none !important;
    }

    .shuoshuo-external-link .external-link-left {
        width: 60px;
        height: 60px;
        margin: 10px;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
    }

    .shuoshuo-external-link .external-link-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: calc(100% - 80px);
        padding: 10px;
    }

    .shuoshuo-external-link .external-link-right .external-link-title {
        font-size: 1.0rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shuoshuo-external-link .external-link-right i {
        margin-left: 5px;
    }

    .limit {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
    + +

    如果一切正常，应该就可以显示了，但是我在使用时发现卡片是黑色的，把前面的root内容删除之后就好了。

    +

    参考内容

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    liushen的博客
    +
    liushen
    +
    + +
    +
    + +

    当然还有chatgpt的支持

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/ad244066/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    cover
    2026-01-16
    自定义字体
    今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
    cover
    2025-08-10
    在侧边栏中添加欢迎信息
    效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...
    cover
    2026-02-10
    添加网站左上角菜单
    看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
    cover
    2025-08-12
    博客添加AI总结
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    2025-08-13
    自定义导航栏
    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/b5601a7e/index.html b/posts/b5601a7e/index.html new file mode 100644 index 0000000..0ac4b95 --- /dev/null +++ b/posts/b5601a7e/index.html @@ -0,0 +1,589 @@ +自定义字体 | Bi's Blog + + + + + + + + + + + + + +

    自定义字体

    发表于|更新于|建站手札
    |总字数:448|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示

    +

    2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。

    +
    +

    选择字体

    首先在网上查找自己喜欢的字体，这里有一个网站

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    中文开源字体集 Open Source Fonts Collection for Chinese
    +
    开源字体
    +
    + +
    +
    +

    找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站：

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    转换网站
    +
    ttf2woff2
    +
    + +
    +
    +

    利用这个网站把下载的ttf字体文件转换成woff2格式。

    +

    添加字体

    新建一个css文件

    +
    1
    2
    3
    4
    5
    @font-face {
      font-family: 'CascadiaCodePL';
      font-display: swap;
      src: url('/butterflyChange/fonts/font.woff2') format("woff2");
    }
    + +

    其中 font.woff2改成自己的文件名。
    其他字体格式参考

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @font-face {
       font-family: 'webfont';
       font-display: swap;
       src: url('.eot');  /*IE9*/
       src: url('.eot') format('embedded-opentype'),  /* IE6-IE8 */
            url('.woff2') format('woff2'),
            url('.woff') format('woff'),  /*chrome、firefox */
            url('.ttf') format('truetype'),  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('.svg') format('svg');  /* iOS 4.1- */
    }```
    然后在`_config.butterfly.yml`里面引用这个css
    ```yml
    - <link rel="stylesheet" href="/css/font.css">
    + +

    在主题文件的font配置区域修改字体：

    +
    1
    2
    3
    4
    5
    font:
      global_font_size:  110%
      code_font_size: 100%
      font_family:  # ，全局字体，不带后缀名
      code_font_family: # 这是代码使用的字体
    + +

    参考链接

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Ordis的博客
    +
    ordis
    +
    + +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/b5601a7e/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-10
    在侧边栏中添加欢迎信息
    效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...
    cover
    2025-08-10
    配置说说页面
    又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
    cover
    2025-08-12
    博客添加AI总结
    之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    cover
    2025-08-26
    搭建Owncloud并集成Onlyoffice
    引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
    cover
    2025-08-12
    利用 SiteMap 随机访问站内页面
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/b57500e9/index.html b/posts/b57500e9/index.html new file mode 100644 index 0000000..9e7663d --- /dev/null +++ b/posts/b57500e9/index.html @@ -0,0 +1,569 @@ +在Openwrt上安装AdguardHome | Bi's Blog + + + + + + + + + + + + + + +

    在Openwrt上安装AdguardHome

    发表于|更新于|技术
    |总字数:257|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    接续前言，AdguardHome是一款广告拦截软件，有了一台小软路由后就开始折腾了。

    +

    安装

    首先要下载软件包，但是经过尝试，软件源里面的luci-app-adguardhome不太好用（也可能是我不会用） ，所以我用的下面的包：

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    luci-app-adguardhome
    +
    rufengsuixing
    +
    + +
    +
    + +

    虽然好几年没更新了，但还是能用。下载之后上传到路由器，使用opkg install命令安装，或者可以直接通过网页安装：

    +
    image
    + +

    配置

    如下图所示进行操作，如果更新核心版本失败，考虑更换升级用的下载链接，使用镜像源，或者科学上网，错号框内的非必要不修改；

    +
    Screenshot of the AdGuard Home configuration page in the OpenWrt web interface. The left sidebar menu is expanded to highlight the Services section and AdGuard Home submenu. The main panel displays configuration options including enable checkbox, web management port, update core version button, executable file path, compressed file option, configuration file path, working directory, and log file path. A large red X marks the configuration file path field, indicating it should not be modified. Visible text includes AdGuard Home, OpenClash, miniDLNA, UPnP IGD and PCP, enable, update core version, executable file path, configuration file path, working directory, log file path, and other related options. The interface is clean and instructional, with a neutral tone.
    + +

    最后点击“保存并应用”，然后点击AdGuardHome Web:3000，进行安装，建议关闭路由器自带DNS/DHCP服务器，AdguardHome直接替代

    +
    Screenshot of the OpenWrt web interface showing the DHCP/DNS settings page. The left sidebar menu is expanded to highlight the network section and DHCP/DNS submenu. The main panel displays the General tab with options for enabling exclusive authorization and DNS redirect, both with checkboxes. The interface is clean and organized, with navigation tabs for additional settings such as DNS records, filters, logs, and PXE/TFTP. The overall tone is neutral and instructional. Visible text includes DHCP/DNS, 常规, 唯一授权, DNS redirect, 本地解析这些项目, 本地域名, and other configuration options.
    + +
    alt=Screenshot of the OpenWrt web interface focused on DHCP/DNS settings. The left sidebar menu highlights the network section and DHCP/DNS submenu. Red arrows guide the user through selecting DHCP/DNS, then the settings and port tab, and finally entering 5353 in the DNS server port field. The main panel displays options for specifying interface addresses, listening interfaces, excluded interfaces, and DNS server port. Visible text includes DHCP/DNS, 设置及端口, 5353, 监听接口, 排除接口, DNS服务器端口, DNS查询端口, and related configuration options. The interface is clean and instructional, with a neutral and helpful tone.
    + +

    然后，设置AdguardHome的DHCP服务器，注意要先检查配置，再启用

    +
    image
    文章作者: biss
    文章链接: https://blog.biss.click/posts/b57500e9/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    OpenwrtAdguardHome
    相关推荐
    cover
    2025-10-05
    Adguard和Openclash共存
    在之前已经安装了Openwrt系统，并且也配置了OpenClash和AdguardHome，两者的原理简单看都是劫持DNS，所以两者要同时运行，必须经过一定的配置。无非就这两种方式: 左边的方式更简单一些，只需要修改AdguardHome的上游DNS服务器为127.0.0.1:7874 即可；右边的方式需要将OpenClash里的DNS指向AdguardHome，但是可能有拦截失败的情况(好像没有遇到过)。
    cover
    2025-10-05
    Adguard规则分享
    众所周知，Adguardhome是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则： 一个综合的过滤规则 🪧引用站外地址，不保证站点的可用性和安全性 adblockfilters adblockfilters 广告过滤规则订阅中心 🪧引用站外地址，不保证站点的可用性和安全性 广告过滤规则订阅中心 广告过滤规则订阅中心 集成了许多规则，可以挑选一下加入。 这是我添加的规则，在这些规则下，用Adblocktester可以达到74分，基本够用
    cover
    2025-09-02
    在Openwrt中安装OpenClash
    前言因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。 安装可以通过web管理页面安装，搜索openclash。 当然也可以在终端中执行命令： 123opkg updateopkg install bash iptables dnsmasq-full curl ca-bundle ipset ip-full iptables-mod-tproxy iptables-mod-extra ruby ruby-yaml kmod-tun kmod-inet-diag unzip luci-compat luci luci-baseopkg install luci-app-openclash 配置首先需要下载内核，推荐启用Smart内核。 然后导入配置： 然后就可以开心使用啦！感觉zashboard简洁好看一些，看自己感觉啦
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/b5866b9e/index.html b/posts/b5866b9e/index.html new file mode 100644 index 0000000..12aa543 --- /dev/null +++ b/posts/b5866b9e/index.html @@ -0,0 +1,565 @@ +利用 SiteMap 随机访问站内页面 | Bi's Blog + + + + + + + + + + + + + +

    利用 SiteMap 随机访问站内页面

    发表于|更新于|建站手札
    |总字数:283|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。
    比较简单只有js代码，但是先要安装插件

    +

    前置条件

    1
    npm install hexo-generator-sitemap --save
    + +

    在站点配置文件 _config.yaml中添加：

    +
    1
    2
    3
    4
    5
    6
    7
    sitemap:
      path: 
        - sitemap.xml
        - sitemap.txt
      rel: false
      tags: true
      categories: true
    + +

    添加js

    在主题目录下添加·\themes\butterfly\source\js\random.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function randomPost() {
        fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {
            let ls = data.querySelectorAll('url loc');
            let locationHref,locSplit;
            do {
                locationHref = ls[Math.floor(Math.random() * ls.length)].innerHTML
                locSplit = locationHref.split('/')[3] || ''
            } while (locSplit == '' || locSplit == 'tags');
            //若所有文章都如 https://…….com/posts/2022/07/…… 格式，主域名后字符是 posts，则循环条件改为：
            //while (locSplit !== 'posts');
            location.href = locationHref
        })
    }
    + +

    使用

    使用，在菜单栏上添加

    +
    1
    <a href="javascript:;" onclick="randomPost()" title="随机访问一篇文章">随机</a>
    + +

    参考

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    木木木木木的博客
    +
    木木木木木
    +
    + +
    +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/b5866b9e/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-10
    配置说说页面
    又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    cover
    2025-08-12
    利用插件自定义页脚菜单
    安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
    cover
    2026-01-16
    自定义字体
    今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
    cover
    2025-08-14
    自定义页脚（新）
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    cover
    2025-08-25
    为博客添加CMS系统
    序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/bb18d851/index.html b/posts/bb18d851/index.html new file mode 100644 index 0000000..d6ece5b --- /dev/null +++ b/posts/bb18d851/index.html @@ -0,0 +1,685 @@ +为1Panel添加自己想要的应用 | Bi's Blog + + + + + + + + + + + + + +

    为1Panel添加自己想要的应用

    发表于|更新于|技术
    |总字数:1.9k|阅读时长:8分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    记录一下自己为1Panel贡献自己应用的经历

    +

    预准备

      +
    1. Fork仓库
      +
      🪧引用站外地址，不保证站点的可用性和安全性
      +
      +
      +
      +
      1Panel appstore 仓库
      +
      1panel appstore
      +
      + +
      +
      + 把仓库fork到自己的仓库
      2. +
    2. pull 
      1
      git clone -b dev https://<your-github-username>/appstore
      + 创建新分支 
      1
      2
      cd appstore
      git checkout -b app/<app-name>
      3. +
    +

    创建文件

    文件目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ├──halo // 以 halo 的 key 命名 ，下面解释什么是 key 
    	├── logo.png // 应用 logo , 最好是 180 * 180 px 不要超过 10 KB 
    	├── data.yml // 应用声明文件
    	├── README.md // 应用的 README
    	├── 2.2.0 // 应用版本 注意不要以 v 开头
    	│   ├── data.yml // 应用的参数配置，下面有详细介绍
    	│   ├── data // 挂载出来的目录 
    	|   ├── scripts // 脚本目录 存放 init.sh upgrade.sh uninstall.sh
    	│   └── docker-compose.yml // docker-compose 文件
    	└── 2.3.2
    	    ├── data.yml
    	    ├── data
    	    └── docker-compose.yml
    +

    应用声明文件data.yml

    本文件主要用于声明应用的一些信息

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    additionalProperties:  #固定参数
        key: halo   #应用的 key ，仅限英文，用于在 Linux 创建文件夹
        name: Halo  #应用名称
        tags:  
            - WebSite #应用标签，可以有多个，请参照下方的标签列表 
    	description:  
    	  en: Powerful and easy-to-use open source website builder
    	  zh: 强大易用的开源建站工具 #应用中文描述，不要超过30个字
    	  zh-Hant:
    	  ja:   
    	  ms: 
    	  pt-br: 
    	  ru:  
    	  ko: 
        type: website  #应用类型，区别于应用分类，只能有一个，请参照下方的类型列表
        crossVersionUpdate: true  #是否可以跨大版本升级
        limit: 0  #应用安装数量限制，0 代表无限制
        website: https://halo.run/  #官网地址
        github: https://github.com/halo-dev/halo #github 地址 
        document: https://docs.halo.run/ #文档地址
    +

    应用标签 - tags 字段

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    keyname
    WebSite建站
    ServerWeb 服务器
    Runtime运行环境
    Database数据库
    Tool工具
    CI/CDCI/CD
    Local本地
    +

    应用类型 - type 字段

    + + + + + + + + + + + + + + + + + + +
    type说明
    websitewebsite 类型在 1Panel 中支持在网站中一键部署,wordpress halo 都是此 type
    runtimemysql openresty redis 等类型的应用
    toolphpMyAdmin redis-commander jenkins 等类型的应用
    +

    应用参数配置文件 data.yml

    （注意区分于应用主目录下面的 data.yaml）

    +

    本文件主要用于生成安装时要填写的 form 表单，在应用版本文件夹下面 可以无表单，但是需要有这个 data.yml文件，并且包含 formFields 字段

    +

    以安装 halo 时的 form 表单 为例

    +

    如果要生成上面的表单，需要这么填写 data.yml

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    additionalProperties:  #固定参数
        formFields:  
            - default: ""  
              envKey: PANEL_DB_HOST  #docker-compose 文件中的参数
              key: mysql  #依赖应用的 key , 例如 mysql
    	  label:  
    	   en: Database Service  
               ja: データベースサービス  
    	   ms: Perkhidmatan Pangkalan Data  
    	   pt-br: Serviço de Banco de Dados  
    	   ru: Сервис базы данных  
    	   ko: 데이터베이스 서비스  
    	   zh: 数据库服务  
    	   zh-Hant: 數據庫 服務
    	  required: true  #是否必填
              type: service  #如果需要依赖其他应用，例如数据库，使用此 type 
            - default: halo  
              envKey: PANEL_DB_NAME  
              label:  
                en: Database  
    	    ja: データベース  
    	    ms: Pangkalan Data  
    	    pt-br: Banco de Dados  
    	    ru: База данных  
    	    ko: 데이터베이스  
    	    zh: 数据库名  
    	    zh-Hant: 資料庫名稱
              random: true  #是否在 default 文字后面，增加随机字符串
              required: true  
              rule: paramCommon  #校验规则
              type: text  #需要手动填写的，使用此 type
            - default: halo  
              envKey: PANEL_DB_USER  
    	  label:  
    	    en: User  
    	    ja: ユーザー  
    	    ms: Pengguna  
    	    pt-br: Usuário  
    	    ru: Пользователь  
    	    ko: 사용자  
    	    zh: 数据库用户  
    	    zh-Hant: 資料庫使用者
              random: true  
              required: true  
              rule: paramCommon  
              type: text  
            - default: halo  
              envKey: PANEL_DB_USER_PASSWORD  
    	  label:  
    	    en: Password  
    	    ja: パスワード  
    	    ms: Kata laluan  
    	    pt-br: Senha  
    	    ru: Пароль  
    	    ko: 비밀번호  
    	    zh: 数据库用户密码  
    	    zh-Hant: 資料庫使用者密碼 
              random: true  
              required: true  
              rule: paramComplexity  
              type: password  #密码字段使用此 type
            - default: admin  
              envKey: HALO_ADMIN  
              labelEn: Admin Username  
              labelZh: 超级管理员用户名  
              required: true  
              rule: paramCommon  
              type: text 
            - default: http://localhost:8080  
              edit: true  
              envKey: HALO_EXTERNAL_URL  
    	  label:  
    	    en: External URL  
    	    ja: 外部URL  
    	    ms: URL Luaran  
    	    pt-br: URL Externa  
    	    ru: Внешний URL  
    	    ko: 외부 URL  
    	    zh: 外部访问地址  
    	    zh-Hant: 外部訪問地址 
              required: true  
              rule: paramExtUrl  
              type: text  
            - default: 8080  
              edit: true  
              envKey: PANEL_APP_PORT_HTTP  
    	  label:  
    	    en: Port  
    	    ja: ポート  
    	    ms: Port  
    	    pt-br: Porta  
    	    ru: Порт  
    	    ko: 포트  
    	    zh: 端口  
    	    zh-Hant: 埠
              required: true  
              rule: paramPort  
              type: number #端口使用此 type
    +

    关于端口字段：

    PANEL_APP_PORT_HTTP 有 web 访问端口的优先使用此 envKey
    envKey 中包含 PANEL_APP_PORT 前缀会被认定为端口类型，并且用于安装前的端口占用校验。注意：端口需要是外部端口

    +

    关于 type 字段：

    + + + + + + + + + + + + + + + + + + + + + + +
    type说明
    servicetype: service 如果该应用需要依赖其他组件，如 mysql redis 等，可以通过 key: mysql 定义依赖的名称，在创建应用时会要求先创建依赖的应用。
    passwordtype: password 敏感信息，如密码相关的字段会默认不显示明文。
    texttype: text 一般内容，比如数据库名称，默认明文显示。
    numbertype: number 一般用在端口相关的配置上，只允许输入数字。
    +

    简单的例子

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    # type: service，定义一个 mysql 的 service 依赖。
    - child:  
        default: ""  
        envKey: PANEL_DB_HOST  
        required: true  
        type: service  
      default: mysql  
      envKey: PANEL_DB_TYPE  
      label:  
        en: Database Service  
        ja: データベースサービス  
        ms: Perkhidmatan Pangkalan Data  
        pt-br: Serviço de Banco de Dados  
        ru: Сервис баз данных  
        ko: 데이터베이스 서비스  
        zh-hant: 資料庫服務  
        zh: 数据库服务  
      required: true  
      type: apps  
      values:  
        - label: MySQL  
          value: mysql  
        - label: MariaDB  
          value: mariadb

    # type: password
    - default: word  
      envKey: PANEL_DB_USER_PASSWORD  
      labelEn: Database Password  
      labelZh: 数据库密码  
      label:  
        en: Database Password  
        ja: データベースのパスワード  
        ms: Kata Laluan Pangkalan Data  
        pt-br: Senha do Banco de Dados  
        ru: Пароль базы данных  
        ko: 데이터베이스 비밀번호  
        zh-hant: 資料庫密碼  
        zh: 数据库密码  
      random: true  
      required: true  
      type: password

    # type: text
    - default: ""  
      edit: true  
      envKey: REDIS_HOST  
      key: redis  
      required: true  
      type: service  
      label:  
        en: Redis Service  
        ja: Redis サービス  
        ms: Perkhidmatan Redis  
        pt-br: Serviço Redis  
        ru: Сервис Redis  
        ko: Redis 서비스  
        zh-Hant: Redis 服務  
        zh: Redis 服务
        
    # type: number
    - default: ""  
      edit: true  
      envKey: DBHUB_DB_PORT  
      required: true  
      type: text  
      label:  
        en: Database Port  
        ja: データベースのポート  
        ms: Pangkalan Data Port  
        pt-br: Porta do Banco de Dados  
        ru: Порт базы данных  
        ko: 데이터베이스 포트  
        zh-hant: 資料庫端口  
        zh: 数据库端口

    # type: select
    - default: "ERROR"  
      envKey: LOG_LEVEL  
      required: true  
      type: select  
      values:  
        - label: DEBUG  
          value: "DEBUG"  
        - label: INFO  
          value: "INFO"  
        - label: WARNING  
          value: "WARNING"  
        - label: ERROR  
          value: "ERROR"  
        - label: CRITICAL  
          value: "CRITICAL"
    +

    rule 字段目前支持的几种校验

    + + + + + + + + + + + + + + + + + + + + + + + +
    rule规则
    paramPort用于限制端口范围为 1-65535
    paramExtUrl格式为 http(s)://(域名/ip):(端口)
    paramCommon英文、数字、.-和_,长度2-30
    paramComplexity支持英文、数字、.%@$!&~_-,长度6-30，特殊字符不能在首尾
    +

    应用 docker-compose.yml 文件

    +

    ${PANEL_APP_PORT_HTTP} 类型的参数，都在 data.yml 中有声明

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    version: "3"  
    services:  
      halo:  
        image: halohub/halo:2.2.0  
        container_name: ${CONTAINER_NAME}  // 固定写法，勿改
        restart: always  
        networks:  
          - 1panel-network  // 1Panel 创建的应用都在此网络下
        volumes:  
          - ./data:/root/.halo2  
        ports:  
          - ${PANEL_APP_PORT_HTTP}:8090  
        command:  
          - --spring.r2dbc.url=r2dbc:pool:${HALO_PLATFORM}://${PANEL_DB_HOST}:${HALO_DB_PORT}/${PANEL_DB_NAME}  
          - --spring.r2dbc.username=${PANEL_DB_USER}  
          - --spring.r2dbc.password=${PANEL_DB_USER_PASSWORD}  
          - --spring.sql.init.platform=${HALO_PLATFORM}  
          - --halo.external-url=${HALO_EXTERNAL_URL}  
          - --halo.security.initializer.superadminusername=${HALO_ADMIN}  
          - --halo.security.initializer.superadminpassword=${HALO_ADMIN_PASSWORD}  
        labels:  
          createdBy: "Apps"  
      
    networks:  
      1panel-network:  
        external: true
    +

    脚本

    1Panel 在 安装之前、升级之前、卸载之后支持执行 .sh 脚本
    分别对应 init.sh upgrade.sh uninstall.sh
    存放目录(以halo为例) : halo/2.2.0/scripts

    +

    本地测试

    将应用目录上传到 1Panel 的 /opt/1panel/resource/apps/local 文件夹下
    注意：/opt 为 1Panel 默认安装目录，请根据自己的实际情况修改
    上传完成后，目录结构如下

    +
    1
    2
    3
    4
    5
    6
    7
    8
    ├──halo 
    	├── logo.png 
    	├── data.yml
    	├── README.md 
    	├── 2.2.0 
    	    ├── data.yml 
    	    ├── data  
    	    └── docker-compose.yml
    +

    在 1Panel 应用商店中，点击更新应用列表按钮同步本地应用

    +

    v1.2 版本及之前版本的本地应用，请参考这个文档修改

    +

    提交文件

    1
    2
    3
    git add .
    git commit -m "Add my-app"
    git push origin dev
    +

    提交 Pull Request

    在你的仓库点击 Pull requests 菜单
    点击 New pull request ，填写标题和描述
    选择由你的分支提交到 1Panel-dev/appstore

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/bb18d851/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    1panel
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/bc56f789/index.html b/posts/bc56f789/index.html new file mode 100644 index 0000000..ae7491c --- /dev/null +++ b/posts/bc56f789/index.html @@ -0,0 +1,560 @@ +C# 入门 | Bi's Blog + + + + + + + + + + + + + +

    C# 入门

    发表于|更新于|学习
    |总字数:121|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    今天开始学习C#

    +

    环境安装

    下载Visual Studio,社区版就可以

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Visual Studio
    +
    Visual Studio
    +
    + +
    +
    +

    下载的是安装器选择.Net桌面开发，注意修改安装位置

    +
    .Net 桌面开发
    + +

    第一个程序

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    using System;
    namespace HelloWorldApplication
    {
        /* 类名为 HelloWorld */
        class HelloWorld
        {
            /* main函数 */
            static void Main(string[] args)
            {
                /* 我的第一个 C# 程序 */
                Console.WriteLine("Hello World!");
                Console.ReadKey();
            }
        }
    }
    +

    这也是一个默认的格式

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/bc56f789/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    C#
    相关推荐
    2025-08-16
    C# 基本语法
    简介C# 是一种面向对象的编程语言。在面向对象的程序设计方法中，程序由各种相互交互的对象组成。相同种类的对象通常具有相同的类型，或者说，是在相同的 class 中。 例如，以 Rectangle（矩形）对象为例。它具有 length 和 width 属性。根据设计，它可能需要接受这些属性值、计算面积和显示细节。 实例 123456789101112131415161718192021222324252627282930313233343536using System;namespace RectangleApplication{ class Rectangle { // 成员变量 double length; double width; public void Acceptdetails() { length = 4.5; width = 3.5; } public double ...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    C# 基本语法
    C# 入门
    C# 入门
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/c6143ad3/index.html b/posts/c6143ad3/index.html new file mode 100644 index 0000000..d2e36a1 --- /dev/null +++ b/posts/c6143ad3/index.html @@ -0,0 +1,558 @@ +自定义页脚（新） | Bi's Blog + + + + + + + + + + + + + +

    自定义页脚（新）

    发表于|更新于|建站手札
    |总字数:3.7k|阅读时长:22分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    添加CSS

    修改有风险，注意备份

    +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    /*https://codepen.io/poojanahelia/pen/Exabvdy*/

    #footer {
        background-color: rgba(0, 0, 0, 0); /* 修改透明色 */
        color: #fff;
        padding: 0;
    }

    #footer .footer-other {
        padding: 0;
    }

    .footer-copyright{
        padding: 0;
    }

    .my-footer-logo {
        color: white;
    }

    .my-footer-wave-svg {
        height: 50px;
        width: 100%;
        transform: scale(-1, -1) translateY(-10px); /*;*/
    }

    .my-footer-wave-path {
        fill: #177ecd;
    }

    .my-footer-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 1230px;
        padding: 40px 15px 450px;
        position: relative;
    }

    .my-footer-content-column {
        box-sizing: border-box;
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        color: #fff;
    }

    .my-footer-content-column ul li a {
        color: #fff;
        text-decoration: none;
    }

    .my-footer-logo-link {
        display: inline-block;
    }

    .my-footer-menu {
        margin-top: 15px;
    }

    .my-footer-menu-name {
        color: #fffff2;
        font-size: 15px;
        font-weight: 900;
        letter-spacing: .1em;
        line-height: 18px;
        margin-bottom: 0;
        margin-top: 0;
        text-transform: uppercase;
    }

    .my-footer-menu-list {
        list-style: none;
        margin-bottom: 0;
        margin-top: 10px;
        padding-left: 0;
    }

    .my-footer-menu-list li {
        margin-top: 5px;
    }

    .my-footer-call-to-action-description {
        color: #fffff2;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .my-footer-call-to-action-button:hover {
        background-color: #fffff2;
        color: #00bef0;
    }

    .button:last-of-type {
        margin-right: 0;
    }

    .my-footer-call-to-action-button {
        background-color: #03708c;
        border-radius: 21px;
        color: #fffff2;
        display: inline-block;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .1em;
        line-height: 18px;
        padding: 12px 30px;
        margin: 0 10px 10px 0;
        text-decoration: none;
        text-transform: uppercase;
        transition: background-color .2s;
        cursor: pointer;
        position: relative;
    }

    .my-footer-call-to-action {
        margin-top: 17px;
    }

    .my-footer-call-to-action-title {
        color: #fffff2;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: .1em;
        line-height: 18px;
        margin-bottom: 0;
        margin-top: 0;
        text-transform: uppercase;
    }

    .my-footer-call-to-action-link-wrapper {
        margin-bottom: 0;
        margin-top: 10px;
        color: #fff;
        text-decoration: none;
    }

    .my-footer-call-to-action-link-wrapper a {
        color: #fff;
        text-decoration: none;
    }


    .my-footer-social-links {
        bottom: -1px;
        height: 54px;
        position: absolute;
        right: 0;
        width: 236px;
    }

    .my-footer-social-amoeba-svg {
        height: 54px;
        left: 0;
        display: block;
        position: absolute;
        top: 0;
        width: 236px;
    }

    .my-footer-social-amoeba-path {
        fill: #03708c;
    }

    .my-footer-social-link.email {
        height: 41px;
        left: 5px;
        top: 14px;
        width: 41px;
    }

    .my-footer-social-link {
        display: block;
        padding: 10px;
        position: absolute;
    }

    .hidden-link-text {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
        clip-path: inset(0px 0px 99.9% 99.9%);
        overflow: hidden;
        height: 1px;
        width: 1px;
        padding: 0;
        border: 0;
        top: 50%;
    }

    .my-footer-social-icon-svg {
        display: block;
    }

    .my-footer-social-icon-path {
        fill: #fffff2;
        transition: fill .2s;
    }

    .my-footer-social-link.follow {
        height: 42px;
        left: 124px;
        top: 13px;
        width: 42px;
    }

    .my-footer-social-link.rss {
        height: 43px;
        left: 178px;
        top: 10px;
        width: 43px;
    }

    .my-footer-social-link.github {
        height: 62px;
        left: 54px;
        top: -4px;
        width: 62px;
    }

    .my-footer-copyright {
        background-color: #03708c;
        color: #fff;
        padding: 15px 30px;
        text-align: center;
    }

    .my-footer-copyright-wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 1200px;
    }

    .my-footer-copyright-text {
        color: #fff;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        margin-bottom: 0;
        margin-top: 0;
    }

    .my-footer-copyright-link {
        color: #fff;
        text-decoration: none;
    }

    .my-footer-content-div {
        background: #177ecd
    }

    .my-footer-svg-div {
        width: 100%;
        max-height: 200px;
    }

    /* Media Query For different screens */
    @media (min-width: 320px) and (max-width: 479px) {
        /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
        .my-footer-content {
            margin-left: auto;
            margin-right: auto;
            max-width: 1230px;
            padding: 40px 15px 649px;
            position: relative;
        }

        /* 不展示logo */
        .my-footer-logo {
            display: none;
        }
    }

    @media (min-width: 480px) and (max-width: 599px) {
        /* smartphones, Android phones, landscape iPhone */
        .my-footer-content {
            margin-left: auto;
            margin-right: auto;
            max-width: 1230px;
            padding: 40px 15px 738px;
            position: relative;
        }

        .my-footer-logo {
            padding-left: 177px; /* Qlogo 稍微偏移一点 */
            padding-right: 170px;
        }
    }

    @media (min-width: 600px) and (max-width: 800px) {
        /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
        .my-footer-content {
            margin-left: auto;
            margin-right: auto;
            max-width: 1230px;
            padding: 40px 15px 758px;
            position: relative;
        }


    }

    @media (min-width: 801px) {
        /* tablet, landscape iPad, lo-res laptops ands desktops */

    }

    @media (min-width: 1025px) {
        /* big landscape tablets, laptops, and desktops */

    }

    @media (min-width: 1281px) {
        /* hi-res laptops and desktops */

    }


    @media (min-width: 760px) {
        .my-footer-content {
            margin-left: auto;
            margin-right: auto;
            max-width: 1230px;
            padding: 10px 15px 237px;
            position: relative;
        }


        .my-footer-content-column {
            /*五列的话 19.99 %*/
            width: 24.99%;
        }
    }

    @media (min-width: 568px) {

    }

    @media (min-width: 600px) and (max-width: 760px) {
        /* 在这里编写适用于小屏幕的样式 */
        .my-footer-logo {
            padding-left: 212px; /* Qlogo 稍微偏移一点 */
            padding-right: 204px;
        }
    }
    /* 页脚波浪的颜色 */
    [data-theme='dark'] .my-footer-wave-path {
        fill: #0f3858;
    }
    [data-theme='dark'] .my-footer-content-div {
        background-color: #0f3858;
    }

    /* 页脚海底的颜色 */
    [data-theme='dark'] .my-footer-copyright {
        background-color: #2b3f49;
    }
    [data-theme='dark'] .my-footer-social-amoeba-path {
        fill: #2b3f49;
    }

    + +

    注入

    打开主题配置文件 _config.butterfly.yml，写入以下内容（以目前我的页脚为例，具体内容请自行修改）：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    # Footer Settings
    # --------------------------------------
    footer:
      custom_text: |
        <div class="my-footer-svg-div">
          <svg class="my-footer-wave-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none">
          <path class="my-footer-wave-path" d="M851.8,100c125,0,288.3-45,348.2-64V0H0v44c3.7-1,7.3-1.9,11-2.9C80.7,22,151.7,10.8,223.5,6.3C276.7,2.9,330,4,383,9.8 c52.2,5.7,103.3,16.2,153.4,32.8C623.9,71.3,726.8,100,851.8,100z"></path>
          </svg>    
        </div>
        <div class="my-footer-content-div" >
        <div class="my-footer-content">
            <div class="my-footer-content-column">
                <div class="my-footer-logo">
                    <a class="my-footer-logo-link" href="#">
                        <span class="hidden-link-text">LOGO</span>
                        <img src="/image/footer/qlogo_white_no_words.png" style="height:40%; width:40%">
                    </a>
                </div>
                <div class="my-footer-menu">
                    <h2 class="my-footer-menu-name">开始</h2>
                    <ul id="menu-get-started" class="my-footer-menu-list">
                        <li class="menu-item menu-item-type-post_type menu-item-object-product">
                            <a href="/pages/about.html">关于本站</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="my-footer-content-column">
                <div class="my-footer-menu">
                    <h2 class="my-footer-menu-name">快速链接</h2>
                    <ul id="menu-company" class="my-footer-menu-list">
                        <li class="menu-item menu-item-type-post_type menu-item-object-product">
                            <a href="https://hexo.io/zh-cn/">Hexo</a>&nbsp;⨯&nbsp;<a href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a>
                        </li>
                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category">
                            <a href="/archives/">时间轴</a>&nbsp;|&nbsp;<a href="/DO_NOT_render/cosmoscope/cosmoscope_trim.html">关系图</a>&nbsp;|&nbsp;<a href="/pages/categories/">分类</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-product">
                            <a href="/p/91b7dad/">同款页脚</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-product">
                            <a href="https://www.foreverblog.cn/" rel="noopener external nofollow noreferrer" target="_blank" > <img class="img-foreverblog" src="/image/footer/forever_logo_en_default_white.png" alt="" style="width:auto;height:21px;margin-top:6px"> </a>
                        </li>
                    </ul>
                </div>
        
            </div>

            <div class="my-footer-content-column">
                <div class="my-footer-menu">
                    <h2 class="my-footer-menu-name">法律声明</h2>
                    <ul id="menu-legal" class="my-footer-menu-list">
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434">
                            <a href="/pages/privacy.html">隐私政策</a>
                        </li>
                    </ul>
                </div>
                <div class="my-footer-call-to-action">
                    <h2 class="my-footer-call-to-action-title">联系本站</h2>
                    <ul id="menu-legal" class="my-footer-menu-list">
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434">
                            <a href="/DO_NOT_render/wechatOA/index.html">微信公众号</a>
                        </li>
        
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434">
                            <a class="my-footer-call-to-action-link" href="mailto:uuanqin@uuanqin.top" target="_self">
                                uuan<span style="display:none">@</span>qi<!-- >@ -->n@<span style="display:none">@</span>uu<!-- >@. -->an<span style="display:none">@</span>qin.top
                            </a>
                        </li>
        
                    </ul>
                </div>
        
            </div>
            <div class="my-footer-content-column">
                <ul id="menu-get-started" class="my-footer-menu-list">
                    <li class="menu-item menu-item-type-post_type menu-item-object-product">
                        <a href="https://notbyai.fyi/" target="_blank" rel="external nofollow noopener noreferrer"><img class="img-not-ai" src="/image/footer/Written-By-Human-Not-By-AI-Badge-white.svg" alt="Written by Human, Not by AI"></a>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-product">
                        <a href="/pages/cc.html" ><img src="/image/footer/by-nc-sa.svg" alt="署名-非商业性使用-相同方式共享 4.0 国际"></a>
                    </li>
        
                    <li class="menu-item menu-item-type-post_type menu-item-object-product">
                        ©2022-2025 By wuanqin
                    </li>
                </ul>
            </div>
        
            <div class="my-footer-social-links"> <svg class="my-footer-social-amoeba-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 54">
                <path class="my-footer-social-amoeba-path" d="M223.06,43.32c-.77-7.2,1.87-28.47-20-32.53C187.78,8,180.41,18,178.32,20.7s-5.63,10.1-4.07,16.7-.13,15.23-4.06,15.91-8.75-2.9-6.89-7S167.41,36,167.15,33a18.93,18.93,0,0,0-2.64-8.53c-3.44-5.5-8-11.19-19.12-11.19a21.64,21.64,0,0,0-18.31,9.18c-2.08,2.7-5.66,9.6-4.07,16.69s.64,14.32-6.11,13.9S108.35,46.5,112,36.54s-1.89-21.24-4-23.94S96.34,0,85.23,0,57.46,8.84,56.49,24.56s6.92,20.79,7,24.59c.07,2.75-6.43,4.16-12.92,2.38s-4-10.75-3.46-12.38c1.85-6.6-2-14-4.08-16.69a21.62,21.62,0,0,0-18.3-9.18C13.62,13.28,9.06,19,5.62,24.47A18.81,18.81,0,0,0,3,33a21.85,21.85,0,0,0,1.58,9.08,16.58,16.58,0,0,1,1.06,5A6.75,6.75,0,0,1,0,54H236C235.47,54,223.83,50.52,223.06,43.32Z"></path>
            </svg>
                <a class="my-footer-social-link github" href="https://github.com/uuanqin" target="_blank" rel="external nofollow noopener noreferrer">
                    <span class="hidden-link-text">Github</span>
                    <svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                        <path class="my-footer-social-icon-path" d="M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z "></path>
                    </svg>
                </a>
                <a class="my-footer-social-link email" href="mailto:uuanqin@uuanqin.top" target="_blank" rel="external nofollow noopener noreferrer">
                    <span class="hidden-link-text">Email</span>
                    <svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                        <path class="my-footer-social-icon-path" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/>
                    </svg>
                </a>
                <a class="my-footer-social-link follow" href="https://app.follow.is/share/users/uuanqin" target="_blank" rel="external nofollow noopener noreferrer">
                    <span class="hidden-link-text">Follow</span>
                    <svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                      <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                      <path class="my-footer-social-icon-path" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
                    </svg>
                </a>
                <a class="my-footer-social-link rss" href="/atom.xml" target="_blank" rel="external nofollow noopener noreferrer">
                    <span class="hidden-link-text">RSS</span>
                    <svg class="my-footer-social-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                        <path class="my-footer-social-icon-path" d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/>
                    </svg>
                </a>
        
            </div>
        </div>
        </div>
        <div class="my-footer-copyright">
            <div class="my-footer-copyright-wrapper">
                <p class="my-footer-copyright-text">
                    <a href="https://beian.miit.gov.cn/" rel="noopener external nofollow noreferrer"><img class="icp-icon" src="/image/footer/icp.ico"><span>津ICP备2022002156号-1</span></a>
                    &nbsp;|&nbsp;<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12011202000621" rel="noopener external nofollow noreferrer"><img class="icp-icon" src="/image/footer/beian_logo.png"><span>津公网安备 12011202000621号</span></a>
                    &nbsp;|&nbsp;&nbsp;
                    <span>违法与不良信息举报邮箱&nbsp;
                      j<span style="display:none">@</span><!-- >@ -->b@<span style="display:none">@</span>uu<!-- >@. -->an<span style="display:none">@</span>q.in
                    </span>
                </p>
            </div>
        </div>
    +

    参考

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Wuanqin的博客
    +
    Wuanqin
    +
    + +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/c6143ad3/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-25
    为博客添加CMS系统
    序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    cover
    2025-08-26
    搭建Owncloud并集成Onlyoffice
    引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    2025-08-13
    自定义导航栏
    最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
    cover
    2026-01-16
    在侧边栏添加日历和倒计时
    突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/ce1ec3fe/index.html b/posts/ce1ec3fe/index.html new file mode 100644 index 0000000..35fec56 --- /dev/null +++ b/posts/ce1ec3fe/index.html @@ -0,0 +1,567 @@ +使用GitHub推送Hexo到服务器 | Bi's Blog + + + + + + + + + + + + + +

    使用GitHub推送Hexo到服务器

    发表于|更新于|建站手札
    |总字数:721|阅读时长:3分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。

    +

    建立GitHub仓库

    因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。

    +
      +

    1. 在本地安装git

      +
      2. +

    2. 打开git bash配置用户名和邮箱

      + 
      1
      2
      git config --global user.name "yourname"
      git config --global user.email "youremail"
      +

      可以使用 git config –list查看当前所有的配置

      +
      3. +

    3. 在github上创建自己的账号（在自己的电脑和服务器上）

      +
      4. +

    4. 创建SSH Key
      a:打开Git Bash，输入pwd查看当前路径
      b.输入ssh-keygen -t rsa –C “youremail@example.com”
      (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤)

      +
      + 924058.webp +
      5. +

    5. 在GitHub上传自己的公钥

      +
      946620.webp
      6. +

    6. 新建一个私有仓库

      +
      7. +
    +

    上传文件到仓库

    在自己hexo根目录下使用powershell，输入git init，然后git push到之前自己新建的仓库。

    +

    创建Action

    创建Action

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

    on:
      push:
        branches:
          - main 

      release:
        types:
          - published

      workflow_dispatch:

    env:
      TZ: Asia/Shanghai

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - name: 检查分支
          uses: actions/checkout@v3
          with:
            ref: main

        - name: 缓存项目 npm 包
          id: cache-node-modules
          uses: actions/cache@v3
          with:
            path: node_modules
            key: ${{ runner.os }}-nodeModules-${{ hashFiles('package-lock.json') }}-${{ hashFiles('package.json') }}
            restore-keys: |
              ${{ runner.os }}-nodeModules-

        - name: 安装 Node
          uses: actions/setup-node@v3
          with:
            node-version: "20.x"

        - name: 安装 Hexo
          run: |
            npm install hexo-cli --global

        - name: 安装依赖
          if: steps.cache-node-modules.outputs.cache-hit != 'true'
          run: |
            npm install

        - name: 清理文件树
          run: |
            npm run clean

        - name: 生成静态文件并压缩
          run: |
            npm run build

        - name: 部署
          run: |
            cd ./public
            git init
            git config user.name "${{ github.actor }}"
            git config user.email "${{ github.actor }}@users.noreply.github.com"
            git add .
            git commit -m "${{ github.event.head_commit.message }}··[$(date +"%Z %Y-%m-%d %A %H:%M:%S")]"
            git push --force --quiet "https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git" master:page
        - name: 服务器执行拉取命令
            uses: appleboy/ssh-action@v1
            with:
                host: ${{ secrets.SERVER_IP }}
                username: ${{ secrets.USERNAME }}
                key: ${{ secrets.KEY }}
                passphrase: ${{ secrets.PASSPHRASE }}
                port: ${{ secrets.PORT }}
                script: |
                cd /opt/1panel/apps/openresty/openresty/www/sites/blog.liushen.fun/index/
                git config --global --add safe.directory "$(pwd)"
                git fetch --all --depth=1
                git reset --hard origin/main
                git pull --depth=1
                echo "✅ 已拉取 page 分支最新内容"
    +

    环境变量

    此次添加变量较多，有：SERVER_IP，USERNAME，PASSPHRASE，KEY，PORT五个变量，如下：

    +

    SERVER_IP：服务器IP
    USERNAME：SSH链接用户名，一般为root
    PASSPHRASE：密钥密码，用来提升强度用
    KEY：密钥(私钥)
    PORT：SSH登录端口，一般为22

    +

    测试

    运行一下这个Action无报错即可。

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/ce1ec3fe/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-12
    利用插件自定义页脚菜单
    安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
    cover
    2025-08-11
    自定义右键菜单
    演示本站右键即可查看,和原有菜单相比比较美观 新建pug文件在 \themes\butterfly\layout\includes新建 rightmenu.pug 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475#rightMenu.js-pjax .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.history.forward();") i.fa.fa-arrow-right ...
    cover
    2025-08-26
    搭建Owncloud并集成Onlyoffice
    引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    cover
    2025-08-14
    自定义页脚（新）
    添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/d2c8521/index.html b/posts/d2c8521/index.html new file mode 100644 index 0000000..31bbe48 --- /dev/null +++ b/posts/d2c8521/index.html @@ -0,0 +1,545 @@ +将博客仓库转移到gitea | Bi's Blog + + + + + + + + + + + + + +

    将博客仓库转移到gitea

    发表于|更新于|技术
    |总字数:327|阅读时长:1分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    在上一篇文章中已经完成了gitea的安装
    那么博客源码迁移倒是没问题，直接git remote add origin就行，但是action文件就有些变更。
    这是我修改的action文件：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    name: 自动部署
    on:
      push:
        branches:
          - master
      release:
        types:
          - published
      workflow_dispatch:
    env:
      TZ: Asia/Shanghai
    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - name: 检查分支
          uses: actions/checkout@v4
          with:
            ref: master
        - name: 缓存项目 npm 包
          id: cache-node-modules
          uses: actions/cache@v3
          with:
            path: node_modules
            key: ${{ runner.os }}-nodeModules-${{ hashFiles('package-lock.json') }}-${{ hashFiles('package.json') }}
            restore-keys: |
              ${{ runner.os }}-nodeModules-
        - name: 安装 Node
          uses: actions/setup-node@v4
          with:
            node-version: "22.x"
        - name: 安装 Hexo
          run: |
            npm install hexo-cli --global
        - name: 安装依赖
          if: steps.cache-node-modules.outputs.cache-hit != 'true'
          run: |
            npm install
        - name: 清理文件树
          run: |
            npm run clean
        - name: 生成静态文件并压缩
          run: |
            npm run build
        - name: 部署
          run: |
            cd ./public
            git init
            git config user.name "${{ gitea.actor }}"
            git config user.email "${{ gitea.actor }}@noreply.gitea.io"
            git add .
            git commit -m "${{ gitea.event.head_commit.message }}··[$(date +"%Z %Y-%m-%d %A %H:%M:%S")]"
            git push --force --quiet "https://${{ gitea.actor }}:${{ secrets.DEPLOY_TOKEN }}@git.biss.click/biss/blog.git" master:page
        - name: Deploy to Server
          run: |
            curl -k -X POST
    +

    仅供参考吧，最后面是webhook，可以自己改改。

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/d2c8521/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    gitea
    相关推荐
    cover
    2026-02-07
    安装gitea
    今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）PS:我的服务器为2C2G 安装gitea这里用二进制文件安装 获取二进制文件：123wget -O gitea https://dl.gitea.com/gitea/1.25.4/gitea-1.25.4-linux-amd64chmod +x giteacp gitea /usr/local/bin/gitea 创建用户这一步不是必须的，但是推荐这样，用root用户很容易出问题。 1234567891011121314151617181920# On Ubuntu/Debian:adduser \ --system \ --shell /bin/bash \ --gecos 'Git Version Control' \ --group \ --disabled-password \ --home /home/git \ git# On Fedora/RHEL/CentOS:groupadd --system gitaddus...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/da17d00/index.html b/posts/da17d00/index.html new file mode 100644 index 0000000..ad57eee --- /dev/null +++ b/posts/da17d00/index.html @@ -0,0 +1,591 @@ +在侧边栏中添加欢迎信息 | Bi's Blog + + + + + + + + + + + + + +

    在侧边栏中添加欢迎信息

    发表于|更新于|建站手札
    |总字数:2.3k|阅读时长:10分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    效果展示

    效果展示
    + +

    开始折腾

    申请腾讯地图的api key

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    腾讯地图
    +
    Tencent
    +
    + +
    +
    +

    自行查看文档,要注意在填写信任域名时不填 https://

    +

    添加js

    在主题 /source/js/目录下添加 txmap.js

    +

    有一个更完善的js脚本

    +
    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    txmap.js
    +
    github
    +
    + +
    +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    //get请求
    $.ajax({
        type: 'get',
        url: 'https://apis.map.qq.com/ws/location/v1/ip',
        data: {
            key: '你的key',
            output: 'jsonp',
            callback: '?',
        },
        dataType: 'jsonp',
        success: function (res) {
            window.ipLocation = res;
        }
    })
    function getDistance(e1, n1, e2, n2) {
        const R = 6371
        const { sin, cos, asin, PI, hypot } = Math
        let getPoint = (e, n) => {
            e *= PI / 180
            n *= PI / 180
            return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) }
        }

        let a = getPoint(e1, n1)
        let b = getPoint(e2, n2)
        let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
        let r = asin(c / 2) * 2 * R
        return Math.round(r);
    }

    function showWelcome() {

        let dist = getDistance(112.92358, 35.79807, ipLocation.result.location.lng, ipLocation.result.location.lat); //这里记得换成自己的经纬度
        let pos = ipLocation.result.ad_info.nation;
        let ip;
        let posdesc;
        //根据国家、省份、城市信息自定义欢迎语
        switch (ipLocation.result.ad_info.nation) {
            case "日本":
                posdesc = "よろしく，一起去看樱花吗";
                break;
            case "美国":
                posdesc = "Let us live in peace!";
                break;
            case "英国":
                posdesc = "想同你一起夜乘伦敦眼";
                break;
            case "俄罗斯":
                posdesc = "干了这瓶伏特加！";
                break;
            case "法国":
                posdesc = "C'est La Vie";
                break;
            case "德国":
                posdesc = "Die Zeit verging im Fluge.";
                break;
            case "澳大利亚":
                posdesc = "一起去大堡礁吧！";
                break;
            case "加拿大":
                posdesc = "拾起一片枫叶赠予你";
                break;
            case "中国":
                pos = ipLocation.result.ad_info.province + " " + ipLocation.result.ad_info.city + " " + ipLocation.result.ad_info.district;
                ip = ipLocation.result.ip;
                switch (ipLocation.result.ad_info.province) {
                    case "北京市":
                        posdesc = "北——京——欢迎你~~~";
                        break;
                    case "天津市":
                        posdesc = "讲段相声吧";
                        break;
                    case "河北省":
                        posdesc = "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山";
                        break;
                    case "山西省":
                        switch (ipLocation.result.ad_info.city) {
                            case "太原市":
                                posdesc = "秋叶蓝不城";
                                break;
                            case "晋城市":
                                posdesc = "一方水土养一方人，晋城话说给晋城人...";
                                break;
                            default:
                                posdesc = "展开坐具长三尺，已占山河五百余";
                                break;
                        }
                        break;
                    case "内蒙古自治区":
                        posdesc = "天苍苍，野茫茫，风吹草低见牛羊";
                        break;
                    case "辽宁省":
                        posdesc = "我想吃烤鸡架！";
                        break;
                    case "吉林省":
                        posdesc = "状元阁就是东北烧烤之王";
                        break;
                    case "黑龙江省":
                        posdesc = "很喜欢哈尔滨大剧院";
                        break;
                    case "上海市":
                        posdesc = "众所周知，中国只有两个城市";
                        break;
                    case "江苏省":
                        switch (ipLocation.result.ad_info.city) {
                            case "南京市":
                                posdesc = "这是我挺想去的城市啦";
                                break;
                            case "苏州市":
                                posdesc = "上有天堂，下有苏杭";
                                break;
                            default:
                                posdesc = "散装是必须要散装的";
                                break;
                        }
                        break;
                    case "浙江省":
                        posdesc = "东风渐绿西湖柳，雁已还人未南归";
                        break;
                    case "河南省":
                        switch (ipLocation.result.ad_info.city) {
                            case "郑州市":
                                posdesc = "豫州之域，天地之中";
                                break;
                            case "南阳市":
                                posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
                                break;
                            case "驻马店市":
                                posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
                                break;
                            case "开封市":
                                posdesc = "刚正不阿包青天";
                                break;
                            case "洛阳市":
                                posdesc = "洛阳牡丹甲天下";
                                break;
                            default:
                                posdesc = "可否带我品尝河南烩面啦？";
                                break;
                        }
                        break;
                    case "安徽省":
                        posdesc = "蚌埠住了，芜湖起飞";
                        break;
                    case "福建省":
                        posdesc = "井邑白云间，岩城远带山";
                        break;
                    case "江西省":
                        posdesc = "落霞与孤鹜齐飞，秋水共长天一色";
                        break;
                    case "山东省":
                        posdesc = "遥望齐州九点烟，一泓海水杯中泻";
                        break;
                    case "湖北省":
                        switch (ipLocation.result.ad_info.city) {
                            case "黄冈市":
                                posdesc = "红安将军县！辈出将才！";
                                break;
                            default:
                                posdesc = "来碗热干面~";
                                break;
                        }
                        break;
                    case "湖南省":
                        posdesc = "74751，长沙斯塔克";
                        break;
                    case "广东省":
                        switch (ipLocation.result.ad_info.city) {
                            case "广州市":
                                posdesc = "看小蛮腰，喝早茶了嘛~";
                                break;
                            case "深圳市":
                                posdesc = "今天你逛商场了嘛~";
                                break;
                            case "阳江市":
                                posdesc = "阳春合水！博主家乡~ 欢迎来玩~";
                                break;
                            default:
                                posdesc = "来两斤福建人~";
                                break;
                        }
                        break;
                    case "广西壮族自治区":
                        posdesc = "桂林山水甲天下";
                        break;
                    case "海南省":
                        posdesc = "朝观日出逐白浪，夕看云起收霞光";
                        break;
                    case "四川省":
                        posdesc = "康康川妹子";
                        break;
                    case "贵州省":
                        posdesc = "茅台，学生，再塞200";
                        break;
                    case "云南省":
                        posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天";
                        break;
                    case "西藏自治区":
                        posdesc = "躺在茫茫草原上，仰望蓝天";
                        break;
                    case "陕西省":
                        posdesc = "来份臊子面加馍";
                        break;
                    case "甘肃省":
                        posdesc = "羌笛何须怨杨柳，春风不度玉门关";
                        break;
                    case "青海省":
                        posdesc = "牛肉干和老酸奶都好好吃";
                        break;
                    case "宁夏回族自治区":
                        posdesc = "大漠孤烟直，长河落日圆";
                        break;
                    case "新疆维吾尔自治区":
                        posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风";
                        break;
                    case "台湾省":
                        posdesc = "我在这头，大陆在那头";
                        break;
                    case "香港特别行政区":
                        posdesc = "永定贼有残留地鬼嚎，迎击光非岁玉";
                        break;
                    case "澳门特别行政区":
                        posdesc = "性感荷官，在线发牌";
                        break;
                    default:
                        posdesc = "带我去你的城市逛逛吧！";
                        break;
                }
                break;
            default:
                posdesc = "带我去你的国家逛逛吧";
                break;
        }

        //根据本地时间切换欢迎语
        let timeChange;
        let date = new Date();
        if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span>🌤️ 早上好，一日之计在于晨</span>";
        else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span>☀️ 中午好，记得午休喔~</span>";
        else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span>🕞 下午好，饮茶先啦！</span>";
        else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span>🚶‍♂️ 即将下班，记得按时吃饭~</span>";
        else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span>🌙 晚上好，夜生活嗨起来！</span>";
        else timeChange = "夜深了，早点休息，少熬夜";

    // 新增ipv6显示为指定内容
        if (ip.includes(":")) {
            ip = "<br>好复杂，咱看不懂~(ipv6)";
        }
        try {
            //自定义文本和需要放的位置
            document.getElementById("welcome-info").innerHTML =
                `欢迎来自 <b><span style="color: var(--kouseki-ip-color);font-size: var(--kouseki-gl-size)">${pos}</span></b> 的小友💖<br>${posdesc}🍂<br>当前位置距博主约 <b><span style="color: var(--kouseki-ip-color)">${dist}</span></b> 公里！<br>您的IP地址为：<b><span class="ip-mask">${ip}</span></b><br>${timeChange} <br>`;
        } catch (err) {
             console.log("Pjax无法获取元素")
        }
    }
    window.onload = showWelcome;
    // 如果使用了pjax在加上下面这行代码
    document.addEventListener('pjax:complete', showWelcome);
    + +

    添加css文件

    在主题文件夹/source/css/在这里我添加了模糊IP地址。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    #welcome-info {
        overflow: hidden;
        border-radius: 14px;
        --kouseki-welcome-color: #49B1F5;
        --kouseki-ip-color: #49B1F5;
        --kouseki-gl-size: 16px!important;
      }
    /* 给 IP 地址的 span 再包一层，便于选择器定位 */
    /* JS 原文已经生成 <b><span>IP</span></b>，这里我们给这个 span 加类名 ip-mask */
    /* 如果你不方便改 HTML，可直接用属性选择器：#welcome-info b span:nth-child(1) */
    #welcome-info b span.ip-mask {
        display: inline-block;
        filter: blur(6px);
        transition: filter .3s ease;
        cursor: pointer;
        user-select: none;   /* 防止复制到模糊文本 */
    }

    /* 鼠标悬停或点击时（:active）立即清晰 */
    #welcome-info b span.ip-mask:hover,
    #welcome-info b span.ip-mask:active {
        filter: blur(0);
    }

    /* 如果想做成「必须点一下才永久清晰」，把 :hover 去掉即可 */
    + +

    引用

    在主题配置文件中添加

    +
    1
    2
    3
    4
    inject: 
      bottom: 
    +    - <script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js"></script> # jQuery
    +    - <script async data-pjax src="/js/txmap.js"></script> # 腾讯位置API
    + +

    在需要展示文本的容器上添加相应id（welcome-info）就可以了，例如我想添加在网站公告栏信息的下方，于是就在 [BlogRoot]\themes\butterfly\layout\includes\widget\card_announcement.pug的最后一行加上这个，缩进与上一行相同即可

    +
    1
    2
    3
        .announcement_content!= theme.aside.card_announcement.content
        //- 添加欢迎访客的信息
    +    #welcome-info
    + +

    参考内容

    +
    🪧引用站外地址，不保证站点的可用性和安全性
    +
    +
    +
    +
    Ganzhe的博文
    +
    Ganzhe
    +
    + +
    +
    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/da17d00/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    网站
    相关推荐
    cover
    2025-08-12
    利用 SiteMap 随机访问站内页面
    在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
    2025-08-14
    自定义分类条
    修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
    cover
    2025-08-26
    搭建Owncloud并集成Onlyoffice
    引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
    cover
    2025-08-18
    使用GitHub推送Hexo到服务器
    1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
    cover
    2025-08-02
    部署历程
    前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
    cover
    2026-02-10
    添加网站左上角菜单
    看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。 🪧引用站外地址，不保证站点的可用性和安全性 liushen liushen 预计做好后是这种效果： 首先，修改\themes\butterfly\layout\includes\header\nav.pug: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051nav#nav //- 左侧区域：包含指纹菜单和网站名 span#blog-info #ls-menu-container i.fas.fa-fingerprint #ls-menu-panel .ls-section .ls-title 😀 个人网站 .ls-grid ...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/e9a8e898/index.html b/posts/e9a8e898/index.html new file mode 100644 index 0000000..4c6ac0d --- /dev/null +++ b/posts/e9a8e898/index.html @@ -0,0 +1,585 @@ +C# 基本语法 | Bi's Blog + + + + + + + + + + + + + +

    C# 基本语法

    发表于|更新于|学习
    |总字数:1.4k|阅读时长:4分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    简介

    C# 是一种面向对象的编程语言。在面向对象的程序设计方法中，程序由各种相互交互的对象组成。相同种类的对象通常具有相同的类型，或者说，是在相同的 class 中。

    +

    例如，以 Rectangle（矩形）对象为例。它具有 length 和 width 属性。根据设计，它可能需要接受这些属性值、计算面积和显示细节。

    +

    实例

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    using System;
    namespace RectangleApplication
    {
        class Rectangle
        {
            // 成员变量
            double length;
            double width;
            public void Acceptdetails()
            {
                length = 4.5;    
                width = 3.5;
            }
            public double GetArea()
            {
                return length * width;
            }
            public void Display()
            {
                Console.WriteLine("Length: {0}", length);
                Console.WriteLine("Width: {0}", width);
                Console.WriteLine("Area: {0}", GetArea());
            }
        }
       
        class ExecuteRectangle
        {
            static void Main(string[] args)
            {
                Rectangle r = new Rectangle();
                r.Acceptdetails();
                r.Display();
                Console.ReadLine();
            }
        }
    }
    +

    尝试一下 »
    当上面的代码被编译和执行时，它会产生下列结果：

    +
    1
    2
    3
    Length: 4.5
    Width: 3.5
    Area: 15.75
    +

    using 关键字

    在任何 C# 程序中的第一条语句都是：

    +

    using System;
    using 关键字用于在程序中包含命名空间。一个程序可以包含多个 using 语句。

    +

    class 关键字

    class 关键字用于声明一个类。

    +

    C# 中的注释

    注释是用于解释代码。编译器会忽略注释的条目。在 C# 程序中，多行注释以 /* 开始，并以字符 */ 终止，如下所示：

    +
    1
    2
    3
    /* 这个程序演示
    C# 的注释
    使用 */
    +

    单行注释是用 // 符号表示。例如：

    +
    1
    // 这一行是注释
    +

    成员变量

    变量是类的属性或数据成员，用于存储数据。在上面的程序中，Rectangle 类有两个成员变量，名为 length 和 width。

    +

    成员函数
    函数是一系列执行指定任务的语句。类的成员函数是在类内声明的。我们举例的类 Rectangle 包含了三个成员函数： AcceptDetails、GetArea 和 Display。

    +

    实例化一个类
    在上面的程序中，类 ExecuteRectangle 是一个包含 Main() 方法和实例化 Rectangle 类的类。

    +

    标识符

    标识符是用来识别类、变量、函数或任何其它用户定义的项目。在 C# 中，类的命名必须遵循如下基本规则：

    +
      +
    • 标识符必须以字母、下划线或 @ 开头，后面可以跟一系列的字母、数字（ 0 - 9 ）、下划线（ _ ）、@。
      • +
    • 标识符中的第一个字符不能是数字。
      • +
    • 标识符必须不包含任何嵌入的空格或符号，比如 ? - +! # % ^ & * ( ) [ ] { } . ; : “ ‘ / \。
      • +
    • 标识符不能是 C# 关键字。除非它们有一个 @ 前缀。 例如，@if 是有效的标识符，但 if 不是，因为 if 是关键字。
      • +
    • 标识符必须区分大小写。大写字母和小写字母被认为是不同的字母。
      • +
    • 不能与C#的类库名称相同。
      • +
    +

    C# 关键字

    关键字是 C# 编译器预定义的保留字。这些关键字不能用作标识符，但是，如果您想使用这些关键字作为标识符，可以在关键字前面加上 @ 字符作为前缀。

    +

    在 C# 中，有些关键字在代码的上下文中有特殊的意义，如 get 和 set，这些被称为上下文关键字（contextual keywords）。

    +

    顶级语句（Top-Level Statements）

    在 C# 9.0 版本中，引入了顶级语句（Top-Level Statements）的概念，这是一种新的编程范式，允许开发者在文件的顶层直接编写语句，而不需要将它们封装在方法或类中。

    +

    特点：

    无需类或方法：顶级语句允许你直接在文件的顶层编写代码，无需定义类或方法。

    +

    文件作为入口点：包含顶级语句的文件被视为程序的入口点，类似于 C# 之前的 Main 方法。

    +

    自动 Main 方法：编译器会自动生成一个 Main 方法，并将顶级语句作为 Main 方法的主体。

    +

    支持局部函数：尽管不需要定义类，但顶级语句的文件中仍然可以定义局部函数。

    +

    更好的可读性：对于简单的脚本或工具，顶级语句提供了更好的可读性和简洁性。

    +

    适用于小型项目：顶级语句非常适合小型项目或脚本，可以快速编写和运行代码。

    +

    与现有代码兼容：顶级语句可以与现有的 C# 代码库一起使用，不会影响现有代码。

    +

    传统 C# 代码 - 在使用顶级语句之前，你必须像这样编写一个 C# 程序：

    +

    实例

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    using System;

    namespace MyApp
    {
        class Program
        {
            static void Main(string[] args)
            {
                Console.WriteLine("Hello, World!");
            }
        }
    }
    +

    使用顶级语句的 C# 代码 - 使用顶级语句，可以简化为：

    +

    实例

    +
    1
    2
    3
    using System;

    Console.WriteLine("Hello, World!");
    +

    顶级语句支持所有常见的 C# 语法，包括声明变量、定义方法、处理异常等。

    +

    实例

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    using System;
    using System.Linq;

    // 顶级语句中的变量声明
    int number = 42;
    string message = "The answer to life, the universe, and everything is";

    // 输出变量
    Console.WriteLine($"{message} {number}.");

    // 定义和调用方法
    int Add(int a, int b) => a + b;
    Console.WriteLine($"Sum of 1 and 2 is {Add(1, 2)}.");

    // 使用 LINQ
    var numbers = new[] { 1, 2, 3, 4, 5 };
    var evens = numbers.Where(n => n % 2 == 0).ToArray();
    Console.WriteLine("Even numbers: " + string.Join(", ", evens));

    // 异常处理
    try
    {
        int zero = 0;
        int result = number / zero;
    }
    catch (DivideByZeroException ex)
    {
        Console.WriteLine("Error: " + ex.Message);
    }
    文章作者: biss
    文章链接: https://blog.biss.click/posts/e9a8e898/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    C#
    相关推荐
    cover
    2025-08-15
    C# 入门
    今天开始学习C# 环境安装下载Visual Studio,社区版就可以 🪧引用站外地址，不保证站点的可用性和安全性 Visual Studio Visual Studio 下载的是安装器选择.Net桌面开发，注意修改安装位置 第一个程序123456789101112131415using System;namespace HelloWorldApplication{ /* 类名为 HelloWorld */ class HelloWorld { /* main函数 */ static void Main(string[] args) { /* 我的第一个 C# 程序 */ Console.WriteLine("Hello World!"); C...
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    C# 基本语法
    C# 入门
    C# 入门
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/f0a1a1f4/index.html b/posts/f0a1a1f4/index.html new file mode 100644 index 0000000..f03197d --- /dev/null +++ b/posts/f0a1a1f4/index.html @@ -0,0 +1,543 @@ +英语文章分享-去奋力生活吧，就好像死亡近在咫尺 | Bi's Blog + + + + + + + + + + + + + +

    英语文章分享-去奋力生活吧，就好像死亡近在咫尺

    发表于|更新于|学习
    |总字数:747|阅读时长:4分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    As a hospice doctor, I often have the privilege of being at the bedside of dying patients.Over the years, I’ve had countless conversations about lives well lived, and more often, about regrets.Many of my patients express a strikingly similar sentiment:
    I really regret that I never had the energy or time to…
    The rest of the sentence varies.For one, it might be writing a book.For another, traveling to a far-off land.For someone else, maybe it’s training for a favorite sport.The specifics change, but the underlying theme is always the same: they missed out on what I call little p purpose — the process-oriented kind of purpose that comes from doing things that light us up from within.
    The heartbreaking truth about these deathbed epiphanies is that the dying no longer have the agency to make things right.They’ve run out of time, or strength, or both.What they once could have done, they no longer can.
    A large part of my work, and of the books I write, is trying to convince the living to adopt this mindset before it’s too late.To offer the lens of the dying as a kind of instruction manual for how to live now.
    We must live as if death is just a breath away.
    And yet, again and again, I hear the same explanations for why people don’t prioritize purpose in their daily lives.
    I Don’t Have Enough Energy
    This one comes up often, especially among young people, busy with careers and raising children.They feel completely depleted by the demands of work and family.The idea of mustering up extra energy to pursue something just for them seems laughable.
    But research tells us something interesting.Studies on motivation and physical activity have shown that people with a stronger sense of purpose are actually more likely to feel energized.They experience fewer barriers to action and develop more intrinsic motivation to engage with life.
    In other words, energy isn’t necessarily a finite pie.It can grow, especially when we’re engaging with activities that matter to us.
    And “purpose” doesn’t have to mean starting a nonprofit or launching a million-dollar business.Little p purpose is smaller.Simpler.It could be reading a good book, taking a walk by the lake, or tinkering with a hobby you loved as a kid.It’s not about the size of the act, it’s about the spark.
    I Don’t Have Enough Time
    This one may feel especially true.We’re busier than ever, no doubt bombarded by the demands of work, family, texts, emails, and social media.It’s one of the most common objections I hear.
    But data paints a different picture.
    The Bureau of Labor Statistics conducts the American Time Use Survey every year, collecting insights from thousands of participants.The most recent findings?Americans spend an average of five hours a day on leisure and sports activities.That’s across all socioeconomic backgrounds.Rich or poor, employed or not — most people have more discretionary time than they realize.
    So, if we do have the time, the question becomes: what’s really stopping us?
    Purpose Demands Courage
    In my years of working with the dying, I’ve learned something unexpected.The true barrier to purpose isn’t energy, money, or time.
    It’s courage.
    Not bravery in the way we typically define it.I’ve had this conversation with war heroes and daredevil athletes.It’s not about fearlessness.It’s not about skill either.I’ve cared for world-class artisans and bestselling authors.It’s not about knowledge — most of them knew what mattered to them.
    What they lacked was the courage to choose those things.（他们缺乏的是选择那些的勇气）
    It’s easier to focus on building wealth, pursuing a career, or raising kids.Those are important, yes, but they’re also the low-hanging fruit.They come with clear milestones and societal validation.
    Turning toward what lights you up is a much scarier proposition.
    What if I’m not good enough?
    What if I fail?
    What if it doesn’t turn out how I hoped?
    What if people laugh at me?
    The list of reasons not to pursue your purpose is long.
    But there’s one reason that matters more than all the rest:
    You might regret it on your deathbed if you don’t.

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/f0a1a1f4/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    英语
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/posts/f287c563/index.html b/posts/f287c563/index.html new file mode 100644 index 0000000..dabef7c --- /dev/null +++ b/posts/f287c563/index.html @@ -0,0 +1,563 @@ +添加typesense搜索 | Bi's Blog + + + + + + + + + + + + +

    添加typesense搜索

    发表于|更新于|技术建站手札
    |总字数:3.2k|阅读时长:18分钟|浏览量:
    AI正在绞尽脑汁想思路ING···
    BiのAI摘要
    HunYuan-Lite

    最近在构建班级博客，用ghost cms，在构建搜索时发现了typesense，所以把他移植到这个博客上。

    +

    安装typesense

    直接用docker-compose:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    services:
      typesense:
        image: typesense/typesense:30.1
        restart: always
        ports:
          - "8108:8108"
        volumes:
          - ./typesense-data:/data
        command: '--data-dir /data --api-key=填写key --enable-cors'

    + +

    然后就是反向代理之类的，不过多写了。

    +

    添加数据集

    1
    2
    3
    # 先安装库
    npm install hexo-generator-search
    npm install typesense xml2js
    +

    然后在config.yml配置（就是把文章生成json）：

    +
    1
    2
    3
    4
    search:
      path: search.json
      field: post
      content: true
    + +

    创建一个数据同步脚本sync_typesense.js:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    const Typesense = require('typesense');
    const fs = require('fs');
    const xml2js = require('xml2js');

    // --- 配置区域 ---
    const CONFIG = {
      apiKey: '你的Admin-API-Key', // 必须是 Admin Key
      host: '你的Typesense主机地址', 
      port: 443,
      protocol: 'https',
      collectionName: 'blogs'
    };

    const client = new Typesense.Client({
      'nodes': [{ 'host': CONFIG.host, 'port': CONFIG.port, 'protocol': CONFIG.protocol }],
      'apiKey': CONFIG.apiKey,
      'connectionTimeoutSeconds': 5
    });

    async function sync() {
      try {
        // 1. 读取并解析 XML
        const xml = fs.readFileSync('./public/search.xml', 'utf8');
        const parser = new xml2js.Parser({ explicitArray: false });
        const result = await parser.parseStringPromise(xml);
        
        // 提取文章列表 (处理单篇文章和多篇文章的情况)
        let entries = result.search.entry;
        if (!Array.isArray(entries)) entries = [entries];

        // 格式化数据以适配 Typesense
        const documents = entries.map(post => ({
          title: post.title,
          url: post.url,
          content: post.content,
          categories: post.categories ? (Array.isArray(post.categories.category) ? post.categories.category : [post.categories.category]) : [],
          tags: post.tags ? (Array.isArray(post.tags.tag) ? post.tags.tag : [post.tags.tag]) : [],
        }));

        // 2. 检查或创建 Collection (Schema)
        try {
          await client.collections(CONFIG.collectionName).retrieve();
        } catch (err) {
          const schema = {
            name: CONFIG.collectionName,
            fields: [
              { name: 'title', type: 'string', locale: 'zh'},
              { name: 'content', type: 'string', locale: 'zh'},
              { name: 'url', type: 'string' },
              { name: 'categories', type: 'string[]', facet: true },
              { name: 'tags', type: 'string[]', facet: true }
            ]
          };
          await client.collections().create(schema);
          console.log('Collection created!');
        }

        // 3. 导入数据 (使用 upsert 模式：存在则更新，不存在则创建)
        console.log(`Syncing ${documents.length} posts to Typesense...`);
        await client.collections(CONFIG.collectionName).documents().import(documents, { action: 'upsert' });
        console.log('Sync complete!');

      } catch (error) {
        console.error('Sync failed:', error);
      }
    }

    sync();
    +

    然后运行node sync_typesense.js

    +

    创建只读key

    把下面代码存储成js，node运行就行。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    const http = require('https');

    const data = JSON.stringify({
      "description": "Public search only key",
      "actions": ["documents:search"],
      "collections": ["blogs"]
    });

    const options = {
      hostname: '', // 不要带 https://
      port: 443,
      path: '/keys',
      method: 'POST',
      headers: {
        'X-TYPESENSE-API-KEY': '你的admin key',
        'Content-Type': 'application/json',
        'Content-Length': data.length
      }
    };

    const req = http.request(options, res => {
      res.on('data', d => { process.stdout.write(d); });
    });

    req.on('error', error => { console.error(error); });
    req.write(data);
    req.end();
    + +

    博客添加搜索

    在config.yamlinject bottom添加：

    +
    1
    2
    - <script src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script>
    - <script src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script>
    + +

    为了方便，我直接修改了\themes\butterfly\source\js\search\local_search.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    (function () {
      'use strict';

      // ============================================================================
      // 配置区域 - 请根据实际情况修改
      // ============================================================================
      const CONFIG = {
        apiKey: "", // ⚠️ 建议使用 Search-Only API Key
        server: {
          host: "host",
          port: "443",
          protocol: "https"
        },
        indexName: "blogs",
        searchParams: {
          query_by: "title,content",
          highlight_full_fields: "title,content",
          per_page: 8,
          num_typos: 1,
          typo_tokens_threshold: 1,
          prefix: true
        },
        ui: {
          maxRetries: 10,
          retryDelay: 100,
          animationDuration: 300
        }
      };

      // ============================================================================
      // 状态管理
      // ============================================================================
      let searchInstance = null;
      let isInitialized = false;
      let isSearchOpen = false;
      let initRetryCount = 0;
      const MAX_INIT_RETRIES = 30; // 最多重试30次 (3秒)

      // ============================================================================
      // 错误提示函数
      // ============================================================================
      function showErrorMessage() {
        const hitsContainer = document.getElementById('hits');
        if (!hitsContainer) return;
        
        hitsContainer.innerHTML = 
          '<div class="ts-empty">' +
            '<div style="color: #f44336;"><i class="fas fa-exclamation-triangle" style="font-size: 3rem;"></i></div>' +
            '<div style="font-size: 1.1rem; font-weight: bold; margin: 15px 0;">搜索服务加载失败</div>' +
            '<div style="font-size: 0.9rem; color: #666; line-height: 1.8;">' +
              '<p>依赖库未能正确加载，请检查以下配置：</p>' +
              '<ol style="text-align: left; max-width: 500px; margin: 15px auto;">' +
                '<li>确认已在 <code>_config.butterfly.yml</code> 中正确引入依赖</li>' +
                '<li>检查 JS 文件加载顺序（先 instantsearch.js，再 adapter）</li>' +
                '<li>尝试更换 CDN 或使用本地文件</li>' +
                '<li>打开浏览器控制台查看详细错误信息</li>' +
              '</ol>' +
            '</div>' +
            '<div style="margin-top: 20px;">' +
              '<button onclick="location.reload()" style="padding: 10px 20px; background: #49b1f5; color: white; border: none; border-radius: 5px; cursor: pointer;">重新加载页面</button>' +
            '</div>' +
          '</div>';
      }

      // ============================================================================
      // 1. 动态插入 HTML 结构
      // ============================================================================
      const searchHTML = `
        <div id="typesense-search-mask" class="ts-mask" style="display:none;">
          <div id="typesense-search-container" class="ts-container">
            <div class="ts-header">
              <span class="ts-title">
                <i class="fas fa-search"></i> 本站搜索
              </span>
              <span id="close-typesense" class="ts-close" aria-label="关闭搜索">&times;</span>
            </div>
            <div id="searchbox"></div>
            <div id="stats" class="ts-stats"></div>
            <div id="hits" class="ts-hits"></div>
            <div id="pagination" class="ts-pagination"></div>
            <div class="ts-footer">
              <small>Search powered by <strong>Typesense</strong></small>
            </div>
          </div>
        </div>

        <style>
          .ts-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            opacity: 0;
            transition: opacity 300ms ease;
          }
          .ts-mask.active { opacity: 1; }
          .ts-container {
            margin: 5% auto;
            width: 90%;
            max-width: 650px;
            background: var(--search-bg, var(--card-bg, #fff));
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 10001;
            transform: translateY(-50px);
            opacity: 0;
            transition: all 300ms ease;
          }
          .ts-mask.active .ts-container {
            transform: translateY(0);
            opacity: 1;
          }
          .ts-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--text-highlight-color, #49b1f5);
            padding-bottom: 10px;
          }
          .ts-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--text-highlight-color, #49b1f5);
          }
          .ts-close {
            cursor: pointer;
            font-size: 28px;
            color: var(--font-color, #333);
            line-height: 1;
            transition: color 0.2s, transform 0.2s;
          }
          .ts-close:hover {
            color: var(--text-highlight-color, #49b1f5);
            transform: scale(1.1);
          }
          .ais-SearchBox-input {
            position: relative;
            z-index: 10002;
            cursor: text;
            padding: 12px 40px 12px 15px !important;
            border-radius: 8px !important;
            border: 2px solid #eee !important;
            width: 100%;
            outline: none;
            transition: border-color 0.3s, box-shadow 0.3s;
            background: var(--card-bg, #fff);
            color: var(--font-color, #333);
            font-size: 1rem;
          }
          .ais-SearchBox-input:focus {
            border-color: var(--text-highlight-color, #49b1f5) !important;
            box-shadow: 0 0 0 3px rgba(73, 177, 245, 0.1);
          }
          .ts-stats {
            margin: 10px 0;
            font-size: 0.85rem;
            color: var(--font-color, #666);
            opacity: 0.8;
          }
          .ts-hits {
            max-height: 55vh;
            overflow-y: auto;
            margin-top: 15px;
            padding-right: 5px;
          }
          .ts-hits::-webkit-scrollbar { width: 6px; }
          .ts-hits::-webkit-scrollbar-track {
            background: var(--card-bg, #f1f1f1);
            border-radius: 10px;
          }
          .ts-hits::-webkit-scrollbar-thumb {
            background: var(--text-highlight-color, #49b1f5);
            border-radius: 10px;
          }
          .ts-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--font-color, #999);
          }
          .ts-empty i {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.3;
          }
          .ts-empty code {
            background: #f5f5f5;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
            color: #e91e63;
          }
          .ts-empty ol {
            padding-left: 20px;
          }
          .ts-empty li {
            margin: 8px 0;
          }
          .ts-result-item {
            border-radius: 8px;
            transition: all 0.2s ease;
            margin-bottom: 10px;
            padding: 15px;
            border: 1px solid transparent;
            text-decoration: none;
            display: block;
            background: var(--card-bg, #fff);
          }
          .ts-result-item:hover {
            background: var(--text-bg-hover, rgba(73, 177, 245, 0.05));
            border-color: var(--text-highlight-color, #49b1f5);
            transform: translateX(5px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
          .ts-result-title {
            font-weight: bold;
            color: var(--text-highlight-color, #49b1f5);
            font-size: 1.1rem;
            margin-bottom: 8px;
            display: block;
            line-height: 1.4;
          }
          .ts-result-content {
            font-size: 0.9rem;
            color: var(--font-color, #666);
            line-height: 1.6;
            opacity: 0.85;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .ts-result-item mark {
            background: #ffeb3b;
            color: #000;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: 500;
          }
          .ts-pagination {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 5px;
          }
          .ais-Pagination-list {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            gap: 5px;
          }
          .ais-Pagination-link {
            display: block;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            color: var(--font-color, #333);
            text-decoration: none;
            transition: all 0.2s;
            background: var(--card-bg, #fff);
          }
          .ais-Pagination-link:hover {
            background: var(--text-highlight-color, #49b1f5);
            color: #fff;
          }
          .ais-Pagination-item--selected .ais-Pagination-link {
            background: var(--text-highlight-color, #49b1f5);
            color: #fff;
          }
          .ts-footer {
            text-align: right;
            margin-top: 15px;
            border-top: 1px solid var(--border-color, #eee);
            padding-top: 10px;
          }
          @media (max-width: 768px) {
            .ts-container {
              margin: 10px;
              width: calc(100% - 20px);
              padding: 20px 15px;
            }
            .ts-hits { max-height: 50vh; }
          }
          [data-theme="dark"] .ts-mask,
          .dark-mode .ts-mask {
            background: rgba(0, 0, 0, 0.85);
          }
        </style>
      `;

      document.body.insertAdjacentHTML('beforeend', searchHTML);

      const mask = document.getElementById('typesense-search-mask');
      const closeBtn = document.getElementById('close-typesense');
      const container = document.getElementById('typesense-search-container');

      // ============================================================================
      // 搜索控制
      // ============================================================================
      function openSearch() {
        if (isSearchOpen) return;
        isSearchOpen = true;
        mask.style.display = 'block';
        void mask.offsetWidth;
        mask.classList.add('active');
        document.body.style.overflow = 'hidden';

        if (!isInitialized) {
          initTypesense();
        }
        focusSearchInput();
      }

      function closeSearch() {
        if (!isSearchOpen) return;
        isSearchOpen = false;
        mask.classList.remove('active');
        setTimeout(function() {
          mask.style.display = 'none';
          document.body.style.overflow = '';
        }, CONFIG.ui.animationDuration);
      }

      function focusSearchInput(retryCount) {
        retryCount = retryCount || 0;
        const input = document.querySelector('.ais-SearchBox-input');
        if (input) {
          input.focus();
          input.select();
        } else if (retryCount < CONFIG.ui.maxRetries) {
          setTimeout(function() {
            focusSearchInput(retryCount + 1);
          }, CONFIG.ui.retryDelay);
        }
      }

      // ============================================================================
      // 事件监听
      // ============================================================================
      document.addEventListener('click', function(e) {
        if (e.target.closest('.search-typesense-trigger')) {
          e.preventDefault();
          openSearch();
        }
      });

      closeBtn.addEventListener('click', closeSearch);
      mask.addEventListener('click', function(e) {
        if (e.target === mask) closeSearch();
      });
      container.addEventListener('click', function(e) {
        e.stopPropagation();
      });
      window.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && isSearchOpen) {
          closeSearch();
        }
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
          e.preventDefault();
          openSearch();
        }
      });

      // ============================================================================
      // Typesense 初始化（带重试限制）
      // ============================================================================
      function initTypesense() {
        if (isInitialized || searchInstance) {
          console.warn('Typesense 搜索已初始化');
          return;
        }

        var instantsearchLoaded = typeof instantsearch !== 'undefined';
        var adapterLoaded = typeof TypesenseInstantSearchAdapter !== 'undefined' || 
                            typeof window.TypesenseInstantSearchAdapter !== 'undefined';
        
        console.log('📦 依赖库检查 (' + (initRetryCount + 1) + '/' + MAX_INIT_RETRIES + '):');
        console.log('  instantsearch.js:', instantsearchLoaded ? '✅ 已加载' : '❌ 未加载');
        console.log('  TypesenseAdapter:', adapterLoaded ? '✅ 已加载' : '❌ 未加载');
        
        if (!instantsearchLoaded || !adapterLoaded) {
          initRetryCount++;
          
          if (initRetryCount >= MAX_INIT_RETRIES) {
            console.error('');
            console.error('❌ Typesense 依赖库加载失败！');
            console.error('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
            console.error('');
            console.error('🔧 请检查 _config.butterfly.yml 配置：');
            console.error('');
            console.error('inject:');
            console.error('  bottom:  # ⚠️ 使用 bottom 而不是 head');
            console.error('    - <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.56.0"></script>');
            console.error('    - <script src="https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script>');
            console.error('    - <script src="/js/typesense-search-fixed.js"></script>');
            console.error('');
            console.error('💡 或在控制台手动检查：');
            console.error('   typeof instantsearch');
            console.error('   typeof TypesenseInstantSearchAdapter');
            console.error('');
            console.error('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
            
            showErrorMessage();
            return;
          }
          
          console.warn('⏳ 100ms 后重试...');
          setTimeout(initTypesense, 100);
          return;
        }
        
        initRetryCount = 0;
        console.log('🚀 开始初始化 Typesense...');

        try {
          const typesenseAdapter = new TypesenseInstantSearchAdapter({
            server: {
              apiKey: CONFIG.apiKey,
              nodes: [{
                host: CONFIG.server.host,
                port: CONFIG.server.port,
                protocol: CONFIG.server.protocol
              }],
              cacheSearchResultsForSeconds: 120
            },
            additionalSearchParameters: CONFIG.searchParams
          });

          searchInstance = instantsearch({
            searchClient: typesenseAdapter.searchClient,
            indexName: CONFIG.indexName,
            routing: false
          });

          searchInstance.addWidgets([
            instantsearch.widgets.searchBox({
              container: '#searchbox',
              placeholder: '输入关键词寻找故事...',
              autofocus: true,
              showReset: true,
              showSubmit: false,
              showLoadingIndicator: true
            }),
            instantsearch.widgets.stats({
              container: '#stats',
              templates: {
                text: function(data) {
                  if (!data.query) return '';
                  return '找到 <strong>' + data.nbHits + '</strong> 条结果 (' + data.processingTimeMS + 'ms)';
                }
              }
            }),
            instantsearch.widgets.hits({
              container: '#hits',
              templates: {
                empty: function(results) {
                  return '<div class="ts-empty">' +
                    '<div><i class="fas fa-search"></i></div>' +
                    '<div>找不到与 "<strong>' + results.query + '</strong>" 相关的内容</div>' +
                    '<div style="margin-top: 10px;">试试其他关键词吧 (´·ω·`)</div>' +
                    '</div>';
                },
                item: function(hit) {
                  // 使用 _highlightResult 获取高亮文本
                  var titleHighlight = hit._highlightResult && hit._highlightResult.title 
                    ? hit._highlightResult.title.value 
                    : (hit.title || '');
                  
                  var contentHighlight = hit._highlightResult && hit._highlightResult.content 
                    ? hit._highlightResult.content.value 
                    : (hit.content || '');
                  
                  // 截取内容长度
                  if (contentHighlight.length > 200) {
                    contentHighlight = contentHighlight.substring(0, 200) + '...';
                  }
                  
                  return '<a href="' + hit.url + '" class="ts-result-item">' +
                    '<div class="ts-result-title">' + titleHighlight + '</div>' +
                    '<div class="ts-result-content">' + contentHighlight + '</div>' +
                    '</a>';
                }
              }
            }),
            instantsearch.widgets.pagination({
              container: '#pagination',
              padding: 2,
              showFirst: false,
              showLast: false
            })
          ]);

          searchInstance.start();
          isInitialized = true;
          
          console.log('✅ Typesense 初始化成功！');

          searchInstance.on('render', function() {
            if (isSearchOpen) {
              const input = document.querySelector('.ais-SearchBox-input');
              if (input && document.activeElement !== input) {
                input.focus();
              }
            }
          });

        } catch (error) {
          console.error('❌ 初始化失败:', error);
          showErrorMessage();
        }
      }

      // ============================================================================
      // 初始化
      // ============================================================================
      function init() {
        console.log('🔍 Typesense 搜索已准备就绪');
        console.log('💡 快捷键: Ctrl/Cmd + K');
      }

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
      } else {
        init();
      }

      // ============================================================================
      // 全局接口
      // ============================================================================
      window.TypesenseSearch = {
        open: openSearch,
        close: closeSearch,
        isOpen: function() { return isSearchOpen; },
        getInstance: function() { return searchInstance; }
      };

    })();
    + +

    注意

    indexName: “blogs” 和 collectionName: ‘posts’ 要一致！！！

    +
    文章作者: biss
    文章链接: https://blog.biss.click/posts/f287c563/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
    评论
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    系列文章
    添加网站左上角菜单
    添加网站左上角菜单
    添加typesense搜索
    自定义字体
    自定义字体
    在侧边栏添加日历和倒计时
    在侧边栏添加日历和倒计时
    使用GitHub推送Hexo到服务器
    使用GitHub推送Hexo到服务器
    自定义页脚（新）
    自定义页脚（新）
    自定义分类条
    自定义导航栏
    利用 SiteMap 随机访问站内页面
    利用 SiteMap 随机访问站内页面
    博客添加AI总结
    博客添加AI总结
    利用插件自定义页脚菜单
    利用插件自定义页脚菜单
    自定义右键菜单
    自定义右键菜单
    在侧边栏中添加欢迎信息
    在侧边栏中添加欢迎信息
    配置说说页面
    配置说说页面
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    \ No newline at end of file diff --git a/privacy/index.html b/privacy/index.html new file mode 100644 index 0000000..1ab3704 --- /dev/null +++ b/privacy/index.html @@ -0,0 +1,475 @@ +隐私政策 | Bi's Blog + + + + + + + + + + + + +

    隐私政策

    隐私政策

    本站非常重视用户的隐私和个人信息保护。你在使用网站时，可能会收集和使用你的相关信息；通过《隐私政策》向你说明在你访问 meuicat.com网站时，如何收集、使用、保存、共享和转让这些信息

    +

    最新更新时间

    协议最新更新时间为：2025-08-10

    +

    一、在访问时如何收集和使用你的个人信息

    在访问时，收集访问信息的服务会收集不限于以下信息：

    +

    网络身份标识信息（浏览器UA、IP地址）

    +

    设备信息

    +

    浏览过程（操作方式、浏览方式与时长、性能与网络加载情况）

    +

    在访问时，本站内置的第三方服务会通过以下或更多途径，来获取你的以下或更多信息：

    +
      +
    • fastly cdn 内容分发服务
      • +
    +

    在访问时，本人仅会处于以下目的，使用你的个人信息：

    +
      +

    • 用于网站的优化与文章分类，用户优化文章

      +
      • +

    • 恶意访问识别，用于维护网站

      +
      • +

    • 恶意攻击排查，用于维护网站

      +
      • +

    • 网站点击情况监测，用于优化网站页面

      +
      • +

    • 网站加载情况监测，用于优化网站性能

      +
      • +

    • 用于网站搜索结果优化

      +
      • +

    • 浏览数据的展示

      +
      • +
    +

    第三方信息获取方将您的数据用于以下用途：
    第三方可能会用于其他目的，详情请访问对应第三方服务提供的隐私协议

    +

    二、在评论时如何收集和使用你的个人信息

    评论使用的是无登陆系统的匿名评论系统，你可以自愿填写真实的、或者虚假的信息作为你评论的展示信息。鼓励你使用不易被人恶意识别的昵称进行评论，但是建议你填写真实的邮箱以便收到回复（邮箱信息不会被公开）

    +

    在你评论时，会额外收集你的个人信息

    +

    在评论时，本站内置的第三方服务会通过以下或更多途径，来获取你的相关信息：

      +
    • cravatar 会收集你的访问信息、评论填写的个人信息用于展示头像
      • +
    +

    在访问时，本人仅会处于以下目的，收集并使用以下信息：

      +

    • 评论时会记录你的QQ帐号（如果在邮箱位置填写QQ邮箱或QQ号），方便获取你的QQ头像。如果使用QQ邮箱但不想展示QQ头像，可以填写不含QQ号的QQ邮箱。（主动，存储）

      +
      • +

    • 评论时会记录你的邮箱，当我回复后会通过邮件通知你（主动，存储，不会公开邮箱）

      +
      • +

    • 评论时会记录你的网址，用于点击头像时快速进入你的网站（主动，存储）

      +
      • +

    • 评论时会记录你的IP地址，作为反垃圾的用户判别依据（被动，存储，不会公开IP，会公开IP所在城市）

      +
      • +

    • 评论会记录你的浏览器代理，用作展示系统版本、浏览器版本方便展示你使用的设备，快速定位问题（被动，存储）

      +
      • +
    +

    三、如何使用 Cookies 和本地 LocalStorage 存储

    本站为实现深色模式切换，不蒜子的uv统计等功能，会在你的浏览器中进行本地存储，你可以随时清除浏览器中保存的所有 Cookies 以及 LocalStorage，不影响你的正常使用

    +

    本博客中的以下业务会在你的计算机上主动存储数据：

    +

    内置服务

      +
    • 评论系统
      • +
    +

    第三方服务

      +
    • fastlycdn
      • +
    +

    关于如何使用你的Cookies，请访问 Cookies政策
    关于如何在 Chrome 中清除、启用和管理 Cookie

    +

    四、如何共享、转让你的个人信息

    本人不会与任何公司、组织和个人共享你的隐私信息

    +

    本人不会将你的个人信息转让给任何公司、组织和个人

    +

    第三方服务的共享、转让情况详见对应服务的隐私协议

    +

    五、附属协议

    当监测到存在恶意访问、恶意请求、恶意攻击、恶意评论的行为时，为了防止增大受害范围，可能会临时将你的ip地址及访问信息短期内添加到黑名单，短期内禁止访问

    +

    此黑名单可能被公开，并共享给其他站点（主体并非本人）使用，包括但不限于：IP地址、设备信息、地理位置

    +
    \ No newline at end of file diff --git a/search.xml b/search.xml new file mode 100644 index 0000000..313ade8 --- /dev/null +++ b/search.xml @@ -0,0 +1,1489 @@ + + + + 博客添加AI总结 + /posts/41b9aff7/ + + + 建站手札 + + + 网站 + + + + 在侧边栏添加日历和倒计时 + /posts/5ed2f1e6/ + + + 建站手札 + + + 网站 + + + + 为博客添加CMS系统 + /posts/3a26a97a/ + + + 建站手札 + + + 网站 + + + + 为1Panel添加自己想要的应用 + /posts/bb18d851/ + + + 技术 + + + 1panel + + + + 在侧边栏中添加欢迎信息 + /posts/da17d00/ + + + 建站手札 + + + 网站 + + + + C# 入门 + /posts/bc56f789/ + + + 学习 + + + C# + + + + 利用插件自定义页脚菜单 + /posts/a6ab0925/ + + + 建站手札 + + + 网站 + + + + C# 基本语法 + /posts/e9a8e898/ + + + 学习 + + + C# + + + + 自定义字体 + /posts/b5601a7e/ + + + 建站手札 + + + 网站 + + + + 自定义分类条 + /posts/33249733/ + + + 建站手札 + + + 网站 + + + + 自定义页脚（新） + /posts/c6143ad3/ + + + 建站手札 + + + 网站 + + + + 自定义导航栏 + /posts/3e61a389/ + + + 建站手札 + + + 网站 + + + + 自定义右键菜单 + /posts/8bdb35fb/ + + + 建站手札 + + + 网站 + + + + 英语文章分享-去奋力生活吧，就好像死亡近在咫尺 + /posts/f0a1a1f4/ + + + 学习 + + + 英语 + + + + 利用 SiteMap 随机访问站内页面 + /posts/b5866b9e/ + + + 建站手札 + + + 网站 + + + + 搭建Owncloud并集成Onlyoffice + /posts/59c8572a/ + + + 技术 + + + 网站 + + + + 部署历程 + /posts/6e5f5039/ + + + 建站手札 + + + 网站 + + + + Cudy TR3000刷入Openwrt系统 + /posts/8802e397/ + + + 技术 + + + Cudy-TR3000 + + + + 配置说说页面 + /posts/ad244066/ + + + 建站手札 + + + 网站 + + + + 使用GitHub推送Hexo到服务器 + /posts/ce1ec3fe/ + + + 建站手札 + + + 网站 + + + + 在Openwrt上安装AdguardHome + /posts/b57500e9/ + + + 技术 + + + Openwrt + AdguardHome + + + + 在Openwrt中安装OpenClash + /posts/2b2fb1a7/ + + + 技术 + + + Openwrt + Openclash + + + + Adguard和Openclash共存 + /posts/66e66374/ + + + 技术 + + + Openwrt + AdguardHome + Openclash + + + + 添加网站左上角菜单 + /posts/7e921903/ + + + 建站手札 + + + 网站 + + + + 添加typesense搜索 + /posts/f287c563/ + + + 技术 + 建站手札 + + + + 新年快乐！ + /posts/5785bd01/ + + + 生活 + + + + 和朋友们的故事 + /posts/a31d95d9/ + + + 杂谈 + + + 生活 + + + + 安装gitea + /posts/34725d47/ + + + 技术 + + + gitea + + + + Adguard规则分享 + /posts/69b16001/ + + + 技术 + + + Openwrt + AdguardHome + + + + 将博客仓库转移到gitea + /posts/d2c8521/ + + + 技术 + + + gitea + + + diff --git a/shuoshuo/index.html b/shuoshuo/index.html new file mode 100644 index 0000000..7609205 --- /dev/null +++ b/shuoshuo/index.html @@ -0,0 +1,477 @@ +说说 | Bi's Blog + + + + + + + + + + + + +

    说说

    +
    - 只展示最近30条说说 -
    +
    评论
    \ No newline at end of file diff --git a/sitemap.txt b/sitemap.txt new file mode 100644 index 0000000..dcc5d9b --- /dev/null +++ b/sitemap.txt @@ -0,0 +1,54 @@ +https://blog.biss.click/link/index.html +https://blog.biss.click/privacy/index.html +https://blog.biss.click/tags/index.html +https://blog.biss.click/shuoshuo/index.html +https://blog.biss.click/posts/8802e397/ +https://blog.biss.click/posts/ad244066/ +https://blog.biss.click/posts/ce1ec3fe/ +https://blog.biss.click/posts/b57500e9/ +https://blog.biss.click/posts/2b2fb1a7/ +https://blog.biss.click/posts/66e66374/ +https://blog.biss.click/posts/7e921903/ +https://blog.biss.click/posts/f287c563/ +https://blog.biss.click/posts/5785bd01/ +https://blog.biss.click/posts/a31d95d9/ +https://blog.biss.click/posts/34725d47/ +https://blog.biss.click/posts/69b16001/ +https://blog.biss.click/posts/d2c8521/ +https://blog.biss.click/cc/index.html +https://blog.biss.click/cookie/index.html +https://blog.biss.click/about/index.html +https://blog.biss.click/categories/index.html +https://blog.biss.click/posts/41b9aff7/ +https://blog.biss.click/posts/5ed2f1e6/ +https://blog.biss.click/posts/bb18d851/ +https://blog.biss.click/posts/da17d00/ +https://blog.biss.click/posts/bc56f789/ +https://blog.biss.click/posts/a6ab0925/ +https://blog.biss.click/posts/e9a8e898/ +https://blog.biss.click/posts/b5601a7e/ +https://blog.biss.click/posts/33249733/ +https://blog.biss.click/posts/c6143ad3/ +https://blog.biss.click/posts/3e61a389/ +https://blog.biss.click/posts/8bdb35fb/ +https://blog.biss.click/posts/f0a1a1f4/ +https://blog.biss.click/posts/b5866b9e/ +https://blog.biss.click/posts/59c8572a/ +https://blog.biss.click/posts/6e5f5039/ +https://blog.biss.click/posts/3a26a97a/ +https://blog.biss.click/ +https://blog.biss.click/tags/web/ +https://blog.biss.click/tags/1panel/ +https://blog.biss.click/tags/C/ +https://blog.biss.click/tags/english/ +https://blog.biss.click/tags/Cudy-TR3000/ +https://blog.biss.click/tags/Openwrt/ +https://blog.biss.click/tags/AdguardHome/ +https://blog.biss.click/tags/Openclash/ +https://blog.biss.click/tags/life/ +https://blog.biss.click/tags/gitea/ +https://blog.biss.click/categories/website/ +https://blog.biss.click/categories/technology/ +https://blog.biss.click/categories/learning/ +https://blog.biss.click/categories/technology/website/ +https://blog.biss.click/categories/miscellaneous/ diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..8a832f1 --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,462 @@ + + + + + https://blog.biss.click/link/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/privacy/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/tags/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/shuoshuo/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/8802e397/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/ad244066/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/ce1ec3fe/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/b57500e9/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/2b2fb1a7/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/66e66374/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/7e921903/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/f287c563/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/5785bd01/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/a31d95d9/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/34725d47/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/69b16001/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/d2c8521/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/cc/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/cookie/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/about/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/categories/index.html + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/41b9aff7/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/5ed2f1e6/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/bb18d851/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/da17d00/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/bc56f789/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/a6ab0925/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/e9a8e898/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/b5601a7e/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/33249733/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/c6143ad3/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/3e61a389/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/8bdb35fb/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/f0a1a1f4/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/b5866b9e/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/59c8572a/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/6e5f5039/ + + 2026-02-18 + + monthly + 0.6 + + + + https://blog.biss.click/posts/3a26a97a/ + + 2025-08-26 + + monthly + 0.6 + + + + + https://blog.biss.click/ + 2026-02-18 + daily + 1.0 + + + + + https://blog.biss.click/tags/web/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/1panel/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/C/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/english/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/Cudy-TR3000/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/Openwrt/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/AdguardHome/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/Openclash/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/life/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/tags/gitea/ + 2026-02-18 + weekly + 0.2 + + + + + + https://blog.biss.click/categories/website/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/categories/technology/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/categories/learning/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/categories/technology/website/ + 2026-02-18 + weekly + 0.2 + + + + https://blog.biss.click/categories/miscellaneous/ + 2026-02-18 + weekly + 0.2 + + + diff --git a/tags/1panel/index.html b/tags/1panel/index.html new file mode 100644 index 0000000..90b9c23 --- /dev/null +++ b/tags/1panel/index.html @@ -0,0 +1,450 @@ +标签: 1panel | Bi's Blog + + + + + + + + +

    1panel

    标签 - 1panel
    2025
    为1Panel添加自己想要的应用
    为1Panel添加自己想要的应用
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/AdguardHome/index.html b/tags/AdguardHome/index.html new file mode 100644 index 0000000..33dd648 --- /dev/null +++ b/tags/AdguardHome/index.html @@ -0,0 +1,450 @@ +标签: AdguardHome | Bi's Blog + + + + + + + + +

    AdguardHome

    标签 - AdguardHome
    2025
    Adguard和Openclash共存
    Adguard和Openclash共存
    Adguard规则分享
    Adguard规则分享
    在Openwrt上安装AdguardHome
    在Openwrt上安装AdguardHome
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/C/index.html b/tags/C/index.html new file mode 100644 index 0000000..180c327 --- /dev/null +++ b/tags/C/index.html @@ -0,0 +1,450 @@ +标签: C# | Bi's Blog + + + + + + + + +

    C#

    标签 - C#
    2025
    C# 基本语法
    C# 入门
    C# 入门
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/Cudy-TR3000/index.html b/tags/Cudy-TR3000/index.html new file mode 100644 index 0000000..ba75598 --- /dev/null +++ b/tags/Cudy-TR3000/index.html @@ -0,0 +1,450 @@ +标签: Cudy-TR3000 | Bi's Blog + + + + + + + + +

    Cudy-TR3000

    标签 - Cudy-TR3000
    2025
    Cudy TR3000刷入Openwrt系统
    Cudy TR3000刷入Openwrt系统
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/Openclash/index.html b/tags/Openclash/index.html new file mode 100644 index 0000000..183399b --- /dev/null +++ b/tags/Openclash/index.html @@ -0,0 +1,450 @@ +标签: Openclash | Bi's Blog + + + + + + + + +

    Openclash

    标签 - Openclash
    2025
    Adguard和Openclash共存
    Adguard和Openclash共存
    在Openwrt中安装OpenClash
    在Openwrt中安装OpenClash
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/Openwrt/index.html b/tags/Openwrt/index.html new file mode 100644 index 0000000..99678b4 --- /dev/null +++ b/tags/Openwrt/index.html @@ -0,0 +1,450 @@ +标签: Openwrt | Bi's Blog + + + + + + + + +

    Openwrt

    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/english/index.html b/tags/english/index.html new file mode 100644 index 0000000..38db961 --- /dev/null +++ b/tags/english/index.html @@ -0,0 +1,450 @@ +标签: 英语 | Bi's Blog + + + + + + + + +

    英语

    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/gitea/index.html b/tags/gitea/index.html new file mode 100644 index 0000000..8a1e037 --- /dev/null +++ b/tags/gitea/index.html @@ -0,0 +1,450 @@ +标签: gitea | Bi's Blog + + + + + + + + +

    gitea

    标签 - gitea
    2026
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/index.html b/tags/index.html new file mode 100644 index 0000000..1f92cf5 --- /dev/null +++ b/tags/index.html @@ -0,0 +1,414 @@ +标签 | Bi's Blog + + + + + + + + + + +

    标签

    网站1panelC#英语Cudy-TR3000OpenwrtAdguardHomeOpenclash生活gitea
    \ No newline at end of file diff --git a/tags/life/index.html b/tags/life/index.html new file mode 100644 index 0000000..5844cb0 --- /dev/null +++ b/tags/life/index.html @@ -0,0 +1,450 @@ +标签: 生活 | Bi's Blog + + + + + + + + +

    生活

    标签 - 生活
    2026
    新年快乐！
    和朋友们的故事
    和朋友们的故事
    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/web/index.html b/tags/web/index.html new file mode 100644 index 0000000..62a67c7 --- /dev/null +++ b/tags/web/index.html @@ -0,0 +1,450 @@ +标签: 网站 | Bi's Blog + + + + + + + + +

    网站

    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file diff --git a/tags/web/page/2/index.html b/tags/web/page/2/index.html new file mode 100644 index 0000000..6de2946 --- /dev/null +++ b/tags/web/page/2/index.html @@ -0,0 +1,450 @@ +标签: 网站 | Bi's Blog + + + + + + + + +

    网站

    avatar
    biss
    文章
    30
    标签
    10
    分类
    5
    Follow Me
    公告
    最新文章
    新年快乐！
    添加网站左上角菜单
    添加网站左上角菜单
    将博客仓库转移到gitea
    将博客仓库转移到gitea
    安装gitea
    安装gitea
    添加typesense搜索
    + + 分类 + +
    +
    标签
    网站 英语 Openwrt 1panel C# AdguardHome Cudy-TR3000 gitea Openclash 生活
    +
    + + 归档 + +
    + + +
    网站信息
    文章数目 :
    30
    本站总字数 :
    37.8k
    本站访客数 :
    本站总浏览量 :
    最后更新时间 :
    日历
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    剩余时间
    +
    距离除夕
    +
    +
    2025-01-28
    +
    +
    +
    +
    本年
    +
    + + 还剩天 + +
    +
    +
    +
    本月
    +
    + + 还剩天 + +
    +
    +
    +
    本周
    +
    + + 还剩天 + +
    +
    +
    +
    \ No newline at end of file