[{"data":1,"prerenderedAt":783},["ShallowReactive",2],{"\u002Fbefore\u002Fgithub-diy":3,"surround-\u002Fbefore\u002Fgithub-diy":777},{"id":4,"title":5,"body":6,"categories":740,"date":742,"description":743,"draft":744,"extension":745,"image":746,"meta":747,"navigation":748,"path":752,"permalink":753,"published":753,"readingTime":754,"recommend":759,"references":760,"seo":767,"sitemap":768,"stem":769,"tags":770,"type":774,"updated":775,"__hash__":776},"content\u002Fposts\u002Fbefore\u002Fgithub-diy.md","GitHub 首页 DIY：花里胡哨指数++",{"type":7,"value":8,"toc":715},"minimark",[9,16,20,23,26,29,37,45,49,52,59,68,71,74,82,85,98,113,116,124,127,130,134,140,151,155,158,162,169,180,184,191,195,201,204,208,214,218,221,224,228,234,237,241,247,250,254,260,267,271,274,281,285,291,294,298,304,307,326,329,331,335,338,345,348,367,370,374,377,380,383,392,395,401,408,412,415,418,421,428,431,437,440,460,463,472,476,479,483,490,493,497,503,506,537,540,547,549,555,566,570,573,576,586,589,595,598,604,607,609,613,616,619,635,638,656,659,661,664,667,672,677,680,686,689,692,695,698,706,709],[10,11,12],"quote",{},[13,14,15],"p",{},"写代码之外，程序员还有一种稳定的快乐来源：把自己每天会看到的东西，折腾得更顺眼一点。",[17,18,19],"h2",{"id":19},"写在前面",[13,21,22],{},"这个坑其实我早就挖了。",[13,24,25],{},"上学期我只是把 GitHub 首页先“CV”了一版过来，能看是能看，但很多内容并不是自己真正理解之后搭出来的。趁着放假回家时间稍微宽裕一点，我终于把这个坑补上了：重新整理、重新配置、重新踩坑，顺手把 GitHub Profile 这一套也认真收拾了一遍。",[13,27,28],{},"说到底，GitHub 首页 DIY 这件事没什么生产力上的刚需，但它就是很容易让人上头。就像折腾 IDE 主题、挑桌面壁纸、改终端配色一样，很多人都会下意识地想把自己最常待的环境弄得更舒服一点。GitHub 主页也是一样，它不只是一个页面，有时候也是你的公开门面、项目索引，甚至是“我最近在折腾什么”的动态展示板。",[30,31,34],"alert",{"title":32,"type":33},"先说一句大实话","info",[13,35,36],{},"网上关于 GitHub Profile 的系统教程其实不算多。不是因为它难到离谱，而是因为这东西很散：有的是纯 Markdown，有的是第三方图片服务，有的是 GitHub Actions 定时生成数据，还有一堆参数、Token、权限和工作流配置混在一起。真正写起来，确实不太好写。",[13,38,39,40,44],{},"所以这篇文章更像一份",[41,42,43],"strong",{},"我自己折腾完之后的整理笔记","。不求面面俱到，但尽量把我觉得有用、而且确实能直接抄起来用的部分留下来。",[17,46,48],{"id":47},"先看成果再决定要不要折腾","先看成果，再决定要不要折腾",[13,50,51],{},"先放我的 GitHub 主页和完整截图。",[53,54],"link-card",{"description":55,"icon":56,"link":57,"title":58},"我的 GitHub 首页，下面提到的大部分内容都能在这里看到实际效果。","https:\u002F\u002Fgithub.com\u002Ffavicon.ico","https:\u002F\u002Fgithub.com\u002FJJLibra","GitHub Profile",[60,61,63],"folding",{"title":62},"完整截图（建议点开放大看）",[64,65],"pic",{"caption":66,"src":67},"GitHub 首页完整截图","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F03\u002F18\u002F65f83b98c6bcc.jpg",[13,69,70],{},"如果你只是想要一个干净一点的个人主页，那完全没必要像我这样堆这么多东西。说实话，我这版已经有点偏“花里胡哨过量”了。更合理的做法应该是按需取用：你喜欢哪块就加哪块，不喜欢就删，别为了炫技把首页搞成信息瀑布。",[13,72,73],{},"不过如果你喜欢这种折腾感，那 GitHub Profile 的可玩性确实挺高。",[17,75,77,78],{"id":76},"github-首页-diy本质上就是在折腾一个-readmemd","GitHub 首页 DIY，本质上就是在折腾一个 ",[79,80,81],"code",{"code":81},"README.md",[13,83,84],{},"准备工作其实非常简单。",[13,86,87,88,91,92,94,95,97],{},"你只需要新建一个",[41,89,90],{},"和自己 GitHub 用户名同名","的仓库，并勾选初始化 ",[79,93,81],{"code":81},"。GitHub 会自动把这个仓库识别为你的 Profile 仓库，然后这个仓库里的 ",[79,96,81],{"code":81}," 就会显示在你的个人主页顶部。",[60,99,101,105,109],{"title":100},"准备工作示意",[64,102],{"caption":103,"src":104},"创建与用户名同名的仓库","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F01\u002F6592ad6165b65.png",[64,106],{"caption":107,"src":108},"初始化 README 文件","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F01\u002F6592ad5470a5d.png",[64,110],{"caption":111,"src":112},"创建完成后，README 会显示到个人主页","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F01\u002F6592ad70d3030.png",[13,114,115],{},"所以这件事说穿了，其实没那么玄乎：",[10,117,118],{},[13,119,120,121,123],{},"GitHub 首页 DIY，本质上就是对这个特殊仓库里的 ",[79,122,81],{"code":81}," 做排版、做拼接、做自动更新。",[13,125,126],{},"如果你有 HTML、CSS 和 Markdown 的基础，这件事会更顺手；即使不熟，也完全可以从复制现成组件开始，再一点点改成自己的风格。",[128,129],"hr",{},[17,131,133],{"id":132},"第一类玩法不需要-token复制链接就能用","第一类玩法：不需要 Token，复制链接就能用",[13,135,136,137,139],{},"这部分是最适合先上手的。它们基本不依赖 GitHub Actions，也不用你去配 Secret，通常就是改改用户名、主题、颜色参数，然后把图片链接塞进 ",[79,138,81],{"code":81}," 就能显示。",[30,141,144],{"title":142,"type":143},"先提醒一句","warning",[13,145,146,147,150],{},"下面很多示例里用的都是我的用户名 ",[79,148,149],{"code":149},"JJLibra","，你直接替换成自己的用户名就行。",[152,153,154],"h3",{"id":154},"开头打字特效",[13,156,157],{},"这个应该算是最常见、也最容易让人第一眼注意到的组件之一。",[64,159],{"caption":160,"src":161},"循环打字效果","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aaab2744ed0.png",[13,163,164,165,168],{},"我当时用的是 ",[79,166,167],{"code":167},"readme-typing-svg","，它提供了在线 Demo，参数调起来也比较直观，适合一边预览一边改。",[170,171,178],"pre",{"className":172,"code":174,"filename":175,"language":176,"meta":177},[173],"language-html","\u003Ch1 align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fblog.xxfer.cn\u002F\">\n    \u003Cimg src=\"https:\u002F\u002Freadme-typing-svg.demolab.com?font=Fira+Code&pause=1000&width=435&lines=console.log(%22Hello%2C%20World%22);小李今天又在努力变强鸭~&center=true&size=27\">\n  \u003C\u002Fa>\n\u003C\u002Fh1>\n","README.html","html","",[79,179,174],{"__ignoreMap":177},[152,181,183],{"id":182},"github-统计卡片","GitHub 统计卡片",[13,185,186,187,190],{},"这一类我用得最多的还是 ",[79,188,189],{"code":189},"github-readme-stats","，可以直接在 README 里生成统计卡片。",[64,192],{"caption":193,"src":194},"GitHub Stats Card","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aaab9ac49ae.png",[170,196,199],{"className":197,"code":198,"filename":175,"language":176,"meta":177},[173],"\u003Cimg height=\"190px\" width=\"100%\" src=\"https:\u002F\u002Fgithub-readme-stats.vercel.app\u002Fapi?username=JJLibra&theme=radical&show_icons=true&count_private=true\" \u002F>\n",[79,200,198],{"__ignoreMap":177},[13,202,203],{},"同一个项目还可以顺手展示最常用语言：",[64,205],{"caption":206,"src":207},"Most used languages","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aaae64f06cf.png",[170,209,212],{"className":210,"code":211,"filename":175,"language":176,"meta":177},[173],"\u003Cimg height=\"190px\" width=\"100%\" src=\"https:\u002F\u002Fgithub-readme-stats-git-masterrstaa-rickstaa.vercel.app\u002Fapi\u002Ftop-langs\u002F?username=JJLibra&theme=radical&show_icons=true&count_private=true&layout=compact\" \u002F>\n",[79,213,211],{"__ignoreMap":177},[152,215,217],{"id":216},"连续提交奖杯活动图","连续提交、奖杯、活动图",[13,219,220],{},"如果你比较在意“动态展示感”，这几个也挺常见。",[13,222,223],{},"先是连续提交天数：",[64,225],{"caption":226,"src":227},"GitHub Streak","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aab077e84f9.png",[170,229,232],{"className":230,"code":231,"filename":175,"language":176,"meta":177},[173],"\u003Cimg src=\"https:\u002F\u002Fgithub-readme-streak-stats.herokuapp.com\u002F?user=JJLibra&theme=default&hide_border=true\" \u002F>\n",[79,233,231],{"__ignoreMap":177},[13,235,236],{},"再是奖杯墙：",[64,238],{"caption":239,"src":240},"GitHub Profile Trophy","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aaaf1e2d84c.png",[170,242,245],{"className":243,"code":244,"filename":175,"language":176,"meta":177},[173],"\u003Cimg src=\"https:\u002F\u002Fgithub-profile-trophy.vercel.app\u002F?username=JJLibra&theme=juicyfresh&column=9&rank=-U\" \u002F>\n",[79,246,244],{"__ignoreMap":177},[13,248,249],{},"还有活动图：",[64,251],{"caption":252,"src":253},"GitHub Readme Activity Graph","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aab6397a3ff.png",[170,255,258],{"className":256,"code":257,"filename":175,"language":176,"meta":177},[173],"\u003Cimg src=\"https:\u002F\u002Fgithub-readme-activity-graph.vercel.app\u002Fgraph?username=JJLibra&custom_title=Xxfer's%20GitHub%20Activity%20Graph&bg_color=141321&color=A9FEF7&line=626069&point=F8D847&area_color=FE428E&title_color=FE428E&area=true\" \u002F>\n",[79,259,257],{"__ignoreMap":177},[13,261,262,263,266],{},"这些东西的共同特点就是：",[41,264,265],{},"不难，但参数多","。真正花时间的不是“能不能用”，而是“你想把它调成什么样”。",[152,268,270],{"id":269},"徽章访问量和一些杂项","徽章、访问量和一些杂项",[13,272,273],{},"这部分就更偏“装饰”和“补信息”了。",[13,275,276,277,280],{},"比如 ",[79,278,279],{"code":279},"Shields"," 可以生成各种技术栈徽章：",[64,282],{"caption":283,"src":284},"Shields 徽章","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aab76e4ce05.png",[170,286,289],{"className":287,"code":288,"filename":175,"language":176,"meta":177},[173],"\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-CSS3-1572B6?style=flat-square&logo=css3\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-JavaScript-orange?style=flat-square&logo=javascript\" \u002F>\n",[79,290,288],{"__ignoreMap":177},[13,292,293],{},"访问量徽章也很常见：",[64,295],{"caption":296,"src":297},"Visitor Badge","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65aabcfa488e4.png",[170,299,302],{"className":300,"code":301,"filename":175,"language":176,"meta":177},[173],"\u003Cimg src=\"https:\u002F\u002Fkomarev.com\u002Fghpvc\u002F?username=JJLibra&label=Views&color=0e75b6&style=flat\" alt=\"访问量统计\" \u002F>\n",[79,303,301],{"__ignoreMap":177},[13,305,306],{},"还有一些可选的组件，比如 IT 笑话、名人名言、Spotify、社交数据统计之类：",[308,309,310],"card-list",{},[311,312,313,317,320,323],"ul",{},[314,315,316],"li",{},"Joke：随机 IT 笑话",[314,318,319],{},"Quotes：随机名言",[314,321,322],{},"Spotify：最近在听的歌",[314,324,325],{},"社交统计：如 LeetCode 等站点的数据",[13,327,328],{},"这类组件更偏“增味剂”。有没有都不影响主页结构，但加得合适，确实会让页面看起来没那么死板。",[128,330],{},[17,332,334],{"id":333},"第二类玩法需要-github-actions动态数据会更多","第二类玩法：需要 GitHub Actions，动态数据会更多",[13,336,337],{},"到了这一步，GitHub Profile 的玩法就开始从“贴图片链接”升级成“定时生成内容”。",[13,339,340,341,344],{},"原理其实不复杂：",[342,343],"br",{},"\n你配置一个 GitHub Actions 工作流，让它定时运行，生成 SVG、更新 README 或者写回某些文件；而你的 Profile README 再去引用这些文件。这样页面看起来就像在“自动更新”。",[13,346,347],{},"但麻烦也从这里开始了。你会开始接触：",[308,349,350],{},[311,351,352,355,358,361,364],{},[314,353,354],{},"GitHub Actions 工作流",[314,356,357],{},"Secrets \u002F Token",[314,359,360],{},"仓库权限",[314,362,363],{},"定时任务 cron",[314,365,366],{},"README 中的占位注释",[13,368,369],{},"所以这部分我建议别一口气全上，挑最感兴趣的先折腾。",[152,371,373],{"id":372},"_3d-contribution","3D Contribution",[13,375,376],{},"这是把贡献日历做成立体效果的那种玩法。",[64,378],{"caption":373,"src":379},"https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65ab72bf37cc4.png",[13,381,382],{},"原理就是 GitHub Actions 定时生成 SVG，然后 README 去引用这个 SVG。",[170,384,390],{"className":385,"code":387,"filename":388,"language":389,"meta":177},[386],"language-yml","name: 3D Contrib\n\non:\n  schedule:\n    - cron: \"0 21 * * *\"\n  workflow_dispatch:\n\npermissions:\n  contents: write\n  pages: write\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    name: generate-github-profile-3d-contrib\n    steps:\n      - uses: actions\u002Fcheckout@v2\n      - uses: yoshi389111\u002Fgithub-profile-3d-contrib@0.7.0\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          USERNAME: ${{ github.repository_owner }}\n      - name: Commit & Push\n        run: |\n          git config user.name github-actions\n          git config user.email github-actions@github.com\n          git add -A .\n          git commit -m \"generated\"\n          git push\n",".github\u002Fworkflows\u002F3D-contrib.yml","yml",[79,391,387],{"__ignoreMap":177},[13,393,394],{},"README 里引用：",[170,396,399],{"className":397,"code":398,"filename":175,"language":176,"meta":177},[173],"\u003Cimg src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002FJJLibra\u002FJJLibra\u002Fprofile-3d-contrib\u002Fprofile-night-rainbow.svg\" \u002F>\n",[79,400,398],{"__ignoreMap":177},[13,402,403,404,407],{},"这个相对省心，因为它直接用工作流自动提供的 ",[79,405,406],{"code":406},"GITHUB_TOKEN","，不用你额外手搓 Token。",[152,409,411],{"id":410},"snake-contribution","Snake Contribution",[13,413,414],{},"这个就是很多人都玩过的“贪吃蛇吃贡献格子”。",[64,416],{"caption":411,"src":417},"https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65ab7608f3fc9.png",[13,419,420],{},"我当时用的是下面这个工作流：",[170,422,426],{"className":423,"code":424,"filename":425,"language":389,"meta":177},[386],"name: Snake Contrib\n\non:\n  schedule:\n    - cron: \"0 20 * * *\"\n  workflow_dispatch:\n\njobs:\n  generate:\n    runs-on: ubuntu-latest\n    environment:\n      name: GH_TOKEN\n    timeout-minutes: 10\n\n    steps:\n      - name: generate github-contribution-grid-snake.svg\n        uses: aelassas\u002Fsnk\u002Fsvg-only@main\n        with:\n          github_user_name: ${{ github.repository_owner }}\n          outputs: |\n            dist\u002Fprofile-snake-contrib\u002Fgithub-contribution-grid-snake.svg\n            dist\u002Fprofile-snake-contrib\u002Fgithub-contribution-grid-snake-dark.svg?palette=github-dark\n\n      - name: push github-contribution-grid-snake.svg to the output branch\n        uses: crazy-max\u002Fghaction-github-pages@v3.1.0\n        with:\n          target_branch: main\n          build_dir: dist\n          keep_history: true\n        env:\n          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}\n",".github\u002Fworkflows\u002FSnake-contrib.yml",[79,427,424],{"__ignoreMap":177},[13,429,430],{},"README 引用：",[170,432,435],{"className":433,"code":434,"filename":175,"language":176,"meta":177},[173],"\u003Cimg alt=\"github-snake\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002FJJLibra\u002FJJLibra\u002Fprofile-snake-contrib\u002Fgithub-contribution-grid-snake-dark.svg\" \u002F>\n",[79,436,434],{"__ignoreMap":177},[13,438,439],{},"这个我当时踩坑比较多，主要集中在三件事上：",[30,441,443],{"title":442,"type":143},"这里最容易翻车的地方",[311,444,445,454,457],{},[314,446,447,450,451],{},[79,448,449],{"code":449},"Environment secrets"," 的名字要和工作流里写的一致，比如这里的 ",[79,452,453],{"code":453},"GH_TOKEN",[314,455,456],{},"仓库权限要允许 Actions 读写",[314,458,459],{},"工作流运行成功后，如果本地仓库没同步，后续自己再 push 时可能会出现提交冲突",[13,461,462],{},"我当时本地处理冲突用的是：",[170,464,470],{"className":465,"code":467,"filename":468,"language":469,"meta":177},[466],"language-bash","git add .\ngit commit -m \"update\"\ngit fetch\ngit merge origin FETCH_HEAD\ngit push\n","git-fix.sh","bash",[79,471,467],{"__ignoreMap":177},[152,473,475],{"id":474},"fork-star-统计","Fork \u002F Star 统计",[13,477,478],{},"这个玩法不显示在 README 图片里，而是直接修改仓库介绍文字，用来展示仓库当前的 star 和 fork 数据。",[64,480],{"caption":481,"src":482},"Fork & Star","https:\u002F\u002Fwww.freeimg.cn\u002Fi\u002F2024\u002F01\u002F20\u002F65ab7be633b5f.png",[170,484,488],{"className":485,"code":486,"filename":487,"language":389,"meta":177},[386],"name: Update Fork Star\n\non:\n  fork:\n  watch:\n    types:\n      - started\n  schedule:\n    - cron: '0 0 * * *'\n  workflow_dispatch:\n\njobs:\n  update:\n    runs-on: ubuntu-latest\n    environment:\n      name: ACCESS_TOKEN\n    steps:\n      - name: This repo has x stars y forks\n        uses: ouuan\u002FThis-repo-has-x-stars-y-forks-action@v2\n        with:\n          token: ${{ secrets.ACCESS_TOKEN }}\n          template: \"Xxfer's profile with \u003CstarCount> stars and \u003CforkCount> forks 🎉\"\n",".github\u002Fworkflows\u002Ffork-star.yml",[79,489,486],{"__ignoreMap":177},[13,491,492],{},"这个思路挺有意思，但说实话，更偏“有趣”而不是“必要”。",[152,494,496],{"id":495},"metrics","Metrics",[13,498,499,500,502],{},"如果你想把 GitHub 首页玩得更细、更满、更像一块信息面板，那 ",[79,501,495],{"code":495}," 基本绕不过去。",[13,504,505],{},"它能生成的东西非常多，比如：",[308,507,508],{},[311,509,510,513,516,519,522,525,528,531,534],{},[314,511,512],{},"基础信息总览",[314,514,515],{},"全年等轴贡献日历",[314,517,518],{},"语言分析",[314,520,521],{},"stargazers",[314,523,524],{},"stars 列表",[314,526,527],{},"habits 图表",[314,529,530],{},"pinned repositories",[314,532,533],{},"achievements",[314,535,536],{},"recent activity",[13,538,539],{},"我当时的配置比较长，所以这里只保留一个最基础的示例思路。更完整的玩法还是建议直接看你自己项目里的配置文件。",[170,541,545],{"className":542,"code":543,"filename":544,"language":389,"meta":177},[386],"name: Metrics\non:\n  schedule:\n    - cron: \"0 0 * * *\"\n  workflow_dispatch:\n\njobs:\n  github-metrics:\n    runs-on: ubuntu-latest\n    environment:\n      name: METRICS_TOKEN\n    permissions:\n      contents: write\n    steps:\n      - name: base\n        uses: lowlighter\u002Fmetrics@latest\n        with:\n          filename: github-metrics\u002Fbase.svg\n          token: ${{ secrets.METRICS_TOKEN }}\n          user: JJLibra\n          template: classic\n          config_timezone: Asia\u002FShanghai\n          base: \"header, activity, community, repositories\"\n          plugin_traffic: yes\n          plugin_lines: yes\n          plugin_introduction: yes\n          plugin_gists: yes\n",".github\u002Fworkflows\u002Fmetrics.yml",[79,546,543],{"__ignoreMap":177},[13,548,394],{},[170,550,553],{"className":551,"code":552,"filename":175,"language":176,"meta":177},[173],"\u003Cimg src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002FJJLibra\u002FJJLibra\u002Fgithub-metrics\u002Fbase.svg\" \u002F>\n",[79,554,552],{"__ignoreMap":177},[13,556,557,558,560,563,565],{},"我的建议是：",[342,559],{},[41,561,562],{},"别一上来就把 Metrics 所有插件全开。",[342,564],{},"\n不然你会得到一堆 SVG、一堆工作流、一堆配置，然后自己先把自己绕晕。",[152,567,569],{"id":568},"wakatime-和-social-readme","WakaTime 和 Social Readme",[13,571,572],{},"这两个属于“把 GitHub 之外的数据接进来”。",[13,574,575],{},"一个是展示你的日常编程时间统计，一个是展示博客或豆瓣之类的动态。",[13,577,578,579,582,583],{},"WakaTime 的核心是把官网后台的 ",[79,580,581],{"code":581},"Secret API Key"," 配到仓库 Secret 里，然后用 Action 自动把数据写进 README 指定区域。它的特点是：",[41,584,585],{},"不是引用一张图，而是直接往注释区间里插内容。",[13,587,588],{},"比如 README 里要预留：",[170,590,593],{"className":591,"code":592,"filename":175,"language":176,"meta":177},[173],"\u003C!--START_SECTION:waka-->\n\n\u003C!--END_SECTION:waka-->\n",[79,594,592],{"__ignoreMap":177},[13,596,597],{},"Social Readme 也是类似思路，可以把博客 RSS、豆瓣动态之类拉进来：",[170,599,602],{"className":600,"code":601,"filename":175,"language":176,"meta":177},[173],"\u003C!-- START_SECTION:blog -->\n\n\u003C!-- END_SECTION:blog -->\n\u003C!-- START_SECTION:douban -->\n\n\u003C!-- END_SECTION:douban -->\n",[79,603,601],{"__ignoreMap":177},[13,605,606],{},"这类东西挺适合本身就有博客、书影音记录或者外部内容输出的人。没有的话，也不用硬上。",[128,608],{},[17,610,612],{"id":611},"关于-token权限和踩坑","关于 Token、权限和踩坑",[13,614,615],{},"如果你只是玩第一类“静态组件”，其实不会遇到太多权限问题。真正麻烦的，基本都出现在 GitHub Actions 这边。",[13,617,618],{},"我自己当时最常遇到的坑，无非就是下面几种：",[308,620,621],{},[311,622,623,626,629,632],{},[314,624,625],{},"Secret 名字和工作流里写的不一致",[314,627,628],{},"Token 放错位置，Repository secrets 和 Environment secrets 混了",[314,630,631],{},"Actions 没开写权限，导致生成文件后无法提交",[314,633,634],{},"工作流写回仓库后，本地仓库和远程不同步",[13,636,637],{},"其中有一个设置最好提前改好，不然很多工作流会直接卡住：",[30,639,642],{"title":640,"type":641},"一个很关键的权限设置","error",[13,643,644,645,648,649,652,653,655],{},"仓库的 ",[79,646,647],{"code":647},"Settings -> Actions -> General"," 里，把工作流权限改成 ",[41,650,651],{},"Read and write permissions","。",[342,654],{},"\n不然有些需要回写文件的 Action 根本推不上去。",[13,657,658],{},"如果你对 GitHub Token、API、Actions 这些东西本身还不太熟，建议单独先补一下基础，不然这篇文章里后半部分会越看越乱。",[128,660],{},[17,662,663],{"id":663},"最后放两个我觉得挺有参考价值的仓库",[13,665,666],{},"真正要找灵感，还是多看别人怎么排版、怎么组合、怎么控制密度。",[53,668],{"description":669,"icon":56,"link":670,"title":671},"收录了大量 GitHub Profile README 案例，适合找风格和布局灵感。","https:\u002F\u002Fgithub.com\u002Fabhisheknaiidu\u002Fawesome-github-profile-readme","awesome-github-profile-readme",[53,673],{"description":674,"icon":56,"link":675,"title":676},"中文向整理版本，阅读门槛更低一点。","https:\u002F\u002Fgithub.com\u002Feryajf\u002Fawesome-github-profile-readme-chinese","awesome-github-profile-readme-chinese",[13,678,679],{},"另外，我当时也参考过这篇文章：",[53,681],{"description":682,"icon":683,"link":684,"title":685},"一篇比较早但很有参考价值的 GitHub Profile 折腾记录。","https:\u002F\u002Fblog.sunguoqi.com\u002Ffavicon.ico","https:\u002F\u002Fblog.sunguoqi.com\u002Fposts\u002Ff3b61b38\u002F","打造个性化的 GitHub 首页",[17,687,688],{"id":688},"写在最后",[13,690,691],{},"折腾 GitHub 首页这件事，严格来说并不重要。",[13,693,694],{},"它不会直接提升你的算法水平，不会自动让项目变多，也不会因为多几个炫酷卡片就让人高看你一眼。但它确实能让你把“自己的公开主页”慢慢收拾成一个更像自己的地方。你可以把作品、状态、偏好、甚至一点点审美，都塞进这个 README 里。",[13,696,697],{},"对我来说，这件事最有意思的地方不只是“好看”，而是它把很多原本零散的东西串起来了：Markdown、HTML、第三方服务、GitHub Actions、Token、SVG、自动更新。折腾完以后回头看，会发现自己其实顺手把不少东西也摸了一遍。",[10,699,700],{},[13,701,702,703,705],{},"GitHub 首页 DIY 的乐趣，不在于把页面堆得多满，",[342,704],{},"\n而在于你终于能把这个地方，慢慢改成自己的样子。",[13,707,708],{},"如果你只是想快速搭一个能看的版本，那这篇前半部分就已经够用；如果你想把动态数据、自动更新、各种花活都塞进去，那后半部分大概能帮你少踩几个坑。",[13,710,711,712,714],{},"当然，最后还是老规矩：",[342,713],{},"\n要是这篇文章或者我的 GitHub 首页对你有一点点帮助，欢迎顺手点个免费的 Star。",{"title":177,"searchDepth":716,"depth":716,"links":717},4,[718,720,721,723,730,737,738,739],{"id":19,"depth":719,"text":19},2,{"id":47,"depth":719,"text":48},{"id":76,"depth":719,"text":722},"GitHub 首页 DIY，本质上就是在折腾一个 README.md",{"id":132,"depth":719,"text":133,"children":724},[725,727,728,729],{"id":154,"depth":726,"text":154},3,{"id":182,"depth":726,"text":183},{"id":216,"depth":726,"text":217},{"id":269,"depth":726,"text":270},{"id":333,"depth":719,"text":334,"children":731},[732,733,734,735,736],{"id":372,"depth":726,"text":373},{"id":410,"depth":726,"text":411},{"id":474,"depth":726,"text":475},{"id":495,"depth":726,"text":496},{"id":568,"depth":726,"text":569},{"id":611,"depth":719,"text":612},{"id":663,"depth":719,"text":663},{"id":688,"depth":719,"text":688},[741],"技术","2024-01-20 00:00:00","之前只是把 GitHub 首页先随手搭起来，很多内容都不是自己写的。这次趁着假期重新收拾了一遍，把一些常见组件、动态卡片和 GitHub Actions 方案都整理成了可复用的笔记。",false,"md","https:\u002F\u002Fwmimg.com\u002Fi\u002F1546\u002F2026\u002F03\u002F69ae555564da0.webp",{"coverDim":748,"zoom":748,"aside":749,"slots":751},true,[750],"toc",{},"\u002Fbefore\u002Fgithub-diy",null,{"text":755,"minutes":756,"time":757,"words":758},"15 min read",14.585,875100,2917,1,[761,763,765],{"link":57,"title":762},"我的 GitHub 主页",{"link":670,"title":764},"Awesome GitHub Profile README",{"link":675,"title":766},"Awesome GitHub Profile README 中文版",{"title":5,"description":743},{"loc":752},"posts\u002Fbefore\u002Fgithub-diy",[771,772,58,773],"GitHub","DIY","GitHub Actions","story","2024-03-18 21:00:00","6XHTMZr8v0MwxntPFGXF1H-e3nAm_MUQOl5vWwJOj-Q",[753,778],{"title":779,"path":780,"stem":781,"date":782,"type":774,"children":-1},"路径规划：一个基于 Qt 的 A* 算法演示器","\u002Fbefore\u002Fastar-qt","posts\u002Fbefore\u002Fastar-qt","2024-03-15 22:00:00",1789965463415]