文章/页面自定义字段
| 字段 | 说明 | 示例 |
|---|---|---|
paid_enable | 是否启用付费阅读,1 开启,0 关闭 | 1 |
paid_price | 文章价格 | 9.90 |
paid_methods | 可用支付驱动,英文逗号分隔;留空使用全部已配置渠道 | alipay_face,wechat,epay |
paid_theme | 主题 ID(对应 themes 下文件夹名);留空使用插件默认主题 | default |
paid_desc | 购买提示文案;留空使用插件默认提示文案 | 购买后可永久查看全文。 |
paid_plan | 订阅计划标识(plan_key),留空则为单篇付费 | monthly |
paid_theme_options | 主题高级设置,格式 字段:值,一行一个 | accent:#00d1ff |
亦可直接在“文章定价与计划”面板中设置
支付通道
在插件设置的“支付通道定义”中,每行一个通道,格式固定为:
支付通道名称|支付驱动:配置1:配置2:配置3...- 支付通道名称:前台展示名,例如“支付宝扫码”。
- 支付驱动:如
alipay_face、wechat、epay。 - 配置项用英文冒号分隔;值里有冒号时写成
\:,例如https\://pay.example.com。 - 同一个驱动只保留一条配置。
内置驱动配置顺序
支付宝当面付|alipay_face:https\://gateway.example.com/pay:你的AppId:通知验签Key
微信支付|wechat:https\://gateway.example.com/pay:你的商户号:通知验签Key
易支付|epay:https\://pay.example.com:商户PID:商户Key:alipay支持的驱动会实时更新
主题与设置
所有主题均支持通过 主题高级设置(全局) 或文章自定义字段 paid_theme_options 自定义 CSS 变量,格式为一行一个 字段:值。
通用规则
- 字段名以
--开头时直接作为 CSS 变量名使用。 - 字段名不以
--开头时,自动加前缀--tp-。例如primary:#000→--tp-primary:#000。 - 全局设置与文章级
paid_theme_options冲突时,文章级优先。 - 值中的
;{}会被自动过滤。

1. default
9 个变量,支持亮色 / 暗色双模式。

| 字段名(简写) | CSS 变量 | 亮色默认值 | 说明 |
|---|---|---|---|
primary | --tp-primary | #2376e5 | 主色(按钮、链接、选中态) |
bg | --tp-bg | #ffffff | 卡片背景色 |
fg | --tp-fg | #152238 | 正文文字色 |
muted | --tp-muted | #6b7890 | 次要/描述文字色 |
border | --tp-border | #dbe4f1 | 边框色 |
input-bg | --tp-input-bg | #fbfcff | 输入框背景色 |
chip-bg | --tp-chip-bg | #f4f7fc | 支付方式选项卡背景 |
shadow | --tp-shadow | rgba(30, 55, 95, 0.12) | 卡片阴影颜色(透明度由插件控制) |
radius | --tp-radius | 18px | 卡片/按钮/输入框圆角 |
2. default2
13 个变量,支持亮色 / 暗色双模式。

| 字段名(简写) | CSS 变量 | 亮色默认值 | 说明 |
|---|---|---|---|
primary | --tp-primary | #1abc9c | 主色 |
bg | --tp-bg | #fff | 卡片背景色 |
fg | --tp-fg | #333 | 正文文字色 |
muted | --tp-muted | #777 | 次要/描述文字色 |
border | --tp-border | #ececec | 边框色 |
input-bg | --tp-input-bg | #fff | 输入框背景色 |
chip-bg | --tp-chip-bg | #fafafa | 支付方式选项卡背景 |
shadow | --tp-shadow | rgba(0,0,0,.06) | 卡片阴影颜色 |
radius | --tp-radius | 0.3125rem | 通用圆角 |
chip-hover | --tp-chip-hover | #f0f0f0 | 选项卡悬停背景 |
radius-btn | --tp-radius-btn | 100rem | 按钮圆角(胶囊形) |
font | --tp-font | 'Open Sans', Helvetica, 'Microsoft Yahei', sans-serif | 字体栈 |
3. default3
13 个变量,支持亮色 / 暗色双模式。

| 字段名(简写) | CSS 变量 | 亮色默认值 | 说明 |
|---|---|---|---|
primary | --tp-primary | #5b6e8a | 主色(暖灰蓝) |
bg | --tp-bg | #fff | 卡片背景色 |
fg | --tp-fg | #3a3a3a | 正文文字色 |
muted | --tp-muted | #9a9a9a | 次要/描述文字色 |
border | --tp-border | #eae6e0 | 边框色 |
input-bg | --tp-input-bg | #fafaf9 | 输入框背景色 |
chip-bg | --tp-chip-bg | #f6f4f1 | 支付方式选项卡背景 |
shadow | --tp-shadow | rgba(60,50,40,.045) | 卡片阴影颜色 |
radius | --tp-radius | 1.5rem | 通用圆角 |
chip-hover | --tp-chip-hover | #efebe7 | 选项卡悬停背景 |
radius-sm | --tp-radius-sm | 0.875rem | 小元素圆角 |
font | --tp-font | 系统字体栈 | 字体栈 |
4. default4
14 个变量,支持亮色 / 暗色双模式。

| 字段名(简写) | CSS 变量 | 亮色默认值 | 说明 |
|---|---|---|---|
primary | --tp-primary | #5a8f7b | 主色(苔绿) |
primary-light | --tp-primary-light | rgba(90,143,123,.08) | 主色极淡背景(悬停底纹) |
primary-soft | --tp-primary-soft | rgba(90,143,123,.15) | 主色柔和背景(选中光晕) |
bg | --tp-bg | #fff | 卡片右侧主栏背景 |
fg | --tp-fg | #3d3d3d | 正文文字色 |
muted | --tp-muted | #8c8c8c | 次要/描述文字色 |
border | --tp-border | #e8e3db | 边框色 |
input-bg | --tp-input-bg | #fafaf7 | 输入框背景色 |
chip-bg | --tp-chip-bg | #f6f4ef | 支付方式选项卡背景 |
left-bg | --tp-left-bg | #fafaf7 | 左侧预览栏背景色 |
shadow | --tp-shadow | rgba(50,40,30,.05) | 卡片阴影颜色 |
radius | --tp-radius | 1.25rem | 通用圆角 |
radius-sm | --tp-radius-sm | 0.75rem | 小元素圆角 |
font | --tp-font | 系统字体栈 | 字体栈 |
5. default5
变量最多的主题,15 个变量,支持亮色 / 暗色双模式。

| 字段名(简写) | CSS 变量 | 亮色默认值 | 说明 |
|---|---|---|---|
primary | --tp-primary | #d4836a | 主色(暖珊瑚) |
primary-soft | --tp-primary-soft | rgba(212,131,106,.12) | 主色柔和背景 |
primary-glow | --tp-primary-glow | rgba(212,131,106,.2) | 主色发光阴影 |
bg | --tp-bg | #fff | 卡片背景色 |
fg | --tp-fg | #3a3533 | 正文文字色 |
muted | --tp-muted | #9e9692 | 次要/描述文字色 |
border | --tp-border | #ece7e3 | 边框色 |
input-bg | --tp-input-bg | #faf9f8 | 输入框背景色 |
chip-bg | --tp-chip-bg | #f7f4f2 | 支付方式选项卡背景 |
chip-hover | --tp-chip-hover | #f0ebe7 | 选项卡悬停背景 |
shadow | --tp-shadow | rgba(60,40,30,.06) | 卡片阴影颜色 |
radius | --tp-radius | 1rem | 通用圆角 |
radius-lg | --tp-radius-lg | 1.25rem | 大元素圆角 |
font | --tp-font | 系统字体栈 | 字体栈 |
form-width | --tp-form-width | 420px | ⭐ 表单区域最大宽度 |
全局设置(插件配置页 → 主题高级设置(全局))
primary:#0b6bcb
radius:12px
shadow:rgba(0,0,0,.08)文章级设置(自定义字段 paid_theme_options)
primary:#e74c3c
radius:8px
--tp-form-width:500px亮暗色适配

插件设置中的两个字段:
| 设置项 | 可选值 | 说明 |
|---|---|---|
卡片亮暗模式 | auto(默认)/ dark / light | dark/light 会强制卡片使用对应配色;auto 由下方“亮暗自动适配方式”决定 |
亮暗自动适配方式 | system(默认)或多行 dark:xxx / light:xxx | 仅在 paid_theme_mode 为 auto 时生效 |
paid_theme_mode_switch 两种写法:
- 跟随系统(默认):填
system,前台通过prefers-color-scheme自动适配操作系统的亮暗设置,适用于大多数没有专门暗色开关、只跟随系统的主题。 跟随主题的亮暗切换 class:如果主题是通过给
<body>或<html>添加/移除某个 class 来切换亮暗(例如点击主题自带的“月亮”按钮),请按“一行一个”填写:dark:dark-mode light:light-mode
即 dark: 后面写暗色模式对应的 class 名,light: 后面写亮色模式对应的 class 名。插件前端会监听 body/html 的 class 变化,实时切换卡片配色,无需刷新页面。
另外如果只填写一行,如:
dark:dark则主题默认为亮色,当且仅当检测到body或者html的classname出现dark的时候才会切换暗色
注:当主题使用data-theme="light"形式而非className控制亮暗主题时,直接填system即可,插件会自动适配
本文章采用 CC BY-NC-SA 4.0 协议授权,转载请注明来源。
文章名称:Paid - Typecho 文章付费与订阅插件
文章链接:https://blog.lhl.one/artical/1309.html