又到了一年一度折腾自己 Github 主页的时候了，这篇文章就以我的主页为例，讨论一下各种有趣的装饰小工具和途中遇到的坑。
建立自述文件#
新建一个和你的 Github 用户名同名的仓库（大小写要一致），勾选 Public，勾选 Add a README file，并点击最下方的 Create repository 按钮以创建：
稍等片刻，就会进入到创建好的仓库：
接下来就可以在此仓库的 README.md 文件上配置我们的装饰小工具或写一段自我介绍。
🧪貢獻圖貪吃蛇#
利用🔗snk在自述文件上展示貢獻貪吃蛇動畫，且每天自動更新數據。
創建文件#
點擊 Create new file 按鈕：
將下列路徑複製到文件名文本框內，會自動識別：
.github/workflows/main.yml
並將下列代碼複製到下邊的大文本框內（代碼也可參考🔗main.yml），不需要任何改動，並點擊 Commit changes 按鈕：
name: generate animation
on:
# run automatically every 2 hours
schedule:
- cron: "0 */2 * * *"
# allows to manually run the job at any time
workflow_dispatch:
# run on every push on the master branch
push:
branches:
- master
jobs:
generate:
permissions:
contents: write
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
# generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
- name: generate github-contribution-grid-snake.svg
uses: Platane/snk/svg-only@v3
with:
github_user_name: ${{ github.repository_owner }}
outputs: |
dist/github-contribution-grid-snake.svg
dist/github-contribution-grid-snake-dark.svg?palette=github-dark
# push the content of <build_dir> to a branch
# the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page
- name: push github-contribution-grid-snake.svg to the output branch
uses: crazy-max/ghaction-github-pages@v3.1.0
with:
target_branch: output
build_dir: dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
編輯自述文件#
回到倉庫主頁，點擊 Edit README：
可以看到已經有一些預置的自我介紹模版，這裡我們暫且先不管，因為被註釋掉了，實際也不會顯示出來：
將下列代碼複製到文本框內，需要將用戶名部分替換成你自己的（也就是替換其中所有的 DevJayson），並點擊 Commit changes 按鈕。這段代碼的目的是：加載貪吃蛇動畫，且貪吃蛇的暗亮風格與你的 Github 的暗亮風格進行自動適配。
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake.svg">
<img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake.svg">
</picture>
此時還看不到貪吃蛇，要去手動運行一下（因為設置的是每 2 小時更新一下），之後就是全自動了。
點擊 Action：
點擊 generate animation，點擊 Run workflow：
稍等片刻，顯示運行成功，再次回到倉庫主頁就會看到貪吃蛇動畫已被加載：
注：生成的貪吃蛇動畫文件在倉庫的
output分支存放：
🧪部落格文章同步#
如果你有部落格網站，且網站帶有 RSS 功能，才可配置此工具
利用🔗blog-post-workflow在自述文件上展示最近幾篇部落格文章。
創建文件#
同樣回到倉庫主頁，點擊 Create new file：
將下列路徑複製到文件名文本框內：
.github/workflows/blog-post-workflow.yml
將下列代碼複製到下邊的大文本框內，需要改動最後一行的 feed_list 的內容為你自己網站的 RSS 鏈接（例如：https://realyujie.xlog.app/feed），並點擊 Commit changes 以完成創建。
更多構建參數請參考🔗這裡，包括顯示文章數量、顯示主題等等。
name: Latest blog post workflow
on:
schedule: # Run workflow automatically
- cron: '0 */2 * * *' # Runs every hour, on the hour
workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:
contents: write # To write the generated contents to the readme
jobs:
update-readme-with-blog:
name: Update this repo's README with latest blog posts
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Pull in blog's posts
uses: gautamkrishnar/blog-post-workflow@v1
with:
feed_list: "https://realyujie.xlog.app/feed"
編輯自述文件#
再次回到倉庫主頁，點擊 Edit README：
將下列內容放置在 README 中，程序會自動抓取文章標題、鏈接等並顯示其中，點擊 Commit changes ：
📕 **Latest Blog Posts**
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
此時還看不到文章列表，同樣要先要去手動運行一下。點擊 Action：
點擊 Latest blog post workflow，點擊 Run workflow：
稍等片刻，運行成功，回到倉庫主頁，完美顯示文章列表：
其它設置#
進入倉庫設置 Settings，點擊 Actions -> General。
頁面拉到最底部，找到 Workflow permissions，選項改為 Read and write permissions，勾選 Allow GitHub Actions to create and approve pull requests，並點擊保存 Save：
至此，此工具也配置完畢。回到 Github 個人主頁，即可顯示剛剛配置的兩個小工具：
為了寫教程，此篇文章使用的是博主的 Github 小號配置的。
如果你的開源貢獻不多，那麼貢獻圖也會和博主小號一樣，可能只顯示幾個點或者壓根沒有，慢慢豐富貢獻之後，就會越來越好看。
其它#
還記得開始被註釋掉的自我介紹嗎，可以取消註釋，並適當修改以顯示，可以參考博主大號的🔗自述文件。