You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在asciidoctor-pdf中创建多色圆角背景的徽章式文本?

解决Asciidoctor-PDF中多色状态徽章的问题

方法1:给按钮宏绑定角色(推荐)

这是最贴近你现有尝试的方案,通过在主题中定义不同角色的按钮样式,就能在adoc文档中调用不同颜色的按钮:

  1. 修改你的主题配置文件(比如theme.yml),添加多组按钮角色样式:
button:
  # 默认按钮样式(可选)
  background-color: #88FF88
  border-color: #33FF33
  border-radius: 5
  border-width: 0.5
  border-offset: 3.0

# 自定义不同状态的按钮样式
button.closed:
  background-color: #88FF88
  border-color: #33FF33

button.in-progress:
  background-color: #FFDD88
  border-color: #FFBB33

button.open:
  background-color: #FF8888
  border-color: #FF3333
  1. 在adoc文档中,通过role参数调用对应样式的按钮:
btn:[Closed, role=closed]
btn:[In Progress, role=in-progress]
btn:[Open, role=open]

方法2:自定义内联角色实现徽章

如果不想依赖按钮宏,也可以直接用内联角色配合主题配置实现徽章效果:

  1. 在主题文件中添加内联角色的样式:
role.status-badge:
  padding: 2 4
  border-radius: 5
  border-width: 0.5
  border-offset: 3.0

role.status-badge.closed:
  background-color: #88FF88
  border-color: #33FF33

role.status-badge.in-progress:
  background-color: #FFDD88
  border-color: #FFBB33
  1. 在adoc文档中使用带角色的内联文本:
[.status-badge.closed]#Closed#
[.status-badge.in-progress]#In Progress#

关于在adoc中覆盖主题值

你可以通过文档属性全局覆盖主题中的按钮参数,但这种方式是全局生效的,无法实现单个按钮的样式差异化:

:button-background-color: #FF8888
:button-border-color: #FF3333

如果需要针对单个元素修改样式,还是推荐上面的角色绑定方案。

内容的提问来源于stack exchange,提问作者aZr4el

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.04 23:40:21