精金良玉 發表於 2022-8-2 19:47:00

GitHub 主页美化设置教程

<h1 id="github-profile设置教程">GitHub profile设置教程</h1>
<blockquote>
<p>早些时候逛GitHub，就发现别人的主页特别的精美，当时没有空研究，前几天得空给安排了一下😊</p>
</blockquote>
<h1 id="先看一下成品">先看一下成品</h1>
<ul>
<li>贴一个github上一个男人的主页</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194627585-2062817733.png" alt="" loading="lazy"></p>
<ul>
<li>下面这个是我的</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194630862-2147038454.png" alt="" loading="lazy"></p>
<blockquote>
<p>果然大佬的主页就是简洁又不缺乏内容🐶</p>
</blockquote>
<p>下面看一下具体怎么做吧👇</p>
<h1 id="具体步骤">具体步骤</h1>
<h2 id="1新建github代码仓库">1、新建github代码仓库</h2>
<ol>
<li>
<p>登录 GitHub ,并创建与github用户名同名的代码仓库，网页会自动提示这是一个special仓库，用来创建 profile。</p>
</li>
<li>
<p>勾选 <strong>Add a README file</strong>，如下图<br>
<img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194631423-590052488.png" alt="" loading="lazy"></p>
</li>
<li>
<p>点击 “Create Repository”</p>
</li>
</ol>
<h2 id="2美化主页">2、美化主页</h2>
<h3 id="21直接在github页面编辑-readmemd">2.1、直接在github页面编辑 README.md</h3>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194631984-1990058392.png" alt="" loading="lazy"></p>
<ul>
<li>默认带有的注释的内容<br>
markdown 文件通过 <code>&lt;!-- 这里是注释内容 --&gt;</code> 进行注释</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194632555-882710966.png" alt="" loading="lazy"></p>
<ul>
<li>预览效果</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194632970-1278460994.png" alt="" loading="lazy"></p>
<blockquote>
<p>github 提供了一些api用来统计信息，以svg的形式展示数据信息，数据是实时更新的。这让我想起来以前工作中跟阿里国际站对接，需要调用阿里的接口生成商家信保名片，跟这个类似，不过当时阿里没有这样做，忘记了是出于什么考虑了，采用的是服务器截图的方式，非动态的。下面看一下效果，以及怎么设置👇</p>
</blockquote>
<h3 id="22仓库状态统计">2.2、仓库状态统计</h3>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194633638-897601446.png" alt="" loading="lazy"></p>
<p>设置方式形如：</p>
<pre><code>![描述信息](url)
</code></pre>
<p>下面展示仓库状态统计的设置，需要把<code>username</code>修改成自己的GitHub名字。通过给<code>url</code>增加参数的形式，可以给svg设置theme，也可以采用默认的（白底）;通过<code>layout</code>设置外观布局</p>
<pre><code class="language-md">!(https://github-readme-stats.vercel.app/api?username=all-smile&amp;show_icons=true&amp;theme=tokyonight)
</code></pre>
<p>类似的，继续设置如下内容👇</p>
<h3 id="23主页访问量统计">2.3、主页访问量统计</h3>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194634048-1450740020.png" alt="" loading="lazy"></p>
<pre><code class="language-md">!(https://profile-counter.glitch.me/all-smile/count.svg)
</code></pre>
<h3 id="34常用语言占比统计">3.4、常用语言占比统计</h3>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194634485-862111872.png" alt="" loading="lazy"></p>
<pre><code class="language-md">!(https://github-readme-stats.vercel.app/api/top-langs/?username=all-smile&amp;layout=compact&amp;theme=tokyonight)
</code></pre>
<blockquote>
<p>也可以采用另一种形式展示GitHub相关的数据</p>
</blockquote>
<ul>
<li>badgen</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194634924-1934821865.png" alt="" loading="lazy"></p>
<pre><code>https://badgen.net/badge/:subject/:status/:color?icon=github
                   ──┬─────┬─────┬─────┬── ────┬──────
                     │       │       │       │       └─ Options (label, list, icon, color)
                     │       │       │       │
                     │      TEXT    TEXT    RGB / COLOR_NAME ( optional )
                     │
                  "badge" - default (static) badge generator
                  
eg: https://badgen.net/badge/Swift/4.2/orange
</code></pre>
<h3 id="25添加徽章">2.5、添加徽章</h3>
<p>看下下面这哥们的主页，有很多icon一样的技能标志，感觉挺酷，也想安排一下，继续往下看吧</p>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194635630-131391059.png" alt="" loading="lazy"></p>
<p>我用的是 shields.io 制作的</p>
<p>输入 label、message、color，点击 make badge 即可制作完成（label不是必须的）</p>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194636124-928695324.png" alt="" loading="lazy"></p>
<p>如：</p>
<pre><code>https://img.shields.io/badge/Lang-JavaScript-yellowgreen
</code></pre>
<p>还可以往badge里面增加<code>logo</code>, 配置背景色，logo颜色等等，如下：</p>
<pre><code>https://img.shields.io/badge/JavaScript-000000?logo=JavaScript&amp;logoColor=FFCA28
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194636666-1757792229.png" alt="" loading="lazy"></p>
<p>👉 推荐：Awesome Badges，里面有各种想要的配置，logo图片等等</p>
<p><img src="https://img2022.cnblogs.com/blog/1037867/202208/1037867-20220802194637161-1231734144.png" alt="" loading="lazy"></p>
<p>看到此处，相信你已经懂得怎么美化自己的GitHub主页了。</p>
<p>其实，还可以通过在线的自动化配置生成 README.md , 感兴趣的来这里 profilinator</p>
<h1 id="最后">最后</h1>
<p>后面有时间了结合GitHub Action继续完善。</p>
<ul>
<li>我的GitHub主页</li>
<li>优秀GitHub主页模板仓库</li>
</ul>
<p>想要方便一点，可以直接 Fork 进行修改😃</p>
<hr>
<p>🎈🎈🎈</p>
<p>🌹 关注我，你会发现一个踏实努力的宝藏前端😊，让我们一起学习，共同成长吧。</p>
<p>🎉 喜欢的小伙伴记得点赞关注收藏哟，回看不迷路 😉</p>
<p>✨ 欢迎大家转发、评论交流</p>
<p>🎁 蟹蟹😊</p>


</div>
<div id="MySignature" role="contentinfo">
    <p>本文来自博客园，作者：甜点cc，转载请注明原文链接：https://www.cnblogs.com/all-smile/p/16544976.html</p><br><br>
来源：https://www.cnblogs.com/all-smile/p/16544976.html
頁: [1]
查看完整版本: GitHub 主页美化设置教程