1 Fix your Table of Contents / TOC (with .Rmd)

If for your theme the TOC is not working as expected or you simply want back the familiar Knitr-style TOC

  • set toc = false in config.toml
  • remove toc: <boolean> from the yaml header of your post
  • and insert
      toc: TRUE

Mind the tabs!

1.1 Numbering

If you want numbering (in your TOC and for your headings/chapters), add number_sections: true to yaml

      number_sections: true
      toc: TRUE

1.2 Custom TOC & Numbering CSS

If numbering is not pre-defined in your theme, you might need to add a custom.css as a Parameter to config.toml and then do some formatting in CSS:

  • config.toml

      customCSS = ["custom.css"]

Notice that your custom.css has to be saved to \static\css\

  • Now add the following definitions to your custom.css

    /* Numbering suffix in TOC */
        content: ". "
    /* Numbering suffix in Body/Content */
        content: ". "

I’m not sure whether the CSS-selectors are the same for all templates but you can figure them out easily by running some Page Inspector/Web Development Tools in your browser (just right-click an object and search for a similar function). You can even do this from RStudio’s preview pane btw!

(Preview of what a page inspector function in your Browser could look like and how to ID the selectors)

(Preview of what a page inspector function in your Browser could look like and how to ID the selectors)

1.3 TOC-Heading (i.e. “Outline”)

And last but not least, your TOC currently has no Heading/Title, so if you want one include this in your

  • custom.css:

    /* Add some Heading / Title before the TOC */
        content: "Outline";
        font-family: 'Lato', sans-serif!important;
        font-size: 26px;

1.4 TOC & Summary

If you’re using a theme which displays a summary on your site’s index.html, you’ll notice that the contents of TOC will now be included in your summary. See here how to fix your theme’s summary:

2 Summary / {{ .Summary}}

By default, Hugo

  • a.) simply parses the first 70 characters of a post (stripped of any html). Or
  • b.) looks for a <!--more--> line in your post’s content. Hugo then simply parses all the content until it reaches<!--more-->.

In order to fix this / automate your own summary, IMHO the easiest workaround seems to be to change the variable .Summary to .Description in your theme’s summary.html template (you’ll find it here: <PageSource>\themes\<your-theme>\layouts\post\summary.html) and use description = 'text' in your post’s YAML header instead.

  • edit summary.html and find the following passage:

    <!-- Content -->
    <div class="post-content">
      <div class="post-summary">
        {{ .Summary }}
      <div class="read-more">
        <a href="{{ .URL }}" class="read-more-link">{{ T "readMore" }}</a>
  • replace {{ .Summary }} with {{ .Description }}

Now in your post’s

  • yaml-header write insert your own “summary” with the description: '' parameter:

    description: "This post is about something something."

3 Shortcuts / Shortcodes

3.1 Images / img

![(*Text, italic in ()*)](/img/hugo_pool/page_inspector.jpg){width=100%}

3.3 Blockquote

This is some blockquoted text. You can use it for citing or for highlighting paragraphs (such as an abstract)

previos line.\
for empty newlines

you can even blockquote CODE by prefixing `` with >


  • Add Logo

5 Done

  • change Fonts and Formatting for H1-H6 (post: tba)
  • enable Thumbnail for post summaries (post: tba)
  • exclude h4+ from TOC (post: tba)
  • add “.” :after TOC-numbering for H1,H2 in custom.css
  • add “Outline” :before TOC