Pug模板中在li标签内使用strong标签的技术问题

我来帮你搞定这个Pug模板的小问题～你遇到的情况是因为Pug的插值语法使用方式不对，下面给你两种无需额外p标签或CSS类的解决办法：

方法1：Pug标签嵌套+变量输出（推荐） #

这是最贴合Pug语法风格的写法，直接在li里嵌套strong标签，并用=输出变量：

ul
  li
    strong= exercise.name
  li= exercise.name
  li= `${exercise.reps} reps`
  li= `${exercise.sets} sets`
  li= `${exercise.weight} kg`
  li= `Targeted muscle/area is: ${exercise.muscle}`

这样渲染后，exercise.name的值就会被包裹在<strong>标签里，实现加粗效果，同时其他列表项的渲染不受影响。

方法2：使用未转义插值输出HTML #

如果你更倾向于用字符串拼接的方式，可以用!=（未转义输出）来直接渲染包含HTML标签的字符串：

ul
  li!= `<strong>${exercise.name}</strong>`
  li= exercise.name
  li= `${exercise.reps} reps`
  li= `${exercise.sets} sets`
  li= `${exercise.weight} kg`
  li= `Targeted muscle/area is: ${exercise.muscle}`

⚠️ 注意：这种方法要确保exercise.name的内容是安全的（没有恶意HTML或脚本），因为!=会跳过Pug的HTML转义处理，存在XSS风险。

为什么你的原有写法失效？ #

• #[strong exercise.name]里的exercise.name被当作纯文本字符串处理了，没有被解析为变量，所以只加粗了"exercise.name"这串文字；
• li-是错误的Pug语法，Pug里没有这种写法，因此会抛出"unexpected character '#'"的错误。

内容的提问来源于stack exchange，提问作者fdevinar