Nuxt.js - это фреймворк, построенный на основе Vue.js, который позволяет создавать статические сайты, одностраничные приложения и рендеринг на стороне сервера. Что удивительно, вы можете запускать один и тот же код всеми этими разными способами, и если мы подключим его к CMS, мы сможем управлять всем контентом оттуда (включая маршрутизацию страниц - потому что я считаю, что это важно).
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: в этом руководстве используется Agility CMS, которую я люблю, но я также работаю в этой компании. Если вас это беспокоит, пожалуйста, поймите, что вы можете применить это руководство ко многим другим поставщикам Headless CMS.
Если вы просто хотите использовать Vue.js для своего приложения и вам не нужны все возможности Nuxt, взгляните на мой предыдущий пост, в котором показано, что вы должны это делать.
Динамическая маршрутизация страниц
Мы собираемся рассказать Nuxt, как отображать динамические пути к страницам прямо из нашей CMS. Мы сможем перемещаться по этим маршрутам как статически, так и в режиме SPA.
Большинство систем Headless CMS не позволяют определять маршрутизацию страниц в самой CMS, но Agility CMS имеет возможность генерировать файл Sitemap JSON в плоском или вложенном формате, что позволяет отображать страницы с модулями внутри Зоны . См. Документацию по Agility для получения дополнительной информации об этом.
Для разработчика разрешение редакторам контента создавать страницы в карте сайта, где они хотят, может показаться пугающим. На самом деле это НАМНОГО упрощает вашу жизнь. Agility позволяет вашим редакторам добавлять страницы в дерево в Content Manager, а также позволяет определять динамические страницы, которые отображаются из списка, например сообщений в блогах или статей. Этот пример будет обрабатывать оба.
Получить код
Код, который я вам расскажу, доступен на GitHub. Клонируйте это репо, чтобы начать: https://github.com/joelvarty/agility-nuxt-app
Контент, который вы увидите при запуске приложения, взят из созданного мной экземпляра Agility CMS. Внизу этого поста я покажу вам, как создать свой собственный бесплатный экземпляр и подключить свои ключи API к этому коду.
Запустить локально
Как я сказал выше, Nuxt великолепен, потому что вы можете запускать его в «универсальном» режиме с рендерингом на стороне сервера или в режиме «SPA» только с рендерингом клиента.
Я создал несколько разных скриптов для работы этого сайта в любом режиме.
# run the site in SPA mode with client rendering only > npm run spa
# run the site in Universal mode with server rendering > npm run dev
Когда вы запустите сайт, вы заметите, что я включил Vuetify в свою установку Nuxt. Это добавляет некоторые накладные расходы, но выглядит красиво. Если вы нажмете гамбургер-меню в левом верхнем углу, вы увидите всплывающее меню навигации, которое соответствует страницам верхнего уровня в CMS.
Если вы нажмете на страницу «Записи», вы увидите список элементов в виде списка. Нажмите на один из них, и вы попадете в раздел «Подробности» для этого сообщения. Это очень просто, но показывает потенциал.
Создание статического сайта
Nuxt дает использование команды «сгенерировать», которая будет просматривать все наши маршруты и генерировать статические html-файлы для всех из них. Я покажу вам, как мы можем этим воспользоваться.
Под капотом
Давайте углубимся в то, что здесь происходит на самом деле, чтобы вы могли увидеть, как мы используем CMS API для создания этого сайта.
Конфигурация
Agility CMS требует от нас ввести GUID и ключи API, а также пару других значений. Я поместил их в файл под названием agility.config.js.
Я также указал ссылочные названия списков общего контента, из которых нам нужно будет получить контент для статической визуализации сайта.
agility.config.js
export default {
guid: '---', //Set your guid here
fetchAPIKey: '---', // Set your fetch apikey here
previewAPIKey: '---', // set your preview apikey
languageCode: 'en-us',
channelName: 'website',
isPreview: false,
caching: {
maxAge: 0
},
sharedContent: ["posts"]
}
Динамическая маршрутизация
Все маршруты для Nuxt обычно хранятся в папке pages, однако мы также можем генерировать динамические маршруты из нашего API с помощью метода extendRoutes. Здесь у нас есть универсальная функция для отправки всех маршрутов компоненту страницы под названием AgilityPage.vue.
Вы также видите, что мы зарегистрировали компонент промежуточного программного обеспечения, который выполняет большую часть API-доступа к CMS. Это настраивается в next.config.js
router: {
middleware: 'agility-middleware',
extendRoutes(routes, resolve) {
routes.push({
name: 'custom',
path: '*',
component: resolve(__dirname, 'agility/AgilityPage.vue')
})
}
},
Статические маршруты страниц
В дополнение к нашей динамической маршрутизации мы также можем генерировать динамические маршруты из нашего API, используя свойство generate наш next.config.js
generate: { fallback: true, routes: function () {
//generate all the routes from the sitemap API const agilityClient = new AgilityClient(); const api = agilityClient.client;
return api.getSitemapFlat({ channelName: agilityClient.config.channelName, languageCode: agilityClient.config.languageCode }).then((sitemapFlat) => {
return Object.keys(sitemapFlat).map((path, index) => { const retPath = index == 0 ? "/" : path; return { route: retPath, payload: sitemapFlat } }) }) } }
Работа с шаблонами и модулями страниц Agility
Agility CMS использует шаблоны страниц, чтобы определять способ отображения страниц. Мы можем использовать компоненты для их визуализации, а также модули, которые могут быть добавлены на страницы редакторами контента Agility.
Я поместил их в папку компоненты / шаблоны и компоненты / модули, и мы регистрируем их в файле с названием agility.components.js. .
Как видите, у меня зарегистрировано 4 модуля и 1 шаблон страницы.
// Our Agility Modules import RichTextArea from './components/modules/RichTextArea' import PostsListing from './components/modules/PostListing' import PostDetails from './components/modules/PostDetails' import Jumbotron from './components/modules/Jumbotron'
// Our Agility PageTemplates import OneColumnTemplate from './components/templates/OneColumnTemplate'
export default { moduleComponents: { RichTextArea, PostsListing, Jumbotron, PostDetails }, pageTemplateComponents: { OneColumnTemplate } }
Компоненты шаблона страницы
Шаблоны страниц состоят из одного или нескольких модулей ContentZone, имя которых было определено в Agility, и мы можем передавать свойства, которые мы получаем от компонента AgilityPage.vue, чтобы наш модуль мог его использовать.
<template> <div class="one-column-template"> <ContentZone name="MainContentZone" :page="page" :pageInSitemap="pageInSitemap" :dynamicPageItem="dynamicPageItem" :sharedContent="sharedContent" :sitemapFlat="sitemapFlat" :sitemapNested="sitemapNested" /> </div> </template>
<script> import ContentZone from '../../agility/AgilityContentZone' export default { props: { page: Object, pageInSitemap: Object, dynamicPageItem: Object, sharedContent: Object, sitemapFlat: Object, sitemapNested: Array }, components: { ContentZone } } </script>
Компоненты модуля
Модули также определяются компонентами, и их действительно легко и быстро построить, поскольку все строго типизированные данные контента из Agility передаются ему как свойства.
Вот сверхпростой модуль JumboTron:
<template> <section class="jumbotron"> <h1>{{item.fields.title}}</h1> <h2>{{item.fields.subTitle}}</h2> </section> </template>
<script> export default { props: { contentID: Number, item: Object, page: Object, pageInSitemap: Object, dynamicPageItem: Object } }; </script>
Развертывания
На самом деле мы хотим развернуть этот сайт дважды: мы хотим иметь возможность использовать его в режиме SPA для предварительного просмотра изменений контента в CMS до их публикации в реальном времени, и мы хотим развернуть статический режим для производства.
Я установил 2 разных сайта Netlify для обработки этих случаев, и мы можем просто указать идентификатор сайта в команде развертывания, чтобы отправлять разные выходные данные в каждое место. Возможно, вам сначала потребуется установить netlify cli.
npm install netlify-cli -g
Режим SPA для предварительного просмотра
#BUILD SPA / PREVIEW SITE > npm run build-spa
#DEPLOY SPA / PREVIEW SITE > netlify deploy --dir=dist --prod --site=SITEID123XYZ
Посмотрите, как он работает здесь: [https://nuxt-preview.netlify.com]
Статический режим производства
#GENERATE STATIC SITE npm run generate
#DEPLOY PRODUCTION STATIC SITE netlify deploy --dir=dist --open --prod --site=SITEID456ABC
Посмотрите здесь: [https://nuxt-prod.netlify.com]
Сделай сам
Если вы хотите начать работать со своим собственным контентом в CMS, я рекомендую Free Tier of Agility CMS, на которую вы подписываетесь здесь.
Документы Agility CMS
У Agility есть документы, посвященные тому, как заставить вас работать с контентом из API Content Fetch. Посмотрите их здесь.