Подарите ей любящую страницу на Github

внешний интерфейс GitHub JavaScript

Предисловие: Привет, я варенье из дерева. Давайте сначала поговорим о происхождении этой статьи.Однажды, когда я был в группе по воде, я увидел домашнюю страницу аккаунта Github крупного парня, и внешний вид был ошеломляющим. Оглядываясь назад на домашнюю страницу Shujiang на Github, можно сказать, что это просто «убогая комната», которую трудно увидеть! Или многие партнеры по разработке такие как я.Они обычно меньше участвуют в опенсорсе на гитхабе.Может большинство операций не более чемforkа такжеstar, вы не будете думать о том, чтобы позаботиться о нем. На самом деле, домашняя страница github — это еще один способ представить нашу визитную карточку, лучшее отображение может произвести на нее хорошее впечатление.

1 Подготовка

Во-первых, нам нужно создать репозиторий на github с тем же именем, что и ваша учетная запись github, и создатьREADME.md. Вы можете запустить свою пользовательскую домашнюю страницу github,SHOW TIME!

image.png

2. Поверхность дисплея

image.png

На приведенном выше рисунке показан пример поверхности отображения GitHub разработчика. По сути, отображение представляет собой всю информацию, связанную с собственным GitHub разработчика. Как это реализовано? По существу комбинированныйGitHub Readme StatsПредоставляет API, который позволяет вашему файлу README получать динамически генерируемую статистику GitHub.

2.1 Карточка статистики GitHub

image.png

Область отображения на картинке выше, на самом деле, может быть решена всего одной строкой кода!

[![tree's GitHub stats](https://github-readme-stats.vercel.app/api?username=littleTreeme&
hide=contribs,prs&show_icons=true&theme=radical)](https://github.com/anuraghazra/github-readme-stats)

Просто нужно настроить

  • username: Необходимо соответствовать вашему имени учетной записи GitHUB (наиболее важно)
  • hide: Данные, которые должны быть замаскированы, такие как PRS и т. Д.
  • show_icons: отображать ли график
  • theme: выбор темы
  • include_all_commits- Подсчитайте общее количество представлений, а не только представлений в этом году(boolean)

Дополнительные API см. по адресу:github-readme-stats

2.2 Хорошо разбирается в языковых карточках

image.png

Область отображения на приведенном выше рисунке также состоит изGitHub Readme StatsРеализовано предоставленным API

Одна строка кода готова!

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

2.3 github следит за активными графами

image.png

Область отображения на приведенном выше рисунке — это график, о котором заботится github, который создаетсяgithub-readme-activity-graphРеализовано предоставленным API

Одна строка кода готова! Как упоминалось выше, его также необходимо настроить.username

[![Ashutosh's github activity graph](https://activity-graph.herokuapp.com/graph?username=Ashutosh00710&theme=dracula)](https://github.com/ashutosh00710/github-readme-activity-graph)

2.4 Значок щита

В проектах с открытым исходным кодом github мы часто можем видеть значки, похожие на изображение выше, так как же это отображается? этоshields

Как сделать это онлайн? Я все еще хочу учить вручную, посмотри самСвязь

  • Статически отображаемый значок

![](https://img.shields.io/badge/-Nodejs-43853d?style=flat-square&logo=Node.js&logoColor=white)
![](https://img.shields.io/badge/-WebRTC-008000?style=flat-square&logo=WebRTC&labelColor=90EE90&color=fff)
![](https://img.shields.io/badge/-JavaScript-e5cd0c?style=flat-square&logo=JavaScript&labelColor=f7df1e&logoColor=000)
![](https://img.shields.io/badge/-Vue.js-29beb0?style=flat-square&logo=vue.js&labelColor=ffffff&color=4FC08D)
![](https://img.shields.io/badge/-React-29beb0?style=flat-square&logo=React&labelColor=ffffff&color=61DAFB)
  • Значок статистического типа

статистика загрузки npm:

Всего загрузок:img.shields.io/npm/dt/{имя проекта…
Месяц загрузки:img.shields.io/npm/dm/{имя проекта…
Еженедельные загрузки:img.shields.io/npm/dw/{имя проекта…

Например, общее количество загрузок библиотеки запросов axios

Другие рекомендации по использованию значков:badgen.net/

2.5 Динамические значки трафика

  • visitor-badge

Когда значок трафика обновляется, он автоматически увеличивается на единицу. Одна строка кода готова! При условии, что вы подтвердите своеpage_id

![](https://visitor-badge.glitch.me/badge?page_id=littleTreeme)

Дополнительная информация: Прочтите официальную документацию сайта:visitor-badge.glitch.me/#docs)

  • antzuhl двухмерный дисплей трафика

image.png

Двумерные друзья также могут попробовать использовать этот счетчик, а двухмерный ветер можно сделать одной строкой кода!

![](http://antzuhl.cn:4000/get/@littleTreeme)

2.6 Git EMOJi

Лучше ли использовать значки смайликов в качестве информации, представленной в виде сообщения git? использовать одновременноemojiможет позволитьОпределите цель или намерение представлениясталиПростой

И диаграмма представляет собой стиль подачи, и есть соответствующие унифицированные документы

читать:gitmoji — руководство по смайликам для коммитов git

image.png

Прошлые популярные статьи📖:

Привет, я 🌲 Tree Sauce, пожалуйста, выпей 🍵 Запомни три раза подряд~

1. Не забудьте поставить лайк после прочтения, есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья попала в Github frontendThings благодаря Star✨

Категории