RDFA Markdown in Frontmatter possible?

[Suresh_Kumar_Gondi]

Hey Folks,

How can I add the RDFA markup to the HTML tags if the content comes from markdown using Gohugo?

Before :

 # Hello world - This is Heading 1

After with Rdfa Tag :

<h1 property="name">Hello world - This is heading 1 </h1>

Render hooks helps here?

Thanks in advance.
Suresh

[davidsneighbour]

Come on. The docs are very clear on that.

Markdown render hooks

Yes. Render hooks help. Check for the attributes variable. The format is explained in this post.

Pass heading classes via Goldmark to render-heading hook

The OP refers to this Goldmark feature: Attributes The parser.WithAttribute option allows you to define attributes on some elements. Currently only headings support attributes. Attributes are being discussed in the CommonMark forum. This syntax may possibly change in the future. Headings ## heading ## {#id .className attrName=attrValue class="class1 class2"} ## heading {#id .className attrName=attrValue class="class1 class2"} heading {#id .className attrName=attrValue} ============ Cur…

It took me 1 minute to type your question into Google, but I charge by the hour

[techmagus]

Goldmark method for Headers/Headings

Configure Markup: Goldmark

Sample 1:

## Test {property="name"}

Produces:

<h2 property="name" id="test">Test</h2>

Hugo-only feature

In Hugo 0.81.0 we added support for adding attributes (e.g. CSS classes) to Markdown blocks, e.g. tables, lists, paragraphs etc.

Sample 2:

Lorem ipsum …
{class="lorem"}

Produces:

<p class="lorem">Lorem ipsum …</p>

Sample 3:

* List 1
* List 2
  - List 3
    * List 4
{id="id"}

Produces:

<ul id="id">
  <li>List 1</li>
  <li>List 2
    <ul>
      <li>List 3
        <ul>
          <li>List 4</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

However …

The Hugo-only feature seems to be available only for few set of attributes – I only tested this for this post. So the following doesn’t work:

Sample 4:

Some paragraph. The quick brown fox jumps over the lazy dog.
{property="name"}

Sample 5:

* List 1
* List 2
  - List 3
    * List 4
{property="name"}

Edit files in the /layouts/ directory

Another way is, assuming you want the RDFA applied to all content (not just for a particular post) is by editing the layout files in your /layouts/ directory.

Notes

If you use the built-in Goldmark feature and the Hugo-only feature, you can only add to HTML elements that is produced by Markdown, which are the content files.

If you want to add RDFA attributes to elements not part of content but is generated from frontmatter, you need to edit the files in the /layouts/ directory. For example, the title of the content is always part of /layouts/_default/single.html file (or another file depending on how the theme developer split it up), usually something like <h1>{{ .Title }}</h1> so you’ll need to edit this file and make it <h1 property="name">{{ .Title }}</h1>

Extra: Semantic Web for Hugo

If you are adding RDFA for semantic web purposes, there is also Semantic Web for Hugo, however, it uses JSON-LD instead of RDFA. Personally, it’s easier to use JSON-LD than RDFA because we don’t have to edit theme files.

Hope it helps. Shalom!

[Suresh_Kumar_Gondi]

@techmagus

If you want to add RDFA attributes to elements not part of content but is generated from frontmatter, you need to edit the files in the /layouts/ directory. For example, the title of the content is always part of /layouts/_default/single.html file (or another file depending on how the theme developer split it up), usually something like <h1>{{ .Title }}</h1> so you’ll need to edit this file and make it <h1 property="name">{{ .Title }}</h1>

Thanks for the detailed reply! Appreciate it mate.

Yes! I can make it work with the JSON-LD using the type params with the templates… Pulling data from front matter.

Thought of using the RDF implemented too.

With the help of @davidsneighbour I’m able to setup the property value to the headers. Thanks @davidsneighbour for it. But but… can’t able to make it work for the paragraph and lists… Like you mentioned.

I did worked at the layout level too and added the breadcrumbs using RDFA.

Here is the code for the same.

<body vocab="https://schema.org/" typeof="WebPage">
...
<div property="breadcrumb">
  <a href="category/books.html">Books</a> >
  <a href="category/books-literature.html">Literature &amp; Fiction</a> >
  <a href="category/books-classics">Classics</a>
</div>

Thanks for the git repo, I will be happy to contribute it

[jmooring]

@techmagus

The Hugo-only feature seems to be available only for few set of attributes

You are correct.

With this configuration…

[markup.goldmark.parser.attribute]
block = true  # default false
title = true  # default true

…you may apply attributes in markdown to:

1. Headings
2. Blocks (blockquotes, definition lists, horizontal rules, lists, paragraphs, and tables)
3. Code blocks

With #1 and #3 we exclude event attributes (e.g., onclick).
With #3 we also exclude attributes that collide with these highlight options.

With #2, the markdown renderer (yuin/goldmark) filters the attributes based on two “allow” lists:

• Attributes that are allowed on every element (e.g., id, class, title, style, etc.)
• Attributes that are allowed on a specific element (e.g., type is allowed on a list, but not on a paragraph)

Neither of the yuin/goldmark “allow” lists includes event attributes.

[jmooring]

@techmagus

Follow-up to my last post…

In relation to #2, another attribute that is allowed on every element is the data-xxx attribute. So in markdown you could:

paragraph
{data-property="foo"}

which renders to:

<p data-property="foo">paragraph</p>

And then in your template, instead of rendering .Content, do something like:

{{ .Content | replaceRE `\s+data-property=` " property=" | safeHTML }}

which produces:

<p property="foo">paragraph</p>

[jmooring]

Related… https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata

Unfortunately, yuin/goldmark filters out 4 of the 5 global microdata attributes. Currently only itemprop is in the “allow” list.

I submitted a PR this morning to update the global attribute list:
https://github.com/yuin/goldmark/pull/292