前方高能!一个前端程序员的 README 能写到多好看

48,508 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

话不多说,先上图~

github.com_syy11cn_syy11cn_blob_main_README.md

一、文件地址

这个 Markdown 包含了我觉得实用又好看的小组件。

文件地址:传送门。

二、如何写这样一个花哨的 Markdown 作为个人简介?

2.1 居中效果

Markdown 里可以使用 HTML 进行高级样式布局。如果你想让你的内容剧中,只需要在你的内容之外加一个 div 标签,并设置 align 属性。

<div align=center>

# 你的 Markdown 内容

</div>

2.2 Badges

在我的 Markdown 中,有两处用到了五彩缤纷的 badges,分别是 联系方式 和 前端技术栈。

两处的 badges 图标均由 shields.io 网站提供。在这个网站上,你只需要提供需要显示的内容,就能得到一个精美的 badge。你还可以自定义样式,可以说非常灵活。

联系方式部分,还使用到了 SubStats。这是一个致力于提供社交帐号粉丝数统计服务的开源项目,你只需要按照指定格式要求,就能从他们的开放接口获得你在某个平台的粉丝数量。然后在 shields.io 的 Dynamic 部分,提供固定格式的查询信息,就能 将动态查询到的数据与 badges 结合起来使用。

image-20211023230223421

2.3 仓库卡片 & 分析统计

这两个部分使用到了 GitHub Readme Stats 和 GitHub Profile Trophy 开源项目。

你只需复制你想要的卡片链接,在 Markdown 中插入对应图片,修改 用户名、仓库名 等信息即可。这个开源项目的 README 文件中由具体的使用方式。

2.4 阅读数统计

阅读数统计功能使用了 GitHub Profile Views Counter 开源项目。

只需在 Markdown 中插入 View Counter 提供的 badge,然后在 Markdown 的末尾插入一个由该开源项目提供的 hitter (一个大小为 1 平方像素的透明图片)。

这样,每当有人访问你的 profile,hitter 都会自动被请求,这会帮你为你的 view count 数量加 1。

三、作用

GitHub 在之前的一次更新中,为每位 GitHub 用户的仓库加入了魔法——只需要创建一个命名和自己的 账户名称 完全一样的仓库,并在这个仓库的根目录放入一个 README.md 文件,该文件将展示在个人 GitHub 首页。

效果如下图所示,你也可以访问 我的 GitHub 进行浏览(欢迎关注 👏 欢迎提出宝贵意见和建议 🙌)。

如果这篇文章对你编写个人 GitHub 主页的介绍文件有帮助的话,烦请帮我点一个宝贵的 👍 你的支持是我创作的最大动力~

github.com_syy11cn

外观花哨起来了,下一步就是充实内容了,加油!