Для начинающих Node.js: как шаг за шагом
Я новичок.
Но вот так, в любом случае.
Метаданные социальных сетей раздражают. Каждый раз, когда я хочу поделиться проектом в Facebook, Twitter, Slack или где-то еще, мне приходится искать все странности OG и Twitter Cards. В конце концов, я хочу, чтобы мои ссылки волшебным образом «разворачивались» во что-то иное, чем подчеркнутый синим текст.
https://www.crappy-link/no-metadata/too-lazy/have-no-clue/index.html
Я хочу классные ссылки без необходимости делать много работы. Введите генератор метатегов. Полезный инструмент и хороший проект для таких, как я, работающих с узлом все две недели. Мне нужны крутые ссылки, например:
Приложение узла
Обзор видео
Шаг первый: настройка проекта
Я использовал экспресс-генератор. Супер легко. Он настраивает вас на экспресс и некоторый шаблон для базового приложения. Я сделал свой в Cloud 9 (который поставляется с Node, Git и кучей вещей). Очевидно, для этого вам понадобится Node.
npm i -g экспресс-генератор
экспресс [крутое название для каталога проекта]
компакт-диск [крутое имя]
установка нпм
запуск нпм
Серьезно легко. Вы получаете Jade в качестве шаблонизатора. Конечно, вы можете настроить его на использование чего-то другого, но для остальной части этого руководства мы оптимизируем его. Хорошо? Хорошо.
Если вы новичок в Jade/Pug, вы можете ознакомиться с Jade Docs. Ниже вы найдете множество примеров кода. Механизмы шаблонов поначалу сбивают с толку, но после небольшого периода настройки становятся действительно приятными. Также этот Конвертер HTML в Jade потрясающий.
Шаг второй: исходные данные для проектирования
На моем сайте в видео есть загрузчик изображений. Это другая история. Мы заменим мое меню выбора на обычный ввод, вам просто нужно где-то разместить свое изображение, чтобы оно имело URL-адрес. Ничего страшного.
Для простоты вы можете просто открыть /views/index.jade. Все, что вам нужно сделать, это создать форму с некоторыми входными данными. Я сделал это простым с заголовком, URL-адресом, описанием, дескриптором Twitter (на самом деле это не нужно) и URL-адресом изображения.
Здесь важны определенные вещи. Действие и метод формы. Действие — это место, куда будет отправлена форма. Посмотрите, как метод установлен на «POST». Мы также используем ввод типа submit. Класс .button предназначен для Foundation, но вы можете использовать любой другой CSS Framework. Также обратите внимание, что мы использовали атрибут «name». Это то, что мы будем использовать для получения этих данных в нашем обработчике маршрута, который мы сейчас создадим.
Шаг 3. Разработка обработчика маршрута
Таким образом, эта форма будет POST в /api/metatags. Нам нужно обработать это в нашем приложении. Давайте откроем /routes/index.html. Теперь прокладываем новый маршрут. Мне нравится делать их так:
Во-первых, не обращайте внимания на автора. Это виртуальный метод на мангусте, опять отдельная история 😜.
Теперь у нас есть данные, которые вводятся в форму. Мне лень, поэтому я дал req.body псевдоним a. Промежуточное ПО Body Parser, которое входит в состав нашей установки, позволяет нам легко получить эту информацию. Мы используем запись в квадратных скобках, потому что точка не работает с тире в узле. Мы имеем в виду свойство name этих входных данных.
Я делаю здесь простую вещь. Я создаю массив с именем payload. Затем я визуализирую /views/metatag и передаю объект с ключом data и значением payload. Теперь я могу использовать эти данные в шаблоне. Если вы следуете этому примеру, вы можете создать новое представление или, что еще проще, просто снова отобразить то же представление, в котором была форма. Скорее всего, «индекс».
Шаг 4. Визуализация метатегов
Отличительной особенностью шаблонизаторов, таких как Jade/Pug, является то, что вы можете условно отображать данные на основе данных, которые вы передаете. Вы должны иметь возможность включить это в верхнюю часть вашего /views/index.jade.
Это всего лишь пример, показывающий, как интерполируются данные. Ничего из этого не будет отображаться до тех пор, пока форма не будет отправлена и не появятся фактические данные. Я решил поставить свою над формой. Поскольку мы использовали массив, нам не нужны никакие циклы, мы уже знаем, где что находится. Синтаксис довольно прост.
Вам не нужны все дополнительные диапазоны и классы, но я хотел украсить внешний вид моего вывода.
Я использовал Руководство разработчика Facebook и Руководство разработчика Twitter, чтобы найти формат метатега, надеюсь, в последний раз. У обоих есть ссылки на тестирование, где вы можете ввести URL-адрес своей ссылки и посмотреть, как будет разворачиваться карта. Полезно, так как вам не нужно публиковать, чтобы узнать.
Шаг 5. Наслаждайтесь работой
Конечно, для настройки требуется немного усилий. Но теперь вы можете ввести 5 входных данных и мгновенно получить все нужные теги. Просто скопируйте и вставьте в заголовок ваших html-файлов. Вы также можете добавить другие метаданные, такие как charset, title и все остальное. У вас есть возможность использовать любые результаты, которые вы хотите. И вы сделали это сами. Лучше иметь больше метаданных, чем вам нужно, а не скучную подчеркнутую ссылку в качестве вашего статуса в Facebook.
Парные ключи на вынос:
Используйте ДВОЙНЫЕ КАТЫЧКИ при создании шаблонов метатегов. Одинарные кавычки будут иметь неприятные последствия при вводе апострофа. Кроме того, скребки для Facebook и Twitter, похоже, не собирали метаданные, когда я (по своей лени) изначально использовал одинарные кавычки.
Следите за новыми статьями How To Step by Step для начинающих. Плюс загляните на мой YouTube Channel. Возможно, как настроить этот загрузчик AWS S3… я думаю, это довольно круто.
