Бен Галблер
Сначала я наткнулся на эту идею на Это Веб-сайт. Поскольку учебник есть несколько лет, я написал новый учебник с обновленным кодом.
Если вы спешите, вы можете найти завершенный код здесь .
Мы все знаем о них или используем их – блестящие значки на вершине почти каждого Readme, которые говорят такие вещи, как « Build: прохождение », или « Размер: 10 кб ». Это руководство научит вас, как создавать свои собственные значки, ни с чем Node.js, Expressjs и беркой.
Теперь для учебника
Предварительные условия
Это руководство предполагает, что у вас уже установлены Node.js и NPM (или пряжа). Если вы этого не сделаете, перейдите на сайт узла здесь (Он устанавливает с NPM по умолчанию).
Настраивать
Во-первых, создайте новый каталог и CD внутрь:
mkdir badge-generator && cd badge-generator
Далее установите необходимые зависимости, Экспресс и Белка Отказ
С НПМ:
npm install express squirrelly
Или для тех, кто использует пряжу:
yarn add express squirrelly
Создание сервера
Нам понадобится два файла только для нашей программы, index.js а также шаблон .svg (Что мы создадим следующим).
Создать файл с именем index.js и вставить следующий код:
Это открывает сервер на порту 8080 и слушает запросы. К концу этого руководства вы сможете сделать запрос на http://localhost: 8080/левый текст/правый текст/цвет И потрясающий значок SVG вернулся! Ура! Но какова часть кода с SQRL о?
var badge = Sqrl.renderFile(path.join(__dirname, 'template.svg'), req.params)
Это там, где находится белка. Мы хотим служить файлу изображения SVG, но содержимое (ширина, длина и текст) изображения будет отличаться каждый раз. Белка – это Шаблон двигателя , программа, которая принимает файл или строка, называемая шаблоном и вставляет данные. Он также делает некоторые другие модульные вещи, такие как обработка кэширования, но нам не нужно беспокоиться об этом.
Код выше считывает файл с именем шаблон .svg тогда использует req.params (объект, содержащий пути) для заполнения шаблона. В этом случае req.params будет выглядеть как:
{ left: "first-part-of-the-url-path", right: "second-part-of-the-url-path", color: "third-part"}Создание шаблона
Создайте новый файл под названием шаблон .svg и вставьте следующий код:
Вы можете прочитать полную белковую документы здесь , но по сути, что-нибудь между двойными брекетами: {{ и }} будет заменен его фактической ценностью.
Но подожди: мы прошли только в левый , правильно и цвет – Где мы получили левая и rightwidth из? Это то, что код ниже (в верхней части шаблона) делает; используя JS помощник (который позволяет писать JS внутри шаблона), он определяет новую переменную, называемую левая .
{{js(options.leftWidth = options.left.length * 10)/}}Есть еще одна вещь, чтобы сделать. Обратите внимание, что строка 18 выглядит так:
С изображениями SVG атрибут заполнения должен либо содержать один из нескольких предопределенных цветов, которые не смотрят на то великолепно или RGB или шестигранный цвет. Мы хотим использовать шестнадцатеричные коды, но есть улов: вы заметите, что если вы входите http://localhost: 8080/некоторые/текст/#fff В браузер, он считает, что шестнадцатеричный код в конце – это хэш в конце URL, и Express не распознает его.
Что мы собираемся сделать, это создать помощник (под названием returncolor ), которые будут переводить цветные слова, такие как «BrightGreen», «Green» и «красный», в шестнадцатеричные цветовые коды. Вставьте следующее в любом месте в Index.js:
Посмотрите, работает ли это
Тип Узел index.js в ваш терминал, затем перейдите к http://localhost: 8080/test/badge/bridgergreen Отказ Если все прошло хорошо, вы должны увидеть значок!
Если что-то бросает ошибку, сравните свой код в рабочий код здесь Отказ
Вы можете найти больше информации о березе ниже.
Белка Документация Белка находится всего в 2 КБ, имеет 0 зависимостей, и быстро распадает. squirrelly.js.org
Спасибо за чтение этого руководства. Я надеюсь, что это было полезно!
Оригинал: “https://www.freecodecamp.org/news/how-to-generate-readme-badges-with-express-and-squirrelly-77310125dca0/”