Hugo - Content - Raw HTML

   
   
 hugo  bootstrap  sass  
 ssg  frontend  
Article Series

This article series contain few sections.

Supplementary Article for Windows User.

Clone Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Inserting Raw HTML before content.

Sometimes we need to add raw HTML content. We can do it before or after, the content. And in the middle of content using shortcodes.

1: Before Content: Table of Content

We are going to insert TOC, before the content.

Preview

This is what we want to achieve.

Hugo Content: Table of Content: Card

Raw HTML

I’m using bootstrap card. This below is our raw HTML.

<div class="card">
  <div class="card-header bg-dark text-light">
    <p class="card-title float-left">Table of Content</p>
    <div class="clearfix"></div>
  </div>
  <div class="card-body">

  <p>Springsteen Related Articles.</p>
  <ul>
    <li><a href="{{ "/quotes/2014/03/25/bruce-springsteen-one-step-up/" | relURL }}"
          >Bruce Springsteen - One Step Up</a></li>

    <li><a href="{{ "/quotes/2014/03/15/bruce-springsteen-the-river/" | relURL }}"
          >Bruce Springsteen - The River</a></li>
  </ul>
  </div>
</div>

You can use any custom design that you like, instead of that bootstrap card above.

Notice the filename toc-2014-03-springsteen. We are going to use that later.

Layouts: Single

Edit our previous single.html.

Add code below, right before the content.

          {{- with .Page.Params.toc -}}
          {{ partial (print . ".html") . }}
          <br/>
          {{- end -}}

This is the complete artefact.

{{ define "main" }}
  <main role="main" class="col-md-8">
    <div class="blog-main p-3 mb-3
                bg-light rounded border border-dark shadow-hover">
      <div class="blog-post" 
           itemscope itemtype="http://schema.org/BlogPosting">
        {{ partial "post-header.html" . }}

        <article class="main-content" itemprop="articleBody">
          {{- with .Page.Params.toc -}}
          {{ partial (print . ".html") . }}
          <br/>
          {{- end -}}

          {{ .Content }}
        </article>

        {{ partial "post-navigation.html" . }}
        {{ partial "post-footer.html" . }}
      </div><!-- /.blog-post -->
    </div><!-- /.blog-main -->
  </main>
{{ end }}

{{ define "aside" }}
  <aside class="col-md-4">   
    {{ partial "card-related-posts.html" . }}
  </aside>
{{ end }}

Content

There are two content affected

  • The River

  • One Step Up

For each frontmatter, add this line.

toc        = "toc-2014-03-springsteen"

That line refer to html filename in partials directory.

Result

Hugo Content: Table of Content: Page

2: Inside Content: Advertisement

Still in content context, we are going to produce, raw HTML using shortcodes.

Reading

Shortcode: Advert

No. I won’t use adense here. But I use my own real business cardname instead.

<div class="card card-primary">
  <div class="card-body">
    <img alt="advertisement" 
         src="{{- .Page.Site.BaseURL -}}assets/site/images/adverts/{{.Get "src" }}">
  </div>
</div>

You can use later on your document as:

{{ < advert src="oto-spies-01.png" > }}

Content: Using The Advert Shortcode

Conisder make this one as an example/.

+++
type       = "post"
title      = "Bruce Springsteen - One Step Up"
date       = 2014-03-25T07:35:05+07:00
categories = ["lyric"]
tags       = ["springsteen", "80s"]
slug       = "bruce-springsteen-one-step-up"
author     = "epsi"

toc        = "toc-2014-03-springsteen"

related_link_ids = [
  "14031535"  # The River
]

+++

When I look at myself I don't see.
The man I wanted to be.
Somewhere along the line I slipped off track.
I'm caught movin' one step up and two steps back.

{{ < advert src="oto-spies-01.png" > }}

There's a girl across the bar.
I get the message she's sendin'.
Mmm she ain't lookin' too married.
And me well honey I'm pretending.

{{ < advert src="oto-spies-02.png" > }}

Last night I dreamed I held you in my arms.
The music was never-ending.
We danced as the evening sky faded to black.
One step up and two steps back.

Result

Hugo Content: Advertisement: Oto Spies

What is Next ?

There are, some interesting topic about Syntax Highlighting in Hugo Content Consider continue reading [ Hugo - Syntax Highlighting ].

Thank you for reading.