#現在教程開始！

1
---
2
export interface Props {
3
  content: string;
4
}
5

6
const { content } = Astro.props;
7

8
// 如果沒有內容，不渲染組件
9
if (!content || content.trim() === '') {
10
  return null;
11
}
12
---
13

14
{content && (
15
  <div class="ai-summary">
16
    <div class="ai-title">
17
      <div class="ai-title-left">
18
        <i>🤖</i>
19
        <span class="ai-title-text">AI 摘要</span>
20
      </div>
21
      <div class="ai-tag">fishcpy AI</div>
22
    </div>
23
    <div class="ai-explanation" data-content={content}></div>
24
  </div>
25
)}
26

27
<script>
28
  // 檢查當前頁面路徑是否包含 "posts"
29
  function isPostsPage() {
30
    return window.location.pathname.includes('/posts/');
31
  }
32

33
  // 全局函數，用於初始化AI打字效果
34
  function initAITyping() {
35
    // 只在包含 "posts" 的頁面才執行AI總結功能
36
    if (!isPostsPage()) {
37
      return;
38
    }
39

40
    // 查找所有AI摘要容器
41
    const aiSummaryContainers = document.querySelectorAll('.ai-summary');
42

43
    aiSummaryContainers.forEach(container => {
44
      const textElement = container.querySelector('.ai-explanation');
45

46
      if (!textElement) {
47
        return;
48
      }
49

50
      // 檢查是否已經初始化過
51
      if (textElement.hasAttribute('data-initialized')) {
52
        return;
53
      }
54

55
      const content = textElement.getAttribute('data-content');
56
      if (!content) {
57
        return;
58
      }
59

60
      // 標記為已初始化
61
      textElement.setAttribute('data-initialized', 'true');
62

63
      // 清空文本內容，準備打字效果
64
      textElement.textContent = '';
65
      textElement.classList.remove('typing-complete');
66

67
      let index = 0;
68
      const typeSpeed = 30; // 打字速度（毫秒）
69

70
      function typeWriter() {
71
        if (index < content.length) {
72
          textElement.textContent += content.charAt(index);
73
          index++;
74
          setTimeout(typeWriter, typeSpeed);
75
        } else {
76
          // 打字完成後隱藏光標（通過CSS控制）
77
          textElement.classList.add('typing-complete');
78
        }
79
      }
80

81
      // 延遲開始打字效果
82
      setTimeout(typeWriter, 800);
83
    });
84
  }
85

86
  // 頁面加載完成時初始化
87
  function handlePageLoad() {
88
    setTimeout(initAITyping, 100);
89
  }
90

91
  // 監聽頁面導航事件（適用於Astro的客戶端路由）
92
  function setupNavigationListeners() {
93
    // DOMContentLoaded事件
94
    if (document.readyState === 'loading') {
95
      document.addEventListener('DOMContentLoaded', handlePageLoad);
96
    } else {
97
      handlePageLoad();
98
    }
99

100
    // 監聽Astro的頁面導航事件
101
    document.addEventListener('astro:page-load', handlePageLoad);
102

103
    // 監聽瀏覽器的popstate事件（後退/前進按鈕）
104
    window.addEventListener('popstate', handlePageLoad);
105

106
    // 監聽pushstate和replacestate事件
107
    const originalPushState = history.pushState;
108
    const originalReplaceState = history.replaceState;
109

110
    history.pushState = function() {
111
      originalPushState.apply(history, arguments);
112
      setTimeout(handlePageLoad, 100);
113
    };
114

115
    history.replaceState = function() {
116
      originalReplaceState.apply(history, arguments);
117
      setTimeout(handlePageLoad, 100);
118
    };
119
  }
120

121
  // 立即設定監聽器
122
  setupNavigationListeners();
123
</script>

1
tags: z.array(z.string()).optional().default([]),
2
category: z.string().optional().nullable().default(""),
3
lang: z.string().optional().default(""),
4
+    ai: z.string().optional().default(""),
5

6
/* For internal use */
7
prevTitle: z.string().default(""),

1
import { profileConfig, siteConfig } from "../../config";
2
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
3
import Comment from "@components/comment/index.astro";
4
+ import AISummary from "@components/misc/AISummary.astro";
5

6
export async function getStaticPaths() {
7
  const blogEntries = await getSortedPosts();
8
@@ -84,6 +85,9 @@ const jsonLd = {
9
</div>
10
</div>
11

12
+            <!-- AI Summary -->
13
+            {entry.data.description && <AISummary content={entry.data.description} class="onload-animation" />}
14

15
<!-- metadata -->
16
<div class="onload-animation">
17
<PostMetadata

1
/* =================== */
2
/* 📘 AI 摘要模塊樣式 */
3
/* =================== */
4

5
.ai-summary {
6
    background: var(--card-bg);
7
    border: 1px solid var(--line-divider);
8
    border-radius: 12px;
9
    padding: 8px 8px 12px 8px;
10
    line-height: 1.3;
11
    flex-direction: column;
12
    margin-bottom: 16px;
13
    display: flex;
14
    gap: 5px;
15
    position: relative;
16
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
17
    transition: all 0.3s;
18
}
19

20
.ai-summary:hover {
21
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
22
    transform: translateY(-1px);
23
}
24

25
.ai-summary .ai-explanation {
26
    z-index: 10;
27
    padding: 8px 12px;
28
    font-size: 15px;
29
    line-height: 1.4;
30
    @apply text-90;
31
    text-align: justify;
32
}
33

34
/* ✅ 打字機光標動畫 */
35
.ai-summary .ai-explanation::after {
36
    content: '';
37
    display: inline-block;
38
    width: 8px;
39
    height: 2px;
40
    margin-left: 2px;
41
    @apply bg-black/90 dark:bg-white/90;
42
    vertical-align: bottom;
43
    animation: blink-underline 1s ease-in-out infinite;
44
    transition: all 0.3s;
45
    position: relative;
46
    bottom: 3px;
47
}
48

49
/* 打字完成後隱藏光標 */
50
.ai-summary .ai-explanation.typing-complete::after {
51
    display: none;
52
}
53

54
.ai-summary .ai-title {
55
    z-index: 10;
56
    font-size: 14px;
57
    display: flex;
58
    border-radius: 8px;
59
    align-items: center;
60
    position: relative;
61
    padding: 0 12px;
62
    cursor: default;
63
    user-select: none;
64
}
65

66
.ai-summary .ai-title .ai-title-left {
67
    display: flex;
68
    align-items: center;
69
    color: var(--primary);
70
}
71

72
.ai-summary .ai-title .ai-title-left i {
73
    margin-right: 3px;
74
    display: flex;
75
    color: var(--primary);
76
    border-radius: 20px;
77
    justify-content: center;
78
    align-items: center;
79
}
80

81
.ai-summary .ai-title .ai-title-left .ai-title-text {
82
    font-weight: 500;
83
}
84

85
.ai-summary .ai-title .ai-tag {
86
    color: var(--btn-content);
87
    font-weight: 300;
88
    margin-left: auto;
89
    display: flex;
90
    align-items: center;
91
    justify-content: center;
92
    transition: 0.3s;
93
}
94

95
/* ✅ 打字機光標閃爍動畫 */
96
@keyframes blink-underline {
97
    0%, 100% {
98
        opacity: 1;
99
    }
100
    50% {
101
        opacity: 0;
102
    }
103
}

1
  --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
2
  --card-bg: white oklch(0.23 0.015 var(--hue))
3

4
+  // AI Summary 相關變量
5
+  --liushen-title-font-color: #0883b7 #0883b7
6
+  --liushen-maskbg: rgba(255, 255, 255, 0.85) rgba(0, 0, 0, 0.85)
7
+  --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42A2FF 54%, #d6b300 100%) conic-gradient(from 1.5708rad at 50% 50%, rgba(214, 178, 0, 0.46) 0%, rgba(66, 161, 255, 0.53) 54%, rgba(214, 178, 0, 0.49) 100%)
8
+  --liushen-card-secondbg: #f1f3f8 #3e3f41
9
+  --liushen-text: #4c4948 #ffffffb3
10
+  --liushen-secondtext: #3c3c43cc #a1a2b8
11

12
  --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))
13
  --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue))