feat: post sidebar support table of content

Signed-off-by: Ryan Wang <i@ryanc.cc>
2025-11-29 02:00:10 +08:00 · 2022-10-15 14:02:28 +08:00
parent e41535784d
commit bf574b7aeb
14 changed files with 68 additions and 15 deletions
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
  },
  "dependencies": {
    "@iconify/iconify": "^3.0.0",
-    "alpinejs": "^3.10.3"
+    "alpinejs": "^3.10.3",
+    "tocbot": "^4.18.2"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,7 @@ specifiers:
  prettier: ^2.7.1
  prettier-plugin-tailwindcss: ^0.1.13
  tailwindcss: ^3.1.8
+  tocbot: ^4.18.2
  typescript: ^4.6.4
  vite: ^3.1.4
  vite-plugin-purge-icons: ^0.9.1
@@ -25,6 +26,7 @@ specifiers:
 dependencies:
  '@iconify/iconify': 3.0.0
  alpinejs: 3.10.3
+  tocbot: 4.18.2

 devDependencies:
  '@iconify/json': 2.1.118
@@ -1716,6 +1718,10 @@ packages:
      is-number: 7.0.0
    dev: true

+  /tocbot/4.18.2:
+    resolution: {integrity: sha512-bWUfEYQZ4oFgT+qZYvzlTgbsTmA645ApHbo1iRaOBUeFfy5IpctgAQQjCXbPZy+4RDZ1JJYlIBgoApZMzMaYog==}
+    dev: false
+
  /tr46/0.0.3:
    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
    dev: true
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,8 @@
 import "./styles/tailwind.css";
 import "./styles/main.css";
 import "@purge-icons/generated";
-
 import Alpine from "alpinejs";
+import * as tocbot from "tocbot";

 window.Alpine = Alpine;

@@ -18,3 +18,18 @@ const onScroll = () => {
 };

 window.addEventListener("scroll", onScroll);
+
+export function generateToc() {
+  tocbot.init({
+    tocSelector: ".toc",
+    contentSelector: "#content",
+    headingSelector: "h1, h2, h3, h4",
+    extraListClasses: "space-y-1",
+    extraLinkClasses: 'group flex items-center justify-between rounded py-1 px-1.5 transition-all hover:bg-gray-100 text-sm opacity-80',
+    activeLinkClass: "is-active-link bg-gray-100",
+    collapseDepth: 6,
+    headingsOffset: 100,
+    scrollSmooth: true,
+    scrollSmoothOffset: -100,
+  });
+}
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -38,3 +38,7 @@ body {
 .menu-sticky .menu-dropdown li a {
  @apply text-gray-600 hover:text-blue-600;
 }
+
+.toc-list-item > .toc-list {
+  @apply my-3 ml-3 space-y-1 border-l pl-2;
+}
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./templates/**/*.html"],
+  content: ["./templates/**/*.html","./src/main.ts"],
  theme: {
    extend: {},
    container: {
--- a/templates/assets/dist/main.iife.js
+++ b/templates/assets/dist/main.iife.js
--- a/templates/assets/dist/style.css
+++ b/templates/assets/dist/style.css
--- a/templates/category.html
+++ b/templates/category.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
  xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, contentClass = null)"
+  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)"
 >
  <th:block th:fragment="content">
    <th:block th:replace="modules/category-filter" />
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
  xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, contentClass = null)"
+  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)"
 >
  <th:block th:fragment="content">
    <th:block th:replace="modules/category-filter" />
--- a/templates/modules/layout.html
+++ b/templates/modules/layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" th:fragment="html (header,content,head,footer,contentClass)">
+<html lang="en" th:fragment="html (header,content,head,footer,sidebar,contentClass)">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -24,7 +24,12 @@
      <div class="col-span-4 sm:col-span-3">
        <th:block th:replace="${content}" />
      </div>
-      <th:block th:replace="modules/sidebar" />
+      <th:block th:if="${sidebar != null}">
+        <th:block th:replace="${sidebar}" />
+      </th:block>
+      <th:block th:if="${sidebar == null}">
+        <th:block th:replace="modules/sidebar :: sidebar(prepend = null)" />
+      </th:block>
    </section>
    <th:block th:replace="modules/footer" />
    <th:block th:if="${footer != null}">
--- a/templates/modules/sidebar.html
+++ b/templates/modules/sidebar.html
@@ -1,5 +1,8 @@
-<aside class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
+<aside th:fragment="sidebar (prepend)" class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
  <th:block th:with="widgets = ${#strings.listSplit(theme.config.sidebar.widgets,',')} ">
+    <th:block th:if="${prepend != null}">
+      <th:block th:replace="${prepend}" />
+    </th:block>
    <th:block th:each="widget : ${widgets}">
      <th:block th:replace="'modules/widgets/'+${widget}" />
    </th:block>
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
  xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(singlePage.spec.cover)} ? '!-mt-20' : '')"
+  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, sidebar = null, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(singlePage.spec.cover)} ? '!-mt-20' : '')"
 >
  <th:block th:fragment="header">
    <th:block
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
  xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')"
+  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, sidebar = ~{::sidebar}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')"
 >
  <th:block th:fragment="header">
    <th:block
@@ -18,6 +18,25 @@
      <th:block th:include="modules/libs/lightgallery :: import"></th:block>
      <th:block th:include="modules/libs/lightgallery :: script"></th:block>
    </th:block>
+
+    <script>
+      console.log(main.generateToc());
+      main.generateToc();
+    </script>
+  </th:block>
+  <th:block th:fragment="sidebar_prepend">
+    <div
+      class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+    >
+      <h2 class="inline-flex items-center gap-2 text-base">
+        <span data-icon="tabler:list" class="iconify text-lg"></span>
+        目录
+      </h2>
+      <div class="toc mt-2"></div>
+    </div>
+  </th:block>
+  <th:block th:fragment="sidebar">
+    <th:block th:replace="modules/sidebar :: sidebar(prepend = ~{::sidebar_prepend})"></th:block>
  </th:block>
  <th:block th:fragment="content">
    <div class="rounded-xl bg-white p-4">
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
  xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, contentClass = null)"
+  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)"
 >
  <th:block th:fragment="content">
    <div class="flex text-gray-900">