如何在Twig与Craft CMS中提取文本字段单个单词并添加下划线？

实现思路 #

先在Craft后台的文本字段里给需要下划线的单词做自定义标记，再用Twig的字符串替换功能把标记转换成带样式的HTML标签。

步骤1：后台标记目标单词 #

在输入标题时，用自定义标记包裹需要下划线的单词，比如用{{ }}：

Lorem Ipsum is simply dummy text of the {{printing}} and {{typesetting}} industry.

步骤2：修改Twig代码替换标记 #

把原Twig代码中的text.title替换成带replace和raw过滤器的版本，让标记转换成<span>标签：

{% for text in texts %}
    <div class="col-12 col-md-8">
        <h1>{{ text.title|replace({'{{': '<span>', '}}': '</span>'})|raw }}</h1>
    </div>
{% endfor %}

• replace过滤器：将自定义标记替换成<span>和</span>标签
• raw过滤器：告诉Twig不要转义HTML标签，确保<span>能正常渲染为页面元素

步骤3：添加CSS样式 #

用你提供的CSS给<span>添加下划线：

span {
    text-decoration: underline;
}

如果不想影响页面其他<span>，可以给标签加专属类名，比如把替换规则改成{'{{': '<span class="underline">', '}}': '</span>'}，然后CSS调整为：

.underline {
    text-decoration: underline;
}

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