小編精選 - 技術文章翻譯 · 10月08日

你的 GitHub README 不是個人檔案，而是店面。（這是我採用的 5 個規則）

Description:「我不再把 GitHub 個人檔案當成裝飾品來美化，而是把它當成產品頁來上線。四個應用程式、四個下載按鈕、零小工具。」

圖片說明

我[停止 / 花了一個週末]把 GitHub 個人檔案當成履歷，而是開始把它當成一個產品頁。

現在，陌生人打開它時，甚至在看完我的名字之前，就能下載我四個應用程式中的其中一個。

👉 線上版： github.com/Akhouri-Anmol-Kumar

圖片說明

致謝：把我的個人檔案從徽章推進到下一個層級的靈感，來自 Giorgi Kobaidze 的 cyberpunk-console 貼文。請去看看。

每個「很厲害」個人檔案的問題

打開十個熱門的個人檔案 README，你會看到一模一樣的內容：

一整牆的徽章
顯示 commit 數量的統計卡片
一行「Hi 👋 I'm ___」
一條蛇在吃你的貢獻圖表

這些都是裝飾。它們都沒有回答每個訪客在前三秒內最想知道的問題：

「我現在能從這個人身上得到什麼？」

我開發桌面應用程式：ATLOCK、APIC、ANOTE 和 ACALCU。所以我問了自己另一個問題：

如果我的 README 看起來像 App Store 的商品頁，會怎樣？

店面型 README 的 5 條規則

規則 1：3 秒下載測試

如果有人在進站後 3 秒內無法下載你最好的作品，這個頁面就失敗了。

所以我的每個應用程式都有自己的卡片，而且每張卡片下方都直接放一個下載按鈕，連到實際的 .zip 發行檔。沒有「查看發行版本」，也不用找半天。

<td align="center">
  <a href="https://github.com/USER/APP">
    <img src="assets/app_card.svg" width="408" alt="APP">
  </a><br>
  <a href="https://github.com/USER/APP/releases/download/TAG/APP.zip">
    <img src="https://img.shields.io/badge/⬇%20DOWNLOAD%20APP-B8935F?style=for-the-badge&labelColor=8a6c3f&logo=windows&logoColor=white" height="38">
  </a>
</td>

上方是卡片，下方是動作。這跟商店商品頁的模式一樣。

規則 2：選一種金屬色，然後永遠只用它

我的顏色是金色：#B8935F 作為亮色，#8a6c3f 作為陰影。

環形燈 logo、章節標題、按鈕和卡片邊框都用這個色系。因為每個元素共享同一套配色，整個頁面看起來像是經過設計，而不是東拼西湊。

徽章之所以看起來廉價，是因為它們一次用了太多顏色。

規則 3：全站統一寬度

我個人檔案裡每個全寬圖片都是 830px。這就是整個版面系統。

沒有任何一個元素比旁邊的稍寬或稍窄，所以頁面看起來像單欄，而不是一堆小工具。應用程式卡片是 408px，剛好是兩張卡片加上一個間距，仍然能放進同樣的 830px 寬度裡。

如果你只打算從這篇文章抄一條規則，就抄這條。

規則 4：章節名稱像路徑一樣命名

我的標題不是「關於我」和「專案」。它們是：

~/links
~/apps
~/status
~/stack

這幾乎不需要成本，卻能在半秒內讓開發者知道，這頁背後的人是個終端機使用者。它也讓頁面更容易掃讀，因為每個標題看起來都一樣，而且位置也一致。

規則 5：把你的宣言做成設計元素，而不是一段文字

就在頁面的正中央，我放了一個橫幅：

零遙測。零雲端。零訂閱。零廣告。

這不是自我介紹的一行文字，而是整個產品理念，以全寬圖片的形式呈現。頁面最後則用一句話收尾：

你的電腦。你的資料。你的掌控。

訪客不會記得條列清單，但會記得一句他們可以重複的話。

「不要小工具」的決定

我做了一個很硬的選擇：我頁面上的每個視覺元素都放在我自己的 repo 裡。

沒有來自別人伺服器的統計卡片。沒有免費服務睡著就消失的連勝計數器。沒有第三方改了網址就失效的圖片。

我的卡片、標題、主視覺和頁尾全部都是 /assets 裡的 SVG，而唯一外部使用的只有下載徽章。（如果我哪天連這個都想移除，也可以換成我自己的 SVG。）

有兩個細節很重要：

圖片一律使用絕對的 raw.githubusercontent.com 網址，所以即使 README 被複製、鏡像或在別處預覽，仍然可以正常顯示。
所有內容都有替代文字，包含那個宣言橫幅，因此這個頁面對螢幕閱讀器友善，也適合圖片載入失敗的人。

一眼看懂的結構

[ 環形燈 logo ]
[ 主視覺：whoami ]
[ ~/links  → Website · Blog · LinkedIn · Peerlist · Instagram ]
[ ~/apps   → 2×2 卡片網格，每張卡片都有一個 DOWNLOAD 按鈕 ]
[ ~/status → ZERO telemetry 橫幅 ]
[ ~/stack  → 技術堆疊 ]
[ footer   → "你的電腦。你的資料。你的掌控。" ]

只有六個章節，而且每個應用程式只有一個動作。頁面上沒有任何東西只是為了填滿空間。

挑戰來了。你的個人檔案只有一個任務。找出那個任務，然後把它變成一個按鈕。