Spring Boot Thymeleaf：如何包含html文件

Question

我有Spring Boot Thymeleaf的问题。我想在Thymeleaf的另一个html文件中包含一个简单的html文件。

这是我的main.html文件：在codesnippet的中间你可以看到root-div，这里我想包含dashboard.html文件。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Admin-Area</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/backend/webjars/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/backend/webjars/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 fixed-top mainnav navbar-expand-xl">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="../dashboard/dashboard.html">B2C-Shop</a>
        <button type="button" class="navbar-toggler navbar-toggler-right">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <div th:each="script: ${scripts}">
                    <div th:if="${script.endsWith('dashboard.html')}">
                        <div id="root" th:include="dashboard :: dashboard></div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="/backend/webjars/es5-shim/4.5.9/es5-shim.min.js"></script>
    <script src="/backend/webjars/es6-shim/0.20.2/es6-shim.min.js"></script>
    <script src="/backend/webjars/jquery/3.3.1/jquery.min.js"></script>
    <script src="/backend/webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="/backend/webjars/modernizr/2.8.3/modernizr.min.js"></script>
    <div th:each="script: ${scripts}">
        <div th:if="${script.endsWith('.js')}">
            <script type="text/javascript" th:src="'/backend/js' + ${script}"></script>
        </div>
    </div>
</body>
</html>

这是我想要包含在main.html文件中的dashboard.html文件。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="dashboard">
        <h1>Welcome to B2C-Admin-Area</h1>
    </div>
</html>

这是我的DashboardController.java，我声明了dashboarb / dashboard.html文件返回方法“getTemplate（）”引用资源文件夹中的后端文件夹。

/**
     *
     * Render dash board
     *
     * @param model the attribute model
     * @return the template file name
     */
    @RequestMapping(value = "/backend/dashboard/dashboard.html", method = RequestMethod.GET)
    public String dashboard(final Model model)
    {
        String[] script = {"/dashboard/dashboard.html"};
        model.addAttribute(SCRIPT, script);
        return getTemplate();
    }

/**
     * Gets the template file name.
     *
     * @return the template file name
     */
    protected String getTemplate()
    {
        return "backend";
    }

我的文件夹结构如下所示：

你有任何想法包含这个文件吗？

谢谢。

关注MWC。

Answer 1

首先安排你的html文件，如下面的结构所示：

然后创建用于导入的片段：假设您将下面的代码保存在template / common文件夹中的breadcrumb文件中：

<section class="content-header" th:fragment="breadcrumbfragment">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Next </li>
        <li class="active">Next to Next</li>
    </ol>
</section>

现在导入上面的片段使用以下行：

<section class="content-header" th:replace="common/breadcrumb::breadcrumbfragment"></section>

Spring Boot Thymeleaf：如何包含html文件

问题描述投票：1回答：1

1个回答

最新问题

Spring Boot Thymeleaf：如何包含html文件

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1