Несколько месяцев назад, когда я начал свой путь в качестве разработчика, я видел эти маленькие значки языков в профилях людей на Github и думал, что они очень крутые. Но хотя я посмотрел код профилей, URL-адреса shields.io и страницу Shields.io, я был совершенно ошеломлен тем, как люди это сделали.
Однажды я нашел несколько таких в профиле друзей и подумал, что наконец узнаю, как их делать. Я связался с ней, и она сообщила мне печальную новость о том, что тоже не умеет их делать и просто скопировала у кого-то, как я сделал сам.
Ну, это заняло у меня несколько недель и некоторые исследования, так как я пытался окончить обучение Microverse по разработке программного обеспечения с полным стеком в то же время, но я, наконец, смог «обратно разработать» их URL-адреса. Итак, сегодня я расскажу вам, как вы можете сделать свои собственные значки и сделать свои профили более интересными.
Перво-наперво
Первое, что вам нужно сделать, чтобы сделать свои собственные значки, — это узнать, доступно ли нужное вам изображение логотипа для shields.io. Это довольно просто, доступные изображения: биткойн, зависимая работа, дискорд, gitlab, npm, paypal, serverfault, stackexchange, суперпользователь, телеграмма, travis или любые значки, доступные на Simple Icons:
Простые иконки
1512 бесплатных SVG-иконок для популярных брендов.
На сайте Simple Icons вам просто нужно найти язык, фреймворк, библиотеку или бренд, который вы хотите увидеть, доступен ли он.
1. URL-адрес
Если нужный значок доступен, вы готовы приступить к созданию своего значка. Это первая часть URL-адреса, которая будет предшествовать всем вашим значкам:
Затем, следуя первой части, вы добавите тире и все, что вы хотите, чтобы оно было написано на значке так, как вы хотите, чтобы оно было написано (эта часть чувствительна к регистру), чтобы вы могли добавить язык, фреймворк, библиотеку, бренд или что-то еще, для чего вы хотите сделать значок. Я собираюсь сделать ReactJS, например:
https://img.shields.io/badge/-ReactJS
Если вы хотите написать более одного слова, вам нужно поставить %20 вместо пробела:
https://img.shields.io/badge/-React%20Router
2. Цвет
После имени вам нужно будет добавить цвет к фону значка. URL-адрес Shields.io принимает именованные цвета, а также шестнадцатеричные коды. Некоторые из именованных цветов, которые принимает URL: ярко-зеленый, зеленый, желто-зеленый, желтый, оранжевый, красный, синий, светло-серый, серый/серый, успех, важный, критический, информационный, неактивный, сине-фиолетовый, черный и любой другой цвет, принятый в CSS.
Некоторые наглядные примеры названных цветов
Вы можете найти еще несколько именованных цветов (и шестнадцатеричных кодов) здесь:
Имена цветов — Цветовые коды HTML
Как и шестнадцатеричные цветовые коды, имена цветов HTML можно использовать со встроенными стилями HTML или в отдельной таблице стилей CSS. HTML…
Чтобы добавить названные цвета или шестнадцатеричные коды к ссылке, вам просто нужно, опять же, добавить тире (-) и цвет:
https://img.shields.io/badge/-ReactJS-светло-синий
https://img.shields.io/badge/-ReactJs-61DAFB
Небольшой совет! При поиске логотипов на простых значках сайт уже сообщает вам, какой официальный цвет (и шестнадцатеричный код) для этого значка/бренда:
3. Логотип
Узнав, что логотип существует на Simple Icons, добавить его в URL-адрес может быть просто или немного сложнее. Если у значка одно имя, как в случае с React, Git или JavaScript, это довольно просто, просто добавьте ?logo=‹name_of_the_icon_lowercased›:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react
Для значков с более чем одним словом, таких как React Router, вы должны добавить тире (-) между словами:
https://img.shields.io/badge/-React%20Router-CA4245?logo=react-router
Еще один совет! Некоторые имена могут быть более сложными, например, NodeJs пишется: node-dot-js в URL-адресе. Так что некоторые имена вам, возможно, придется поэкспериментировать. Не стесняйтесь обращаться ко мне в твиттере @itsmetherogue, если у вас возникнут трудности с этим.
4. Цвет логотипа
Вы также можете определить цвет своего логотипа, для этого просто добавьте &logoColor=‹color› в конце URL-адреса. Логотип также принимает именованные цвета и шестнадцатеричные коды:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white
5. Другие стили
Помимо цветов, shields.io также позволяет использовать другие стили значков:
Плоский стиль
Это стиль по умолчанию для этих значков, но если по какой-либо причине стиль по умолчанию изменится от браузера к браузеру или изменится в будущем, чтобы получить этот стиль, вам просто нужно добавить &style=flat в конце URL:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat
Пластиковая пуговица
Это превращает ваш значок в 3D-кнопку, похожую на значок. Чтобы использовать его, просто добавьте &style=plastic в конец URL-адреса.
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=plastic
Квадратный полужирный стиль
Это превращает ваш значок в прямоугольный плоский значок с надписями, написанными заглавными буквами и жирным шрифтом. Чтобы использовать его, просто добавьте &style=for-the-badge в конец URL-адреса.
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=for-the-badge
Квадратный стиль
Это превращает ваш значок в прямоугольный плоский значок. Чтобы использовать его, просто добавьте &style=flat-square в конец URL.
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat-square
Ширина значка
Вы можете увеличить ширину своего логотипа, просто добавив &logoWidth=‹amount_of_pixels›:
https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&logoWidth=30
Есть несколько других стилей, но они не применяются для этого вида значка. Вы можете проверить другие стили и другие типы значков на shields.io, но скоро я напишу еще одну статью об интерактивных значках в реальном времени!
Также есть пакет npm, который позволяет упростить создание значков. Я еще не пробовал, но он называется {badgr} и подробнее о нем можно узнать здесь.
Я надеюсь, что вам понравился этот небольшой урок, и вы воспользуетесь им, чтобы добавить интереса к своим профилям!
