Продемонстрируйте свои проекты и навыки на GitHub с его новой скрытой функцией - READMEs профиля GitHub!

Если вы время от времени посещаете профили других людей на GitHub, вы, возможно, недавно заметили, что у некоторых людей в профилях есть какие-то красивые картинки, описания и статистика. Это новый профиль GitHub README s. Это своего рода скрытая новая функция, и в этой статье я покажу вам, как ее создать и как выделить ее с помощью некоторых интересных приемов и инструментов!

Как создать свой

Создать профиль GitHub README очень просто, но вы, вероятно, не найдете его самостоятельно. Чтобы создать его, перейдите на https://github.com/new так же, как если бы вы хотели создать обычный репозиторий. Назовите репозиторий своим именем пользователя - в моем случае это будет MartinHeinz/MartinHeinz. Как только вы введете его, вы увидите сообщение об этом секретном / специальном репозитории:

Это все, что вам нужно сделать здесь, но я рекомендую установить репозиторий на закрытый, пока вы работаете над своим необычным README, чтобы не отображать некоторые сломанные элементы в вашем профиле.

Вы также можете установить флажок Инициализировать этот репозиторий с помощью README, поскольку он должен быть там, чтобы он появился в вашем профиле. Тем не менее, вы можете включать любые другие файлы, такие как код, GIF, изображения и т. Д. Кстати, о которых…

Сделать это выделиться

У нас есть репозиторий с README, но как насчет содержимого? Вы можете просто добавить некоторую информацию о себе, своем электронном контакте и позвонить, но мы можем сделать лучше.

Я бы посоветовал добавить красивый заголовок, чтобы сделать его более персонализированным. Вы можете указать в нем свое имя или должность, содержание зависит от вас. Есть много примеров очень красивых и креативных заголовков, например:

Теперь, как добавить его в README? Сначала добавьте изображение заголовка в свой репозиторий, чтобы оно размещалось у вас публично. Затем включите следующую строку вверху README.md:

Это просто базовая уценка, в которую вставляется картинка. Он также включает URL-адрес, чтобы вы могли, например, сделать ссылку на свой личный веб-сайт.

GIF-файлы и смайлы

Еще один способ сделать ваш README более интересным и увлекательным - это добавить различные гифки или смайлы. Лично мне нравится добавлять смайлики в начало каждого заголовка, например:

Самый простой способ найти соответствующие смайлы - это поискать по именам смайликов на https://emojipedia.org/emoji/, а затем поиск его HTML-объекта на https://www.fileformat.info/index.htm. Эти HTML-объекты могут быть включены в уценку, и ваш браузер должен уметь правильно их отображать.

Если вам недостаточно смайликов и вы хотите, чтобы в вашем README было немного движения, вы также можете добавить GIF-файлы. При добавлении GIF вам понадобится реальный .gif файл, размещенный либо прямо в вашем репозитории, как изображение заголовка, либо на внешнем веб-сайте, например https://imgur.com/. Независимо от того, где он размещен, вы включите его, используя:

Есть несколько HTML-тегов, которые можно использовать в разметке GitHub, и <img> - один из них. Это упрощает добавление изображений и GIF-файлов, подобных этому, в мой README:

Продемонстрируйте свои репо

Профиль Everyones на GitHub - это просто место, где можно продемонстрировать некоторые из ваших репозиториев и выделить вашу активность / вклад. С профилем GitHub README вы можете выделить эти вещи еще лучше, используя github-readme-stats. GitHub Readme Stats - это инструмент, который позволяет вам генерировать статистику GitHub для ваших вкладов и репозиториев и прикреплять их к вашему README. Если вы решите использовать все доступные карточки статистики, вы можете получить что-то вроде этого:

Каждая из этих карточек имеет множество опций для настройки, включая темы, значки или языки отображения. Для создания любой из этих карт вы можете использовать следующий шаблон:

Где CARD_TYPE может быть либо top-langs для списка популярных языков, либо pin для закрепленного репозитория. Если оставить поле пустым, по умолчанию будет использоваться агрегированная статистика пользователей GitHub. Чтобы увидеть больше параметров настройки, см. Документацию в репозитории github-readme-stats или вы можете почерпнуть вдохновение из моего здесь, поскольку я использовал почти все доступные параметры, чтобы сопоставить стиль карточек с остальной частью моего README.

Подчеркните свои навыки

Еще одна вещь, которая часто появляется в профилях людей, - это список их навыков и технологий, которые им нравится использовать. Чтобы наглядно их визуализировать, можно использовать значки shields.io. Они бывают разных стилей, но мой предпочтительный выглядит так:

Чтобы создать такой значок, вы должны включить линию уценки в следующем шаблоне:

Если этот стиль вам не нравится, вы можете поиграть с цветами, форматами и стилями, показанными на shields.io. Если вы, как и я, поклонник значков на значках, то вам может пригодиться simpleicons.org, так как он перечисляет множество значков, которые можно здесь использовать. Если они не доступны напрямую с этими значками, вы все равно можете добавить их вручную, загрузив и закодировав их в base64. Тогда уценка будет выглядеть так:

Включите социальные сети

Вы обязательно должны указать какую-то контактную информацию в своем профиле, будь то электронная почта, твиттер, LinkedIn или другие социальные сети. Что бы вы ни выбрали для включения, вы можете использовать ссылки на значки, чтобы людям было проще найти / заметить.

Чтобы включить их в текст, вы можете использовать следующую уценку:

При отрисовке указанная выше уценка будет выглядеть примерно так:

Заключение

Сделайте его кратким, креативным и оригинальным, но, самое главное, сделайте его своим.

Надеюсь, эта статья вдохновила вас на создание собственного профиля GitHub README. Помимо этой статьи, вы также можете найти источник моего README полезным - вы можете проверить его на https://github.com/MartinHeinz/MartinHeinz. Если вам нужны еще несколько примеров для начала, я рекомендую просмотреть некоторые из README в awesome-github-profile-readme.

Если вам понравилась эта статья, ознакомьтесь с другими моими статьями ниже!

Эта статья изначально была размещена на martinheinz.dev