xxhk.org

学习骇客

标签字段的显示与样式

2025 / 6 / 6

在以下两处(正面内容模板和背面内容模板)添加如下代码:

{{#Tags}} <div class="mytag">{{Tags}}</div> {{/Tags}}<br>

有时候不需要在“背面内容模板”也添加一遍,像问答模板的背面通常是包含了正面,具体以显示效果为准。

再在以下位置(样式)添加如下代码(注意不要放到开头,最好放到 .card 以后):

/ 自定义标签字段的样式 / .mytag { font-weight: bolder; / 加粗字体 / display: block; / 块级元素 / line-height: 125%; / 行高为 125% / margin: 15px 0; / 上下外边距 15px / white-space: nowrap; / 禁止换行 / overflow: hidden; / 超出隐藏 / text-overflow: ellipsis; / 超出显示省略号 / width: 95%; / 宽度为 95% / border: 0px solid #ccc; / 无边框 / background: linear-gradient(to right, slategrey 0%, gray 50%, transparent 95%); / 渐变背景 / -webkit-background-clip: text; / 背景裁剪为文字 / background-clip: text; / 背景裁剪为文字 / -webkit-text-fill-color: transparent; / 填充颜色透明 / color: transparent; / 文字颜色透明 / } / 夜间模式下的自定义标签样式 / .nightMode .mytag { font-weight: bolder; / 加粗字体 / display: block; / 块级元素 / line-height: 125%; / 行高为 125% / margin: 15px 0; / 上下外边距 15px / white-space: nowrap; / 禁止换行 / overflow: hidden; / 超出隐藏 / text-overflow: ellipsis; / 超出显示省略号 / width: 95%; / 宽度为 95% / border: 0px solid #333; / 无边框 / background: linear-gradient(to right, #e0e0e0 0%, #a0a0a0 50%, transparent 95%); / 渐变背景 / -webkit-background-clip: text; / 背景裁剪为文字 / background-clip: text; / 背景裁剪为文字 / -webkit-text-fill-color: transparent; / 填充颜色透明 / color: transparent; / 文字颜色透明 / }

参考样例:https://pan.baidu.com/s/17gLXtElz3xx7qtMdwJ2SGw?pwd=xxhk