首页用thymeleaf写一个个人博客首页

用thymeleaf写一个个人博客首页

时间: 2024-01-03 07:04:55 浏览: 77

好的，以下是一个简单的个人博客首页的Thymeleaf模板示例： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>个人博客</title> </head> <body> <div th:replace="fragments/header :: header"></div> <div th:replace="fragments/navbar :: navbar"></div> <div class="container"> <div class="row"> <div class="col-md-8"> <h2>最新文章</h2> <hr/> <div th:each="article : ${articles}"> <h3 th:text="${article.title}"></h3> <p th:text="${article.summary}"></p> <a th:href="@{/article/{id}(id=${article.id})}">阅读更多</a> <hr/> </div> </div> <div class="col-md-4"> <h2>标签云</h2> <hr/> <div th:each="tag : ${tags}"> <a th:href="@{/tag/{name}(name=${tag.name})}" th:text="${tag.name}"></a> </div> </div> </div> </div> <div th:replace="fragments/footer :: footer"></div> </body> </html> ``` 在这个模板中，我们使用了Thymeleaf的一些基本特性，如迭代器、变量替换、URL构建等。其中，我们通过 `th:replace` 属性引入了三个片段模板，分别是 `header`、`navbar` 和 `footer`。这些片段模板可以在其它页面中重用，提高了代码的复用性。在 `container` 容器中，我们展示了最新的文章列表和标签云。通过 `th:each` 迭代器，我们可以遍历文章和标签列表，将数据动态地渲染到页面中。通过 `@{/article/{id}(id=${article.id})}` 和 `@{/tag/{name}(name=${tag.name})}` 这样的URL构建方式，我们可以方便地构建动态URL，实现路由跳转。希望这个示例能对你有所帮助！

阅读全文