hugo toc

content.html

<section class="article-content">
    {{ partial "article/components/toc-inline" . }}  <!--我放在這裡-->
    {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}

<!--以下省略-->

toc-custom.scss

//在小螢幕上顯示內文toc
@media (max-width: 1024px) {
  .toc--inline {
      display: block;
  }
}
//在大螢幕上隱藏內文toc
@media (min-width: 1024px) {
  .toc--inline {
      display: none;
  }
}
//內文toc樣式
.toc--inline {
    background-color: var(--card-background); 
    margin-left: calc((var(--card-padding)) * -1); 
    margin-right: calc((var(--card-padding)) * -1); 
    padding-left: var(--card-padding);
    padding-right: var(--card-padding);
    padding-top: var(--card-padding);
    padding-bottom: var(--card-padding);
    ol {
      list-style-type: none;
      counter-reset: item;
      li a:first-of-type::before {
          counter-increment: item;
          content: counters(item, ".") ". ";
          font-weight: bold;
          margin-right: 5px;
      }
  }
}
.toc--title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0;
}
.toc--desc {
  text-align: center;
  margin-top: 0;
  color: rgba(185, 183, 183, 0.5)
}

toc-inline.html

<!--內文toc-->
{{ if (.Scratch.Get "TOCEnabled") }}
<section class="toc toc--inline">
    <p class="toc--title">{{ T "article.tableOfContents" }}</p>
    <p class="toc--desc"> inline table of content only on mobile</p>
    <div class="">
        {{ .TableOfContents }}
    </div>
</section>
{{ end }}