Летом 2020 года GiHub позволил создавать собственные файлы README. И хотя платформа предлагает готовые шаблоны, о какой кастомизации может идти речь, если профили у всех одинаковые? За последние три года сообщество нашло множество способов выделиться.
Узнайте, как это сделать, в нашей документации ниже.
Создайте профиль README.me
Чтобы создать README, необходимо сначала создать новый публичный репозиторий, введя в имя свой никнейм. Как только мы откроем настройки, Octocat поздравит нас с созданием хранилища личных профилей. GitHub сразу предоставляет базовый шаблон, но давайте поговорим о том, как сделать дизайн немного интереснее.
Для работы с файлом Readme вам потребуются знания языков разметки Markdown и HTML. К сожалению, первый выравнивает любой текст по левому краю — HTML просто решает эту проблему и выравнивает текст и устанавливает размер по нужному изображению, если это необходимо. Вот почему мы будем использовать его.
Как создать привлекательный заголовок
Чтобы было проще, давайте сделаем несколько фотографий профиля писателя Данила.
Давайте центрируем заголовок с помощью HTML, чтобы он выделялся из основного текста, добавим ссылку на сайт-визитку и смайлик с машущей рукой. Вначале мы опишем, что делаем, и в конце добавим флажок.
Код выглядит следующим образом:
<h1 align="center">Hi there, I'm <a href=" target="_blank">Daniil</a>
<img src=" height="32"/></h1>
<h3 align="center">Computer science student, IT news writer from Russia ??</h3>Некоторые люди используют баннеры вместо текста в шапке, которую можно создать в любом редакторе или дизайнере, например ReHeader.
Если вы хотите поиграть со шрифтами, вы всегда можете воспользоваться такими сервисами, как Fancy Letters; Шрифты-конверты включены в Юникод, поэтому проблем с отображением быть не должно.
Пользователи также создали интересный репозиторий с эффектом печатной машинки для профиля Readme, достаточно зайти в веб-интерфейс (и программа отобразит готовый код в HTML и разметке Markdown.
Иконки и достижения
1. Простые значки — коллекция иконок популярных брендов, компаний, технологий и услуг. На официальном сайте проекта пользователи легко найдут подходящую иконку, скачают ее в формате SVG и встроят в свой Markdown-файл. Но изображения лучше вставлять с помощью HTML — так удобнее задавать необходимый размер.
2. Шилдс.io — инструмент для создания персонализированных бейджей. Вы можете выбрать готовые шаблоны и настроить их под свой случай, а можете настроить полностью с нуля.
Итак, давайте двигаться дальше. Приятно ли демонстрировать свои значки? Пользователи разработали целую кучу инструментов, позволяющих просмотреть все понравившиеся проекты в статистике. Давайте рассмотрим несколько. Вот тут-то пользователи действительно постарались и разработали кучу модулей, чтобы максимально персонализировать свой профиль.
Виджеты для статистики
3. Гитхаб Трофи — трофеи и достижения прямо в вашем профиле. 10 цветовых комбинаций для вставки виджета в ваш readme, вы можете выбрать расположение награды и настроить фильтрацию. Для добавления необходимо вставить в свой файл следующий md-код, параметр username= необходимо заменить на ваш никнейм на платформе.
[](https://github.com/ryo-ma/github-profile-trophy)
4. Статистика самой длинной серии — указывается продолжительность ежедневных сессий и общее количество вкладов в сообщество. Здесь вы можете показать, насколько вы готовы к работе))) Автор виджета предоставляет подробную инструкцию по использованию и визуальный дизайнер для адаптации матрицы под ваш профиль. Если вы вставите код из примеров, то параметр user= необходимо заменить на ваш никнейм; Если вы создадите свой дизайн в дизайнере, система предоставит код, необходимый для вставки.
[](https://git.io/streak-stats)
5. Карта статистики GitHub — виджет отображает основную информацию о деятельности пользователя на платформе — общее количество звезд, вовлеченностей и вкладов в сообщество. Предоставляет сравнительную оценку пользователю, сравнивая его активность с активностью других участников GitHub. Несколько основных тем и возможность настройки.
Чтобы добавить виджет на свой сайт, вам необходимо скопировать соответствующий код, вставить его в файл и заменить параметр «имя пользователя» на свое фактическое имя пользователя.
[](https://github.com/anuraghazra/github-readme-stats)6. Дополнительные пины GitHub — позволяет прикрепить еще несколько репозиториев внутри файла README в виде карточки и не ограничиваться всего 6 проектами.
Для вставки необходимо заменить параметры username= на текущий никнейм, repo= на имя нужного репозитория, а в скобках указать ссылку на сам репозиторий.
[](https://github.com/anuraghazra/github-readme-stats)
7. Кодовые войны — виджет, отображающий количество решенных задач и текущий уровень пользователя на платформе. Ссылки на карточки можно найти в вашем профиле, нажав кнопку «Показать значки профиля» под аватаркой. Нормальной настройки нет, но есть три варианта размера виджета.
Большой (large): [](https://www.codewars.com/users/username) Вам необходимо заменить оба поля имени пользователя текущим ником на платформе Codewars и вставить его в свой md-файл.
Все, наверное, слышали о литкоде, «посланнике» головоломок высокого класса для программистов, так сказать. Ну а с помощью LeetCode Readme Stats вы можете просмотреть данные о количестве решенных задач с разными уровнями сложности. Автор также предлагает инструкции по настройке отслеживания статистики с помощью GitHub Actions. Параметр username= следует заменить на текущий.
Светлая тема:
[](https://github.com/KnlnKS/leetcode-stats)Темная тема:
[](https://github.com/KnlnKS/leetcode-stats)
8. Счетчик просмотров профиля GitHub — небольшой бейдж, с помощью которого можно отслеживать количество посетителей.
9. График активности Github Readme — виджет с графиком активности на платформе за последний месяц. Интересно, зачем нужна статистика по такой активности, но автор предлагает более 10 тем по настройке и инструкций по настройке.
Вставка производится обычным способом — скопируйте код, замените параметр username= на нужный и вставьте в свой md файл.
[](https://github.com/ashutosh00710/github-readme-activity-graph)
10. Виджет «Ознакомьтесь с GitHub StackOverflow» Позволяет вставлять статистику вклада сообщества StackOverflow в свой профиль GitHub. Вы можете выбрать одну из двух тем и двух размеров карточек.
Чтобы использовать виджет в своем профиле README, просто скопируйте код и замените параметр userID своим именем пользователя. Тему можно выбрать с помощью параметра theme (лизать) или (темный) и размер с помощью параметра макета (по умолчанию) или (компактный).
[](https://stackoverflow.com/users/6558042/omid-nikrah)
11. Сводные карточки профиля GitHub — карта с популярными языками и расписанием мероприятий. Вы можете интегрироваться с помощью Markdown и GitHub Actions. На выбор предлагается 10 цветовых комбинаций.
В репозитории есть инструкции, но есть и веб-приложение для генерации необходимых ссылок. Встроенный код (замените username= на свой ник и theme= на название темы в списке).
Действия GitHub
Но теперь давайте перейдем к самому интересному: Действия позволяют автоматизировать репозитории для отображения информации в реальном времени и встраивать интерактивные игры в Readme. Приведем несколько примеров.
1. Статистика Waka Read Me предоставляет возможность динамически отображать статистику службы Wakatime в профиле GitHub. Этот инструмент позволяет вам выбрать конкретную информацию для отображения, например статистику по языкам программирования, количество коммитов в разное время дня, а также данные по средам разработки и используемым операционным системам. Для этого используются плагины Wakatime, собирающие данные из популярных сред разработки.
2. Рабочий процесс публикации в блоге В планах реализовать вывод последних статей из различных блогов или социальных сетей в формате md-файла на GitHub. Инструкции включают подробные шаги по интеграции с различными платформами, такими как Dev.to, Medium, Stackoverflow, Reddit, YouTube, а также возможность использовать RSS-ссылки для отображения последних публикаций из собственного блога. Процесс установки включает в себя создание файлов и использование действий GitHub для регулярного обновления информации.
Если вы хотите добавить результаты из сообщений в блоге, сам код будет выглядеть так:
Сначала создайте md-файл профиля со следующим содержимым:
<!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END -->Затем в репозитории создайте путь username/.github/workflows/blog-post-workflow.yml и заполните его:
name: Latest blog post workflow
on:
schedule:
- cron: '0 * * * *'
workflow_dispatch:
jobs:
update-readme-with-blog:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "ССЫЛКА НА ПРОФИЛЬ"
Заменитеfeed_list на вашу RSS-ссылку.
И вот!
3. Метрика — это обширная библиотека с более чем 30 различными плагинами и более 200 опциями для настройки динамической инфографики. Эти плагины позволяют просматривать различную статистику, такую как количество коммитов, популярные языки, последние обновления и вклад сообщества.
4. Стиль терминала статистики GitHub имеет анимированное окно статистики в дизайне терминала, которое также обновляется с помощью GitHub Actions. Пользователи могут выбирать из десяти цветовых комбинаций и персонализировать информацию.
5. Статистика Тодоист интегрируется со службой отслеживания задач Todoist, отображая базовую статистику о работе над задачами в вашем профиле GitHub. Подключение осуществляется через GitHub Actions или другие решения GitHub.
«snk» добавляет в файл md профиля анимированную сетку графики вклада, в которой змея перемещается и поедает зеленые квадраты активности. Эта анимация создается ежедневно с помощью GitHub Actions, добавляя оригинальный элемент на страницу профиля.
Вот и все! Другие инструменты вы можете найти в Интернете.) Не бойтесь экспериментировать, но не забывайте о стиле.
