Повышение продуктивности с помощью плагинов Strapi

В этой статье мы рассмотрим настройку и использование пяти плагинов Strapi, которые помогут вам повысить производительность.

Автор: Popoola Temitope

Повышение производительности сегодня стало необходимым для малого и большого бизнеса, а также для разработчиков. В безголовых CMS, таких как Strapi, есть множество готовых плагинов, которые облегчают и ускоряют рабочий процесс на сайтах. Использование плагинов для настройки вашего сайта или блога Strapi — это отличный способ улучшить производительность, функциональность и поисковую оптимизацию (SEO) вашего сайта, и это лишь некоторые из них.

Например, если вы хотите, чтобы ваши пользователи могли использовать метод аутентификации Google или магическую проверку ссылок на вашем сайте, использование плагина GoogleAuth или плагина Passwordless поможет достичь этого без особых затрат времени на интеграцию.

Все, что вам нужно сделать, — это настроить плагин из вашей приборной панели Strapi. Рынок Strapi содержит коллекции плагинов, которые не ограничиваются только уровнем безопасности. Они также включают другие плагины, которые могут быть использованы для анализа, настройки и эффективного управления контентом.

В этом учебнике мы рассмотрим пять плагинов Strapi. Мы рассмотрим, какие функции когда необходимы и как мы можем использовать каждый из плагинов в наших приложениях. Но прежде чем мы начнем, если вы новичок в Strapi CMS или плагинах Strapi, давайте рассмотрим, что такое Strapi и что такое плагины Strapi.

Что такое Strapi?

Strapi — это безголовая CMS с открытым исходным кодом, основанная на Node.js для создания быстрых и динамичных веб-сайтов. Она предоставляет простую в использовании приборную панель для управления и доставки контента на фронтенд через API-вызов.

В Strapi бэкэнд отделен от фронтэнда с помощью технологии Jamstack. Это позволяет вашему сайту быть роботизированным, так что если на фронтенде возникает проблема, она не влияет на бэкенд.

Установка Strapi

Вы новичок в Strapi? Если да, то для начала работы с Strapi вам потребуется установить на свой компьютер следующие программы..:

  • Node.js V14 или V12
  • NPM или Yarn

После того, как вы установили вышеперечисленные программы, следующим шагом будет установка Strapi. Вы можете установить Strapi с помощью любой из приведенных ниже команд.

Для npm выполните:

    npx create-strapi-app survey-app --quickstart
Войти в полноэкранный режим Выйти из полноэкранного режима

Для yarn выполните:

    yarn create strapi-app survey-app --quickstart
Войти в полноэкранный режим Выйти из полноэкранного режима

После завершения установки приложение Strapi будет автоматически запущено в браузере. Зарегистрируйтесь, и вы будете перенаправлены на вашу приборную панель.

Плагины для повышения производительности

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

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

Аналогично, управление контентом без использования соответствующих плагинов существенно повлияет на качество содержимого вашего сайта. Рынок Strapi содержит коллекцию плагинов, которые можно использовать для следующих целей:

  • Настроить ваш сайт,
  • Повысить безопасность сайта,
  • улучшить доступность сайта и
  • Облегчить процесс разработки за счет расширения функциональности.

Посетите торговую площадку Strapi, чтобы просмотреть список доступных плагинов. В меню панели инструментов нажмите на торговую площадку.

Теперь давайте продемонстрируем, как настроить и использовать некоторые плагины для повышения производительности в приложении Strapi.

Плагин Todo

Плагин Todo позволяет администраторам легко отслеживать прогресс в работе над контентом. Он добавляет список дел рядом с контентом на странице редактирования. Пользователь-администратор может добавить список задач, которые должны быть выполнены авторами. Редактор может отметить каждую задачу как выполненную или невыполненную. Супер администратор может решить, публиковать контент или нет, основываясь на выполненных заданиях.

Установка и настройка

Выполните приведенную ниже команду, чтобы установить плагин Todo:

    npm install @_sh/strapi-plugin-todo
    npm run build 
    npm run develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Или

    yarn add @_sh/strapi-plugin-todo
    yarn build
    yarn develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Добавление задач в контент

После завершения установки перейдите к Менеджеру контента на приборной панели Strapi. Нажмите на любой тип коллекции, а затем нажмите на Редактировать на любом контенте.

Вы можете добавить задачи в список дел, нажав «Добавить задачу» в разделе TODO, который находится справа, под разделом Locales.

Затем введите задачу и нажмите «Сохранить». Когда задача будет выполнена, отметьте ее как завершенную, поставив галочку в поле задачи, как показано ниже.

Плагин Mux Video Uploader

Mux Video Uploader — это плагин Strapi для управления видео на вашем сайте. Этот плагин позволяет легко загружать видео из приборной панели Strapi в Mux, а все управление видео осуществляется из приборной панели Strapi. С помощью этого плагина вы можете загружать контент через URL или загрузку файлов. Он также поддерживает загрузку аудио.

Установка

Выполните следующие команды для установки плагина загрузки видео mux:

    npm i strapi-plugin-mux-video-uploader@latest
    npm run build 
    npm run develop
Вход в полноэкранный режим Выйти из полноэкранного режима

Или

    yarn add strapi-plugin-mux-video-uploader@latest
    yarn build
    yarn develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Конфигурация

Теперь, когда мы установили плагин для загрузки видео Mux, давайте приступим к его настройке. Создайте новую учетную запись Mux или войдите в панель управления mux.com. На боковой панели перейдите к настройкам >API Access.

Когда форма будет заполнена, нажмите на Generate Token. В результате будут сгенерированы идентификатор токена доступа и секретный ключ. Скопируйте их.

Затем вернитесь на приборную панель Mux и перейдите к настройкам >webhooks. Нажмите на «Создать новый webhook». Для URL веб-крючка используйте [https://localhost:1337/mux-video-uploader/webhook-handler](https://localhost:1337/mux-video-uploader/webhook-handler) и нажмите на «Create Webhook». После создания веб-крючка скопируйте его СЕКРЕТ ПОДПИСИ.

На приборной панели Strapi нажмите Mux Video Uploader на боковой панели, а затем нажмите Webhook Settings. Заполните соответствующие настройки и нажмите на сохранить.

Вы можете загрузить столько видео, сколько хотите, нажав на New Upload. После выбора видео нажмите на Save.

Плагин Publisher

Автоматизация процесса публикации контента дает вашему сайту большую гибкость. С помощью плагина Strapi Publisher вы можете легко планировать даты и время публикации и неопубликования вашего контента.

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

Установка

Чтобы добавить плагин publisher в свой проект, выполните следующие команды:

    npm install strapi-plugin-plubisher
    npm run build 
    npm run develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Или

    yarn add strapi-plugin-plubisher
    yarn build
    yarn develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Использование Publisher

После успешной установки плагина, добавьте дату(ы) публикации/непубликации с левой стороны при редактировании контента, как показано ниже.

Чтобы запланировать публикацию или неопубликование, нажмите на «Добавить дату публикации» или «Добавить дату неопубликования» соответственно, затем выберите дату и время. Теперь нажмите на «Сохранить». Вы можете редактировать или публиковать/не публиковать дату в любое время.

Плагин GoogleAuth

Плагин GoogleAuth от Strapi — это простой в использовании метод кроссбраузерной аутентификации, который позволяет пользователям проходить аутентификацию с помощью аккаунта Google. С помощью плагина GoogleAuth вы можете реализовать аутентификацию Google на страницах регистрации и входа в систему без необходимости повторного ввода электронной почты, имени пользователя и пароля каждый раз, когда пользователи заходят на ваш сайт.

Установка и настройка

Чтобы использовать плагин GoogleAuth в своем приложении, выполните следующие команды в терминале:

    npm install strapi-google-auth
    npm run build 
    npm run develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Или

    yarn add strapi-google-auth
    yarn build
    yarn develop
Войти в полноэкранный режим Выйти из полноэкранного режима

После завершения установки плагин GoogleAuth появится на приборной панели вашего меню в разделе плагинов. Чтобы настроить плагин, нажмите на GoogleAuth.

Чтобы добавить данные аутентификатора Google, нажмите на кнопку Создать проект Google. Откроется Google Cloud Console. Нажмите на «Создать новый проект» и перейдите к экрану API & Services -> OAuth consent из бокового меню, затем следуйте шагам подсказки для настройки приложения.

После завершения вышеуказанного шага перейдите в раздел API & Services -> credentials. Затем нажмите на кнопку create credentials -> OAuth Client ID, заполните данные и сохраните.

Теперь скопируйте CLIENT_ID, CLIENT_SECRET, REDIRECT URL и Scopes на страницу плагина Strapi и сохраните его.

Внедрение

Чтобы добавить аутентификацию Google во фронтенд, выполните следующие шаги:

Шаг 1:
Перенаправьте пользователя на http://STRAPI_BACKEND_URL/strapi-google-auth/init. После того, как пользователь будет авторизован, он будет перенаправлен обратно на URL перенаправления, указанный в консоли проекта Google https://redirect_url/?code=REDIRECTION_AUTH_CODE.

Шаг 2:
Далее сделайте POST-запрос к STRAPI_BACKEND_URL/strapi-google-auth/user-profile и отправьте вместе с запросом следующее, чтобы сгенерировать Google TOKEN для просмотра данных пользователя.

    data: {
          code:REDIRECTION_AUTH_CODE
         }
Вход в полноэкранный режим Выход из полноэкранного режима

Плагин Notes

Плагин Strapi Notes является важным плагином, особенно в рабочем процессе контента. Он призван помочь вам организовать контент и предоставить дополнительные полезные ресурсы для авторов. Для компаний, публикующих статьи, редакторы могут добавлять конспекты и другие ресурсы в виде примечаний. Это помогает направлять авторов на создание качественного контента.

Установка

Чтобы установить плагин Notes, выполните следующие команды:

    npm install strapi-plugin-notes
    npm run build 
    npm run develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Или

    yarn add strapi-plugin-notes
    yarn build
    yarn develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Добавление примечаний к содержимому

Во время создания или редактирования контента можно добавлять, редактировать или удалять примечания. Раздел примечаний находится ниже раздела локалей, который расположен в правой части страницы редактирования содержимого, как показано ниже.


o
Чтобы добавить заметку, нажмите на кнопку Добавить, затем введите название заметки и ее содержание, после чего сохраните ее. Чтобы просмотреть или отредактировать примечания, нажмите на примечание.

Заключение

Рынок Strapi содержит более семидесяти плагинов, которые вы можете использовать для повышения производительности вашего сайта. Производительность — это основа успеха в бизнесе. Если вы делаете больше за меньшее время, вы можете потратить больше времени на то, что действительно важно для вашего бизнеса.

В этом уроке мы рассмотрели, как использовать плагины для повышения производительности в приложении Strapi. Мы также показали, как настраивать и использовать некоторые плагины.

Я надеюсь, что эта статья была вам полезна. Если вам нужна дополнительная информация, вы можете посетить Strapi marketplace или документацию Strapi marketplace для получения дополнительной информации.

Оцените статью
devanswers.ru
Добавить комментарий