如何在asciidoctor-pdf中创建多色圆角背景的徽章式文本?
解决Asciidoctor-PDF中多色状态徽章的问题
方法1:给按钮宏绑定角色(推荐)
这是最贴近你现有尝试的方案,通过在主题中定义不同角色的按钮样式,就能在adoc文档中调用不同颜色的按钮:
- 修改你的主题配置文件(比如
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
- 在adoc文档中,通过
role参数调用对应样式的按钮:
btn:[Closed, role=closed] btn:[In Progress, role=in-progress] btn:[Open, role=open]
方法2:自定义内联角色实现徽章
如果不想依赖按钮宏,也可以直接用内联角色配合主题配置实现徽章效果:
- 在主题文件中添加内联角色的样式:
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
- 在adoc文档中使用带角色的内联文本:
[.status-badge.closed]#Closed# [.status-badge.in-progress]#In Progress#
关于在adoc中覆盖主题值
你可以通过文档属性全局覆盖主题中的按钮参数,但这种方式是全局生效的,无法实现单个按钮的样式差异化:
:button-background-color: #FF8888 :button-border-color: #FF3333
如果需要针对单个元素修改样式,还是推荐上面的角色绑定方案。
内容的提问来源于stack exchange,提问作者aZr4el
相关产品推荐
相关产品推荐

