Nuxt 및 Netlify가 포함된 간편한 헤드 없는 Wordpress 두 번째 섹션

2부 - Nuxt와 순풍

Wordpress를 헤드 없는 CMS로 설정합니다.
Netlify를 사용하여 배포하고 CMS에 구축 연결을 추가합니다.
현재 JSON API 노드가 설정되어 있습니다. Vue와 Nuxt를 사용하여 Wordpress 게시물과 미디어 파일에서 온 데이터를 조회하고 조작하며 정적 HTML 파일로 표시할 수 있습니다.

Nuxt 응용 프로그램 만들기

명령줄에서 새로운nuxt 프로젝트를 시작합니다npx create-nuxt-app wp-nuxt이 프레젠테이션에서는 다음 설정을 사용합니다.

? Project name: wp-nuxt
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)

이 설정에서 VS 코드를 사용한다면, 다음 내용을 작업 영역의 .vscode/settings.json에 두어prettier, eslint, Vetur 간의 충돌을 피하고, 저장할 때 코드의 자동 포맷을 정확하게 사용하는 것을 권장합니다.

설치.json

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "vue"
  ],
  "vetur.validation.template": false,
  "css.validate": false,
}

Nuxt는 Vuex(Vue 상태 관리 라이브러리)에 대한 즉각적인 액세스를 제공합니다.store/ 디렉터리로 이동하여 새 파일 index.js을 만듭니다.우리의 대부분의 데이터 획득과 조작은 이 파일에서 진행될 것이다.

스토리지 / 인덱스회사 명

export const state = () => ({
  events: [],
});

export const getters = {};

export const mutations = {};

export const actions = {};

사용자 정의 필드

데이터를 조회하기 전에 Wordpress에서 데이터를 생성해야 합니다.섹션 1에서 작성한 새 사용자 정의 게시물 유형을 추가하고 ACF 필드를 추가합니다.이렇게 하려면 Wordpress 대시보드의 Custom Fields -> Field Groups -> Add New으로 이동하십시오.만약 당신이 ACF의 초보자라면, documentation은 사실상 상당히 괜찮다.

이 프레젠테이션의 경우 Events라는 새 필드 그룹을 만들고 위치를'Post Type이 Event와 같으면 이 필드 그룹을 표시합니다'로 설정합니다.

다음 설정을 사용하여 필수 필드 4개를 추가합니다.

Label: Speaker
Name: speaker
Type: Text

Label: Start Time
Name: start_time
Type Date Time Picker

Label: End Time
Name: end_time
Type: Date Time Picker

Label: Image
Name: image
Type: Image
Return Format: Image Array

몇 가지 이벤트를 추가하고 필수 필드를 작성하며 기본 내용 영역에 텍스트를 추가합니다.http://headless.local/wp-json/wp/v2/events?page=1&per_page=100&_embed=1으로 이동하면 사용자 정의 필드에 입력한 acf과 일치하는 Name 대상을 포함하여 되돌아오는 데이터를 볼 수 있습니다.

데이터 가져오기

Vuex 저장소의 Nuxt repo로 돌아가서 events 그룹을 업데이트하는 데 사용되는 돌연변이와 이벤트 데이터를 가져오는 비동기적인 동작을 추가합니다.

스토리지 / 인덱스회사 명

export const mutations = {
  SET_EVENTS: (state, events) => {
    state.events = events;
  },
};

export const actions = {
  async getEvents({ state, commit }) {
    // if events is already set, stop
    if (state.events.length) return;
    try {
      let events = await this.$axios.$get(`/wp-json/wp/v2/events?page=1&per_page=100&_embed=1`);
      // filter out unnecessary data
      events = events.map(({ id, slug, title, content, acf }) => ({
        id,
        slug,
        title,
        content,
        acf,
      }));
      commit('SET_EVENTS', events);
    } catch (err) {
      console.error('getEvents', err);
    }
  },
};

@nuxtjs/axios을 실행할 때 설치된 create-nuxt-app 모듈은 this.$axios에 접근할 수 있도록 합니다.$get을 사용하면 데이터에 즉시 접근할 수 있고 호출이 끝날 때 일반적인 .then(res => res.data)이 필요하지 않습니다. 이것은 매우 멋진 기능입니다.
이 모든 것이 정상적으로 작동하기 전에, 우리는nuxt 프로필의 baseURL 대상에 axios을 추가해야 합니다.

nuxt。구성회사 명

axios: {
  baseURL: 'http://headless.local',
},

현재, 우리는 구성 요소의 생성된 연결에서 이 동작을 호출합니다.

지수vue

<script>
import { mapState, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(['events']),
  },

  created() {
    this.getEvents();
  },

  methods: {
    ...mapActions(['getEvents']),
  },
};
</script>

또는 this.$store.state.events 및 this.$store.dispatch('getEvents')을 사용하여 Vuex 상태 및 작업에 액세스할 수 있지만 Vuex 매핑 도움말을 사용하는 것이 좋습니다. 더 깨끗해 보이고 특정 구성 요소에서 사용하는 모든 전역 상태와 동작을 한 위치에 표시하기 때문입니다.

서버 측 실행

정적 HTML을 생성할 때 서버에서 캡처 요청을 실행할 수 있도록 Nuxt 플러그인을 추가할 수 있습니다.data.server.js 디렉터리에 plugins/이라는 파일을 만듭니다.

플러그인 / 데이터.서버회사 명

export default async ({ store }) => {
  await store.dispatch('getEvents');
};

플러그인을nuxt 설정에 추가합니다.

nuxt。구성회사 명

plugins: ['~/plugins/data.server.js'],

페이지로 렌더링

이제 우리는 구성 요소 템플릿의 데이터를 사용할 수 있습니다.

지수vue

<template>
  <div class="max-w-screen-lg mx-auto p-10">
    <div v-for="(event, index) in events" :key="event.id">
      <div :key="index" class="lg:flex lg:max-w-screen-lg pb-8 lg:pb-16">
        <div class="lg:w-1/4">
          <img
            v-if="event.acf.image"
            :src="event.acf.image.sizes.large"
            :alt="event.acf.image.alt"
            class="w-64 h-64 object-cover mb-4 lg:mb-0"
          />
        </div>
        <div class="lg:w-3/4 lg:pl-8">
          <h4 class="text-xl lg:text-3xl font-normal leading-tight">
            {{ event.title.rendered }}
          </h4>
          <h3 class="lg:text-2xl font-bold mb-2">
            {{ event.acf.speaker }}
          </h3>
          <time class="text-sm lg:text-lg font-mono block mb-2">
            {{ event.acf.start_time }} - {{ event.acf.end_time }}
          </time>
          <p class="mb-4" v-html="event.content.rendered"></p>
          <nuxt-link :to="`/events/${event.slug}`" class="btn-sm lg:btn btn-green mb-2 mr-2">
            Event Info
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

여기에서 create-nuxt-app을 실행할 때 설치한 Tailwind CSS 프레임워크의 유틸리티 클래스를 사용합니다.Tailwind에 대한 더 많은 정보를 알고 싶다면, docs은 내가 사용한 것 중 가장 좋은 것이다.
만약 네가 이 점까지 견지한다면, 너는 유사한 것이 있어야 한다.

그러나 만약 우리가 날짜 순서대로 이벤트를 표시해야 한다면 어떻게 해야 합니까?이를 위해 getter를 사용할 수 있습니다. 저는 이것이 Vuex 상태의 계산 속성이라고 생각합니다.

스토리지 / 인덱스회사 명

export const getters = {
  sortedEvents: (state) => {
    return state.events.slice().sort((a, b) => new Date(a.acf.start_time) - new Date(b.acf.start_time));
  },
};

sort 방법은 원시 수조를 변이시켰기 때문에 map, filter 또는 reduce과 달리 저는 먼저 파라미터가 없는 slice 방법으로 얕은 복사본을 만든 다음에 복사본을 정렬합니다.
이제 어셈블리에 다음 내용을 추가합니다.

지수vue

- import { mapState, mapActions } from 'vuex';
+ import { mapState, mapGetters, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(['events']),
+    ...mapGetters(['sortedEvents']),
  },
  created() {
    this.getEvents();
  },
  methods: {
    ...mapActions(['getEvents']),
  },
};

템플릿에서 다음을 수행합니다.

- <div v-for="(event, index) in events" :key="event.id">

+ <div v-for="(event, index) in sortedEvents" :key="event.id">

시작과 종료 시간의 형식을 더욱 잘 제어하기 위해 npm i @nuxtjs/date-fns의date fnsnuxt 모듈을 설치하십시오.
그리고 @nuxtjs/date-fns을 nuxt 설정의 구축 모듈에 추가하고 사용할 방법을 가져옵니다.date-fns는moment에 비해 필요한 함수만 가져올 수 있는 것은 커다란 성능 장점이다.js.이 예는 format의 한 가지 방법만 필요합니다.date fns에 대한 더 많은 정보는 docs을 보십시오.

nuxt。구성회사 명

buildModules: [
  '@nuxtjs/tailwindcss',
+  '@nuxtjs/date-fns',
],
dateFns: {
  methods: ['format'],
},

이제 다음과 같이 템플릿에서 $dateFns 메서드를 직접 사용할 수 있습니다.

지수vue

- {{ event.acf.start_time }} - {{ event.acf.end_time }}
+ {{ $dateFns.format(new Date(event.acf.start_time), 'E h') }} - {{ $dateFns.format(new Date(event.acf.end_time), 'haaaaa') }}

저희가 Wordpress JSON API의 내용으로 보여준 Vue JS 페이지가 보기 좋아요!
세 번째 부분에서, 우리는 Nuxt 응용 프로그램을 Netlify에 배치하고, 구축 연결을 추가할 것이다. 그러면 우리는 새로운 내용을 발표할 때 우리의 사이트를 재건할 수 있다.
읽어주셔서 감사합니다!midwestdesignweek.com의 원본 코드를 보십시오.👀

relaydesignco회사 / 디자인 주간nuxt

만약 이 모든 설정이 너무 많거나 바쁘기만 한다면, Netlify는 좋은 환매 협의서입니다. 이것을 출발점으로 삼을 수 있습니다.Vue 핵심 팀원인 사라 드라스나(Sarah Drasner)가 공동 저술한 것으로, 심지어 스매싱 잡지에서 내부 작업 원리를 설명하는 글도 있다.
이 문장과 환매는 내가 처음 시작했을 때 매우 도움이 되었다.

netlify 실험실 / 머리 없음 wp nuxt

🏔 헤드 없는 WordPress JAMstack 템플릿