dist/index.html

<html>
  <head>
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/js/bootstrap.bundle.min.js"></script>
    <style>
      a {
        color: inherit;
      }
      #TableOfContents a.active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div
          class="col-8"
          data-bs-spy="scroll"
          data-bs-target="#TableOfContents"
          tabindex="0"
          style="height: 100vh; overflow: auto;"
        >
          <h1 id="favicons">Favicons</h1>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <h1 id="背景图片">背景图片</h1>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <h1 id="图标 Icons">图标 Icons</h1>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <h1 id="菜单 Menus">菜单 Menus</h1>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
        </div>
        <div class="col-4">
          <nav id="TableOfContents" class="position-sticky top-0">
            <ul>
              <li><a href="#favicons">Favicons</a></li>
              <li><a href="#背景图片">背景图片</a></li>
              <li><a href="#图标 Icons">图标 Icons</a></li>
              <li><a href="#菜单 Menus">菜单 Menus</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </body>
</html>