Freemarker css 不适用于从后端呈现的 html

Question

我有一个 springboot 应用程序，它有一个可以加载 freemarker 模板的端点 (abc.ftlh)。看起来像这样

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
    <style type="text/css">
        .topRight {
            position:absolute;
            top:0;
            right:0;
        }
        .data-body {
            font-family: 'Roboto', sans-serif;
            background-color: #f7f7f7
        }
        .option, .span {
            font-size: 14px;
        }
        .p {
            font-weight: 300;
            font-size: 16px;
            color: #333333;
            line-height: 1.22;
        }
        .h1, .h2 {
            font-weight:normal;
            font-size: 18px
        }
        .h3 {
            color: #9b9b9b;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.22;
        }
    </style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
    
</div>

<div>
    ${databody}
</div>
</body>
</html>

正在从后端设置变量数据体。它的内容类似于

<h1>Something</h1>

<h2>foo bar</h2>

css 应用于模板中存在的元素，例如 data-body 和 topRight 被应用。但是 css 不适用于从后端呈现的元素。例如<h1>、<h2>不适用。

我怎样才能让它工作。

Answer 1

这仅仅是因为在您的 css 中您有 .h1 而不是 h1，等等。.h2 选择器匹配 <... class="h1">，而不是 <h1>本身。

此外，在 CSS 问题中，是否由 FreeMarker 生成的内容无关紧要，因为浏览器无法区分。

Answer 2

.h1 表示您想要 select 所有 class="h1" 个元素。


     .h1, .h2 {
            font-weight:normal;
            font-size: 18px
        }
        .h3 {
            color: #9b9b9b;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.22;
        }

您可以 select 直接 <h1> 并通过 h1{...}

应用 css

如果将这些 css 文件放在 resouce/static 文件夹下，并在 HTML 标题中引用，会更容易。

Answer 3

这里有几个问题。
css 和 html 标签的命名应该没有前面的点。例如 .h1 应该是 h1

这里最重要的是告诉freemarker不要不转义这个值。默认情况下启用自动转义。

如果要打印的字符串值故意包含标记，则必须像 ${value?no_esc} 一样防止自动转义。

所以这里的解${databody}应该是${databody?no_esc}

这里有更多关于这个话题的信息https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping

Freemarker css 不适用于从后端呈现的 html

Freemarker css not working for html rendered from backend

html

css

freemarker

spring-boot