Thymeleaf中文网

深色模式

为首页添加菜单 ​

既然我们已经掌握了如何创建链接 URL，接下来就给首页添加一个简易菜单，指向网站的其他页面吧：

html
<p>Please select an option</p>
<ol>
  <li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>
  <li><a href="order/list.html" th:href="@{/order/list}">Order List</a></li>
  <li><a href="subscribe.html" th:href="@{/subscribe}">Subscribe to our Newsletter</a></li>
  <li><a href="userprofile.html" th:href="@{/userprofile}">See User Profile</a></li>
</ol>

核心代码解释 ​

  1. 静态 href 与动态 th:href 的配合：

    • 每个 <a> 标签中都保留了静态 href（如 product/list.html），直接打开 HTML 文件时，这些链接仍可点击（符合“自然模板”特性），方便前端原型调试；
    • th:href="@{/product/list}" 是动态 URL 表达式，Thymeleaf 处理后会自动拼接应用上下文路径（如 /gtvg/product/list），覆盖静态 href，适配实际部署环境。

  2. 上下文相对 URL 的优势： 所有 th:href 都使用以 / 开头的上下文相对路径（如 @{/product/list}），而非页面相对路径，确保无论当前页面的路径如何，链接都能正确指向目标页面，避免路径层级错误。

  3. 简洁性与可维护性： 无需手动拼接应用上下文名称（如 gtvg），Thymeleaf 会自动处理，后续若应用上下文名称变更（如从 gtvg 改为 grocery），无需修改模板中的链接，仅需调整部署配置即可。

拓展：动态参数菜单示例 ​

如果菜单链接需要携带动态参数（比如用户 ID），可直接在 URL 表达式中添加参数，Thymeleaf 会自动完成编码：

html
<li>
  <a href="userprofile.html" th:href="@{/userprofile(userId=${session.user.id})}">
    See User Profile
  </a>
</li>

上述代码会生成类似 /gtvg/userprofile?userId=1001 的链接，参数值自动 URL 编码，避免特殊字符导致的链接失效。

总结 ​

  1. 利用 @{...} URL 表达式构建菜单链接，既保留了静态原型的可访问性（静态 href），又实现了动态环境的路径适配（th:href）。
  2. 上下文相对路径（/xxx）是菜单链接的最佳实践，能避免页面层级变化导致的链接错误，提升模板的可维护性。
  3. URL 表达式支持动态参数，可灵活适配需要携带业务参数的菜单场景，且自动处理参数编码，无需手动关注。