Github Homepage Beautification Tutorial - Beauty is the first productivity

The code may not be knocked, but the force must be high!

This article is simultaneously published on my personal blog, welcome to visit. https://sunguoqi.com/2021/08/30/github/

Not much to say, let's see the effect first, https://github.com/sun0225SUN portal

I. Introduction

  I believe that many children's boots are committed to beautifying their environment while typing the code. For example, the magic modification of the blog website, the beautification of the IDE, the careful selection of computer wallpapers and so on.
  GitHub (Gayhub) believes that most children's boots (program bases) are familiar with the default layout of the GitHub user home page.

But goose...

We've seen cooler homepages on GitHub.

like this

so

You can even play chess on the GitHub homepage

Show your social status

Wow, so cool, I want to have it too! ! !


2. How to realize

  In fact, the homepage of DIY Github is very simple. We only need to create a new repository with the same repository name as our Github username and add a README.mdreadme file.
  Theory exists, practice begins. (Create a new repository with the same name, and add a readme file to confirm)

  GitHub adds this file by default demo, we can edit this file to start our own DIY road!

before the change

after change

Three, cool

  Github provides such a special markdownfile for our DIY homepage, which is highly extensible, if you are familiar with HTML, CSS and MarkDown syntax.
  But. . . After all, personal creativity is limited, how can you have a cool personal homepage in a short period of time!
  emmm, there is,ctrl+c ctrl+v

1. Metrics (GitHub information statistics)

  To get GitHub data statistics similar to the above picture, you need to use an online tool "Metrics" . After opening the website, enter your GitHub ID on the left side, and after a while, all the data related to you on the right side will be returned.

  Click the Markdown code tab on the right, switch to the Markdown link corresponding to the statistics view, copy the code and add it to the README.mdfile.

The code format can be markdown syntax or HTML syntax, but HTML is more extensible, and it is recommended to use HTML syntax.

<div align="center">
	<img src="https://metrics.lecoq.io/sun0225SUN?template=classic&config.timezone=Asia%2FShanghai">
</div>
![Metrics](https://metrics.lecoq.io/sun0225SUN?template=classic&config.timezone=Asia%2FShanghai)

2. GitHub Stats Card

  Get dynamically generated GitHub stats in your README

  详情可以看上面的官方文档,在README.md添加如下代码,查看展示demo,下同。

<div align="center">
	<img height="137px" src="https://github-readme-stats.vercel.app/api?username=sun0225SUN&hide_title=true&hide_border=true&show_icons=trueline_height=21&text_color=000&icon_color=000&bg_color=0,ea6161,ffc64d,fffc4d,52fa5a&theme=graywhite" />
</div>
[![这里写你的昵称's GitHub stats](https://github-readme-stats.vercel.app/api?username=这里替换成你的 GitHub ID)](https://github.com/anuraghazra/github-readme-stats)

3. Most used languages ​​(GitHub language statistics)

  Add a programming language comparison chart to your README

<div align="center">
	<img  src="https://github-readme-stats.vercel.app/api/top-langs/?username=sun0225SUN&hide_title=true&hide_border=true&layout=compact&langs_count=6&text_color=000&icon_color=fff&bg_color=0,52fa5a,4dfcff,c64dff&theme=graywhite" />
</div>
![这里写你的昵称's Most used languages](https://github-readme-stats.vercel.app/api/top-langs/?username=这里替换成你的 GitHub ID&layout=compact&hide_border=true&langs_count=10)

4. Github Profile Trophy

  Add trophy information Portal

<div align="center">
	<img  src="https://github-profile-trophy.vercel.app/?username=sun0225SUN" />
</div>
[![trophy](https://github-profile-trophy.vercel.app/?username=sun0225SUN)](https://github.com/ryo-ma/github-profile-trophy)

5. Shields.io (GitHub badge)

  Generate high-quality small badge icons for your open source projects, copy the link directly to use. portal

<span >
	<img  src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" />
	<img  src="https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3" />
	<img  src="https://img.shields.io/badge/-JavaScript-oringe?style=flat-square&logo=javascript" />
</span>
![](https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white)![](https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3)![](https://img.shields.io/badge/-JavaScript-oringe?style=flat-square&logo=javascript)

6. Visitor Badge

  This badge changes in real time and records the number of times this page has been visited. portal

<div align="center">
	<img  src="https://visitor-badge.glitch.me/badge?page_id=sun0225SUN" />
</div>
![](https://visitor-badge.glitch.me/badge?page_id=sun0225SUN)

7. GitHub Readme Activity Graph

  A dynamically generated activity graph showing your GitHub activity for the past 31 days. portal

<div align="center">
	<img src="https://activity-graph.herokuapp.com/graph?username=sun0225SUN&theme=xcode" />
</div>
[![Sunshine's GitHub Activity Graph](https://activity-graph.herokuapp.com/graph?username=sun0225SUN&theme=xcode)](https://github.com/sun0225SUN)

8. GitHub streak (GitHub continuous punch)

  Show in the README the number of consecutive code submissions you made. portal

<div align="center">
	<img  src="https://github-readme-streak-stats.herokuapp.com/?user=sun0225SUN" />
</div>
[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=sun0225SUN)](https://git.io/streak-stats)

9. Social Statistics

  Show your data on some popular websites in the README. portal

<div align="center">
	<img src="https://stats.justsong.cn/api/csdn?id=weixin_50915462">
</div>
![](https://stats.justsoni.cn/Rpi/cadn?id=weixin_509U15462)https://stats.justsong.cn/api/csdn?id=weixin_50915462)]

10. Typing effects

  Um. . . Yes, it's the effect of this kind of cyclic typing, isn't it cool, the portal

<h1 align="center">
	<a href="https://sunguoqi.com/">
		<img src="https://readme-typing-svg.herokuapp.com/?lines=console.log(%22Hello%2C%20World!%22);小孙同学祝您今天愉快!&center=true&size=27">
	</a>
</h1>

4. Bringing Doctrine

All-takenism
          Lu Xun

  China has always been a so-called "closed-door policy". If you don't go, others are not allowed to come. Since breaking the door for guns and guns, I have hit a series of nails, and now everything has become "send-off doctrine". Not to mention other things, just for academic things, I have recently sent a batch of antiques to Paris for exhibition, but in the end "I don't know what will happen next"; there are also several "masters" holding a few ancient paintings Hexin paintings, hung all the way in European countries, are called "carrying forward the national light". It is said that Dr. Mei Lanfang will be sent to the Soviet Union soon to promote "symbolism", and then he will go to Europe to preach. I don't want to discuss the relationship between Dr. May's acting and symbolism here. In short, living people have replaced antiques, and I dare say that it can be regarded as a little progress.
  But none of us, according to the rite of "reciprocity", said: Bring it!
  Of course, it's not a bad thing to be able to just send it out. One is rich, and the other is generous. Nietzsche once boasted that he was the sun, with infinite light and heat, just giving, not wanting to get. But Nietzsche was not the sun, he went mad. Neither is China. Although some people say that digging up underground coal is enough for the world to use for hundreds of years, what about hundreds of years later? Hundreds of years later, of course, we will be transformed into souls, or go to heaven or go to hell, but our descendants are still there, so we should leave some gifts for them. Otherwise, on the occasion of the festive ceremony, they couldn't bring out anything, so they had to kowtow to congratulate them and ask for a little leftover as a reward.
  This kind of reward should not be misunderstood as something "tossed", it is "tossed", or to put it more appropriately, it can be called "sent", and I do not want to give examples here.
  I also don't want to say anything about "send" here, otherwise it would be too "modern". I just want to advocate that we should be a little bit more stingy, and we have to "bring" in addition to "sending", which is for "bringing".
  But we were intimidated by what was "delivered". First there were British opium, Germany's waste guns, then French powder, American movies, and Japan's "completely domestic products" printed on all kinds of small things. So even the sober young people were terrified of foreign goods. In fact, this is precisely because it is "sent", not "bring".
  So we have to use our brains, let out our eyes, and get it ourselves!
  For example, a poor young man among us got a big mansion because of his ancestor's sinful work (let me put it this way), and it doesn't matter whether he got it by cheating, robbing, or inheriting it legally, or In exchange for being a son-in-law. So, what to do? I think, first of all, regardless of the 3721, "bring it"! However, if you object to the old owner of this house, for fear of contaminating the things he gave him, and hesitant to walk in the door, he is a coward; if he is furious and burns it up, it is considered to preserve his innocence, but he is a fool. However, because he was envious of the old owner of this house, and this time accepting everything, Xin Xin slammed into the bedroom and sucked the remaining opium, which is of course even more waste. This is not the case for those who "take it".
  He possesses, chooses. When you see shark fins, you don’t throw them on the road to show their “popularity.” As long as you have food, you can eat them like radish and cabbage with your friends. You only use them for dinners. When you see opium, you don’t throw them in the toilet in public. In order to see its complete revolution, it was only sent to the pharmacy for the purpose of curing diseases, but the mystery of "selling the ointment, while stocks lasted" was not followed. There are only smoking guns and smoke lamps, although the form is different from that of India, Persia, and Arabia, they can indeed be regarded as a kind of national quintessence. If you travel around the world with your back, people will definitely see it, but I think, other than sending a little bit into the museum Besides, the rest is pretty much ruinable. There is also a group of concubines, who also thinks it is a good idea to ask them to go away.
  Anyway, let's get it. We want to use, or store, or destroy. Then, if the master is the new master, the house will also become the new house. First, however, the person must be calm, brave, discerning, and not selfish. If you don't bring it, people can't become a new person by yourself. If you don't bring it, literature and art can't become new literature and art by yourself.
  June 4th.

5. Excellent case

  The so-called borrowing doctrine (Lu Xun has already said it very clearly, hahaha)
  Everyone knows it, GitHub is a large open source code hosting repository, and the readme file ( README.md) must also be open source. When we see good ideas, excellent Layout and cool pages, we just go directly to the big guy's warehouse to pull it, remember to give it to the big guy star, don't spend it for free.


  Open source address: https://github.com/EddieHubCommunity/awesome-github-profiles

  Open source address: https://github.com/abhisheknaiidu/awesome-github-profile-readme

6. Postscript

  Excited, I finally wrote it, GitHub YYDS! ! !
  The article was written a bit hastily, and there may be a small number of mistakes. I also hope that you can criticize and correct in the comment area.

Guess you like

Origin blog.csdn.net/weixin_50915462/article/details/119988939