光有網站骨架還不夠，我們需要讓「文章」真的能被讀取與渲染。Markdown 是部落格或技術筆記最常用的格式，能讓文字排版（標題、粗體、程式碼區塊）保持乾淨又好看。

準備文章 Markdown 檔案

在 public/articles/ 底下，建立幾個文章檔案，例如：

📂 public/articles/Day1.md

markdown
Day 1 : 30 天用 AI 打造專屬投資分析網站！
以下省略...

接著就可以把 Day 1 ~ Day 30 的內容都存成 .md
記得要放在public的資料夾內，不然可能會讀不到檔案內容!

安裝 Markdown 解析器

在專案目錄執行：

bash
npm install react-markdown

動態載入 Markdown

修改 App.jsx，讓選取的文章自動讀取對應的 .md 檔案。

jsx
import { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";

const articles = Array.from({ length: 30 }, (_, i) => `Day ${i + 1}`);

function App() {
  const [selectedDay, setSelectedDay] = useState("Day 1");
  const [mode, setMode] = useState("article"); 
  const [content, setContent] = useState("");

  // 當切換文章時，自動載入對應 Markdown
  useEffect(() => {
    fetch(`/articles/${selectedDay.replace(" ", "")}.md`)
      .then((res) => res.text())
      .then((text) => setContent(text))
      .catch(() => setContent("# 找不到文章 😅"));
  }, [selectedDay]);

  return (
    <div className="flex h-screen">
      {/* 側邊欄 */}
      <div className="w-64 bg-gray-800 text-white p-4 overflow-y-auto">
        <h2 className="text-xl font-bold mb-4">AI 投資展示館</h2>
        <ul>
          {articles.map((day) => (
            <li
              key={day}
              className={`p-2 cursor-pointer hover:bg-gray-700 ${
                selectedDay === day ? "bg-gray-600" : ""
              }`}
              onClick={() => setSelectedDay(day)}
            >
              {day}
            </li>
          ))}
        </ul>
      </div>

      {/* 主畫面 */}
      <div className="flex-1 p-6 overflow-y-auto">
        <h1 className="text-2xl font-bold mb-4">{selectedDay}</h1>

        {/* 模式切換 */}
        <div className="mb-4">
          <button
            onClick={() => setMode("article")}
            className={`mr-2 px-4 py-2 rounded ${
              mode === "article" ? "bg-blue-500 text-white" : "bg-gray-200"
            }`}
          >
            文章
          </button>
          <button
            onClick={() => setMode("demo")}
            className={`px-4 py-2 rounded ${
              mode === "demo" ? "bg-blue-500 text-white" : "bg-gray-200"
            }`}
          >
            Demo
          </button>
        </div>

        {/* 顯示內容 */}
        {mode === "article" ? (
          <div className="prose max-w-none">
            <ReactMarkdown>{content}</ReactMarkdown>
          </div>
        ) : (
          <div className="border p-4 rounded bg-gray-100">
            {selectedDay} 的 Demo 還沒加進來 😎
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

實際效果

當點選到第一天時，下面就會跑出文章。

由於Demo尚未加入，所以會先顯示這串文字。

結語

今天我們把網站上，點選 Day 1 時能夠成功顯示 Day1.md 的文章，並且點選 Demo 模式時顯示一個「即將上線」的提示。這樣就能輕鬆把所有文章搬進來了 🎉
👉 明天（Day 23），我們要開始讓「Demo 模式」有內容，把之前做的股價查詢 + AI 分析搬到網站裡，讓它能直接互動。