发表新帖
发表新帖

Head and Title in Thymeleaf

前端 未结
关注
7 1155
我寻月下人不归
我寻月下人不归 2021-01-31 18:23

I\'m a Thymeleaf beginner. I started with a common layout page:

fragments/layout.html
相关标签:
7条回答
  • 醉酒成梦
    2021-01-31 18:54

    According to the documentation th:include includes the content of a fragment into the including div. So you will get the title of template. You can use an attribute for the page title as follows and set its value in each controller.

    <head th:fragment="headerFragment">
   <title>${pagetitle}</title>
   <!-- metas, link and scripts -->
</head>

    Alternatively you can use layout dialects to achieve the same as described in here. Thymeleaf layout dialect and th:replace in head causes title to be blank

    0 讨论(0)
  • 清歌不尽
    2021-01-31 19:08

    You can even combine them ;) Use the following in the template page.

    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">
    Template title
</title>

    In your case, this would resolve in:

    <title>Template title - Page Title</title>
    0 讨论(0)
  • 迷失自我
    2021-01-31 19:12

    This work for me..

    layout

    <head th:fragment="headerfragment">
    <title th:text="${pageTitle}">Template Title</title>

    page

    <head th:include="layout :: headerfragment">

    on my Controller

    m.addAttribute("pageTitle", "Dashboard Page");
    0 讨论(0)
  • 既然无缘
    2021-01-31 19:13

    I was also having this problem (Thank you nmy for referencing the documentation!) Here is what I noticed and how I solved it in my app:

    Things to note from the documentation:

    1. The differences between th:include and th:replace
    2. Referencing fragments by domselector instead of by th:fragment
    3. Thymeleaf provides a "this" option for finding selectors

    With these 3 things in mind, you can do the following:

    fragments/layout.html:

    <head th:fragment="headerFragment">
    <title th:include=":: #pageTitle">Layout Generic Title< /title>
    <!-- metas, link and scripts -->
</head>

    page.html

    <head th:include="fragments/layout :: headerFragment">
    <title id="pageTitle">Page title</title>
    <!-- other elements you want to reference in your layout -->
</head>

    Hope this helps!

    0 讨论(0)
  • 迷失自我
    2021-01-31 19:18

    This is the best solution i found:

    1. Create a block fragment

    <th:block th:fragment="header">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" charset="UTF-8"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Bootstrap Css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>

    <!-- Fontawesome css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</th:block>

    1. Do this in all the heads for your html pages

    <head>
    <div th:replace="fragments/headerFragment :: header"></div>
    <title>Example</title>
    <script src="customStuff"></script>
</head>

    So in the end you can have one fragment containing all the scripts and css you need in all your pages and just add it to your headers, while still being able to ad some custom css, scripts or what ever

    0 讨论(0)
  • 一生所求
    2021-01-31 19:18 
        <!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
  <head th:fragment="static_resource">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all"
        href="../lib/element-ui/index.css"  />
    <script type="text/javascript" src="../lib/http.js"></script>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript" src="../lib/element-ui/index.js"></script>
  </head>
  <body>
    
  
  </body>
  
</html>

    and include the fragment with block directive,can set title separation

    <head>
<th:block th:include="web/fragments/static_file :: static_resource" />
<title>首页</title>
</head>
    0 讨论(0)
 看不清?
提交回复
热议问题