Если вы не хотите создавать свою собственную систему для управления своим контентом, используйте автономную CMS! Недавно я играл с Prismic и Nuxt.js (фреймворк веб-приложений на основе Vue.js, который делает создание приложений с рендерингом на сервере веселым и простым), и эта комбинация заставила меня почувствовать, что я живу в идеальном Мир.
Однако невозможно создать идеальный мир, не ударившись головой.
По крайней мере, нам пришлось только несколько дней ломать голову, прежде чем мы нашли оптимальный способ использования Prismic с Nuxt.js.
Дело в том, что даже если Prismic предоставляет вам специальный пакет Vue.js (prismic-vue) для простой интеграции и запроса его API, когда вы имеете дело с Nuxt.js, это совсем другая история. Потому что вам придется:
- Используйте их комплект для разработки Javascript (prismic-javascript) вместо комплекта для vuejs (prismic-vue).
- Запросите исходные данные для рендеринга в ловушке asyncData.
- Передайте вновь извлеченные атрибуты объекта данных нужным компонентам с помощью свойств.
Это звучит просто ... но для меня это показалось сложным, поскольку я был новичком в игре, и никто другой, кто делал это раньше, не поделился ею (так что на этот раз Stack Overflow не пришел мне на помощь).
Теперь я углублюсь в детали и дам вам короткое пошаговое руководство, чтобы сделать эту магию единорога реальностью:
- Перейдите на панель управления Prismic и создайте репозиторий контента.
- Создайте несколько настраиваемых типов и опубликуйте некоторые документы в своем репозитории.
- Добавьте набор Prismic javascript в качестве зависимости к вашему проекту (npm install prismic-javascript --save)
- Импортируйте Prismic на свою страницу.
Во-первых, мы будем использовать ловушку жизненного цикла created () для запроса API. (не забудьте изменить имя репозитория apiEndpoint на свое!).
Но, ребята, здесь все усложняется. Мы можем запрашивать документы в нашем репозитории и регистрировать их в консоли, но как мы можем указать нашему серверу использовать наши данные в репозитории Prismic перед отправкой контента в браузер?
- Сначала нам нужно использовать async asyncData (context) вместо created ().
- Затем переместите данные нашего шаблона из data () в наш asyncData (context) и определите его в переменной.
- Скажите нашему серверу, чтобы он дождался ответа API от Prismic и изменил наши переменные данные на результат нашего запроса.
- И только потом отрисовываем наши данные в браузере.
Вот и все. Но вы все равно можете столкнуться с проблемами, связанными с запросом тех или иных данных. Я обычно использую отладчик Visual Code Studio (это рекомендуемый способ работы) или просто console.log результат (что я также делаю, когда мне лень), чтобы узнать.
И последнее, но не менее важное: если вы используете контент, связанный с отношениями, вы должны поступить следующим образом:
Удачи прямо сейчас!
Если вы пытаетесь связаться со мной, вы можете найти меня в Твиттере или мы можем поговорить здесь.
