fix(lineNumbers): make $el property optional in LineNumbersState interface

docker/docker-compose.yaml

@@ -1,6 +1,6 @@
 services:
   halo:
-    image: registry.fit2cloud.com/halo/halo:2.20.10
+    image: registry.fit2cloud.com/halo/halo:2.22.12
     volumes:
       - ./data:/root/.halo2
       - ../:/root/.halo2/themes/theme-terminal

package.json

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

src/alpine/lineNumbers.ts

@@ -0,0 +1,180 @@
+// 非文字元素列表
+const NON_TEXT_ELEMENTS = ['img', 'hr', 'table', 'figure', 'video', 'audio', 'canvas', 'svg', 'iframe'];
+
+// 默认行高倍数
+const DEFAULT_LINE_HEIGHT_RATIO = 1.54;
+
+// 工具函数：创建行号元素
+function createLineSpan(lineNum: number, top: number, height: number, isGap = false): HTMLSpanElement {
+  const span = document.createElement('span');
+  span.className = isGap ? 'line-number line-number--gap' : 'line-number';
+  span.style.top = `${top}px`;
+  span.style.height = `${height}px`;
+  span.style.lineHeight = `${height}px`;
+  span.textContent = String(lineNum);
+  return span;
+}
+
+// 工具函数：获取元素的 padding
+function getElementPadding(style: CSSStyleDeclaration): { top: number; bottom: number } {
+  return {
+    top: parseFloat(style.paddingTop) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0
+  };
+}
+
+// 工具函数：计算默认行高
+function getDefaultLineHeight(element: HTMLElement): number {
+  const style = getComputedStyle(element);
+  const fontSize = parseFloat(style.fontSize);
+  return parseFloat(style.lineHeight) || fontSize * DEFAULT_LINE_HEIGHT_RATIO;
+}
+
+// 工具函数：判断是否为非文��元素
+function isNonTextElement(tagName: string): boolean {
+  return NON_TEXT_ELEMENTS.includes(tagName.toLowerCase());
+}
+
+// 工具函数：计算元素占用的行数
+function calculateElementLines(element: HTMLElement, defaultLineHeight: number): number {
+  const tagName = element.tagName.toLowerCase();
+  const style = getComputedStyle(element);
+  const padding = getElementPadding(style);
+  const contentHeight = element.offsetHeight - padding.top - padding.bottom;
+
+  // 非文字元素整体算作一行
+  if (isNonTextElement(tagName)) return 1;
+
+  // 获取行高
+  const lineHeight = parseFloat(style.lineHeight) || defaultLineHeight;
+
+  return Math.max(1, Math.round(contentHeight / lineHeight));
+}
+
+// 填充空白间隙的行号
+function appendGapLines(
+  fragment: DocumentFragment,
+  gapStart: number,
+  gapEnd: number,
+  lineHeight: number,
+  startLine: number
+): number {
+  const gapLines = Math.round((gapEnd - gapStart) / lineHeight);
+  for (let i = 0; i < gapLines; i++) {
+    fragment.appendChild(
+      createLineSpan(startLine + i, gapStart + i * lineHeight, lineHeight, true)
+    );
+  }
+  return startLine + gapLines;
+}
+
+// 生成元素内容的行号
+function appendElementLines(
+  fragment: DocumentFragment,
+  element: HTMLElement,
+  defaultLineHeight: number,
+  startLine: number
+): number {
+  const style = getComputedStyle(element);
+  const padding = getElementPadding(style);
+  const elementTop = element.offsetTop;
+  const elementHeight = element.offsetHeight;
+
+  const lines = calculateElementLines(element, defaultLineHeight);
+  const contentHeight = elementHeight - padding.top - padding.bottom;
+  const lineHeight = contentHeight / lines;
+  const startTop = elementTop + padding.top;
+
+  for (let i = 0; i < lines; i++) {
+    fragment.appendChild(
+      createLineSpan(startLine + i, startTop + i * lineHeight, lineHeight)
+    );
+  }
+
+  return startLine + lines;
+}
+
+interface LineNumbersState {
+  $el?: HTMLElement;
+  totalLines: number;
+  resizeObserver: ResizeObserver | null;
+  init(): void;
+  calculateLineNumbers(): void;
+  destroy(): void;
+}
+
+export const lineNumbers = (): LineNumbersState => ({
+  totalLines: 0,
+  resizeObserver: null,
+
+  init() {
+    const content = (this.$el as HTMLElement).querySelector('.post-content') as HTMLElement;
+
+    if (!content) return;
+
+    // 延迟计算确保 DOM 渲染完成
+    requestAnimationFrame(() => {
+      setTimeout(() => this.calculateLineNumbers(), 50);
+    });
+
+    // 监听内容区域大小变化
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.calculateLineNumbers());
+      this.resizeObserver.observe(content);
+    }
+
+    // 窗口大小变化时重新计算（备用）
+    let resizeTimer: number;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = window.setTimeout(() => this.calculateLineNumbers(), 200);
+    });
+
+    // 监听图片加载
+    content.querySelectorAll('img').forEach((img: HTMLImageElement) => {
+      if (!img.complete) {
+        img.addEventListener('load', () => this.calculateLineNumbers());
+        img.addEventListener('error', () => this.calculateLineNumbers());
+      }
+    });
+  },
+
+  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 defaultLineHeight = getDefaultLineHeight(content);
+    const container = content.querySelector(':scope > div') || content;
+    const blockElements = container.querySelectorAll(':scope > *');
+
+    gutter.innerHTML = '';
+    const fragment = document.createDocumentFragment();
+
+    let currentLine = 1;
+    let lastBottom = 0;
+
+    blockElements.forEach((el: Element) => {
+      const element = el as HTMLElement;
+      const elementTop = element.offsetTop;
+
+      // 填充空白间隙
+      if (lastBottom > 0 && elementTop > lastBottom) {
+        currentLine = appendGapLines(fragment, lastBottom, elementTop, defaultLineHeight, currentLine);
+      }
+
+      // 生成元素行号
+      currentLine = appendElementLines(fragment, element, defaultLineHeight, currentLine);
+      lastBottom = elementTop + element.offsetHeight;
+    });
+
+    this.totalLines = currentLine - 1;
+    gutter.appendChild(fragment);
+    gutter.style.height = `${container.scrollHeight}px`;
+  }
+});

src/main.ts

@@ -6,6 +6,7 @@ import Alpine from 'alpinejs'
 import {upvote} from './alpine/upvote'
 import {themeMode} from './alpine/themeMode'
 import {menu} from './alpine/menu'
+import {lineNumbers} from './alpine/lineNumbers'
 import {typewriterEffect} from './utils'
 
 window.Alpine = Alpine
@@ -13,6 +14,7 @@ window.Alpine = Alpine
 Alpine.data('upvote', upvote)
 Alpine.data('themeMode', themeMode)
 Alpine.data('menu', menu)
+Alpine.data('lineNumbers', lineNumbers)
 
 Alpine.start()
 

src/styles/header.scss

@@ -13,10 +13,95 @@
 
   .dividing {
     flex: 1;
-    background: repeating-linear-gradient(90deg, var(--foreground), var(--foreground) 2px, transparent 0, transparent 10px);
     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 {
@@ -56,12 +141,15 @@
       border: 2px solid var(--red);
       background: var(--background);
       box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background);
+      overflow: hidden;
 
       li {
         padding: 5px;
         white-space: nowrap;
         text-decoration: underline;
         color: var(--green);
+        opacity: 0;
+        transform: translateX(-10px);
 
         &:not(:last-of-type) {
           margin-right: 0;
@@ -70,6 +158,19 @@
 
       &.open {
         display: block;
+        animation: terminal-frame-reveal 0.3s ease-out forwards;
+
+        // 逐行渲染效果 - 为每个子项添加延迟动画
+        li {
+          animation: terminal-line 0.2s ease-out forwards;
+
+          // 为前20个菜单项添加递增延迟
+          @for $i from 1 through 20 {
+            &:nth-child(#{$i}) {
+              animation-delay: #{($i * 0.05) + 0.1}s;
+            }
+          }
+        }
       }
     }
   }
@@ -80,4 +181,31 @@
     margin: 0 0 0 .5rem;
     padding: 0;
   }
+
+  // 菜单框架渲染动画 - 从上到下逐层渲染边框和内容
+  @keyframes terminal-frame-reveal {
+    0% {
+      clip-path: inset(-10px -10px calc(100% + 10px) -10px);
+      opacity: 1;
+    }
+    100% {
+      clip-path: inset(-10px -10px -10px -10px);
+      opacity: 1;
+    }
+  }
+
+  // 菜单项逐行渲染动画 - 模拟终端文本逐行输出
+  @keyframes terminal-line {
+    0% {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
 }

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.scss

@@ -38,6 +38,8 @@
   }
 
   %meta {
+    display: flex;
+    align-items: center;
     font-size: 1rem;
     margin-bottom: 10px;
     color: var(--brightBlue);
@@ -53,6 +55,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 +128,43 @@
     }
   }
 
-  &-content {
+  &-body {
+    position: relative;
     margin-top: 30px;
+  }
+
+  &-line-gutter {
+    position: absolute;
+    left: -60px;
+    top: 0;
+    width: 40px;
+    user-select: none;
+    opacity: 0.5;
+    border-right: 1px solid var(--foreground);
+
+    @media (max-width: $tablet-max-width) {
+      display: none;
+    }
+
+    .line-number {
+      position: absolute;
+      right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      font-size: 0.75rem;
+      color: var(--foreground);
+      font-family: Hack, Monaco, Consolas, monospace;
+    }
+
+    .line-number--gap {
+      opacity: 0.6;
+    }
+  }
+
+  &-content {
     font-family: Hack, Monaco, Consolas, 'Ubuntu Mono', PingHei, 'PingFang SC', 'Microsoft YaHei', monospace;
+    line-height: 1.54;
   }
 
   &-cover {
@@ -173,3 +233,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; }
+}

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

@@ -51,6 +51,7 @@
           <a
             class="text-gray-600 hover:text-blue-600"
             th:href="${menuItem.status.href}"
+            th:target="${menuItem.spec.target?.value}"
             th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
           ></a>
           <ul 
@@ -61,8 +62,9 @@
             <li th:each="childMenuItem : ${menuItem.children}">
               <a 
                 class="text-gray-600 hover:text-blue-600" 
-                th:href="${childMenuItem.status.href} " 
-                th:text="${childMenuItem.status.displayName} "
+                th:href="${childMenuItem.status.href}"
+                th:target="${childMenuItem.spec.target?.value}"
+                th:text="${childMenuItem.status.displayName}"
               ></a>
             </li>
           </ul>

templates/post.html

@@ -4,11 +4,17 @@
   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" x-data="lineNumbers" 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,10 +25,13 @@
           >#Tag</a
         >
       </span>
+      <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}">
       <h2>评论</h2>
       <halo:comment

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.7
-  require: ">=2.20.0"
+  version: 1.1.9
+  require: ">=2.22.0"