要離線使用 Markmap 而不是依賴 CDN，你需要下載必要的檔案並在本地託管它們。以下是具體步驟：
### 1. 下載所需檔案
你需要下載 `markmap-autoloader` 的 JavaScript 檔案。可以從以下來源獲取：
- **從 CDN 下載**：訪問 `https://cdn.jsdelivr.net/npm/markmap-autoloader`（或其他版本的具體路徑，例如 `https://cdn.jsdelivr.net/npm/markmap-autoloader@0.17.0`），然後將檔案保存為 `markmap-autoloader.js`。
- **從 GitHub 或 npm 獲取**：
- 前往 Markmap 的官方 GitHub 倉庫（https://github.com/markmap/markmap）。
- 下載最新的 `markmap-autoloader` 檔案，或者通過 npm 安裝整個套件：
```bash
npm install markmap-autoloader
```
安裝後，所需的檔案會位於 `node_modules/markmap-autoloader/dist` 目錄中。
### 2. 調整你的 HTML 檔案
假設你將下載的檔案保存到本地目錄（例如 `js/markmap-autoloader.js`），修改你的程式碼如下：
```html
<!-- 移除 CDN 腳本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script> -->
<!-- 使用本地檔案 -->
<script src="js/markmap-autoloader.js"></script>
<script>
window.markmap = {
autoLoader: { manual: true },
};
</script>
<script>
// 5秒後渲染
setTimeout(() => {
markmap.autoLoader.renderAll();
}, 5000);
</script>
```
### 3. 確保相依性
`markmap-autoloader` 可能依賴其他庫（如 `markmap-lib` 或 `d3`）。如果你發現運行時出現錯誤（例如缺少 `markmap` 或其他物件），需要額外下載這些相依性：
- **檢查相依性**：在 `markmap-autoloader` 的文檔或 GitHub 頁面中確認它是否需要其他檔案。
- **下載方式**：
- 從 CDN 下載 `markmap-lib`（例如 `https://cdn.jsdelivr.net/npm/markmap-lib`）並保存為本地檔案。
- 或使用 npm 安裝：
```bash
npm install markmap-lib
```
- 然後在 HTML 中引入：
```html
<script src="js/markmap-lib.js"></script>
<script src="js/markmap-autoloader.js"></script>
```
### 4. 本地測試
- 將所有檔案放入你的專案目錄（例如 `js/` 文件夾）。
- 使用本地伺服器（如 Python 的 `http.server` 或 Node.js 的 `live-server`）啟動專案，而不是直接打開 HTML 檔案（因為瀏覽器可能因安全性限制無法加載本地腳本）。
- Python 示例：
```bash
python -m http.server 8000
```
- 然後在瀏覽器中訪問 `http://localhost:8000`。
### 5. 完整示例
假設你下載了 `markmap-lib.js` 和 `markmap-autoloader.js`，你的 HTML 檔案可能如下：
```html
<!DOCTYPE html>
<html>
<head>
<title>Offline Markmap</title>
</head>
<body>
<!-- 你的 Markmap 內容 -->
<div class="markmap">
<!-- Markdown 內容 -->
# Hello World
## Subtopic
- Item 1
- Item 2
</div>
<script src="js/markmap-lib.js"></script>
<script src="js/markmap-autoloader.js"></script>
<script>
window.markmap = {
autoLoader: { manual: true },
};
</script>
<script>
setTimeout(() => {
markmap.autoLoader.renderAll();
}, 5000);
</script>
</body>
</html>
```
### 注意事項
- **版本一致性**：確保你下載的 `markmap-autoloader` 和 `markmap-lib`（如果需要）的版本相容。
- **檔案路徑**：根據你的專案結構調整 `src` 路徑。
- **測試環境**：離線使用時，必須通過本地伺服器測試，否則可能因瀏覽器 CORS 限制而失敗。
完成以上步驟後，你的 Markmap 就可以完全離線運行了！如果有其他問題，隨時告訴我。
