CODEWITHSUNDEEP
spring-bootthymeleaf
Progeny
Progeny

Reputation: 692

extending fragments in Thymeleaf

I have the following fragment. I'm trying to extend the base fragment "head" with the open graph tags... but the rendered page contains only tags from fragments/head, with the og ones.

How can I add more tags to a fragment?

<head th:include="fragments/head :: head">
    <!-- You can use Open Graph tags -->
    <meta property="og:url"         th:content="${url}" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="GUApp" />
    <meta property="og:description" th:content="${description}" />
    <!--<meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />-->
</head>

<head th:fragment="head" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
....
</head>

Upvotes: 0

Views: 1559

Answers (1)

varren
varren

Reputation: 14731

The easiest option is to pass additional tags as in Flexible layouts documentation demo.

Thanks to fragment expressions, we can specify parameters for fragments that are not texts, numbers, bean objects… but instead fragments of markup.

This allows us to create our fragments in a way such that they can be enriched with markup coming from the calling templates, resulting in a very flexible template layout mechanism.

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

    <head th:include="header :: head(~{::meta})">
        <!-- You can use Open Graph tags -->
        <meta property="og:url" th:content="${url}"/>
        <meta property="og:type" content="website"/>
        <meta property="og:title" content="GUApp"/>
        <meta property="og:description" th:content="${description}"/>
    </head>

...

header.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

    <head th:fragment="head(meta)">
        <!-- some default styles -->
        <link href="base.css" rel="stylesheet" />

        <!--/* Per-page placeholder for additional meta tags */-->
        <th:block th:replace="${meta}" />
    </head>

...

Result html:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="base.css" rel="stylesheet" />
    <meta property="og:url"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="GUApp"/>
    <meta property="og:description"/>
</head>

...

Upvotes: 1

Related Questions