UA 判断设备类型跳转支付盛行的时代已经过去，PayQrcode 二合一收款码（物理合并版）​ 区别于传统基于设备 UA 判断的「软件识别版」，本方案通过物理图片合并技术，将微信与支付宝收款码融合为单张图片，实现离线场景下的双码兼容识别。

技术实现逻辑

支付平台识别特性

• 微信识别逻辑：采用「从左到右优先识别」策略，且会解析 wxp://xxxx 格式的微信支付链接 ​

• 支付宝识别逻辑：直接忽略微信支付链接格式，仅识别自身 https://qr.alipay.com/xxx 格式链接，确保正确跳转

  二维码处理策略

• 采用最高容错等级 H（30% 纠错能力） ，确保局部覆盖后仍可解析 ​
• 底层架构：以微信收款码作为背景层
• 提取支付宝收款码核心数据区，删除 3 个定位角点中的无点位角（保留 3 个定位角）​
• 顺时针旋转 180° ，破坏微信对支付宝码的定位识别逻辑
• 层级叠加将处理后的支付宝码放置于微信码的右下角无点位区域，通过像素级融合形成完整二维码

核心优势

潜在局限

• 兼容性限制：仅支持双码合并，暂无法扩展至 3 个及以上码种 ​
• 抗损能力下降：局部污损（超过 30% 纠错范围）可能导致识别失败，需避免二维码区域遮挡 ​
• 极端识别问题：极少数情况下微信可能误解析支付宝链接（概率＜ 0.5%），建议配置兜底测试流程

使用注意事项

生成测试流程：生成后使用微信 / 支付宝 APP 分别扫码测试，确保：

• 微信扫码优先跳转微信支付页面 ​
• 支付宝扫码正常唤起付款码 / 转账页面 ​

参数调优：建议若出现识别延迟或失败，可尝试调整：​

• 支付宝码在微信码上的覆盖比例（建议初始比例：30%-40% 面积占比）​
• 旋转角度（±10° 微调，寻找最佳识别平衡点）​

项目地址

{hide}
PayQrcode

{/hide}

https://gh.dpik.top/https://raw.githubusercontent.com/zzhaosir/repo/main/20261002192853_fde7a0c09e7c.webp丨4K壁纸丨二次元壁纸
https://gh.dpik.top/https://raw.githubusercontent.com/zzhaosir/repo/main/20261002192935_1f0666f9b35d.webp丨4K壁纸
https://gh.dpik.top/https://raw.githubusercontent.com/zzhaosir/repo/main/20261002192957_eabfa4777747.webp丨4K壁纸
https://gh.dpik.top/https://raw.githubusercontent.com/zzhaosir/repo/main/20261002193015_940454328cfb.webp丨4K壁纸

众所周知我自己开发了一款主题为 Supreme （探索极简与优雅的边界，专注于内容的现代化响应式主题！）
为了此主题，我制作了一款 SpEdit 增强编辑器，超强的短代码功能合集有 55 项代码解析功能，在编辑文章时能轻松应对各种需求免得来回找这些短代码而大费周章。

SpEdit编辑器预览

SpEdit编辑器功能演示

文本加粗
那个女孩子 气喘吁吁 的打电话和你说：我在跑步
文本倾斜
你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的
文本删除
你明白了，此刻的头上正顶着个 率帽子 绿帽子
行内代码
远上寒山石径斜，白云生处有人家。 停车 坐爱 枫林晚，霜叶红于二月花。
横线

引用

那女孩对你说：你还不如跳蛋。

有序列表

1. 耐久
2. 可靠
3. 优良

无序列表

• 一个女朋友
• 二个女朋友
• 三个女朋友
• N 个女朋友

超链接
百度一下，你就凉了
胶囊链接
瞬间
插入图片

3 行 3 列的表格

代码块

<?php

/**
 * SpEdit 一款 Typecho 增强编辑器
 * 
 * @package custom 
 * 
 **/

?>

输出解析 HTML

居中

居右

插入一个时间点
2026-09-27 18:37:46 星期日
段落缩进、空格
 有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ----李七毛《我们都不擅长告别》
实体符号
★ ╊ ➻ Ω… 这里有很多，就不全部演示了，编辑器上有这个按钮，直接 插 入就行了
符号表情
😡 💃 🔆 这里有很多，就不全部演示了，编辑器上有这个按钮，直接 插 入就行了
图片表情
[emoji:1f494] ::(嘚瑟) :@(愤怒) 这里有很多，就不全部演示了，编辑器上有这个按钮，直接 插 入就行了
任务未完成
{ } 每天都是崭新的一天哦！每天都要开心哦！
任务已完成
{x} 今天断气嗝屁了。
居中标题

{mtitle title="SpEdit 增强编"/}

插入一个 m3u8 或 mp4 视频

{dplayer src="https://mpimg.cn/view.php/9e1664b77662654e1daaaec83cbfdcad.mp4"/}

插入 哔哩哔哩 视频

{bilibili bvid="BV1MihD6zEx3" page="1"/}

插入 抖音 视频

{douyin vid="7690567340270534591" autoplay="0"/}

网易云歌单

{music-list id="14156642258" color="#1989fa" autoplay="autoplay"/}

网易云音乐

{music id="3435131040" color="#1989fa" autoplay="autoplay"/}

多彩按钮
下面的实现方式无需学习怎么实现，编辑器直接 插 入
{abtn icon="fa-github-alt" color="#ff007b" href="https://www.zixk.cn" radius="" content="知享客"/}
便条按钮
便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样
{anote icon="fa-github" href="https://www.zixk.cn/skill/7.html" type="secondary" content="Supreme主题"/}
彩色虚线

{dotted startColor="#ff6c6c" endColor="#1989fa"/}

回复可见

{hide}
我拉了屎，不冲，我放手上揉丸子。哎~ 我就是玩。
{/hide}

默认卡片

{card-default label="SpEdit 一款 Typecho 增强编辑器" width="80%"}
嵌套其他内容的卡片
{/card-default}

消息提示

{message type="success" content="1"/}

{message type="info" content="2"/}

{message type="warning" content="3"/}

{message type="error" content="4"/}

进度条

{progress percentage="65%" color="#7e6ae2"/}

标注

{callout color="#f0ad4e"}
标注内容
{/callout}

自定义外部音乐

{mp3 name="" url="" cover="" theme="#f0ad4e" autoplay="autoplay"/}

Tabs 标签页

{tabs}
{tabs-pane label="标签一"}
标签一内容
{/tabs-pane}
{tabs-pane label="标签二"}
标签二内容
{/tabs-pane}
{/tabs}

卡片列表

{card-list}
{card-list-item}
列表一内容
{/card-list-item}
{card-list-item}
列表二内容
{/card-list-item}
{/card-list}

时间轴

{timeline}
{timeline-item color="#19be6b"}
正式上线
{/timeline-item}
{timeline-item color="#ed4014"}
删库跑路
{/timeline-item}
{/timeline}

复制文本

{copy showText="知享客" copyText="https://www.zixk.cn"/}

描述性卡片

{card-describe title="卡片描述"}
卡片内容
{/card-describe}

跑马灯

{lamp/}

折叠面板

{collapse}
{collapse-item label="折叠标题一" open}
折叠内容一
{/collapse-item}
{collapse-item label="折叠标题二"}
折叠内容二
{/collapse-item}
{/collapse}

云盘下载

{cloud title="" type="default" url="" password=""/}

{cloud title="" type="360" url="" password=""/}

{cloud title="" type="bd" url="" password=""/}

{cloud title="" type="lz" url="" password=""/}

{cloud title="" type="kk" url="" password=""/}

{cloud title="" type="ty" url="" password=""/}

{cloud title="" type="github" url="" password=""/}

{cloud title="" type="gitee" url="" password=""/}

宫格
{gird column="3" gap="15"}
{gird-item}
宫格内容一
{/gird-item}
{gird-item}
宫格内容二
{/gird-item}
{gird-item}
宫格内容三
{/gird-item}
{/gird}
警告提示

{alert type="info"}
警告提示
{/alert}

{alert type="success"}
警告提示
{/alert}

{alert type="warning"}
警告提示
{/alert}

{alert type="error"}
警告提示
{/alert}

Supreme主题 瞬间功能，为用户提供一个轻量级的内容发布功能，支持发布图文、视频、音频等内容，的平台。

功能特性

• 支持发布图文、视频、音频等多媒体内容
• 提供标签管理功能，支持按标签筛选瞬间
• 主题端 /moments 列表路由和 /moments/{name} 详情路由
• 提供匿名可访问的公共 REST API，方便前端框架构建客户端渲染瞬间列表
• RSS 订阅支持，路由为 /moments/rss.xml
• 支持将瞬间数据同步至 Supreme 主题
• 支持通过 MCP Server 查询、
• 瞬间功能已适配 SpEdit 增强编辑器
• 更多的自定义功能

使用方法

• 控制台新建独立页面 → 自定义模板选「瞬间 Memos」→ 发布，页面地址即为前台访问入口。
• 因导航栏不再显示瞬间入口，需要在设置外观 → 瞬间 Memos → 设置瞬间页面链接，页脚社交图标区会出现一个播客图标。

查看演示 {abtn icon="fa-solid fa-podcast" color="#8f02ed" href="/memos.html" radius="" content="瞬间"/}

 利用 Github 做图床的一款 Typecho 图床插件 — GithubRepo
 为了方便自己的写作需求，又不想将附件上传到免费图床（因为收费的用不起，免费的怕跑路 [emoji:1f973] ）或者上传到服务器上占用服务器空间，所以我自研了一款专属于Typecho的Github仓库图床插件，本项目利用Github仓库进行储存，使用第三方代理服务提供图片访问(A Typecho image hosting plugin based on Github)。

GithubRepo 展示

插件设置页

Github图床管理

文章插入按钮

GithubRepo 特点

• 插件支持Typecho自带附件上传功能
• 适配各个主题，或者Typecho自带的编辑器
• 支持自定义 Github多仓库 / 多目录 上传
• 编辑器上传支持 拖拽 / Ctrl+V 粘贴 / 多文件批量，并展示缩略图预览
• 访问速度超快 (你问速度吗？本文图片可全是秒加载）
• 稳定性 (你问这个是怕最大的 ** 网站跑路吗？）

GithubRepo 安装教程

1. 下载插件解压到插件目录
2. 获取token
3. 创建仓库 (不会？别急创建仓库）
4. 设置插件
5. 用户名填入Github账号
6. 填入token
7. 储存桶填入仓库名
8. 目前教程比较笼统，如果不知道怎么操作的可以评论区留言。

更新历史

{timeline}
{timeline-item color="#19be6b"}
GithubRepo 正式版本
{collapse}
{collapse-item label="Ver 1.4.0" open}
版本开发中...
{/collapse-item}
{collapse-item label="Ver 1.3.0（性能/健壮性/交互）"}

• 图床文件列表性能优化：默认改为「当前目录」单层浏览（一次 API 请求），「递归列出全部」结果缓存 5 分钟，单个目录失败只告警跳过不再整页空白
• 新增文件搜索与分页（每页 50 条），目录面包屑导航
• 仓库编辑：仓库管理 Tab 支持编辑已有仓库（分支 / Token / 目录 / 备注 / 默认），避免「删了重建」导致历史附件路径前缀失效
• modifyHandle（替换文件）补齐全部校验：抽出 validateFile() 与新增上传共用（体积上限 / 25MB 硬上限 / 真实 MIME / 内存预检），且不再写本地上传目录
• 上传前增加内存余量预检，避免因 memory_limit 不足导致大文件 OOM
• Api 重试覆盖 5xx 与 429 限流，并支持响应头 Retry-After；状态码获取失败时用响应体 message 兜底判定，避免 401/403 被当成功
• 编辑器上传支持拖拽 / Ctrl+V 粘贴 / 多文件批量，并展示缩略图预览（点击缩略图可切换填入的地址）
• 图片压缩最大宽度可配（新增 ImgCompressMaxWidth，填 0 表示只重编码不缩放）
• Token 配置改为密码框，不再明文回显；全局 Username / Repo / Token 标注为「旧版兼容 / 全局默认」，不再强制必填
• 日志保留策略：自动清理 30 天前日志，超大日志只读尾部，避免整文件读入内存
• 移除未使用的 _TMP_PATH 死代码；CI 校验矩阵修正为 PHP 8.0 / 8.1 / 8.2 / 8.3
• 整理 README 版本日志，补全 SECURITY.md 安全策略
  {/collapse-item}
  {collapse-item label="Ver 1.2.0（多仓库/多目录）"}
• 支持多仓库：后台「Github图床管理 → 仓库管理」可增删多个 GitHub 仓库，每个仓库可配独立 Token、分支、备注名、默认子目录
• 支持每文件选仓库 + 选目录：编辑器「上传 GitHub」控件新增仓库下拉与目录输入框，上传时指定落点；不指定则走默认仓库
• 「图床文件」Tab 新增仓库下拉切换，按仓库列出文件并删除
• 附件路径带仓库前缀（仓库ID:路径），之后改默认仓库也不会让历史附件链接错位
• 旧版单仓配置（Username / Repo / Branch）自动作为默认仓库回退，升级无需重新配置
• 新增 do=saveRepo / do=delRepo / do=setDefaultRepo 三个管理端点（均带管理员校验 + CSRF）
• 日志删除 delLog 由 GET 改为 POST + CSRF，防止跨站删除
• 单文件体积上限与 GitHub Contents API 的 25MB 硬上限对齐（配置超过 25 自动钳制，超限本地即拦截）
• 「上传记录」Tab 按关键字过滤，仅展示上传事件
  {/collapse-item}
  {collapse-item label="Ver 1.1.1"}
• 实装「图片压缩」：开启 ImgCompress 后上传 jpg/png 经 GD 压缩（新增 ImgCompressQuality 质量配置）
• 新增「图床文件管理」后台面板：递归列出 GitHub 仓库文件并可同步删除（解决独立上传端点无删除入口的问题）
• 新增 MaxFileSize 单文件体积上限（MB）配置，超限拒绝上传
• 上传新增真实 MIME 校验（mime_content_type），拦截扩展名伪装文件
• Api.php 新增网络异常失败重试（3 次，含退避），并暴露真实 API 错误
• 上传 / 删除失败提示透出真实原因；为 githubUpload 与 delGithubFile 增加 CSRF 校验
• 修正过期仓库链接（GithubFile → GithubRepo）
  {/collapse-item}
  {/collapse-item}
  {collapse-item label="Ver 1.1.0"}
• 修复 Token 被误配为 ApiMirror，导致所有 API 调用鉴权失败（致命）
• 修复上传/更新/删除路径变量名不一致（$Gpath / $gpath）
• 补齐缺失的 checkFileType() 文件类型白名单校验（原调用未定义方法导致上传 fatal）
• 修复 attachmentHandle 中 content['attachment'] 漏写 $ 的语法错误
• 用 ensureApi() 惰性初始化替代失效的 __callStatic 单例初始化（原机制因方法已定义永不触发）
• 修复 deleteHandle 引用未定义 $gapi 的问题
• 修复 delLog 路径遍历任意文件删除漏洞，并修复日志面板 XSS
• 增强 Api 错误处理（异常捕获、HTTP 状态码判断），避免网络失败时误判上传成功
• 重命名为 GithubRepo，适配 Typecho 1.3.0 与 PHP 8.0+
• 修复 Typecho 1.3 下附件钩子 array $content 类型声明导致整页 500（TypeError）
• 修复返回链接占位符未替换（大小写命名不匹配），新增 buildFileUrl() 统一拼 URL
• 新增调试日志写入逻辑（开启 DebugLog 后「日志内容」面板有内容）
• 新增独立图床上传端点 do=githubUpload（不经过附件表），返回 JSON URL
• 适配 Supreme 主题 SpEdit 编辑器：改造「插入图片」弹窗，新增「上传 GitHub」入口
• 默认镜像改为 gh.dpik.top 前缀代理（https://gh.dpik.top/https://raw.githubusercontent.com/...）
  {/collapse-item}
  {/collapse}
  {/timeline-item}
  {timeline-item color="#ed4014"}
  GithubFile 历史版本
  {collapse}
  {collapse-item label="Ver 1.3.3" open}
• 基于 GithubFile 插件 重构插件
• 修复老插件的Bug
  {/collapse-item}
  {collapse-item label="Ver 1.1及更早（旧版 GithubFile 时代，仅作归档）"}
  Ver 1.3.2
• 兼容最新版Typecho 1.2 和 PHP7.4
  Ver 1.2
• 更新为Token认证(支持personal token 或者 oauth token)
  Ver 1.1
  已更新
• 支持了basic认证方式

• 使用Typecho内置http方式替代
  {/collapse-item}
  {/collapse}
  {/timeline-item}
  {/timeline}

  安全性须知

  插件代码为公开开源，认证过程基于 Token
  图片代理源(图片镜像)

• 自建代理
• 第三方代理

项目地址

因为本项目在灰度测试当中，不方便发布可以关注本博客，后续我会更新插件进度。

 AI 人工智能：未来机遇无限在科技浪潮汹涌澎湃的当下，AI 人工智能宛如夜空中最璀璨的启明星，以风驰电掣之势重塑着我们生活、工作的每一处角落，深度渗透至社会的各个维度，为未来勾勒出一幅幅充满无限可能的壮丽画卷。

医疗健康领域的突破

 AI 于医疗健康领域蕴藏着深不可测的潜能。在疾病诊断环节，AI 算法宛如一位不知疲倦且目光如炬的 “数据侦探”，能够在转瞬之间对海量的医疗影像数据，诸如 X 光、CT 以及 MRI 等进行深度剖析。它能精准无误地揪出异常病变，甚至如同拥有 “透视眼” 一般，在疾病尚处于萌芽状态时，便敏锐察觉潜在问题，大幅提升诊断的精准度与效率。以谷歌旗下的 DeepMind 公司研发的 AI 系统为例，当它对眼部疾病的视网膜图像展开分析时，其诊断准确率已然超越了部分专业眼科医生，达到了令人惊叹的水准。这一卓越成果意味着，哪怕身处偏远山区的患者，借助 AI 辅助诊断，也能及时获取精准的医疗建议，打破地域限制带来的医疗资源不均困境。

 药物研发之路向来漫长且布满荆棘，成本高昂。而 AI 恰似一位智慧的 “研发助手”，能够深度挖掘海量生物数据，精准预测药物分子的活性与副作用，助力制药公司在浩如烟海的候选药物中，快速筛选出最具潜力的 “种子选手”，大幅压缩研发周期，降低研发成本。不仅如此，AI 还将引领个性化医疗的新浪潮，依据患者独一无二的基因数据、生活方式以及病史等多元信息，为每一位患者量身打造专属的治疗方案，真正实现 “因人而异” 的精准医疗。

教育革新

 AI 正悄然对教育模式进行一场深刻的变革。智能辅导系统仿若一位贴心的 “私人定制导师”，能精准洞察学生的学习进度、知识掌握程度以及个人学习习惯，从而为其规划出独一无二的个性化学习路径，提供极具针对性的辅导内容。无论学生面对的是复杂抽象的数学难题，还是博大精深的语文知识，亦或是其他学科领域的挑战，都能随时获得最契合自身需求的指导，就如同身旁时刻陪伴着一位专属私人教师。例如，不少在线学习平台借助 AI 算法的强大力量，依据学生的学习表现，智能推荐契合其当前水平的练习题与学习资源，助力学生在学习之路上大步迈进，高效提升学习效果。

 此外，AI 还擅长营造沉浸式的学习氛围。在语言学习领域，AI 驱动的虚拟语言伙伴宛如一位真实存在的对话者，能够与学生展开实时流畅的对话，及时指出并纠正发音与语法错误，为学生营造出一个仿若置身国外街头巷尾的真实语言交流环境，让学生的语言应用能力在潜移默化中实现质的飞跃。

智能交通的变革

 伴随 AI 技术的蓬勃发展，智能交通系统从蓝图构想逐步迈向现实生活。无人驾驶汽车无疑是其中最为耀眼的明星产物。它周身配备的传感器与摄像头，恰似敏锐的 “感知触角”，复杂精妙的 AI 算法则如同聪慧的 “大脑”，二者协同运作，让无人驾驶汽车能够实时、精准地感知周遭的交通环境，迅速做出准确无误的驾驶决策，极大程度降低交通事故的发生概率。在未来，无人驾驶汽车将彻底改写人们的出行方式，有效提升交通效率，成为缓解交通拥堵的 “得力干将”。与此同时，它还将在物流行业掀起一场变革风暴，实现货物运输的自动化，大幅削减物流成本，为物流行业的发展注入全新活力。

 智能交通管理系统依托 AI 技术，对交通流量展开实时监测与深度分析，宛如一位运筹帷幄的 “交通指挥官”。通过智能信号灯的精准调控，优化道路资源的分配，显著减少车辆的等待时长，让道路通行能力得到大幅提升。这一系列举措不仅能够有效缓解城市交通拥堵的 “顽疾”，还能降低能源消耗，减轻环境污染，为城市的绿色发展贡献力量。

环境保护与可持续发展

 AI 在环境保护领域同样肩负着重要使命，拥有巨大的发挥空间。在气候变化研究方面，AI 犹如一位不知疲倦的 “数据分析师”，能够高效处理海量的气候数据，精准预测气候变化趋势，助力科学家深入洞悉地球生态系统的微妙变化规律，为制定行之有效的应对策略提供坚实的数据支撑。

 在资源管理层面，AI 堪称优化能源分配的 “智慧管家”。以智能电网为例，它借助 AI 技术实时监测电力需求，如同一位经验丰富的调度员，自动灵活地调整发电与输电计划，最大程度减少能源浪费现象。在农业领域，AI 传感器好似农民的 “贴心小助手”，能够实时监测土壤湿度、养分含量以及气象条件等关键信息，帮助农民实现精准灌溉与施肥，避免水资源与化肥的不必要浪费，推动农业朝着可持续发展的方向稳步前行。

娱乐产业的新体验

 AI 正为娱乐产业注入源源不断的创新活力，带来前所未有的全新体验。在游戏领域，AI 技术让游戏角色摇身一变，成为拥有独立思考能力的 “智能伙伴”。它们能够敏锐捕捉玩家的行为与策略，实时做出自然而灵活的反应，为玩家打造出更加个性化、充满挑战与惊喜的游戏体验。在一些大型角色扮演游戏中，非玩家角色（NPC）已借助 AI 技术，实现与玩家的自然交互，让整个游戏世界焕发出勃勃生机，仿若真实存在一般。

 在影视创作领域，AI 扮演着辅助编剧的 “创意智囊” 角色。它依据观众的喜好大数据分析，为编剧提供新颖独特的剧情构思与角色设定灵感，助力创作出更贴合观众口味的影视作品。同时，在视频特效制作环节，AI 凭借强大的运算能力，极大地提升了制作效率与质量，为观众带来更为震撼的视觉盛宴。虚拟偶像作为 AI 在娱乐产业的热门应用，通过 AI 技术精心打造出的虚拟歌手、演员等，凭借其独特魅力与才艺，吸引了大批粉丝的狂热追捧，成功开辟出娱乐产业的全新版图。

 AI 人工智能为未来拓展出广阔无垠的发展空间，其影响力广泛覆盖医疗、教育、交通、环保以及娱乐等众多核心领域。随着技术的持续迭代创新，我们有充足的理由坚信，AI 将携手人类共同绘制出更加绚丽多彩的未来画卷，为人类社会带来震撼人心的变革与进步。让我们满怀热忱地张开双臂，拥抱 AI 时代，积极投身其中，共同探索并充分挖掘这些无限的机遇宝藏。

TagSelector 插件一款 Typecho 后台标签功能增强，支持标签展示，标签选择等。

安装

将插件文件夹 TagSelector 上传到Typecho的插件目录（ usr/plugins/ ）。在Typecho后台插件管理页面启用 TagSelector 插件。

使用

• 在后台添加或编辑文章时，侧边栏会出现一个标签选择框，其中包含您之前创建的所有标签。
• 点击某个标签，该标签将自动添加到标签输入框中，并从选择框中删除。
• 当您删除已添加的标签时，对应的标签会重新回到标签选择框。
• 编辑文章时，已有的标签会从标签选择框中删除。

下载

{hide}

{cloud title="TagSelector" type="github" url="https://github.com/taotecode/TagSelector/archive/refs/heads/main.zip" password=""/}

{/hide}

忘记以前在哪个网站扒下来的了，反正个人感觉挺好看的，后续我可能会加在本主题上 [emoji:1f921]

效果展示：

代码：

HTML放在 body 开头即可

    <!-- 懒加载组件 -->
    <div id="loading">
        <div class="loading">
            <div style="--x:0"></div>
            <div style="--x:1"></div>
            <div style="--x:2"></div>
            <div style="--x:3"></div>
            <div style="--x:4"></div>
            <div style="--x:5"></div>
        </div>
    </div>

CSS代码

{hide}

        #loading {
            position: fixed;
            width: 100%;
            height: 100vh;
            z-index: 9999;
            background-color: #eef1f5;
            top: 0;
        }
        .loading {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .loading div {
            position: relative;
            min-width: 40px;
            height: 200px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #eef1f5);
            margin: 20px;
            border-radius: 20px;
            border: 2px solid #eef1f5;
            box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
                -15px -15px 20px #fff,
                inset -5px -5px 5px rgba(255, 255, 255, 0.5),
                inset 5px 5px 5px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        .loading div::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1),
                0 420px 0 400px lightskyblue;
            animation: animate 2s ease-in-out infinite;
            animation-delay: calc(var(--x) * -0.3s);
            transform: translateY(160px);
        }
        @keyframes animate {
            0% {
                transform: translateY(160px);
                filter: hue-rotate(0deg);
            }
            50% {
                transform: translateY(0px);
                filter: hue-rotate(180deg);
            }
            100% {
                transform: translateY(160px);
                filter: hue-rotate(360deg);
            }
        }

{/hide}

JS代码
最后加载完成使用js删除，放在 body 尾部即可。

    <script>
        // 停止懒加载，展示页面
        window.addEventListener('load', function () {
            var loading = document.getElementById('loading');
            loading.parentNode.removeChild(loading);
        });
    </script>

Supreme 主题一款我自研的 Typecho 三栏现代化付费主题，经过我精心的打磨与开发，目前主题已经做到极致优化！

主题展示

主题前端展示：

自制编辑器展示：

主题简介

• 整包仅 5Mb ，却实现超强功能，极其迅速的响应（在开发时，都是使用 10000 篇文章进行开发与测试）
• 全站变量名、类名统一规范，重在方便开发人员以及主题用户日常维护
• 主题开箱即用，没有任何复杂的操作，无需像其他主题去特意美化或者安装插件等
• 主题启用后，会置换 Typecho 的默认编辑器，采用 Supreme 独家开发的 SpEdit 增强编辑器
• 主题响应式布局，不依赖任何响应式框架，采用 SpEos 独家响应式系统
• 主题在一切可能暴露的接口上，屏蔽 sql 注入 xss 攻击风险，为用户提供安全保障
• 主题内置超强短代码功能以及超强单页、包括相册图片插入、友链页自助申请友链、风格化的留言板单页、文章插入视频、文章插入网易云音乐等...
• 主题 SEO 极致优化， Lighthouse SEO 跑分彪满 100 分
• 主题内置代码高亮、无需借助任何插件、支持种语言高亮
• 主题自研极强的表情回复功能，为你的博客带来表情互动，不再像传统博客那样，仅限于文字
• 主题内置sitemap、百度推送、友链申请、回复可见等功能...无需依赖任何插件

主题更新记录

主题购买

 因为本项目是付费主题，所以请前往 {abtn icon="fa-solid fa-crown" color="#ff6800" href="https://sq.zixk.cn/buy.php" radius="" content="购买授权"/} 主题售后可联系QQ 462637624