CODEWITHSUNDEEP
cssgohugo
aks
aks

Reputation: 9491

Hugo Table of Contents have extra dot in front

I am using Hugo static site generator to create a website. I am using this code snippet, as given in docs to create TOC:

<div id="toc" class="well col-md-4 col-sm-6">
    {{ .TableOfContents }}
</div>

This is the generated code:

<div id="toc" class="well col-md-4 col-sm-6">
   <nav id="TableOfContents">
   <ul>
      <li>
         <ul>
            <li><a href="#step-1-install-hugo:c57cc0038c788519b441e0331c8bebc7">Step 1. Install Hugo</a></li>
            <li><a href="#step-2-build-the-docs:c57cc0038c788519b441e0331c8bebc7">Step 2. Build the Docs</a></li>
            <li><a href="#step-3-change-the-docs-site:c57cc0038c788519b441e0331c8bebc7">Step 3. Change the docs site</a></li>
            <li><a href="#step-4-have-fun:c57cc0038c788519b441e0331c8bebc7">Step 4. Have fun</a></li>
         </ul>
      </li>
   </ul>
   </nav>
</div>

Due to this I am getting a extra bullet. can anyone solve this? or can you suggest CSS to remove bullets just from the first ul.

Upvotes: 5

Views: 1036

Answers (2)

Beej
Beej

Reputation: 834

this worked well for my needs

{{ .TableOfContents | replaceRE "<ul>[[:space:]]*<li>[[:space:]]*<ul>" "<ul>" | replaceRE "</ul>[[:space:]]*</li>[[:space:]]*</ul>" "</ul>" |  safeHTML }}

along with this css

nav > ul > li {
  list-style: none;
}

Upvotes: 2

gevorg
gevorg

Reputation: 5055

Use following css:

#toc ul { 
  list-style-type: none; 
}

#toc ul ul { 
  list-style-type: disc; 
}

Upvotes: 3

Related Questions