Search code examples
htmlthymeleaf

Why does linking libraries from thymyleaf fragments need double linking?


I have a question about linking libraries.

I usually do it this way:

<link href="sidebar/common/style.css" rel="stylesheet">

but now I wanted to start using thymeleaf fragments. Each tutorial I've seen about linking libraries using thymeleaf fragments looks the same. Why people always put "double" linking if it isn't necessery? (my code above works well and i don't need to link this libraries second time using thymeleaf)

For example my code above in every tutorial will look:

<link href="sidebar/common/style.css"
      th:href="@{sidebar/common/style.css}" rel="stylesheet" >

Can anyone explain what is the correct and recommended way to link these libraries? What about javascript and fontawesome linking?

I am sorry for this kind of question but I am just starting with thymeleaf and it gives me no peace. I hope that this will not upset the admin and a good answer will also be useful to others


Solution

  • There is no need to use both of the linking types simultaneously, unless you really need it for example for quick prototyping.

    href="sidebar/common/style.css" is being used only when you open your template directly in the browser. It is a standard HTML tag which will be processed by your browser, while th:href will be ignored.

    Whereas th:href="@{sidebar/common/style.css} will be processed by the template engine and href will be substituted by Thymeleaf.

    Similarly, Thymeleaf will override the content of any HTML tag, then there is a th:text attribute present, for example:

    <p th:text="${variableName}">That text will be overriden by variableName value</p>