1{{/* 
 2  Details shortcode - 用於創建可折疊的內容區塊
 3  
 4  使用方式:
 5  
 6
 7<details>
 8  <summary>點擊展開</summary>
 9  
10  內容...
11  
12</details>
13  
14  參數:
15  - summary: 摘要文字（可選，預設為 "點擊展開"）
16*/}}
17<details>
18  <summary>{{ .Get "summary" | default "點擊展開" }}</summary>
19  {{ .Inner | markdownify }}
20</details>

 1/* 可折疊程式碼區塊樣式 */
 2details {
 3  margin: 1.5rem 0;
 4  padding: 1rem;
 5  background: rgba(0, 0, 0, 0.05);
 6  border-radius: 8px;
 7  border: 1px solid rgba(0, 0, 0, 0.1);
 8  transition: all 0.3s ease;
 9}
10
11details:hover {
12  background: rgba(0, 0, 0, 0.08);
13  border-color: rgba(0, 0, 0, 0.15);
14}
15
16details[open] {
17  background: rgba(0, 0, 0, 0.03);
18  border-color: rgba(0, 0, 0, 0.2);
19}
20
21summary {
22  cursor: pointer;
23  font-weight: 600;
24  font-size: 0.95rem;
25  padding: 0.5rem;
26  margin: -1rem -1rem 0 -1rem;
27  border-radius: 8px 8px 0 0;
28  background: rgba(0, 0, 0, 0.05);
29  transition: all 0.2s ease;
30  user-select: none;
31  list-style: none;
32}
33
34summary::-webkit-details-marker {
35  display: none;
36}
37
38summary::before {
39  content: '▶';
40  display: inline-block;
41  margin-right: 0.5rem;
42  transition: transform 0.3s ease;
43  font-size: 0.8rem;
44}
45
46details[open] summary::before {
47  transform: rotate(90deg);
48}
49
50summary:hover {
51  background: rgba(0, 0, 0, 0.1);
52}
53
54details[open] summary {
55  margin-bottom: 1rem;
56  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
57  border-radius: 8px 8px 0 0;
58}
59
60/* 確保 details 內的程式碼區塊樣式正常 */
61details pre {
62  margin: 1rem 0 0 0;
63}
64
65details > *:not(summary) {
66  animation: fadeIn 0.3s ease;
67}
68
69@keyframes fadeIn {
70  from {
71    opacity: 0;
72    transform: translateY(-10px);
73  }
74  to {
75    opacity: 1;
76    transform: translateY(0);
77  }
78}
79
80/* 響應式設計 */
81@media (max-width: 768px) {
82  details {
83    margin: 1rem 0;
84    padding: 0.8rem;
85  }
86
87  summary {
88    font-size: 0.9rem;
89    padding: 0.4rem;
90    margin: -0.8rem -0.8rem 0 -0.8rem;
91  }
92}

 1{{/*
 2  進階 Details shortcode
 3  
 4  參數:
 5  - summary: 摘要文字
 6  - open: 是否預設展開（true/false）
 7  - class: 自定義 CSS 類別
 8*/}}
 9<details {{ if .Get "open" }}open{{ end }} {{ with .Get "class" }}class="{{ . }}"{{ end }}>
10  <summary>{{ .Get "summary" | default "點擊展開" }}</summary>
11  {{ .Inner | markdownify }}
12</details>

 1# 替換開始標籤
 2find content -name "*.md" -type f -exec sed -i '' \
 3  's/<details>$/{{&lt; details summary="點擊查看程式碼" &gt;}}/g' {} +
 4
 5# 替換帶 summary 的開始標籤
 6find content -name "*.md" -type f -exec sed -i '' \
 7  's/<details>.*<summary>\(.*\)<\/summary>/{{&lt; details summary="\1" &gt;}}/g' {} +
 8
 9# 替換結束標籤
10find content -name "*.md" -type f -exec sed -i '' \
11  's/<\/details>/{{&lt; \/details &gt;}}/g' {} +