輔仁大學醫學資訊與創新應用學士學位學程副教授的個人學術網站
🌐 網站連結: https://chihuah.github.io <新版個人學術網頁>
🌐 網站連結: https://sites.google.com/view/chihuah-fju/home <舊版個人學術網頁，於2025/06之後停止更新>
這是董其樺副教授的個人學術網站，展示其在智慧生物資訊領域的研究成果、教學經歷、學術發表等內容。網站採用現代化的響應式設計，提供優秀的使用者體驗。
- 🏠 個人簡介 - 完整的學術背景和研究領域介紹
- 📚 研究成果 - 23 篇論文展示，包含 13 篇 SCI 期刊
- 🎓 教學經歷 - 課程資訊和指導專題
- 👥 實驗室成員 - 指導學生和研究團隊（包含畢業生）介紹
- 🏆 獲獎與證照 - 得獎與證照等獎項
- 📱 響應式設計 - 完美支援桌面、平板、手機等各種設備
- 🌐 語言國際化 - 主要提供英文介面
- React 18 - 現代化的前端框架
- TypeScript - 型別安全的 JavaScript
- Vite - 快速的建置工具
- Tailwind CSS - 實用優先的 CSS 框架
- pnpm - 高效能的套件管理器
- ESLint - 程式碼品質檢查
- Git - 版本控制系統
- GitHub Pages - 免費的靜態網站託管
- GitHub Actions - 自動化部署流程
- Node.js 18+
- pnpm (推薦) 或 npm
-
克隆專案
git clone https://github.com/Chihuah/Chihuah.github.io.git cd Chihuah.github.io -
安裝依賴
# 使用 pnpm (推薦) pnpm install # 或使用 npm npm install
-
啟動開發服務器
# 使用 pnpm pnpm run dev # 或使用 npm npm run dev
-
開啟瀏覽器
前往 http://localhost:5173 查看網站
| 指令 | 說明 | 用途 |
|---|---|---|
pnpm run dev |
啟動開發服務器 | 本機開發和即時預覽 |
pnpm run build |
建置生產版本 | 產生優化的靜態檔案 |
pnpm run preview |
預覽建置結果 | 本機測試生產版本 |
pnpm run lint |
檢查程式碼品質 | 確保程式碼符合規範 |
Chihuah.github.io/
├── public/ # 靜態資源
│ ├── logo_*.png # Logo檔案
│ ├── vite.svg # Vite圖示
│ └── 404.html # 404錯誤頁面
├── src/ # 原始碼
│ ├── assets/ # 資源檔案
│ │ ├── logo_*.png # Logo檔案
│ │ ├── profile.jpg # 個人照片
│ │ └── react.svg # React圖示
│ ├── components/ # React 組件
│ │ ├── layout/ # 布局組件
│ │ │ ├── Footer.tsx # 頁尾組件
│ │ │ ├── Header.tsx # 頁首組件
│ │ │ └── Layout.tsx # 主布局組件
│ │ └── ui/ # UI組件庫（shadcn/ui）
│ │ └── *.jsx # 50+ 個UI組件
│ ├── data/ # 靜態資料
│ │ ├── activities.ts # 活動資料（雙語支援）
│ │ └── personal.ts # 個人資訊配置
│ ├── hooks/ # React Hooks
│ │ ├── use-mobile.ts # 移動端檢測Hook
│ │ └── useSEO.ts # 動態管理網頁的 SEO 元素
│ ├── lib/ # 工具函數
│ │ └── utils.ts # 通用工具函數
│ ├── pages/ # 頁面組件
│ │ ├── About.tsx # 關於頁面
│ │ ├── Activities.tsx # 活動頁面
│ │ ├── Home.tsx # 首頁
│ │ ├── Members.tsx # 成員頁面
│ │ ├── Publications.tsx # 論文頁面
│ │ ├── Research.tsx # 研究頁面
│ │ └── Teaching.tsx # 教學頁面
│ ├── types/ # TypeScript 型別定義
│ │ └── index.ts # 型別定義檔案
│ ├── App.tsx # 主應用程式組件
│ ├── App.css # Tailwind CSS v4 配置
│ ├── index.css # 全域CSS
│ └── main.tsx # 應用程式入口點
├── dist/ # 建置輸出目錄
├── .github/ # GitHub 配置
│ └── workflows/ # GitHub Actions 工作流程
├── components.json # shadcn/ui 組件配置
├── deploy-github-pages.sh # 部署腳本
├── eslint.config.js # ESLint 配置
├── index.html # HTML 入口檔案
├── jsconfig.json # JavaScript 配置
├── package.json # 專案配置和依賴
├── tsconfig.json # TypeScript 配置
├── tsconfig.node.json # TypeScript Node 配置
├── vite.config.js # Vite 配置
└── README.md # 專案說明文件
編輯 src/data/personal.ts 檔案來更新個人資訊：
export const personalInfo = {
name: "您的姓名",
title: "您的職稱",
email: "your.email@example.com",
// ... 其他資訊
};在 src/pages/Publications.tsx 中添加或修改論文資料：
const publications: Publication[] = [
{
title: "論文標題",
authors: [作者列表],
journal: "期刊名稱",
year: 2024,
// ... 其他資訊
},
];然而，由於資料與輸出未分離， publications 現直接寫在組件中，應把資料（例如論文、活動）拆成獨立檔案，更新會更容易。未來會將研究成果資料改至 src/data/personal.ts 來紀錄與管理。
✅ 已實現資料與輸出分離！
活動資料已集中管理在 src/data/activities.ts 檔案，支援中英文雙語內容。
export interface Activity {
date: string // 格式：'YYYY-MM'
type: ActivityType // 'research' | 'teaching' | 'publication' 等
title: string // 中文標題
titleEn: string // 英文標題
description: string // 中文描述
descriptionEn: string // 英文描述
details?: string // 中文詳細說明（選填）
detailsEn?: string // 英文詳細說明（選填）
location?: string // 地點（選填）
participants?: string[] // 參與者（選填）
funding?: string // 經費（選填）
}在 src/data/activities.ts 的 activitiesData 陣列開頭新增：
export const activitiesData: Activity[] = [
// 新增的活動（放在最前面）
{
date: '2025-12',
type: 'collaboration',
title: '新產學合作計畫啟動',
titleEn: 'New Industry Collaboration Project',
description: '與XX公司合作進行AI醫療應用研究',
descriptionEn: 'AI healthcare application research with XX Company',
funding: 'NTD 1,000,000'
},
// ... 現有活動
]更新 activities.ts 後，以下頁面會自動同步：
- Home.tsx - Latest News 區塊顯示最新 3 則活動（英文）
- Activities.tsx - 完整活動列表（中英文並列）
| 類型 | 說明 | 顯示顏色 |
|---|---|---|
publication |
論文發表 | 淡青色 |
research |
研究計畫 | 淡藍色 |
teaching |
教學活動 | 淡靛藍色 |
collaboration |
產學合作 | 淡橘色 |
graduation |
學生畢業 | 淡綠色 |
speech |
學術演講 | 淡紫色 |
award |
獲獎 | - |
- 按時間倒序排列 - 最新的活動放在陣列最前面
- 完整雙語 - 務必提供
title/titleEn和description/descriptionEn - 統一日期格式 - 使用
YYYY-MM格式（例如：'2025-12'） - 選擇正確類型 - 依據活動性質選擇適當的
type
- 顏色主題: 編輯
src/App.css中的@theme inline區塊和 CSS 變數 - 布局樣式: 修改
src/components/layout/下的組件 - 頁面內容: 編輯
src/pages/下的對應頁面
本專案已配置 GitHub Actions 自動部署：
-
推送程式碼到 main 分支
git add . git commit -m "Update website content" git push origin main
-
GitHub Actions 自動執行
- 安裝依賴
- 建置專案
- 部署到 GitHub Pages
-
網站自動更新
- 通常在 2-5 分鐘內完成
- 可在 Actions 頁面查看部署狀態
如果需要手動部署：
# 建置專案
pnpm run build
# 部署到 GitHub Pages
# (需要額外配置 gh-pages 套件)- 🏠 首頁 - 個人簡介和研究亮點
- 👤 關於我 - 詳細的學術背景
- 📚 研究成果 - 論文發表和研究項目
- 🎓 教學經歷 - 課程教學與指導專題
- 👥 實驗室成員 - 曾指導碩士畢業生
- 📞 聯絡資訊 - 聯絡方式和辦公室資訊
- 📱 響應式設計 - 支援各種螢幕尺寸
- ⚡ 快速載入 - 優化的效能表現
- 🔍 SEO 友善 - 搜尋引擎最佳化
- ♿ 無障礙支援 - 符合網頁無障礙標準
- 🌙 現代化 UI - 簡潔專業的設計風格
本專案採用 MIT 授權條款 - 詳見 LICENSE 檔案
董其樺 (Chi-Hua Tung)
- 📧 Email: chihua.tung.fju@gmail.com
- 🏢 辦公室: 輔仁大學聖言樓 SF212 室
- 🌐 網站: https://chihuah.github.io
感謝以下技術和服務：
- React - 前端框架
- TypeScript - 程式語言
- Tailwind CSS - CSS 框架
- Vite - 建置工具
- GitHub Pages - 網站託管
- GitHub Actions - 自動化部署