Thymeleaf:如何使用布局包含特定于页面的 javascript? [英] Thymeleaf: how to include page specific javascript using layouts?

查看：30
本文介绍了Thymeleaf:如何使用布局包含特定于页面的 javascript?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 thymeleaf 有没有办法用我的页面特定的 javascript 和 javascript 包含来装饰我的布局?

<!DOCTYPE html><头><身体><div th:replace="fragments/header::header">

<div class="容器"><div layout:fragment="content">

</html><!--我的页面--><!DOCTYPE html><html layout:decorator="layout"><头><身体><div layout:fragment="content">你好，世界

<script src="pageSpecific1.js"></script><script src="pageSpecific2.js"></script><脚本>警报(你好世界")</html>

解决方案

在您的布局模板中，为脚本放置一个 fragment.

<身体>..<th:block layout:fragment="script"></th:block></html>

然后在您的页面模板中，您可以为该页面添加脚本.

<身体>...<th:block layout:fragment="script"><script th:src="@{/page.js}"></script><脚本>函数 foo() {...}</th:block></html>

不要忘记在页面模板中设置layout:decorator.

Using thymeleaf is there a way to decorate my layout w/ my page specific javascript and javascript includes?

<!--My Layout -->
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div th:replace="fragments/header :: header">

</div>
<div class="container">
    <div layout:fragment="content">

    </div>
</div>
</body>
</html>

<!--My Page -->
<!DOCTYPE html>
<html layout:decorator="layout">
<head>

</head>
<body>

<div layout:fragment="content">
    hello world
</div>

<script src="pageSpecific1.js"></script>
<script src="pageSpecific2.js"></script>
<script>
 alert("hello world")
</script>
</body>
</html>

解决方案

In your layout template, put a fragment for the script.

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <body>
       ..
       <th:block layout:fragment="script"></th:block>
    </body>
</html>

And in your page template, you can then add the script for that page.

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="template.html">
    <body>
       ...
       <th:block layout:fragment="script">
            <script th:src="@{/page.js}"></script>
            <script>
                 function foo() {
                    ...
                 }
            </script>
       </th:block>
    </body>
</html>

Don't forget to set the layout:decorator in your page template.

这篇关于Thymeleaf:如何使用布局包含特定于页面的 javascript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆