Three Questions About the TOC

[hao-lee]

Hello, I have three questions about the Table of Contents.

1. The TOC doesn't include level 1 headings, so I have to start from level 2. [hugo supports config this]

2. The H3 and H4 headings look very similar and might be hard for readers to distinguish.

   

3. Perhaps we can move the TOC from the top to the right side of the page. I've written some code in layouts/_default/single.html to do this, but I'm not very familiar with frontend development, so the code might not be very clean.

{{ define "main" }}
<article class="post">
  <div class="post-header">
    <h1 class="post-title">
      <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
    </h1>
    <div class="post-meta">
      {{- with .Params.Author -}}
        <span class="post-author">{{ . }}</span>
      {{- end -}}
      {{- if and (.Param "readingTime") (eq (.Param "readingTime") true) -}}
        <span class="post-reading-time">{{ .ReadingTime }} {{ $.Site.Params.minuteReadingTime | default "min read" }} ({{ .WordCount }} {{ $.Site.Params.words | default "words" }})</span>
      {{- end -}}
    </div>
    {{ if .Params.tags }}
      <span class="post-tags">
        {{ range .Params.tags }}
        #<a href="{{ (urlize (printf "tags/%s/" .)) | absLangURL }}">{{ . }}</a>&nbsp;
        {{ end }}
      </span>
    {{ end }}
  </div>

  {{ partial "cover.html" . }}

  <div class="post-container">
    <div class="post-content">
      {{- with .Content -}}
        <div>
          {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor">&#8983;</a> ${3}` | safeHTML }}
        </div>
      {{- end -}}
    </div>

    {{ if (.Params.Toc | default .Site.Params.Toc) }}
      <aside class="table-of-contents">
        <h2>
          {{ (.Params.TocTitle | default .Site.Params.TocTitle) | default "Table of Contents" }}
        </h2>
        {{ .TableOfContents }}
      </aside>
    {{ end }}
  </div>

  {{ if eq .Type $.Site.Params.contentTypeName }}
    {{ partial "posts_pagination.html" . }}
  {{ end }}

  {{ if not (.Params.hideComments | default false) }}
    {{ partial "comments.html" . }}
  {{ end }}
</article>

<style>
  .post-container {
    display: flex;
    justify-content: space-between;
  }
  .post-content {
    flex: 1 1 auto;
    padding-right: 20px;
  }
  .table-of-contents {
    position: fixed;
    top: 20px; /* Adjust the top position as needed */
    right: 0; /* Keep it at the right edge */
    width: 250px; /* Adjust the width as needed */
    margin-right: 50px; /* Adjust the right margin to create space from the page right edge */
    box-sizing: border-box; /* Ensure padding and margin are included in the width calculation */
    padding: 10px; /* Optional: Add padding inside the ToC */
  }
</style>
{{ end }}

[KatieTheDev]

The H3 and H4 headings look very similar and might be hard for readers to distinguish.

This can be configured by users by simply creating a new CSS file in assets/css.

[hao-lee]

@KatieTheDev Thanks. I have done this.