Эта статья ранее была опубликована в моем основном блоге.
Это произведение является опубликованным прецедентом в главном блоге.
В последней статье я представил новый (предлагаемый) веб-стандарт для веб-монетизации. В этой новой статье мы увидим, как можно создать простой плагин GatsbyJS для внедрения метатега веб-монетизации с помощью SSR API.
Фото Hans-Peter Gauster на Unsplash
Создайте файлы плагина
Из официальной документации плагинов мы можем прочитать, что проект плагина должен понимать некоторые файлы:
Ради этого плагина мы будем использовать только API-интерфейсы SSR, поэтому единственный файл, который нам нужен, — это gatsby-ssr.js '.
Использование SSR API
Как уже было сказано, мы создадим плагин, которому понадобятся только API-интерфейсы SSR, GatsbyJS предоставит эти API-интерфейсы:
В нашем плагине мы будем использовать только onPreRenderHTML, чтобы добавить метатег веб-монетизации в раздел <head> наших страниц. Этот API дает нам объект, содержащий два метода и строку, которые мы можем использовать для выполнения необходимых действий:
getHeadComponents- вернуть массивheadComponents, образованныйReactNodeобъектамиreplaceHeadComponents— принимает массив компонентов в качестве первого аргумента, который заменяет массив headComponents, который передается компонентуhtml.js.pathname— текущий путь, генерируемый API Gatsby SSR.
Подробнее об этом можно прочитать в официальной документации.
Создадим наш файл SSR
В конце наш gatsby-ssr.js должен выглядеть так:
const React = require("react");
export const onPreRenderHTML = (
{ reporter, getHeadComponents, replaceHeadComponents, pathname },
pluginOptions
) => {
if (process.env.NODE_ENV !== `production`) {
reporter.warn("non production environment");
return null;
}
if (!pluginOptions.paymentPointer) {
reporter.warn(
`Payment Pointer is not defined, add it to your gatsby-config.js file.`
);
return null;
}
if (pluginOptions.excludedPaths && pluginOptions.excludedPaths.length > 0) {
const excludedPaths = pluginOptions.excludedPaths;
let isExcluded = excludedPaths.filter(path => pathname.match(path)).length > 0;
if (isExcluded) {
return null;
}
}
const headComponents = getHeadComponents();
const webMonetizationTag = (
<meta name="monetization" content={pluginOptions.paymentPointer} />
);
headComponents.push(webMonetizationTag);
replaceHeadComponents(headComponents);
};
Этот подключаемый модуль добавляет метатег веб-монетизации только тогда, когда он работает в среде peoduction (когда мы используем, например, gatsby build) и принимает массив строк ( excludedPaths) в своей конфигурации, который указывает, какие пути должны не имеют метатега.
Используйте плагин на своем сайте Gatsby
Чтобы использовать ваш новый плагин, вы должны сначала установить его через npm:
npm i gatsby-plugin-web-monetizationИ затем вы должны добавить его в свой файл gatsby-config.js, как вы уже сделали для всех других плагинов. В частности, этот плагин можно создать следующим образом:
Опубликуйте свой новый плагин на NPM
Чтобы опубликовать свой новый плагин в NPM и сделать его доступным для пользователей, вы должны сначала добавить указанные выше поля в свой файл package.json, а затем вы можете запустить npm publish из корня вашего проекта, чтобы опубликовать новый плагин в реестре NPM. (Конечно, вы должны войти в NPM 😉)
Вот и все 😎😎😎
Поздравляем! Вы создали и опубликовали свой первый плагин GatsbyJS.
Плагин также можно найти на мой GitHub, ставьте ⭐, если считаете его полезным! 😻
