предисловие

Логотип GitHub, значок GitHub, вы можете назвать его значком. Это маленькие значки, которые часто можно увидеть в файлах README проекта и которые указывают статус сборки или информацию о версии. так:

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

Во-первых, о логотипе

Изображение логотипа разделено на левую и правую части, левая — заголовок, правая — контент, как пара ключ-значение.
Официальный сайт логотипа GitHub:shields.io/
Спецификация значка

2. Как добавить динамический логотип

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

Обычно используемые динамические логотипы:

Статус непрерывной интеграции
Информация о версии проекта
тестовое покрытие кода
Загрузка проекта
Статистика участников и многое другое

здесь сTravis CIНапример, состояние непрерывной интеграции. нет связиTravis CIВы можете увидеть мою предыдущую статьюНепрерывная интеграция и автоматическое развертывание с Travis CI+GitHub

АвторизоватьсяTravis CI, войдите в проект, который был настроен и построен, естьbuild passingилиbuild failingлоготип.
Нажмите на нее, во всплывающем окне вы увидитеTravis CIВам предоставляются адреса бейджей в различных форматах.
Вы можете выбрать формат в соответствии с вашими потребностями Формат imageUrl выглядит следующим образом:
```
https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=master
```
Формат уценки выглядит так:
```
[![Build Status](https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=master)](https://www.travis-ci.org/{your-name}/{your-repo-name})
```
Для простоты я выбираюmarkdownФормат. Скопировав содержимое, откройте файл README проекта и вставьте его вверху.
После первых 4 шагов маленький значок готов. Отправьте документ README на удаленный компьютер, обновите страницу GitHub, и через некоторое время вы увидите значок состояния непрерывной интеграции в README. Причина, по которой загрузка занимает некоторое время, заключается в том, что он динамически загружается изTravis CIПлатформа получает статус.

3. Как настроить свой логотип

shields.ioПредоставляет возможность настройки логотипа.

Формат значка логотипа

https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg

связанный логотип

[![](https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg)]({linkUrl})

описание переменной

Название логотипа: текст слева от логотипа
Содержание логотипа: текст справа от логотипа.
Цвет логотипа: цвет фона с правой стороны логотипа, который может быть шестнадцатеричным значением цвета или цветом на английском языке. Поддерживаемые цвета на английском языке следующие:

между переменными-соединять. Замените эти 3 переменные тем, что вам нужно для создания пользовательского логотипа.

взять каштан

Например, вот логотип моего блога:

[![](https://img.shields.io/badge/blog-@champyin-red.svg)](https://champyin.com)

Эффект:

Щелкнув по логотипу, вы откроете соответствующий адрес linkUrl, то есть сразу перейдете к моему блогу.

Передовой

В дополнение к трем параметрам, упомянутым выше,shields.ioтакже предоставляет некоторыеquery stringдля управления стилем логотипа. Метод использования соответствует строке запроса URL: адрес значка логотипа?{имя параметра}={значение параметра}, использование нескольких параметров&соединять:

https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg?{参数名1}={参数值1}&{参数名2}={参数值2}

общийquery stringПараметры:

style: управляет стилем темы логотипа, значением style может быть:plastic | flat | flat-square | social.
метка: текст заголовка, используемый для принудительной перезаписи исходного логотипа.
colorA: Управляет цветом фона левой половины.В качестве параметров можно использовать только шестнадцатеричные значения цвета, нельзя использовать английский цвет.
colorB: Управляет цветом фона правой половины.

Возьмите параметр стиля в качестве примера

plasticСтерео эффект:

![](https://img.shields.io/badge/blog-@champyin-orange.svg?style=plastic)

flatЭффект сглаживания, который также является эффектом по умолчанию:

![](https://img.shields.io/badge/blog-@champyin-yellow.svg?style=flat)

flat-squareЭффект Flatten + De-Round:

![](https://img.shields.io/badge/blog-@champyin-success.svg?style=flat-square)

socialЭффекты социального стиля:

![](https://img.shields.io/badge/blog-@champyin-blue.svg?style=social)

Параметров много, использование аналогичное. Дополнительную информацию можно найти наshields.ioПроверьте это.

Суммировать

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

Добро пожаловать на перепечатку, пожалуйста, укажите источник:Найдите Pinyin.com/2019/10/05/…