feat(toc): add sticky positioning and entry animation for improved UX

env.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="vite/client" />
 import type { Alpine } from "alpinejs";
+import type { TocManager } from "./src/alpine/toc";
 
 export {};
 
 declare global {
   interface Window {
     Alpine: Alpine;
+    tocManager?: TocManager;
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "theme-terminal",
   "private": true,
-  "version": "1.1.8",
+  "version": "1.2.2",
   "description": "A terminal like theme for Halo.",
   "scripts": {
     "dev": "vite build --watch",

src/alpine/header-dividing.ts

@@ -0,0 +1,35 @@
+export const headerDividing = () => ({
+  isSticky: false,
+  $el: null as HTMLElement | null,
+  _observer: null as IntersectionObserver | null,
+
+  init() {
+    const centerEl = this.$el as HTMLElement;
+    if (!centerEl) return;
+
+    const header = centerEl.closest('.header') as HTMLElement;
+
+    if (!header) return;
+
+    // 直接观察 header 元素本身
+    this._observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        this.isSticky = entry.boundingClientRect.top < 0 && !entry.isIntersecting;
+      },
+      {
+        threshold: 0, // 只要有任何部分离开就触发
+        rootMargin: '0px' // 无偏移
+      }
+    );
+
+    this._observer.observe(header);
+  },
+
+  destroy() {
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+  }
+});

src/alpine/header-menu.ts

@@ -3,7 +3,7 @@ interface MenuState {
   handleToggleMenu(): void;
 }
 
-export const menu = (): MenuState => ({
+export const headerMenu = (): MenuState => ({
   isOpen: false,
 
   handleToggleMenu() {

src/alpine/post-line-num.ts

@@ -0,0 +1,258 @@
+// ============ 常量配置 ============
+
+const TEXT_ELEMENTS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'li'];
+const HEADING_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const NON_TEXT_ELEMENTS = ['img', 'table', 'video', 'audio', 'canvas', 'svg', 'iframe', 'pre'];
+const ALL_ELEMENTS = [...TEXT_ELEMENTS, ...NON_TEXT_ELEMENTS];
+const DIRECT_CHILD_SELECTOR = ALL_ELEMENTS.map(tag => `div > ${tag}`).join(', ');
+const DEFAULT_LINE_HEIGHT_RATIO = 1.54;
+
+// ============ 类型定义 ============
+
+interface LineSpanOptions {
+  lineNum: number;
+  top: number;
+  height: number;
+  isGap?: boolean;
+  isBreakpoint?: boolean;
+}
+
+interface ElementMetrics {
+  top: number;
+  height: number;
+  marginTop: number;
+  marginBottom: number;
+  paddingTop: number;
+  lineHeight: number;
+  lines: number;
+  isHeading: boolean;
+}
+
+interface GapLinesOptions {
+  fragment: DocumentFragment;
+  gapStart: number;
+  gapEnd: number;
+  lineHeight: number;
+  startLine: number;
+}
+
+interface LineNumbersState {
+  $el?: HTMLElement;
+  totalLines: number;
+  resizeObserver: ResizeObserver | null;
+  init(): void;
+  calculateLineNumbers(): void;
+  destroy(): void;
+}
+
+// ============ 工具函数 ============
+
+const isNonTextElement = (tagName: string): boolean =>
+  NON_TEXT_ELEMENTS.includes(tagName.toLowerCase());
+
+const isHeadingElement = (tagName: string): boolean =>
+  HEADING_ELEMENTS.includes(tagName.toLowerCase());
+
+const isEmptyElement = (element: HTMLElement): boolean => {
+  if (isNonTextElement(element.tagName.toLowerCase())) return false;
+  return !element.textContent?.trim();
+};
+
+const getStyleValue = (style: CSSStyleDeclaration, prop: 'paddingTop' | 'paddingBottom' | 'lineHeight' | 'fontSize' | 'marginTop' | 'marginBottom'): number =>
+  parseFloat(style[prop]) || 0;
+
+const getDefaultLineHeight = (element: HTMLElement): number => {
+  const style = getComputedStyle(element);
+  return getStyleValue(style, 'lineHeight') || getStyleValue(style, 'fontSize') * DEFAULT_LINE_HEIGHT_RATIO;
+};
+
+// 获取元素度量信息（合并多次 getComputedStyle 调用）
+const getElementMetrics = (element: HTMLElement, containerRect: DOMRect, defaultLineHeight: number): ElementMetrics => {
+  const tagName = element.tagName.toLowerCase();
+  const style = getComputedStyle(element);
+  const paddingTop = getStyleValue(style, 'paddingTop');
+  const paddingBottom = getStyleValue(style, 'paddingBottom');
+  const marginTop = getStyleValue(style, 'marginTop');
+  const marginBottom = getStyleValue(style, 'marginBottom');
+  const height = element.offsetHeight;
+  const contentHeight = height - paddingTop - paddingBottom;
+  const isNonText = isNonTextElement(tagName);
+
+  const lineHeight = isNonText ? contentHeight : (getStyleValue(style, 'lineHeight') || defaultLineHeight);
+  const lines = isNonText ? 1 : Math.max(1, Math.round(contentHeight / lineHeight));
+
+  return {
+    top: element.getBoundingClientRect().top - containerRect.top,
+    height,
+    marginTop,
+    marginBottom,
+    paddingTop,
+    lineHeight: contentHeight / lines,
+    lines,
+    isHeading: isHeadingElement(tagName)
+  };
+};
+
+// ============ DOM 创建 ============
+
+const createLineSpan = (options: LineSpanOptions): HTMLSpanElement => {
+  const { lineNum, top, height, isGap = false, isBreakpoint = false } = options;
+  const span = document.createElement('span');
+
+  span.className = `line-number${isGap ? ' line-number--gap' : ''}${isBreakpoint ? ' line-number--breakpoint' : ''}`;
+  span.style.cssText = `top:${top}px;height:${height}px;line-height:${height}px`;
+  span.textContent = String(lineNum);
+
+  if (isBreakpoint) {
+    const breakpoint = document.createElement('span');
+    breakpoint.className = 'line-breakpoint';
+    breakpoint.textContent = '●';
+    span.appendChild(breakpoint);
+  }
+
+  return span;
+};
+
+// ============ 行号生成 ============
+
+const appendGapLines = (options: GapLinesOptions): number => {
+  const { fragment, gapStart, gapEnd, lineHeight, startLine } = options;
+  const gapHeight = gapEnd - gapStart;
+
+  if (gapHeight < lineHeight) return startLine;
+
+  const gapLines = Math.round(gapHeight / lineHeight);
+
+  for (let i = 0; i < gapLines; i++) {
+    fragment.appendChild(createLineSpan({
+      lineNum: startLine + i,
+      top: gapStart + i * lineHeight,
+      height: lineHeight,
+      isGap: true
+    }));
+  }
+
+  return startLine + gapLines;
+};
+
+const appendElementLines = (fragment: DocumentFragment, metrics: ElementMetrics, startLine: number): number => {
+  const { top, paddingTop, lineHeight, lines, isHeading } = metrics;
+  const startTop = top + paddingTop;
+
+  for (let i = 0; i < lines; i++) {
+    fragment.appendChild(createLineSpan({
+      lineNum: startLine + i,
+      top: startTop + i * lineHeight,
+      height: lineHeight,
+      isBreakpoint: i === 0 && isHeading
+    }));
+  }
+
+  return startLine + lines;
+};
+
+// ============ 主组件 ============
+
+export const postLineNum = (): LineNumbersState => ({
+  totalLines: 0,
+  resizeObserver: null,
+
+  init() {
+    const content = this.$el?.querySelector('.post-content') as HTMLElement;
+    if (!content) return;
+
+    const recalculate = () => this.calculateLineNumbers();
+
+    // 延迟计算确保 DOM 渲染完成
+    requestAnimationFrame(() => setTimeout(recalculate, 50));
+
+    // 监听内容区域大小变化（带防抖）
+    if (typeof ResizeObserver !== 'undefined') {
+      let resizeTimer: number;
+      this.resizeObserver = new ResizeObserver(() => {
+        clearTimeout(resizeTimer);
+        resizeTimer = window.setTimeout(recalculate, 100);
+      });
+      this.resizeObserver.observe(content);
+    }
+
+    // 窗口大小变化时重新计算
+    let windowResizeTimer: number;
+    window.addEventListener('resize', () => {
+      clearTimeout(windowResizeTimer);
+      windowResizeTimer = window.setTimeout(recalculate, 200);
+    });
+
+    // 监听图片加载（使用 once 避免重复触发）
+    content.querySelectorAll('img').forEach((img: HTMLImageElement) => {
+      if (!img.complete) {
+        img.addEventListener('load', recalculate, { once: true });
+        img.addEventListener('error', recalculate, { once: true });
+      }
+    });
+  },
+
+  destroy() {
+    this.resizeObserver?.disconnect();
+  },
+
+  calculateLineNumbers() {
+    const content = this.$el?.querySelector('.post-content') as HTMLElement;
+    const gutter = this.$el?.querySelector('.post-line-gutter') as HTMLElement;
+    if (!content || !gutter) return;
+
+    const container = (content.querySelector(':scope > div') || content) as HTMLElement;
+    const containerRect = container.getBoundingClientRect();
+    const defaultLineHeight = getDefaultLineHeight(content);
+
+    const elements = Array.from(container.querySelectorAll(DIRECT_CHILD_SELECTOR))
+      .filter(el => !isEmptyElement(el as HTMLElement)) as HTMLElement[];
+
+    const fragment = document.createDocumentFragment();
+    let currentLine = 1;
+    let lastBottom = 0;
+
+    // 派发清空目录事件
+    document.dispatchEvent(new CustomEvent('post-toc:clear'));
+
+    for (const element of elements) {
+      const metrics = getElementMetrics(element, containerRect, defaultLineHeight);
+      const tagName = element.tagName.toLowerCase();
+
+      // 如果是标题元素，派发添加目录事件
+      if (metrics.isHeading) {
+        const level = parseInt(tagName.charAt(1), 10);
+        const title = element.textContent?.trim() || '';
+        document.dispatchEvent(new CustomEvent('post-toc:add', {
+          detail: { level, title, element, tagName }
+        }));
+      }
+
+      // 计算实际的内容起始位置（考虑 margin-top）
+      const contentStart = metrics.top - metrics.marginTop;
+
+      // 只有当间隙足够大时才填充行号
+      if (lastBottom > 0 && contentStart > lastBottom) {
+        currentLine = appendGapLines({
+          fragment,
+          gapStart: lastBottom,
+          gapEnd: contentStart,
+          lineHeight: defaultLineHeight,
+          startLine: currentLine
+        });
+      }
+
+      currentLine = appendElementLines(fragment, metrics, currentLine);
+      // 更新 lastBottom，包含 margin-bottom
+      lastBottom = metrics.top + metrics.height + metrics.marginBottom;
+    }
+
+    // 派发初始化滚动高亮事件
+    document.dispatchEvent(new CustomEvent('post-toc:init-highlight'));
+
+    gutter.innerHTML = '';
+    gutter.appendChild(fragment);
+    gutter.style.height = `${container.scrollHeight}px`;
+    this.totalLines = currentLine - 1;
+  }
+});

src/alpine/post-toc.ts

@@ -0,0 +1,110 @@
+// ============ 类型定义 ============
+
+export interface PostTocItem {
+  id: string;
+  level: number;
+  title: string;
+  element: HTMLElement;
+  tagName: string;
+}
+
+// ============ 工具函数 ============
+
+const generateId = (counter: number): string =>
+  `post-toc-${counter}-${Date.now()}`;
+
+const ensureElementId = (element: HTMLElement, fallbackId: string): string => {
+  if (!element.id) element.id = fallbackId;
+  return element.id;
+};
+
+const findTopVisibleEntry = (entries: IntersectionObserverEntry[]): IntersectionObserverEntry | null => {
+  const visible = entries.filter(e => e.isIntersecting);
+  if (visible.length === 0) return null;
+
+  return visible.reduce((prev, curr) =>
+    curr.boundingClientRect.top < prev.boundingClientRect.top ? curr : prev
+  );
+};
+
+const createScrollObserver = (onActiveChange: (id: string) => void): IntersectionObserver =>
+  new IntersectionObserver(
+    (entries) => {
+      const topEntry = findTopVisibleEntry(entries);
+      if (topEntry) onActiveChange(topEntry.target.id);
+    },
+    { rootMargin: '-80px 0px -70% 0px', threshold: [0, 0.5, 1] }
+  );
+
+// ============ 事件常量 ============
+
+export const TOC_EVENTS = {
+  CLEAR: 'post-toc:clear',
+  ADD: 'post-toc:add',
+  HIGHLIGHT: 'post-toc:init-highlight'
+} as const;
+
+// ============ Alpine 组件 ============
+
+export const postToc = () => ({
+  items: [] as PostTocItem[],
+  activeId: '',
+  observer: null as IntersectionObserver | null,
+
+  // 私有属性
+  _isInitialized: false,
+  _counter: 0,
+  _minLevel: 6,
+
+  init() {
+    if (this._isInitialized) return;
+
+    document.addEventListener(TOC_EVENTS.CLEAR, () => this.clear());
+
+    document.addEventListener(TOC_EVENTS.ADD, (e) => {
+      const { level, title, element, tagName } = (e as CustomEvent).detail;
+
+      this.addItem(level, title, element, tagName);
+    });
+
+    document.addEventListener(TOC_EVENTS.HIGHLIGHT, () => this.initScrollHighlight());
+
+    this._isInitialized = true;
+  },
+
+  addItem(level: number, title: string, element: HTMLElement, tagName: string) {
+    this._counter++;
+
+    const id = ensureElementId(element, generateId(this._counter));
+
+    if (level < this._minLevel) this._minLevel = level;
+
+    this.items = [...this.items, { id, level, title, element, tagName }];
+  },
+
+  clear() {
+    this.items = [];
+    this.activeId = '';
+    this._counter = 0;
+    this._minLevel = 6;
+    this.observer?.disconnect();
+  },
+
+  initScrollHighlight() {
+    this.observer?.disconnect();
+    this.observer = createScrollObserver((id) => { this.activeId = id; });
+    this.items.forEach(item => this.observer?.observe(item.element));
+  },
+
+  scrollTo(id: string) {
+    const element = document.getElementById(id);
+    if (!element) return;
+
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    this.activeId = id;
+  },
+
+  getIndent(level: number): string {
+    return `${(level - this._minLevel) * 16}px`;
+  }
+});

src/main.ts

@@ -4,15 +4,21 @@ import "./styles/font-pixel.scss";
 
 import Alpine from 'alpinejs'
 import {upvote} from './alpine/upvote'
-import {themeMode} from './alpine/themeMode'
-import {menu} from './alpine/menu'
+import {themeMode} from './alpine/theme-mode'
+import {postLineNum} from './alpine/post-line-num'
+import {postToc} from './alpine/post-toc'
+import {headerDividing} from './alpine/header-dividing'
+import {headerMenu} from './alpine/header-menu'
 import {typewriterEffect} from './utils'
 
 window.Alpine = Alpine
 
 Alpine.data('upvote', upvote)
 Alpine.data('themeMode', themeMode)
-Alpine.data('menu', menu)
+Alpine.data('postLineNum', postLineNum)
+Alpine.data('postToc', postToc)
+Alpine.data('headerMenu', headerMenu)
+Alpine.data('headerDividing', headerDividing)
 
 Alpine.start()
 

src/styles/header-dividing.scss

@@ -0,0 +1,146 @@
+@import './variables.scss';
+
+.dividing {
+  flex: 1;
+  display: block;
+  width: 100%;
+  height: 25px;
+  position: relative;
+  transition: opacity 0.3s ease-in-out;
+  --dash-spacing: 10px;
+  --dash-width: 2px;
+
+  // 进入动画初始状态（仅 sticky 激活时播放）
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+
+  // 虚线背景层 - 带遮罩
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+                    90deg,
+                    var(--foreground),
+                    var(--foreground) var(--dash-width),
+                    transparent 0,
+                    transparent var(--dash-spacing)
+    );
+    background-size: var(--dash-spacing) 100%;
+    animation: line-flow 3s linear infinite;
+
+    // 遮罩层实现虚线淡入淡出效果
+    mask-image: linear-gradient(
+                    90deg,
+                    transparent 0%,
+                    black 3%,
+                    black 97%,
+                    transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+                    90deg,
+                    transparent 0%,
+                    black 3%,
+                    black 97%,
+                    transparent 100%
+    );
+  }
+
+  // 扫描光效 - 模拟终端扫描线
+  &::after {
+    content: '';
+    position: absolute;
+    left: -30%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 30%;
+    height: 120%;
+    filter: blur(4px);
+    background: linear-gradient(
+                    90deg,
+                    transparent 0%,
+                    var(--green) 80%,
+                    transparent 100%
+    );
+    opacity: 0.3;
+    animation: scan-line 5s ease-in-out infinite;
+    pointer-events: none;
+    z-index: 10;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &.sticky {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    z-index: 100;
+    --dash-spacing: 6px;
+    --dash-width: 2px;
+    background: var(--background);
+    opacity: 0.8;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    /* 进入动画：透明度由0到1，宽度由中间到100% */
+    animation: sticky-in 0.5s ease-in-out forwards;
+    opacity: 1;
+
+    &::before {
+      animation: line-flow 1.5s linear infinite;
+      mask-image: none;
+      -webkit-mask-image: none;
+      top: calc(50% - 1px);
+      height: 2px;
+    }
+
+    &::after {
+      animation: scan-line 2.5s ease-in-out infinite;
+      opacity: 0.6;
+      filter: blur(3px);
+      // 调整扫描线高度以适应 5px 容器
+      height: 200%;
+      width: 25%;
+    }
+  }
+}
+
+// 虚线流动动画 - 模拟加载进度
+@keyframes line-flow {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: var(--dash-spacing) 0;
+  }
+}
+
+// 扫描线动画 - 模拟终端扫描效果
+@keyframes scan-line {
+  0% {
+    left: -20%;
+    opacity: 0;
+  }
+  30% {
+    opacity: .3;
+  }
+  70% {
+    opacity: .3;
+  }
+  100% {
+    left: 80%;
+    opacity: 0;
+  }
+}
+
+@keyframes sticky-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/styles/header.scss

@@ -11,97 +11,11 @@
     justify-content: space-between;
   }
 
-  .dividing {
+  &__center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex: 1;
-    display: block;
-    width: 100%;
-    height: 25px;
-    position: relative;
-
-    // 虚线背景层 - 带遮罩
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: repeating-linear-gradient(
-                      90deg,
-                      var(--foreground),
-                      var(--foreground) 2px,
-                      transparent 0,
-                      transparent 10px
-      );
-      background-size: 10px 100%;
-      animation: line-flow 3s linear infinite;
-
-      // 遮罩层实现虚线淡入淡出效果
-      mask-image: linear-gradient(
-                      90deg,
-                      transparent 0%,
-                      black 3%,
-                      black 97%,
-                      transparent 100%
-      );
-      -webkit-mask-image: linear-gradient(
-                      90deg,
-                      transparent 0%,
-                      black 3%,
-                      black 97%,
-                      transparent 100%
-      );
-    }
-
-    // 扫描光效 - 模拟终端扫描线
-    &::after {
-      content: '';
-      position: absolute;
-      left: -30%;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 30%;
-      height: 120%;
-      filter: blur(4px);
-      background: linear-gradient(
-                      90deg,
-                      transparent 0%,
-                      var(--green) 80%,
-                      transparent 100%
-      );
-      opacity: 0.3;
-      animation: scan-line 5s ease-in-out infinite;
-      pointer-events: none;
-      z-index: 10;
-    }
-  }
-
-  // 虚线流动动画 - 模拟加载进度
-  @keyframes line-flow {
-    0% {
-      background-position: 0 0;
-    }
-    100% {
-      background-position: 10px 0;
-    }
-  }
-
-  // 扫描线动画 - 模拟终端扫描效果
-  @keyframes scan-line {
-    0% {
-      left: -20%;
-      opacity: 0;
-    }
-    30% {
-      opacity: .3;
-    }
-    70% {
-      opacity: .3;
-    }
-    100% {
-      left: 80%;
-      opacity: 0;
-    }
   }
 
   .menu {
@@ -158,7 +72,7 @@
 
       &.open {
         display: block;
-        animation: terminal-frame 0.2s ease-out;
+        animation: terminal-frame-reveal 0.3s ease-out forwards;
 
         // 逐行渲染效果 - 为每个子项添加延迟动画
         li {
@@ -182,17 +96,14 @@
     padding: 0;
   }
 
-  // 菜单框架渲染动画 - 模拟终端窗口从上到下打开
-  @keyframes terminal-frame {
+  // 菜单框架渲染动画 - 从上到下逐层渲染边框和内容
+  @keyframes terminal-frame-reveal {
     0% {
-      max-height: 0;
-      opacity: 0;
-    }
-    50% {
+      clip-path: inset(-10px -10px calc(100% + 10px) -10px);
       opacity: 1;
     }
     100% {
-      max-height: 800px;
+      clip-path: inset(-10px -10px -10px -10px);
       opacity: 1;
     }
   }
@@ -201,7 +112,7 @@
   @keyframes terminal-line {
     0% {
       opacity: 0;
-      transform: translateX(-10px);
+      transform: translateX(-2px);
     }
     50% {
       opacity: 0.5;

src/styles/main.scss

@@ -173,15 +173,6 @@ blockquote {
     padding-right: 0;
   }
 
-  &:before {
-    content: '”';
-    font-family: Georgia, serif;
-    font-size: 3.875rem;
-    position: absolute;
-    left: -40px;
-    top: -20px;
-  }
-
   p:first-of-type {
     margin-top: 0;
   }

src/styles/post-line-num.scss

@@ -0,0 +1,54 @@
+@import "variables";
+
+.post-line-gutter {
+  position: absolute;
+  left: -80px;
+  top: 0;
+  width: 60px;
+  user-select: none;
+  opacity: 0.5;
+  border-right: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
+
+  @media (max-width: $tablet-max-width) {
+    display: none;
+  }
+
+  .line-number {
+    position: absolute;
+    right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 10px;
+    font-size: 0.85rem;
+    color: var(--foreground);
+    transition: opacity 0.15s ease;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .line-number--gap {
+    opacity: 0.5;
+  }
+
+  .line-number--breakpoint {
+    cursor: pointer;
+
+    .line-breakpoint {
+      position: absolute;
+      right: -3px;
+      color: var(--brightRed);
+      font-size: 0.875rem;
+      font-family: Hack, Monaco, Consolas, monospace;
+      transition: transform 0.15s ease, filter 0.15s ease;
+    }
+
+    &:hover .line-breakpoint {
+      transform: scale(1.2);
+      filter: brightness(1.2);
+    }
+  }
+}

src/styles/post-toc.scss

@@ -0,0 +1,199 @@
+@import "variables";
+
+.post-toc-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  transform: translate(-260px, 100px);
+}
+
+.post-toc {
+  position: relative;
+  width: 200px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--foreground);
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+
+  // 隐藏滚动条但保持可滚动
+  scrollbar-width: thin;
+  scrollbar-color: var(--foreground) transparent;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--foreground) 30%, transparent);
+    border-radius: 2px;
+  }
+
+  // 移动端和平板隐藏
+  @media (max-width: 1200px) {
+    display: none;
+  }
+}
+
+.toc-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: 10px;
+  position: relative;
+
+  // 左侧边框线（不连接顶部）
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: color-mix(in srgb, var(--foreground) 20%, transparent);
+  }
+}
+
+.toc-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding: 2px 0;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  border-radius: 3px;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
+  }
+
+  // 折叠箭头
+  &__toggle {
+    flex-shrink: 0;
+    width: 16px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--foreground);
+    opacity: 0.5;
+    font-size: 0.6rem;
+    transition: transform 0.2s ease;
+    user-select: none;
+
+    &--expanded {
+      transform: rotate(0deg);
+    }
+
+    &--collapsed {
+      transform: rotate(-90deg);
+    }
+
+    &--empty {
+      visibility: hidden;
+    }
+  }
+
+  // 标签图标 <>
+  &__icon {
+    flex-shrink: 0;
+    color: var(--red);
+    margin-right: 4px;
+    opacity: 0.7;
+  }
+
+  // 标签名 (h1, h2, div, etc.)
+  &__tag {
+    flex-shrink: 0;
+    color: var(--blue);
+    margin-right: 6px;
+  }
+
+  // 标题文字
+  &__title {
+    color: var(--foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0.8;
+    transition: color 0.15s ease, opacity 0.15s ease;
+  }
+
+  // 左侧激活指示线
+  &::before {
+    content: '' !important;
+    position: absolute;
+    left: -10px !important;
+    top: 4px;
+    bottom: 4px;
+    width: 2px;
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  // 活跃状态
+  &--active {
+    background-color: color-mix(in srgb, var(--brightBlue) 15%, transparent);
+
+    .toc-item__title {
+      color: var(--brightBlue);
+      opacity: 1;
+    }
+
+    .toc-item__tag {
+      color: var(--brightBlue);
+    }
+
+    &::before {
+      background-color: var(--brightBlue);
+    }
+  }
+}
+
+// 子级列表
+.toc-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: 16px;
+
+  &--collapsed {
+    display: none;
+  }
+}
+
+// 目录头部
+.toc-header {
+  display: flex;
+  align-items: center;
+  padding: 4px 0 8px 0;
+  margin-bottom: 4px;
+  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
+  color: var(--foreground);
+  opacity: 0.6;
+  font-size: 0.75rem;
+
+  &__icon {
+    margin-right: 6px;
+    color: var(--red);
+  }
+
+  &__title {
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+}

src/styles/post.scss

@@ -24,6 +24,7 @@
 }
 
 .post {
+  position: relative;
   width: 100%;
   text-align: left;
   margin: 20px auto;
@@ -38,6 +39,8 @@
   }
 
   %meta {
+    display: flex;
+    align-items: center;
     font-size: 1rem;
     margin-bottom: 10px;
     color: var(--brightBlue);
@@ -53,6 +56,30 @@
     display: inline;
   }
 
+  &-separator {
+    position: relative;
+    top: 1px;
+    display: inline-grid;
+    grid-template-columns: repeat(2, 3px);
+    grid-template-rows: repeat(2, 3px);
+    gap: 2px;
+    margin: 0 6px;
+
+    span {
+      width: 2px;
+      height: 2px;
+      background-color: var(--brightBlue);
+      border-radius: 50%;
+      opacity: 0.2;
+    }
+
+    // 每个点使用不同动画和时长，形成随机效果
+    span:nth-child(1) { animation: dot-blink-1 2.8s ease-in-out infinite; }
+    span:nth-child(2) { animation: dot-blink-2 2.2s ease-in-out infinite 0.4s; }
+    span:nth-child(3) { animation: dot-blink-3 3.4s ease-in-out infinite 1s; }
+    span:nth-child(4) { animation: dot-blink-4 2.6s ease-in-out infinite 0.2s; }
+  }
+
   &-title {
     --border: 3px dotted var(--blue);
 
@@ -102,9 +129,14 @@
     }
   }
 
-  &-content {
+  &-body {
+    position: relative;
     margin-top: 30px;
+  }
+
+  &-content {
     font-family: Hack, Monaco, Consolas, 'Ubuntu Mono', PingHei, 'PingFang SC', 'Microsoft YaHei', monospace;
+    line-height: 1.54;
   }
 
   &-cover {
@@ -173,3 +205,33 @@
   position: relative;
   z-index: 2;
 }
+
+// 4个不同的随机动画模式
+@keyframes dot-blink-1 {
+  0%, 100% { opacity: 0.2; }
+  25% { opacity: 1; }
+  50% { opacity: 0.3; }
+  75% { opacity: 0.8; }
+}
+
+@keyframes dot-blink-2 {
+  0%, 100% { opacity: 0.3; }
+  30% { opacity: 0.9; }
+  60% { opacity: 0.2; }
+  85% { opacity: 0.7; }
+}
+
+@keyframes dot-blink-3 {
+  0%, 100% { opacity: 0.2; }
+  20% { opacity: 0.6; }
+  45% { opacity: 1; }
+  70% { opacity: 0.4; }
+}
+
+@keyframes dot-blink-4 {
+  0%, 100% { opacity: 0.4; }
+  15% { opacity: 0.2; }
+  40% { opacity: 0.8; }
+  65% { opacity: 1; }
+  90% { opacity: 0.3; }
+}

src/styles/style.scss

@@ -2,11 +2,14 @@
 @tailwind utilities;
 @tailwind components;
 
+@import 'main';
+@import 'logo';
 @import 'buttons';
 @import 'header';
-@import 'logo';
-@import 'main';
+@import 'header-dividing';
 @import 'post';
+@import 'post-line-num';
+@import 'post-toc';
 @import 'pagination';
 @import 'footer';
 @import 'typed-text';

templates/index.html

@@ -12,18 +12,21 @@
       <div class="posts">
         <div class="post on-list" th:each="post : ${posts.items}">
           <h1 class="post-title">
-            <a th:text="${post.spec.title}" th:href="${post.status.permalink}">Post Title</a>
+            <a th:text="'< ' + ${post.spec.title} + ' >'" th:href="${post.status.permalink}">Post Title</a>
           </h1>
           <div class="post-meta">
             <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
               Post CreateTime
             </span>
-            <span
-              class="post-author"
-              th:with="contributor = ${post.contributors[0]}"
-              th:text="${':: '+contributor.displayName}"
-              >:: Author</span
-            >
+            <span class="post-separator">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+            <span class="post-author" th:with="contributor = ${post.contributors[0]}" th:text="${contributor.displayName}">
+              Author
+            </span>
           </div>
           <span class="post-tags-inline" th:each="tag : ${post.tags}">
             <a

templates/modules/header.html

@@ -5,7 +5,9 @@
         <img class="icon" th:if="${not #strings.isEmpty(theme.config.basic.logo)}" th:src="${theme.config.basic.logo}" alt="Logo" />
         <div class="text"  th:if="${not #strings.isEmpty(theme.config.basic.title)}" th:text="${theme.config.basic.title}"></div>
       </a>
-      <div class="dividing"></div>
+      <div class="header__center" x-data="headerDividing()">
+        <div class="dividing" :class="{ 'sticky': isSticky }"></div>
+      </div>
       <button
         type="button"
         class="button"
@@ -47,7 +49,7 @@
     </div>
     <nav class="menu">
       <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
-        <li th:each="menuItem : ${menu.menuItems}" x-data="menu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
+        <li th:each="menuItem : ${menu.menuItems}" x-data="headerMenu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
           <a
             class="text-gray-600 hover:text-blue-600"
             th:href="${menuItem.status.href}"

templates/post.html

@@ -4,11 +4,39 @@
   th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
 >
   <th:block th:fragment="content">
-    <div class="post">
-      <h1 class="post-title" th:text="${post.spec.title}">Post Title</h1>
+    <!-- 目录组件 -->
+    <div class="post-toc-sticky">
+      <div class="post-toc" x-data="postToc" x-init="init()">
+        <div class="toc-header">
+          <span class="toc-header__icon">&lt;&gt;</span>
+          <span class="toc-header__title">Outline</span>
+        </div>
+        <ul class="toc-tree">
+          <template x-for="(item, index) in items" :key="index">
+            <li class="toc-item"
+                :class="{'toc-item--active': activeId === item.id}"
+                :style="`padding-left: ${getIndent(item.level)}`"
+                @click="scrollTo(item.id)">
+              <span class="toc-item__toggle toc-item__toggle--empty">▼</span>
+              <span class="toc-item__icon">&lt;&gt;</span>
+              <span class="toc-item__tag" x-text="item.tagName"></span>
+              <span class="toc-item__title" x-text="item.title"></span>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+    <div class="post" x-data="postLineNum" x-init="init()">
+      <h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
       <div class="post-meta">
         <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
-        <span class="post-author" th:text="${':: '+post.owner.displayName}">:: Author</span>
+        <span class="post-separator">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <span class="post-author" th:text="${post.owner.displayName}">Author</span>
       </div>
       <span class="post-tags-inline" th:each="tag : ${post.tags}">
         <a
@@ -19,8 +47,12 @@
           >#Tag</a
         >
       </span>
-      <div class="post-content">
-        <div th:utext="${post.content.content}">Post Content</div>
+      <div class="post-body">
+        <!-- 行数组件 -->
+        <div class="post-line-gutter"></div>
+        <div class="post-content">
+          <div th:utext="${post.content.content}">Post Content</div>
+        </div>
       </div>
     </div>
     <div class="comment-wrap" th:if="${haloCommentEnabled}">

theme.yaml

@@ -13,5 +13,5 @@ spec:
   repo: https://git.dev.cm/theme-terminal
   settingName: "theme-terminal-setting"
   configMapName: "theme-terminal-configMap"
-  version: 1.1.8
+  version: 1.2.3
   require: ">=2.22.0"

tsconfig.json

@@ -16,5 +16,5 @@
     "noImplicitReturns": true,
     "skipLibCheck": true
   },
-  "include": ["src", "./env.d.ts"]
+  "include": ["types", "src", "./env.d.ts"]
 }