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. Посмотрите их здесь.