Thymeleaf技术问题：如何将非片段HTML传入centerColumn自定义片段

我想创建一个基础片段centerColumn，让插入其中的内容保持居中且为特定尺寸。目前已实现的片段代码如下：

<div th:fragment="centerColumn(content)" class="columns is-centered">
    <div class="column is-three-quarters">
        <div th:insert="${content}"></div>
    </div>
</div>

我在index.html中通过以下方式调用，传入Thymeleaf片段：

<div th:insert="fragments :: centerColumn( ~{fragments :: couponList(${coupons})} )"></div>

但这种方式只支持传入Thymeleaf片段，我现在想传入非Thymeleaf片段的HTML（比如下面的表单代码），不知道怎么把表单HTML传入centerColumn的content参数，或者嵌套到对应div中：

<body class="has-navbar-fixed-top">
    <div th:replace="fragments :: navbar(${loggedIn})">Insert Navbar/Menu here</div>
    <div th:replace="fragments :: displayCenter(${displayText})"></div>
    <br>
    <div th:insert="centerColumn(content)">
        <div>form here</div>
    </div>
    <form method="post">
        <input type="text" name="username" placeholder="Username"> 
        <input type="password" name="password" placeholder="Password"> 
        <input type="submit" value="Submit">
    </form>
</body>

附HTML元数据代码：

<!DOCTYPE html>
<html xlmns:th="http://www.thymeleaf.org">

<!-- fragment for the html head tag. Helps with reusability of a css stylesheet provided -->
<head th:fragment="html_head">
    <meta charset="ISO-8859-1">
    <title>[[${pageTitle}]]</title>  
    <!-- USE th:text="${pageTitle}" OR [[${pageTitle}]] -->
    <!-- pageTitle: GO TO Controller and check Model -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <style>
        .equal-height {
           display: flex;
           flex-direction: column;
           height: 100%;
        }
    </style>
</head>

你可以通过内联片段表达式直接将页面中的普通HTML内容传入centerColumn片段，以下是三种实用方式：

方式一：通过元素选择器传入内容 #

给目标HTML元素添加唯一标识（比如id），用~{::#元素id}的形式作为参数传入片段：

<body class="has-navbar-fixed-top">
    <div th:replace="fragments :: navbar(${loggedIn})">Insert Navbar/Menu here</div>
    <div th:replace="fragments :: displayCenter(${displayText})"></div>
    <br>
    <!-- 调用centerColumn，传入页面内的表单 -->
    <div th:insert="fragments :: centerColumn( ~{::#login-form} )"></div>
    
    <!-- 带id标识的目标表单 -->
    <form id="login-form" method="post">
        <input type="text" name="username" placeholder="Username"> 
        <input type="password" name="password" placeholder="Password"> 
        <input type="submit" value="Submit">
    </form>
</body>

方式二：内联嵌套内容到调用标签 #

把要传入的HTML直接放在th:insert所在标签内部，通过~{::content}引用这段嵌套内容：

<body class="has-navbar-fixed-top">
    <div th:replace="fragments :: navbar(${loggedIn})">Insert Navbar/Menu here</div>
    <div th:replace="fragments :: displayCenter(${displayText})"></div>
    <br>
    <!-- 调用centerColumn并嵌套表单内容 -->
    <div th:insert="fragments :: centerColumn( ~{::content} )">
        <div th:fragment="content">
            <form method="post">
                <input type="text" name="username" placeholder="Username"> 
                <input type="password" name="password" placeholder="Password"> 
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>
</body>

方式三：简化片段调用（无需显式传参） #

修改centerColumn片段，让它直接使用调用标签内部的默认内容：

<!-- 修改后的centerColumn片段 -->
<div th:fragment="centerColumn" class="columns is-centered">
    <div class="column is-three-quarters">
        <div th:insert="${#this.content}"></div>
    </div>
</div>

调用时直接嵌套内容即可，无需传参：

<div th:insert="fragments :: centerColumn">
    <form method="post">
        <input type="text" name="username" placeholder="Username"> 
        <input type="password" name="password" placeholder="Password"> 
        <input type="submit" value="Submit">
    </form>
</div>

以上三种方式都能让普通HTML或Thymeleaf片段无缝嵌入到centerColumn中，实现居中且固定宽度的效果。

内容的提问来源于stack exchange，提问作者Tan Yu Hau Sean