能否在类名中间插入Antlers标签?Tailwind+Statamic场景疑问
解决Statamic中Tailwind动态背景图路径问题
当然可以实现,你之前的写法问题出在引号嵌套和格式错误上,正确的写法是直接把Antlers标签放到url()内部,保持Tailwind的语法正确:
<header class="w-full h-full bg-[url('{{ header_image }}')] bg-cover bg-center flex justify-center items-center">...</header>
关键注意点:
- 确保
{{ header_image }}在Statamic中返回的是正确的图片路径:如果是Assets字段,可能需要用{{ header_image:url }}来获取完整的URL(因为默认的Asset字段可能返回的是对象,而非直接路径) - 测试时可以先单独输出
{{ header_image }},确认渲染出来的是类似/img/headers/xxx.png或者完整的http URL,避免路径错误 - 不要在标签外额外嵌套引号,否则会导致浏览器解析时路径包含多余的引号,无法加载图片
举个Assets字段的实际示例(如果你的header_image是Asset类型):
<header class="w-full h-full bg-[url('{{ header_image:url }}')] bg-cover bg-center flex justify-center items-center">...</header>
这样就能实现通过Statamic后台编辑动态更换头部背景图的需求了。
内容的提问来源于stack exchange,提问作者John Dawson
相关产品推荐
相关产品推荐

