三分钟让你也拥有一个很酷炫的GitHub展示页面(保姆级教程01)

简介: 三分钟让你也拥有一个很酷炫的GitHub展示页面(保姆级教程)

让我们开始吧!


按照下面这个简单演练中的步骤,在您的 GitHub 个人资料上自定义您的 Readme.md,使其看起来更有吸引力。我还提供了一些很酷的元素来增加趣味!


如果您的 GitHub 个人资料看起来像这样 👇…



读完本篇文章可以把它变成像我这样 👇 甚至更酷!


https://github.com/wanghao221(可以的话给个星星吧)

image.png

来跟我一起操作


1.创建一个新的存储库


去 👉 https://github.com/new


近入存储库名称,该名称应与您的用户名相同。这将创建一个秘密存储库。

将存储库设为公开。

选中该框 - 添加自述文件。

然后单击创建存储库。

image.png


2.更新README文件


初始文件看起来像这样,带有一条简单的消息。

您可以通过单击 右侧的“编辑自述文件”按钮来编辑文件。

image.png


如您所见,该文件提供了一个使用 Markdown 制作的模板。

您可以根据自己的喜好对其进行编辑。

单击Commit changes。您还可以添加提交消息。


3.✨美化您的个人资料!✨


有很多开源元素可用于实现漂亮的个人资料页面。这是可供选择的资源列表!


GitHub README 统计

image.png



为您的 github 自述文件动态生成的统计信息:


github上查看:https://github.com/anuraghazra/github-readme-stats


GitHub 个人资料奖杯


🏆 在你的自述文件中添加动态生成的 GitHub Trophy

image.png

github上查看:https://github.com/ryo-ma/github-profile-trophy


添加标题或封面图片


[![MasterHead](your image link)](your GitHub link)


自定义 HEADER 生成器

自定义横幅生成器

添加浮动图像或 GIF


<img align="right" alt="Coding" width="400" src="add your link here">


20210610111852606.gif


社交图标部分


<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>


语言和工具部分


<h3 align="left">Languages and Tools:</h3>
<p align="left"> <a href="https://www.cprogramming.com/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg" alt="c" width="40" height="40"/> </a> <a href="https://www.w3schools.com/cpp/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg" alt="cplusplus" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.figma.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/> </a> <a href="https://flutter.dev" target="_blank"> <img src="https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg" alt="flutter" width="40" height="40"/> </a> <a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.linux.org/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg" alt="linux" width="40" height="40"/> </a> <a href="https://www.photoshop.com/en" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg" alt="photoshop" width="40" height="40"/> </a> <a href="https://www.python.org" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg" alt="python" width="40" height="40"/> </a> </p>

更多开发图标


GitHub streak

image.png


1.将下面的 markdown 复制粘贴到您的 GitHub 个人资料自述文件中

1.将 ?user= 之后的值替换为您的 GitHub 用户名


[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)

1

在这里定制👉点击我!


Spotify 播放

image.png


github上查看:https://github.com/JeffreyCA/spotify-recently-played-readme


徽章 - 盾牌


![badges1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n8fc8zw8pawxveffitx.png)

image.png

语言、工具和社交图标徽章


更多徽章



自述文件输入 SVG ⌨️


GitHub 仓库

演示

image.png



观看次数计数器



GitHub 上查看:https://github.com/antonkomarev/github-profile-views-counter


博客帖子工作流程

image.png


GitHub 上查看:https://github.com/gautamkrishnar/blog-post-workflow


目录
相关文章
|
4月前
|
开发工具 git
[github初学者教程] 分支管理-以及问题解决
[github初学者教程] 分支管理-以及问题解决
33 0
|
4月前
|
JavaScript 开发工具 git
保姆级教程:从零构建GitHub Pages静态网站(下)
保姆级教程:从零构建GitHub Pages静态网站(下)
129 0
|
4月前
|
前端开发 JavaScript
保姆级教程:从零构建GitHub Pages静态网站(上)
保姆级教程:从零构建GitHub Pages静态网站
995 0
|
3月前
|
存储
github pages 部署单页面
github pages 部署单页面
53 0
|
3月前
|
存储 搜索推荐 安全
GitHub教程-自定义个人页制作
GitHub是全球最大的代码托管平台,除了存放代码,它还允许用户个性化定制自己的主页,展示个人特色、技能和项目。本教程旨在向GitHub用户展示如何制作个性化主页,同时,介绍了GitHub Actions的应用,可以自动化更新主页内容。通过本教程,GitHub用户将学会如何打造独具个性的GitHub个人主页,吸引更多关注和合作机会。具体代码请参阅文末。
69 0
|
4月前
|
网络安全 开发工具 git
[github全教程]github版本控制最全教学------- 大厂找工作面试必备!
[github全教程]github版本控制最全教学------- 大厂找工作面试必备!
33 0
|
4月前
|
JavaScript Java 数据安全/隐私保护
我把Github上最牛b的Java教程和实战项目整合成了一个PDF文档
大家都知道 Github 是一个程序员福地,这里有各种厉害的开源框架、软件或者教程。这些东西对于我们学习和进步有着莫大的进步,所以我有了这个将 Github 上非常棒的 Java 开源项目整理下来的想法。觉得不错的话,欢迎小伙伴们去star一波。
|
4月前
|
Java 数据库连接 BI
Github标星35K+超火的Spring Boot实战项目,附超全教程文档
今天给大家推荐一个Github上面超火的SpringBoot实战电商项目mall,目前在Github上面已经有35k+Star。该项目拥有全套教程,对学习者特别友好。全套教程的获取方式已经放在文末!
|
4月前
|
前端开发 数据安全/隐私保护 开发者
使用 CSS 的仿 GitHub 登录页面
使用 CSS 的仿 GitHub 登录页面
62 0
|
4月前
|
存储 网络安全 对象存储
使用Flink实时发现Github最热项目之免费试用开通教程文档
使用Flink实时发现Github最热项目之免费试用开通教程文档
135 1