不用写代码，也不用自己搭服务。下面点一点选好样式，复制右侧代码，粘贴到博客就能用。
页面最下方那条打赏栏就是实时预览：下面每改一项，它和右侧代码都会立刻跟着变。
挑个喜欢的样子
在「选个风格」里点一个预设，再按需改改标题、按钮文字和颜色。不满意随时点「恢复默认」。
换成自己的收款码
先点下面的「放入示例收款码」，右侧代码里才会出现 example.com 占位地址；把它换成你自己的微信 / 支付宝收款码图片网址（在图片上右键 → 复制图片地址）。这一步别跳过，不然打赏按钮收不到钱。
复制 → 粘贴 → 发布
点右边绿色的「复制代码」，粘贴到博客模板的 </body> 前，或文章的 HTML 代码块里，保存发布即可。
有疑问先看下面的「常见问题」。右侧代码有三种写法，绝大多数博客用默认的「标准代码」就可以。
示例二维码只用于演示，生成代码时会自动换成占位地址。也可以先选「先不放收款码」，之后再补上。
每一项都能实时看到效果；拿不准的就别动，保持默认就好。
代码要放哪儿？放在博客模板 </body> 前最省事。WordPress、Typecho、Hexo 等，放进主题的 footer 或「底部脚本 / 自定义 HTML」里也行；只想加在某一篇文章，粘到那篇文章的 HTML 代码块即可。
收款码图片网址从哪来？把收款码图片传到你的图床或博客附件，右键「复制图片地址」，用它替换代码里的 example.com 就行。代码里看不到 example.com？先点第 2 步的「放入示例收款码」。
打赏条会出现在哪儿？默认固定在屏幕底部，一直能看见；想让它跟着文章内容走，在下面「④ 位置和动效」里把打赏条位置从「固定在底部」切成「跟着文章走」那一档即可。
三种代码选哪个？用默认的「标准代码」即可；如果博客不允许内联脚本，选「纯标签代码」；「完整示例网页」可以下载下来双击先看效果。
打赏名单能自动更新吗？能，需要一次进阶配置（免费的 Cloudflare 云端存储），照着下面「让打赏名单自动更新」的教程做一次即可；不配置也完全不影响收款。
组件默认显示代码里内置的那几条记录。想让名单存在「云端」、随时在网页上增删改而不动博客代码，就按下面的步骤配一次（用 Cloudflare 的免费额度即可，全程不花钱）。配好之后，日常记账只在整理工具里点几下。
注册 Cloudflare 账号
打开 dash.cloudflare.com 注册并登录，免费套餐就够用。
建一个云端存档（KV）
控制台左侧找到「存储和数据库」→「KV」→「创建命名空间」，名字随意（比如 donate-records）。创建后列表里会有一串 Namespace ID，先复制留用。
部署一个中转小服务（Worker）
打赏组件不直接碰云端存档，中间需要一个安全通道。点开「Workers 和 Pages」→「创建」→ 随便起个名（比如 donate-widget-api）先部署；再点「编辑代码」，把这份 Worker 部署包见 deploy/donate-widget-api/worker.js（Cloudflare Workers 新建项目时粘贴该文件内容）（点开这个文件名，全选复制）的全部内容粘进去覆盖原有内容，点「部署」。
把存档接到小服务上
回到这个 Worker 的「设置」→「绑定」→ 添加 KV 绑定：变量名必须填 DONATIONS，存档选第 2 步建的那个。
给服务上一把钥匙
仍在「设置」→「变量和机密」里添加一个「机密」类型：ADMIN_KEY，自己定一个长密码——它是往名单里写内容唯一的钥匙，之后在整理工具里要填同一个。设置页里还会看到一个可选项 ALLOWED_ORIGIN，这次留空不填：名单本来就是公开显示在博客上的，读取不用设防；写入已经有这把钥匙把门，足够安全。
记下你的专属地址
Worker 页面会显示形如 https://donate-widget-api.你的名字.workers.dev 的地址，这就是「记录接口地址」。
填进组件
在本页「⑤ 打赏记录与收款码」里，把 kvApiUrl 填成第 6 步的地址，重新点「复制代码」覆盖博客里的旧代码即可。想让名单隔一阵子自动刷新，再调 kvPollInterval（单位秒，0 表示只读一次）。
开始记账
打开在线整理工具（点本页顶部的「打开整理工具」，或直接访问 https://liuli.xx.kg/js/donate-widget-studio.html），填第 6 步的地址和 ADMIN_KEY，就能添加、修改、删除打赏记录并一键上传到云端。整理工具是现成的网页，不需要装到你自己的博客里。
kvApiUrl，组件照常工作，名单就用代码里内置的那几条；以后想上了再回来配。两个小提醒：① 整理工具和本页都已放在线上，直接用网页打开即可，不需要自己上传任何页面；② Cloudflare 面板菜单名称偶尔会调整，认准「KV」「绑定」「变量和机密」这几个关键词即可。
CDN 状态：CDN 待校验。默认加载同目录的 donate-widget.min.js；找不到时会自动回退到线上 CDN。
尚未运行
| 配置键 | 默认值 | 类型 | 说明 |
|---|
| 调用 | 作用 |
|---|---|
DonateWidget.version | 版本号字符串 |
DonateWidget.defaults | 34 个配置项的默认值对象（只读参考） |
DonateWidget.init() | 初始化，读取 window.DonateWidgetConfig；页面加载时会自动调用一次 |
DonateWidget.getInstance() | 取当前实例，未初始化时为 null |
DonateWidget.update(patch) | 局部更新配置并重渲染，是最常用的动态改配置方式 |
DonateWidget.openModal() / closeModal() | 打开 / 关闭打赏弹窗 |
DonateWidget.hide() / show() | 隐藏 / 恢复打赏条 |
DonateWidget.destroy() | 移除 DOM、样式、事件与定时器，可再次 init 重建 |
w.togglePanel() / w.selectQR(i) | 实例方法：展开收起面板 / 切换到第 i 个二维码 |
设置 kvApiUrl 后组件会 GET 该地址，接受 [{...}] 数组或 {donations:[...]} / {data:[...]} / {list:[...]} / {items:[...]}。单条字段：name、amount、msg、time、timestamp（也兼容 nickname / money / message / ts / created_at 等别名）。kvPollInterval 单位是秒，0 表示只拉一次。
主题色怎么来？ themeColor 留空时自动从宿主页面提取主色并做亮度驯化，保证白字可读；显式指定则保持原色，只按 WCAG 对比度择优文字色。
fixed 和 static 的区别？ fixed 固定视口底部；static 进入文档流，组件会插在 </body> 前。
弹窗打开时页面会横向跳一下吗？ 不会，默认 scrollLock:'soft' 拦截滚轮而不抽滚动条。
支持减弱动效吗？ 支持，系统开启「减少动态效果」后所有过渡与轮播淡入淡出自动落到终态。
配置优先级？ script 标签 data-* < window.DonateWidgetConfig < new DonateWidget(options)。