MENU

Paid - Typecho 文章付费与订阅插件

• 2026 年 07 月 21 日 • 阅读: 5 • 技术,文档

文章/页面自定义字段

字段说明示例
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_facewechatepay
  • 配置项用英文冒号分隔;值里有冒号时写成 \:,例如 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 冲突时,文章级优先。
  • 值中的 ; { } 会被自动过滤。

.png

1. default

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

.png

字段名(简写)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-shadowrgba(30, 55, 95, 0.12)卡片阴影颜色(透明度由插件控制)
radius--tp-radius18px卡片/按钮/输入框圆角

2. default2

13 个变量,支持亮色 / 暗色双模式。

.png

字段名(简写)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-shadowrgba(0,0,0,.06)卡片阴影颜色
radius--tp-radius0.3125rem通用圆角
chip-hover--tp-chip-hover#f0f0f0选项卡悬停背景
radius-btn--tp-radius-btn100rem按钮圆角(胶囊形)
font--tp-font'Open Sans', Helvetica, 'Microsoft Yahei', sans-serif字体栈

3. default3

13 个变量,支持亮色 / 暗色双模式。

.png

字段名(简写)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-shadowrgba(60,50,40,.045)卡片阴影颜色
radius--tp-radius1.5rem通用圆角
chip-hover--tp-chip-hover#efebe7选项卡悬停背景
radius-sm--tp-radius-sm0.875rem小元素圆角
font--tp-font系统字体栈字体栈

4. default4

14 个变量,支持亮色 / 暗色双模式。

.png

字段名(简写)CSS 变量亮色默认值说明
primary--tp-primary#5a8f7b主色(苔绿)
primary-light--tp-primary-lightrgba(90,143,123,.08)主色极淡背景(悬停底纹)
primary-soft--tp-primary-softrgba(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-shadowrgba(50,40,30,.05)卡片阴影颜色
radius--tp-radius1.25rem通用圆角
radius-sm--tp-radius-sm0.75rem小元素圆角
font--tp-font系统字体栈字体栈

5. default5

变量最多的主题,15 个变量,支持亮色 / 暗色双模式。

.png

字段名(简写)CSS 变量亮色默认值说明
primary--tp-primary#d4836a主色(暖珊瑚)
primary-soft--tp-primary-softrgba(212,131,106,.12)主色柔和背景
primary-glow--tp-primary-glowrgba(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-shadowrgba(60,40,30,.06)卡片阴影颜色
radius--tp-radius1rem通用圆角
radius-lg--tp-radius-lg1.25rem大元素圆角
font--tp-font系统字体栈字体栈
form-width--tp-form-width420px⭐ 表单区域最大宽度

全局设置(插件配置页 → 主题高级设置(全局))

primary:#0b6bcb
radius:12px
shadow:rgba(0,0,0,.08)

文章级设置(自定义字段 paid_theme_options

primary:#e74c3c
radius:8px
--tp-form-width:500px

亮暗色适配

.png

插件设置中的两个字段:

设置项可选值说明
卡片亮暗模式auto(默认)/ dark / lightdark/light 会强制卡片使用对应配色;auto 由下方“亮暗自动适配方式”决定
亮暗自动适配方式system(默认)或多行 dark:xxx / light:xxx仅在 paid_theme_modeauto 时生效

paid_theme_mode_switch 两种写法:

  1. 跟随系统(默认):填 system,前台通过 prefers-color-scheme 自动适配操作系统的亮暗设置,适用于大多数没有专门暗色开关、只跟随系统的主题。
  2. 跟随主题的亮暗切换 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即可,插件会自动适配
返回文章列表 打赏
本页链接的二维码
打赏二维码