搜尋功能介紹

全站搜尋是這個工具的核心功能之一。

搜尋方式

方式一：點擊搜尋框

在首頁的頂部有一個搜尋框，直接輸入關鍵字即可。

方式二：快捷鍵

按 Ctrl + K（Mac 是 Cmd + K）可以快速聚焦到搜尋框。

搜尋結果

搜尋結果會即時顯示，包含：

1. 文件標題 - 藍色連結
2. 內容摘要 - 包含關鍵字的上下文
3. 高亮標記 - 關鍵字會以黃色背景標示

┌─────────────────────────────────────┐
│ 🔍 搜尋: Markdown                   │
├─────────────────────────────────────┤
│ 📄 工具簡介                          │
│ ...將 Markdown 文件轉換為...         │
├─────────────────────────────────────┤
│ 📄 使用教學                          │
│ ...準備 Markdown 檔案...             │
└─────────────────────────────────────┘

跳轉到關鍵字位置

點擊搜尋結果後，頁面會：

1. 跳轉到對應的文件
2. 自動捲動到第一個關鍵字出現的位置
3. 用黃色背景高亮關鍵字

這是透過 URL 參數 ?highlight=關鍵字 實現的

技術實作

搜尋功能的實作重點：

程式碼範例

// 搜尋索引直接嵌入 HTML
const searchIndex = [
  { title: "文件標題", url: "path/to/file.html", content: "..." },
  // ...
];

// 搜尋邏輯
function search(query) {
  return searchIndex.filter(doc =>
    doc.title.includes(query) ||
    doc.content.includes(query)
  );
}