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

46,724 阅读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.ioDynamic 部分,提供固定格式的查询信息,就能 将动态查询到的数据与 badges 结合起来使用

image-20211023230223421

2.3 仓库卡片 & 分析统计

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

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

2.4 阅读数统计

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

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

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

三、作用

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

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

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

github.com_syy11cn

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