GitHub 卡片與開發者組件

想在 GitHub 個人主頁的 README 或 Notion 作品集裡展示項目？倉庫卡片顯示簡介、語言、Star 和 Fork 數，貢獻熱力圖顯示過去一年的提交和連續天數，統計卡片匯總 Star、倉庫數、追蹤者和常用語言，都能一鍵複製到 README。

README 頂部可以放動態橫幅、打字機標題或技術棧標籤，也有「Hi」打招呼貼紙和狀態貼紙。另外還有 Hacker News 使用者卡片和 Qiita / Zenn / note 名片。

組件（4）

• GitHub 儲存庫卡片 — 展示儲存庫簡介、語言、Star 與 Fork 數，可一鍵複製到 README
  
• GitHub 貢獻熱力圖 — 過去一年的 GitHub 貢獻日曆、總貢獻與連續天數，可一鍵複製到 README
  
• GitHub 統計卡片 — 展示 GitHub 帳號的 Star、儲存庫、關注者與常用語言，可一鍵複製到 README
  
• HN 使用者卡片 — 展示一位 Hacker News 使用者的 karma、註冊時間、簡介和最近的貼文，填寫使用者名稱即可
  

動態圖示（2）

• 打招呼貼紙 — 一隻會揮手的小手配上大大的「Hi / 你好」和你的名字，放在 GitHub README 或 Notion 主頁開頭熱情打個招呼
  
• 狀態貼紙 — 一張會呼吸的狀態貼紙：開放求職、正在搬磚、休假中、公開構建中……也能自訂文字和表情，放進 GitHub README 或 Notion 主頁
  

動態封面（3）

• README 頭圖橫幅 — 為 GitHub README 或 Notion 頁面做一張會動的頭圖：漸變流光大標題配一句標語，波浪或漂浮圖形緩緩流動，深淺色頁面都好看
  
• 技術棧展示 — 輸入你會的技術，自動排成一排排帶品牌色的圓角標籤並輕輕浮動，放在 GitHub README 或 Notion 主頁展示你的技術棧
  
• 打字機標題 — 多行文字像打字機一樣逐字打出、停留、刪除並循環播放，配閃爍游標，放在 GitHub README 頂部做自我介紹或專案標語
  

三步放進 Notion

1. 選一個組件：點卡片進入詳情，再點「建立組件」。需要登入，用郵箱收一個驗證碼就能註冊。
2. 按自己的需要設定：在編輯器裡改文字、顏色、尺寸等選項，右側預覽會實時變化。
3. 複製連結，嵌入 Notion：點「複製連結」，在 Notion 頁面輸入 /embed 並貼上（也可以直接貼上連結後選「嵌入」），拖動邊角調整大小。

瀏覽全部組件

常見問題

為什麼 README 裡要用圖片連結？

GitHub 的 README 不允許嵌入網頁（iframe），只能顯示圖片，所以 GitHub 卡片、橫幅這類組件都提供圖片連結，直接用 Markdown 圖片語法引用即可。

這些組件免費嗎？

本頁 9 個組件都免費。登入後就能建立，免費帳號可建立的數量有上限，Pro 不限。

在 Notion 手機版和桌面版裡能顯示嗎？

能。組件是普通網頁嵌入，Notion 網頁版、桌面端和手機 App 都會顯示，設備需要聯網。

組件裡的文字是什麼語言？深色模式呢？

組件內容會按訪客瀏覽器的語言顯示簡體中文、繁體中文、英文或日文；大多數組件會跟隨系統自動切換淺色 / 深色。

除了 Notion 還能用在哪裡？

任何支援嵌入網頁的地方都可以，例如 Obsidian、FlowUs、Wolai，或者你自己的網站（用 iframe）。

相關主題

資訊與資料 · 社交媒體 · 文字與介紹封面 · 效率工具

全部主題