问题：

百里叶导航栏

夹谷辰沛

2023-03-14

我使用Spring Boot和Thymeleaf作为简单的前端。我在前端非常低，我只知道关于thymleaf和html/css的基本知识。我建立了一个简单的论坛，在那里登录后，用户得到了几个页面，如，添加主题，查找主题，主题列表，添加题词，编辑题词等。我希望每个页面都有这个相同的导航栏。在这一刻，我只是复制相同的html代码并粘贴到每个文件中，但如果我想更改一个选项呢？是的，我知道，我必须更改每个文件。登录后，我如何修复它并在每个页面上放置一个带有此选项的导航栏？例如，我添加了索引。

<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
        <meta charset="UTF-8">
        <title>Home Page</title>
        <link rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
              crossorigin="anonymous">
    <link th:href="@{/main.css}" rel="stylesheet" />
</head>
<body>

<nav class="navbar navbar-light" style="background-color: #969bd9;">
    <span class="navbar-brand">Home Page</span>

    <div id="navbar" class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-right">
            <li sec:authorize="isAuthenticated()"><a th:href="@{/logout}">Logout</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li sec:authorize="isAuthenticated()"><a th:href="@{/topic/all}"><n1>Topics</n1></a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <h1>Welcome <span sec:authentication="principal.username"> </span></h1>
</div>

<div class="container my-2">
    <a th:href="@{/newTopic}" class="btn btn-success">Create new topic</a>
</div>

<div class="container my-3">
    <a th:href="@{/topic/search}" class="btn btn-success">Find topic</a>
</div>

<div align="center" class="container my-2">
    <h3>Last activity</h3>
    <table border="1" style="width:800px" class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>Topic name</th>
            <th>Date activity</th>
            <th>Login</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="inscription : ${newInscriptionList}">
            <td>
            <a th:href="@{/topic/{id}(id = ${inscription.topic.id})}" th:text="${inscription.topic.title}"></a>
            </td>
            <td th:width="200" th:text="${#dates.format(inscription.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
            <td th:width="200" th:text="${inscription.user.login}"></td>
        </tr>
        </tbody>
    </table>

</div>

<div align="center" class="container my-2">
    <h3>New Topics</h3>
    <table border="1" style="width:800px" class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>Topic name</th>
            <th>Created</th>
            <th>Login</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="topic : ${newTopicList}">
            <td>
                <a th:href="@{/topic/{id}(id = ${topic.id})}" th:text="${topic.title}"></a>
            </td>
            <td th:width="200" th:text="${#dates.format(topic.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
            <td th:width="200" th:text="${topic.user.login}"></td>
        </tr>
        </tbody>
    </table>

</div>

</body>
</html>

例如，我想让这个导航栏到达每一页。

<nav class="navbar navbar-light" style="background-color: #969bd9;">
    <span class="navbar-brand">Home Page</span>

    <div id="navbar" class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-right">
            <li sec:authorize="isAuthenticated()"><a th:href="@{/logout}">Logout</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li sec:authorize="isAuthenticated()"><a th:href="@{/topic/all}"><n1>Topics</n1></a></li>
        </ul>
    </div>
</nav>

共有1个答案

屠和洽

2023-03-14

答案是肯定的。你可以简单地用百里香叶做到这一点。

首先，创建一个名为navbar的文件。html

然后像这样插入导航条形码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>NavigationBar</title>

</head>
<body>

<nav th:fragment="navbar" class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" th:href="@{/}">Student Management System</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a class="nav-link" th:href="@{/student}">Student List</a></li>

            <li><a class="nav-link" th:href="@{/subjects}">Subjects</a></li>

            <li><a class="nav-link" th:href="@{/teachers}">Teachers</a></li>    
        </ul>
    </div>    
</nav>

</body>
</html>

然后无论何时，您都可以简单地按如下方式使用它。在div元素中使用以下格式。

th:insert=“文件名：：片段名”

您可以从以下示例中获得更好的理解。

<!DOCTYPE html>    
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Create New Student</title>

    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
</head>
<body>

<div th:insert="navbar :: navbar">  </div>

<div>
      <h1> Student Form </h1>
</div>
</body>
</html>

类似资料：

百里香叶Spring支架

我不明白，如果html模板与我在ModelAndView中获得的属性链接，如何将RESTFull服务的@Controller更改为@RestController 在胸腺叶模板中但我想进入索引页面，在后台获取用户名我可以使用ajax来更新标记“p”，但这样使用thymeleaf并没有什么好处，我可以使用jsp。那么，在Rest时使用thymeleaf的最佳方式是什么？它是否合理？
百里香叶空值检查

我用百里香模板发送电子邮件。我有一个模板，比如: 如果为空或，我不想发送电子邮件。我可以设置任何Thymeleaf属性来生成错误并且不会发送邮件吗？因为在没有值的电子邮件中发送“My name is”没有任何意义。我从Thymeleaf上下文中获取所有值，变量可能是不同类型的，例如、等。我也尝试了以下方法，但它并没有解决我的问题，因为对象总是可用的：
春靴/百里香叶例外

我是Springboot的初学者，所以决定在购物车上工作。似乎找不到org.springframework.expression.spel.SpelEvalue ationException： EL1007E的根：在null上找不到属性或字段'name'。嵌套异常是org.thymeleaf.exceptions.TemplateProcessingException： Exception评估Sp
使用百里香叶和Spring引导更新操作

我正在尝试在我的应用程序中开发一个新的密码功能。当用户打开设置新密码页面时，它有3个输入字段：新密码，再次输入新密码，以及一个隐藏字段uuId。有了这个uuid可以帮助我正确更新数据库记录。我已经使用了双控制器方法，但有些地方出了问题，因为uuid字段没有填充。
在百里叶中格式化日期

我刚Java /Spring/Thymeleaf，所以请接受我目前的理解水平。我确实复习了这个类似的问题，但没能解决我的问题。我试图得到一个简化的日期，而不是长日期格式。 html格式：电流输出
7.3.2 导航之里程计

7.3.2 导航之里程计里程计相关消息是:nav_msgs/Odometry，调用rosmsg info nav_msgs/Odometry 显示消息内容如下: std_msgs/Header header uint32 seq time stamp string frame_id string child_frame_id geometry_msgs/PoseWithCovaria

百里叶导航栏

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档