gpt4 book ai didi

css - Thymeleaf:CSS 文件中的绝对引用

转载 作者:行者123 更新时间:2023-11-28 15:20:21 26 4
gpt4 key购买 nike

我看到过一些建议将绝对路径转换为相对路径的问题,但这对我来说是不可能的,因为我的 HTML 文件存储在不同的目录中,并使用其中一行引用 CSS 的模板.所以 fragments.html 是这样开始的:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:fragment="common_header(title)">
<link rel="stylesheet" th:href="@{/css/style.css}" />
:

实际的 HTML 看起来像

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:replace="fragments :: common_header('List Items')">
<title>Main</title>
</head>
<body>
<script th:src="@{/js/rss/list.js}"></script>
:

现在/css/style.css:

.item-subject::before {
content: url("/images/new.png");
margin-right: 5px;
}

有了上下文路径,很明显这是行不通的。但我能做什么呢?我的意思是 th:href 使 link 指向一个有效的资源,所以现在 CSS 的内容也应该以某种方式被 thymeleafed。

很明显,content 行必须包含魔法,但我如何才能使所有这些都起作用?

最佳答案

can parse css files with thymeleaf ,就像你可以解析 html 文件一样。 Thymeleaf 3 专门有一个 CSS 模式。您必须像设置 html 文件一样设置 Controller ( here is a sample project ),但之后您可以直接在 css 中使用 url 表达式,如下所示:

.item-subject::before {
content: url([[@{/images/new.png}]]);
margin-right: 5px;
}

这应该可以解决您在使用绝对 URL 时遇到的任何问题。

关于css - Thymeleaf:CSS 文件中的绝对引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46283252/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com