惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Vulnerabilities – Threatpost
P
Proofpoint News Feed
The Hacker News
The Hacker News
Know Your Adversary
Know Your Adversary
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Tenable Blog
AWS News Blog
AWS News Blog
S
Securelist
T
Threatpost
C
Cybersecurity and Infrastructure Security Agency CISA
IT之家
IT之家
腾讯CDC
WordPress大学
WordPress大学
Spread Privacy
Spread Privacy
C
Check Point Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Engineering at Meta
Engineering at Meta
Latest news
Latest news
A
About on SuperTechFans
The Register - Security
The Register - Security
L
LINUX DO - 热门话题
T
The Exploit Database - CXSecurity.com
C
Cisco Blogs
T
Tailwind CSS Blog
Simon Willison's Weblog
Simon Willison's Weblog
阮一峰的网络日志
阮一峰的网络日志
MyScale Blog
MyScale Blog
大猫的无限游戏
大猫的无限游戏
T
Tor Project blog
L
Lohrmann on Cybersecurity
G
GRAHAM CLULEY
B
Blog RSS Feed
Scott Helme
Scott Helme
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
NISL@THU
NISL@THU
P
Privacy International News Feed
Security Latest
Security Latest
Recorded Future
Recorded Future
L
LangChain Blog
Cyberwarzone
Cyberwarzone
C
Cyber Attacks, Cyber Crime and Cyber Security
C
CXSECURITY Database RSS Feed - CXSecurity.com
博客园 - 聂微东
Google DeepMind News
Google DeepMind News
Last Week in AI
Last Week in AI
Apple Machine Learning Research
Apple Machine Learning Research
F
Fortinet All Blogs
O
OpenAI News
T
Threat Research - Cisco Blogs
Blog — PlanetScale
Blog — PlanetScale

Flatpaper Demo

FlatPaper 文章顶部图:top_img 与 post_top_img 配置 | Flatpaper Demo FlatPaper 主题重磅更新:优雅的朋友圈 (Friend Circle) 信息流 | Flatpaper Demo FlatPaper 现在支持 Google Fonts 了 | Flatpaper Demo FlatPaper 首页 Hero:开屏、背景图与贴纸配置 | Flatpaper Demo 主题效果总览:文章块与交互组件预览 | Flatpaper Demo FlatPaper 内置图标速查 | Flatpaper Demo Hello World | Flatpaper Demo 多级标题测试:从一级标题到六级标题 | Flatpaper Demo 多级标题测试:从一级标题到六级标题 外链与脚注测试:链接样式、长 URL 与引用来源 | Flatpaper Demo 外链与脚注测试:链接样式、长 URL 与引用来源 用 VitePress 风格的 note 容器语法 | Flatpaper Demo 用 VitePress 风格的 note 容器语法 图片排版预览:多图、图注与长图测试 | Flatpaper Demo 图片排版预览:多图、图注与长图测试 多语言代码示例:用于测试代码高亮 | Flatpaper Demo 多语言代码示例:用于测试代码高亮 在 Hexo 中使用 NOTE 提示块 | Flatpaper Demo 在 Hexo 中使用 NOTE 提示块 Hello World FlatPaper 主题页面检查清单 | Flatpaper Demo FlatPaper 主题页面检查清单 Markdown 元素展示:表格、代码与引用 | Flatpaper Demo Markdown 元素展示:表格、代码与引用 FlatPaper 设计札记:纸感、留白与轻量界面 | Flatpaper Demo FlatPaper 设计札记:纸感、留白与轻量界面 周末散步记录:从街角咖啡店到河岸 | Flatpaper Demo 周末散步记录:从街角咖啡店到河岸 开发日志:导航、归档与空状态 | Flatpaper Demo 开发日志:导航、归档与空状态
更新日志:FlatPaper 现已支持赞赏码 | Flatpaper Demo
Author · 2026-05-30 · via Flatpaper Demo
Note

文章底部那一行「评论 / 分享」的互动区,现在可以追加你自己的条目了。最常见的用法就是赞赏码:放一个按钮,点一下气泡里弹出收款二维码。支持配置多个,支付宝、微信、PayPal 的图标都已内置。

它长什么样

在文章底部互动区(article-reactions)里,自定义条目和「评论」「分享」并排排布:

  • 一个圆形图标按钮 + 旁边一行文字(比如「微信」「支付宝」「赞赏」)
  • 点击后,按钮上方弹出一个气泡,里面是你提供的图片(一般是收款二维码)
  • 再点一次、点页面其他地方、或按 Esc 都会收起气泡
  • 多个条目互斥:打开一个会自动收起其他的

当前自定义条目只支持 image 一种类型——点击弹出一张图片。后续可以按同样的结构扩展更多类型。

怎么配置

在站点的 _config.flatpaper.yml 里新增 reactions.custom,每个条目就是一张赞赏码:

1
2
3
4
5
6
7
8
9
10
11
12
13
reactions:
custom:
- type: image
name: 微信
icon: wechat
align: left
image: https://img.nep.me/ooo/square-simple.webp
title: 微信
- type: image
name: 支付宝
icon: alipay
align: right
image: https://img.nep.me/ooo/square-simple.webp

字段说明:

字段 说明
type 条目类型,目前仅 image(点击弹出一张图片)
name 按钮旁文字,如 赞赏 / 微信 / 支付宝;缺省为 赞赏
icon 图标名:gift(默认)、alipaywechatpaypalheart,或任意内置图标
align left 靠左(与「评论」同侧)/ right 靠右(与「分享」同侧,默认)
image 二维码图片:站点 source/ 下的相对路径(如 /images/reward.jpg)或绝对 URL
title 可选,气泡标题;缺省用 name

新增的支付图标

为了配合赞赏码,这次同时往主题里加了三个品牌图标(来自 Simple Icons,CC0)和一个默认的 gift 图标:

  • alipay — 支付宝
  • wechat — 微信
  • paypal — PayPal
  • gift — 赞赏默认图标(描边风格)

这些图标也进了内置图标速查,正文里直接贴 <svg> 或在主题模板里 partial('_partial/icons', { icon: 'alipay' }) 都能用。

小提示

  • image 用绝对 URL 或站内相对路径都行,气泡里的二维码默认带了 no-zoom,不会被 Fancybox 灯箱再叠一层。
  • 想把赞赏放在左边、分享类放右边,靠 align 自由组合即可。
  • 不配置 reactions.custom 时,互动区保持原样,只有「评论 / 分享」,不会多出任何东西。