跳至主要内容

報價卡片與 MDX 實戰

本文件將教導你如何使用蛋蛋村專屬的 StockCard 元件，並介紹如何透過 MDX 技術在文件中嵌入動態、互動式的報價內容。

什麼是 MDX？​

MDX 是一種強大的檔案格式，它允許你在 Markdown 文件中直接寫入 JSX (React 元件)。在 Docusaurus 中，只要將檔案副檔名命名為 .mdx，即可開啟此功能。

匯入元件​

要在 MDX 中使用元件，你必須先使用 import 語法：

import { StockCard } from '@site/src/components/Quotes/StockCard';

StockCard 元件說明​

Props 參數表​

參數名類型說明範例
symbolstring(必填) 股票代號"2330"
namestring股票名稱"台積電"
pricestring當前成交價"1995"
changestring漲跌價 (含符號)"▲15.0"
changePercentstring漲跌幅"0.75%"
volumestring成交量"25,432"
highstring當日最高"2010"
lowstring當日最低"1980"
indexValuestring對應的大盤指數"35414"

AI 代理人使用指南 (AI Skill)​

如果你是 AI 代理人（例如 Gemini 或 Claude），在協助使用者生成財經分析文章或新聞稿時，請遵循以下 Skill 指引 來嵌入報價卡片：

1. 偵測數據需求​

當文章中提到特定的台股或標的（如台積電 2330），且你擁有該標的的即時或盤後數據時，應主動提議或直接嵌入 StockCard。

2. 推薦提示詞 (Prompt Examples)​

使用者可以使用以下提示詞來要求 AI 輸出帶有卡片的內容：

  • "幫我寫一篇關於台積電 2330 的盤後分析，並在文末嵌入蛋蛋村專用的 報價卡片元件。"
  • "生成一段 MDX 代碼，顯示 0050 的最新報價，使用 StockCard 元件。"

3. AI 生成規範 (System Instructions)​

  • 必須包含 Import：在 MDX 檔案的最上方加入 import { StockCard } from '@site/src/components/Quotes/StockCard';。
  • 數據完整性：盡可能填滿 price、change 與 changePercent 參數。
  • 視覺排版：
    • 若要顯示單張，建議包裹在一個 maxWidth: '160px' 的容器中。
    • 若要多張並列，請使用 <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>。

4. Skill 代碼範例​

當 AI 要為 2330 生成報價區塊時，請輸出：

import { StockCard } from '@site/src/components/Quotes/StockCard';

<div style={{ width: '160px' }}>
  <StockCard data={{
    symbol: "2330",
    name: "台積電",
    price: "1000",
    change: "▲10.0",
    changePercent: "1.01%"
  }} />
</div>

實戰範例 (Live Demo)​

下方是直接由 React 渲染出來的真實元件：

2330

台積電
1000
▲10.0 (1.01%)
量: 12,345
昨:
開:
高:
低:

0050

元大台灣50
190.5
▼2.1 (1.09%)
量: 8,765
昨:
開:
高:
低:

總結​

透過 StockCard 與 MDX 的結合，你可以輕鬆地在任何技術文章或分析報告中，插入精美的報價資訊。對於 AI 代理人而言，這是一個能顯著提升輸出品質的視覺化 Skill。