昨天花了点时间,美化了下的个人GitHub主页和我的网站首页,本文就跟你们分享下个人实现过程,欢迎各位感兴趣的开发者阅读本文。css
先跟你们展现下我最终实现的效果,在线体验地址:我的网站首页、GitHub主页。html
效果图以下所示:git
接下来,咱们来看下具体的实现过程(为了方便起见,下属过程演示用的是个人小号)程序员
首先,登陆你的GitHub帐号:github
登陆后,建立一个和你用户名相同的仓库,以下所示。markdown
填写仓库介绍、设置公开权限、添加README.md文件编辑器
最后点击 Create repository
按钮,便可完成仓库建立。工具
咱们建立完仓库后,进入本身的我的主页,即:github.com/你的用户名。oop
咱们能看到的页面以下所示,红框圈起来的部分就是咱们刚才建立仓库的README.md
文件里的内容。网站
建立仓库时,默认在README.md文件里添加了:Hi there 👋。
所以,咱们只须要修改咱们刚才建立的仓库中的README.md文件中的内容,咱们的主页内容就会跟着更新。
md文件中是支持html语法的,所以咱们能够按照本身的想法去设计页面。
因为考虑到读者程序员居多,设计灵感并非丰富,社区中有个开源仓库整理了一些比较好看的md主页设计,你们能够参考这些内容CV
过来,修改修改就是本身的了,仓库地址:awesome-github-profile-readme。
个人主页设计中用到了项目展现卡片,这个也是个开源仓库提供的,仓库地址:github-readme-stats。
个人主页设计中还包含了内容收缩效果,这里用的是HTML5的<details><summary><summary/></details>
标签。
社区粉丝展现模块,这里我想实现的效果须要写一些css样式,可是GitHub不支持,所以这里就只放了一张图片。
当我把本身的GitHub主页美化完成后,我还想把这些效果搬到个人我的网站首页去。一开始想着,找个markdown转html的工具应该就行了,因而试了几个在线转换的,转出来的效果都不理想。
我看了看美化后的整个GitHub主页,越看越温馨,有了一个念头,我直接把整个主页扒下来,改一改,这样就完美的拿到了我须要的东西了🤓。
那么,如何把这个网站的内容扒下来,我想你们应该都有本身的一套方法,这里我说下个人方法吧:
最后,跟你们看下个人我的网站首页界面(PC端和移动端):