Вы правильно прочитали заголовок! В этой статье мы поговорим о слагах и о том, как сгенерировать слаг для сообщения в компоненте блога с помощью Gatsby.js.
Что такое слизняк?
По программному определению Слаг - это уникальный идентификатор веб-адреса, обычно встречающийся в конце URL-адреса. Это также может быть последний компонент, когда новый документ создается в родительском документе; например, ярлык этой страницы - Glossary/Slug. - MDN ( https://developer.mozilla.org/en-US/docs/Glossary/Slug ).
Зачем использовать слизняк?
Хороший вопрос! Вы можете использовать слаг, когда хотите оптимизировать URL-адрес своей поисковой системы. Поисковая оптимизация, также известная как SEO, дает преимущество использования ярлыка в том, что вы можете заменить его на слова с высоким рейтингом, которые вы хотите, чтобы пользователи видели.
URL-адрес ярлыка также может быть удобным для пользователя. Как пользователь, когда вы ищете конкретную информацию, вы с большей вероятностью нажмете URL-ссылку, в которой есть «google.com/friendly-slug». Однако, если вы увидели URL с «google.com/P=832748», вы не будете склонны нажимать на эту ссылку, потому что это может быть не та конкретная информация, которую вы ищете.
Как создать ярлык для сообщения
Для начала вам нужно создать в корневом каталоге файл с именем gatsby-node.js. Здесь вы создадите свой слаг.
Теперь перейдите на сайт Gatsby.js. Мы ищем раздел onCreateNode, который мы будем использовать для создания узла. Для плагинов, которые хотят расширять или преобразовывать узлы, созданные другими плагинами, следует реализовать этот API. Итак, что нам разрешено делать с этим плагином, так это то, что всякий раз, когда создается новый узел уценки, все, что мы будем делать, это прикреплять к нему поле slug.
В console.log () я хочу показать вам несколько объектов, которые будут печататься в терминале. Объекты, на которых мы сосредоточимся, - это данные с ключом «internalComponentName» и его данные внутри, содержащие «internal», который также является объектом, содержащим нашу ценную часть. информации, в которой узел, на который мы хотим нацелить, имеет тип M arkDownRemark
С помощью этой информации мы хотим взять узлы с типом MarkDownRemark, сократить его до слага и добавить новое поле к узлу, чтобы оно было легко доступно. После того, как мы настроили таргетинг на эти конкретные узлы, мы хотим получить fileAbsolutePath, удалить путь, за исключением файла, удалить расширение «.md», оставив нам только слизняк.
Внутри оператора if я беру модуль узла path,, используя его метод basename (),, у нас есть возможность манипулировать нашим абсолютным путем, когда мы возвращаем только последнюю часть пути
Пример
path.basename('/foo/bar/baz/asdf/quux.html');
// Returns: 'quux.html'
path.basename('/foo/bar/baz/asdf/quux.html', '.html');
// Returns: 'quux'Наконец, мы вызовем createNodeField (), с тремя свойствами: узел, имя для нашего нового поля. и значение для нашего слага.
Вот и все! Мы создали нашу первую пулю! Если вы хотите протестировать этот код, чтобы увидеть данные о слагах, в graphQL есть игровая площадка, где мы можем проверить данные нашего узла.
Ссылки
Огромную помощь в написании этого блога оказывает канал Youtube « Gatsby JS - The Great Gatsby Bootcamp [Full Tutorial] », в настоящее время изучаю, как создать Страница блога / профиля в gatsby с использованием этого ресурса. Объяснения Эндрю о том, как создать пулю, ясны и лаконичны.
Как установить игровую площадку graphQL в gatsby:
Не уверены, о чем идет речь? Посетите этот сайт, чтобы узнать больше о том, что такое узел →
Документация по созданию слага в gatsby.js, если вы хотите узнать об этом больше →
Подробнее о слагах →
