Skip to main content

標籤（Tags）功能說明

概述​

在 Docusaurus 文檔中，您可以使用標籤（tags）或關鍵字（keywords）來標記文檔內容，方便分類和搜尋。

使用方法​

1. 在 Frontmatter 中添加標籤​

在 Markdown 文件的開頭（frontmatter）中添加 tags 或 keywords：

---
sidebar_position: 1
tags:
  - 競品分析
  - 網站改版
  - 2026
keywords:
  - 改版建議
  - 網站設計
---

2. 在文檔中顯示標籤​

在文檔內容中引入並使用 Tags 組件：

import Tags from '@site/src/components/Tags';

# 文檔標題

<Tags tags={frontMatter.tags} keywords={frontMatter.keywords} />

文檔內容...

3. 完整範例​

---
sidebar_position: 1
tags:
  - 競品分析
  - 網站改版
  - 2026
keywords:
  - 改版建議
  - 網站設計
---

import Tags from '@site/src/components/Tags';

# 競品分析與改版建議

<Tags tags={frontMatter.tags} keywords={frontMatter.keywords} />

這裡是文檔內容...

標籤顯示效果​

標籤會以藍色標籤的形式顯示在文檔標題下方，每個標籤前面會自動加上 # 符號：

  • #競品分析
  • #網站改版
  • #2026

注意事項​

  1. tags 和 keywords 的區別：

    • tags：主要標籤，用於分類
    • keywords：關鍵字，用於搜尋和補充
    • 兩者都會顯示，重複的標籤會自動去重

  2. 標籤格式：

    • 可以是中文或英文
    • 建議使用簡短的詞彙
    • 多個標籤使用陣列格式

  3. 可選功能：

    • 如果沒有標籤，組件不會顯示任何內容
    • 可以只使用 tags 或只使用 keywords
    • 也可以兩者都使用

使用場景​

場景 1：分類標籤​

tags:
  - 產品文檔
  - 使用指南
  - 2026

場景 2：主題標籤​

tags:
  - 競品分析
  - 市場研究
  - 設計建議

場景 3：混合使用​

tags:
  - 產品文檔
  - 使用指南
keywords:
  - 快速開始
  - 常見問題
  - 故障排除

樣式自訂​

標籤的樣式可以在 src/components/Tags/styles.module.css 中自訂：

  • 標籤顏色
  • 標籤大小
  • 間距
  • 深色模式樣式

搜尋功能​

標籤中的關鍵字也會被搜尋功能索引，方便使用者透過標籤找到相關文檔。

相關文檔：