在學術研究和科技寫作中，我們經常需要引用和展示 DOI 文獻資訊。傳統的文本引用雖然標準，但在數位化時代顯得有些枯燥。今天要介紹的這個開源專案 React DOI Card，為我們提供了一種全新的、更加美觀和直觀的文獻展示方式。
🎯 專案概覽#
React DOI Card 是一個完全獨立的 React 元件庫，專門用於生成美觀的 DOI 文獻資訊卡片。與傳統的文獻引用方式不同，它能夠自動獲取 DOI 對應的文獻元數據，並以精美的卡片形式展現，讓學術內容的展示更加現代化和用戶友好。
核心特性一覽#
🌐 完全獨立：不依賴任何本地 API，直接調用外部 DOI 服務獲取數據
✅ 雙語支持：同時支持英文文獻（CrossRef API）和中文文獻（中國 DOI 解析）
✅ TypeScript 友好：完整的 TypeScript 支持和類型定義
✅ 智能文本處理：所有文本內容支持長文本自動換行
✅ 現代化設計：基於 Microsoft Fluent Design 的美觀介面
✅ 智能解析：自動處理完整 DOI 連結或純 DOI 碼
✅ 狀態管理：內置完善的加載、錯誤、成功狀態處理
✅ 高度可定制：支持 CSS 類名和內聯樣式自定義
✅ 輕量級實現：零額外依賴，僅依賴 React
🚀 使用場景#
這個專案特別適合以下場景：
- 學術個人首頁：在個人網站上展示發表的論文
- 研究專案文檔：在專案 README 中引用相關文獻
- 部落格文章：在技術部落格中引用學術論文
- 在線簡歷：展示學術成果和發表記錄
- 研究報告：在線研究報告中的文獻引用
💻 快速體驗#
安裝非常簡單，支持所有主流的包管理器：
# 使用 npm
npm install react-doi-card
# 使用 yarn
yarn add react-doi-card
# 使用 bun
bun add react-doi-card
基礎使用同樣簡潔明瞭：
import { DoiCard } from 'react-doi-card';
function App() {
return (
<div>
{/* 英文文獻 */}
<DoiCard doi="10.1038/nature12373" lang="en" />
{/* 中文文獻 */}
<DoiCard doi="10.11821/dlxb202001001" lang="zh" />
{/* 自定義樣式 */}
<DoiCard
doi="10.1038/nature12373"
className="my-custom-card"
style={{
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
borderRadius: '12px'
}}
/>
</div>
);
}
demo：https://doicard.gankun.cn.ma/:::div{style="max=width: 300px"}
:::
🎨 設計亮點#
專案的設計非常用心，主要體現在：
- 視覺設計：採用 Microsoft Fluent Design 設計語言，簡潔現代
- 資訊層次：清晰的資訊架構，標題、作者、期刊、年份等資訊層次分明
- 響應式佈局：適配不同螢幕尺寸，保持良好的視覺效果
- 狀態反饋：加載態、錯誤態都有相應的視覺反饋
- 無障礙設計：考慮了可訪問性，支持螢幕閱讀器
🌟 技術實現#
從技術角度來看，這個專案有幾個值得關注的點：
雙語支持的實現#
專案巧妙地集成了兩套 API：
- 英文文獻：使用 CrossRef API 獲取國際期刊的元數據
- 中文文獻：使用中國 DOI 解析服務，很好地解決了中文文獻的展示問題
狀態管理#
使用自定義 Hook useDoiData 來管理數據獲取狀態：
const { data, loading, error } = useDoiData(doi, lang);
TypeScript 支持#
完整的類型定義，提供良好的開發體驗：
interface DoiCardProps {
doi: string;
lang?: 'en' | 'zh';
className?: string;
style?: React.CSSProperties;
}
🔗 多種使用方式#
專案不僅提供了 React 元件，還提供了 API 服務，可以通過 HTTP 請求直接獲取 SVG 格式的卡片：
這種方式特別適合在 Markdown 文檔、GitHub README 等場景中使用。
🚀 部署和集成#
專案支持一鍵部署到 Vercel：
https://vercel.com/new/clone?repository-url=https://github.com/Riceneeder/doi_stats_card
部署後，你就擁有了自己的 DOI 卡片生成服務，可以在任何支持圖片的地方使用。
🎯 應用實例#
在實際使用中，你可以這樣在 GitHub README 中展示你的論文：
## 我的發表論文
### 2024年發表
### 2023年發表
或者在個人部落格中引用相關文獻：
## 相關工作
我們的研究基於以下重要工作：
這篇論文為我們提供了理論基礎...
🔮 未來展望#
這個專案展現了學術內容數位化展示的新可能。隨著開源社區的參與，我們可以期待：
- 更多數據源：支持更多的學術數據庫和 DOI 服務
- 主題定制：更多的視覺主題和樣式選項
- 互動功能：添加點擊跳轉、引用統計等功能
- 移動端優化：更好的移動端顯示效果
- 國際化：支持更多語言的文獻展示
📝 總結#
React DOI Card 是一個非常實用的開源專案，它解決了學術文獻展示的痛點：
- 對開發者友好：簡單的 API，完整的 TypeScript 支持
- 對用戶友好：美觀的視覺效果，清晰的資訊展示
- 部署簡單：一鍵部署，即開即用
- 使用靈活：支持 React 元件和 HTTP API 兩種方式
無論你是學者、部落客、還是開發者，如果需要在數位化內容中引用學術文獻，這個專案都值得一試。它不僅提升了內容的視覺效果，也讓學術交流變得更加現代化。
專案地址：
如果你覺得這個專案有用，不妨給它一個 ⭐ Star，也歡迎貢獻代碼和想法！