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.