NuxtとNetlifyパート2による簡単なヘッドレスWordPress
20916 ワード
パート2 - Nuxtと
ヘッドプレスのCMSとしてWordPressを設定するとお得な情報.
NetLifyで展開して、我々のCMSにビルドフックを加えるカバー.
JSON APIのエンドポイントが設定されているので、当社のWordPressの記事やメディアファイルからのデータをクエリすることができます操作し、静的なHTMLファイルにVueとNuxtを使用してレンダリングされます.
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)
.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,
}
store/ ディレクトリと新しいファイルの作成index.js . データの取り込みと操作のほとんどはこのファイルで行われます.ストア/インデックス。js
export const state = () => ({
events: [],
});
export const getters = {};
export const mutations = {};
export const actions = {};
カスタムフィールド
データを問い合わせる前に、WordPressでそれを生成する必要があります.パート1で作成した新しいカスタム投稿タイプのいくつかを追加し、それらにいくつかのACFフィールドを追加します.それをするには
Custom Fields -> Field Groups -> Add New WordPressのダッシュボードで.あなたがACFに新しいならばdocumentation 実際にはかなり良いです.
このデモでは、イベントという名前の新しいフィールドグループを作成し、「POST型がイベントに等しい場合は、このフィールドグループを表示する」の場所を設定します.
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 イベントデータを取得するための配列.ストア/インデックス。js
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) コールの終わりには、かなりクールな機能iMooです.そうする前に、我々は我々を加えなければなりません
baseURL にaxios NuXt設定ファイルのオブジェクト.Nuxt設定。js
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 and this.$store.dispatch('getEvents') , しかし、私はそれがきれいに見えて、特定の構成要素で使われている世界的な状態と行動のすべての1つの場所で示すので、VEEX MAPヘルパーを使うのを好みます.サーバー側を実行する
我々が我々の静的HTMLを生成しているとき、我々のFETCH要求がサーバーで動くのを確実にするために、我々はNuxTプラグインを加えることができます.ファイルを作成する
data.server.js インサイドplugins/ ディレクトリ.プラグイン/データ。サーバ。js
export default async ({ store }) => {
await store.dispatch('getEvents');
};
Nuxt設定。js
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 . あなたがTarwindについてより知りたいならばdocs それは私が今まで使用した最高のいくつかです.あなたがこの点まで続いたならば、あなたはこれに似ている何かを持つべきです:
しかし、我々は日付順にイベントを表示する必要がある場合.そのために、私たちはguexを使用することができます.
ストア/インデックス。js
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 , or 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 .次に
@nuxtjs/date-fns Nuxt Configのモジュールをビルドし、使用するメソッドをインポートします.あなたが必要とする機能だけをインポートすることができることは、瞬間のような何かについての日付fnsの巨大なパフォーマンス利点です.jsこの例では1メソッドのみ必要です.format . 日付の詳細情報についてはfnsのチェックアウトdocs .Nuxt設定。js
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') }}
パート3では、我々はNuxtアプリをNetlifyに展開し、ビルドフックを追加するので、いつでも新しいコンテンツを公開することができます.
読書ありがとう!ソースコードを見てくださいmidwestdesignweek.com . 👀
株式会社 / デザインウィーク
このセットアップのすべてがあまりにも多く、またはあなたが急いでいるならば、Netlifyはあなたが出発点として使うことができたこの目的のために作られた偉大なレポでした.それは、Vueコアチームのメンバーサラドラスナーによって共同執筆されても、雑誌を壊す上でその内部の作業を説明するコンパニオン記事を持っています.
この記事とレポは、私が始めたとき、とても役に立ちました.
ネットラボ / ヘッドレスWNU
🏔 ヘッドレスワードプレスJamstackテンプレート
Reference
この問題について(NuxtとNetlifyパート2による簡単なヘッドレスWordPress), 我々は、より多くの情報をここで見つけました https://dev.to/ninjasoards/easy-headless-wordpress-with-nuxt-netlify-part-ii-4abテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol