在 WordPress 中创建无头 REST API

// wp-content/themes/twentynineteen-child/style.css
/*
Theme Name: Twenty Nineteen Child
Template: twentynineteen
Text Domain: twentynineteenchild
*/
@import url("../twentynineteen/style.css");

// wp-content/themes/twentynineteen-child/functions.php
function create_something () {
    register_post_type('<name>', <args>);
}
add_action('init', 'create_something');

// wp-content/themes/twentynineteen-child/functions.php
function create_project_post_type () {
    register_post_type('project', $args);
}
add_action('init', 'create_project_post_type');

$args = [
    'labels' => [
        'name' => __('Project (Pages)'),
        'singular_name' => __('Project'),
        'all_items' => 'All Projects'
    ],
    //...
    'supports' => ['title', 'editor', 'thumbnail', 'pageattributes'],
];

'taxonomies' => [
    'category',
    'post_tag'
],

// wp-content/themes/twentynineteen-child/functions.php
add_action('init', 'create_project_categories');
function create_project_categories() {
    $args = [
        'label' => __('Categories'),
        'has_archive' => true,
        'hierarchical' => true,
        'rewrite' => [
            'slug' => 'project',
            'with_front' => false
        ],
    ];
    $postTypes = ['project'];
    $taxonomy = 'project-category';
    register_taxonomy($taxonomy, $postTypes, $args);
}

// wp-content/themes/twentynineteen-child/functions.php
$namespace = 'api/v1/';
add_action('rest_api_init', function () use ($namespace) {
    $route = 'menu';
    $args = [
        'methods' => 'GET',
        'callback' => 'fetch_menu',
    ];
    register_rest_route($namespace, $route, $args);
});
add_action('rest_api_init', function () use ($namespace) {
    $route = 'page/(?P<slug>[a-zA-Z0-9-]+)';
    $args = [
        'methods' => 'GET',
        'callback' => 'fetch_page',
    ];
    register_rest_route($namespace, $route, $args);
});

// wp-content/themes/twentynineteen-child/functions.php
function fetch_menu ($data) {
    $menu_items = wp_get_nav_menu_items('menu-main');
    if (empty($menu_items)) {
        return [];
    }
    return $menu_items;
}

// wp-content/themes/twentynineteen-child/functions.php
function fetch_page ($data) {
    $post = get_page_by_path($data['slug'], OBJECT, 'page');
    if (!count((array)$post)) {
        return [];
    }
    $post->slides = get_field('slide_items', $post->ID);
    return $post;
}

// wp-content/themes/twentynineteen-child/functions.php
function fetch_project ($data) {
    $post = get_page_by_path($data['slug'], OBJECT, 'project');
    if (!count((array)$post)) {
        return [];
    }
    $post->fullscreen = get_field('full_screen_image', $post->ID);
    $post->images = get_field('image_items', $post->ID);
    return $post;
}

// wp-content/themes/twentynineteen-child/functions.php
function fetch_projects ($data) {
    $paged = $data['page_number'] ? $data['page_number'] : 1;
    $posts_per_page = 6;
    $post_type = 'project';
    $args = [
        'post_type' => $post_type,
        'post_status' => ['publish'],
        'posts_per_page' => $posts_per_page,
        'paged' => $paged,
        'orderby' => 'date'
    ];
    $posts = get_posts($args);
    if (empty($posts)) {
        return [];
    }
    foreach ($posts as &$post) {
        $post->featured_image =
            get_the_post_thumbnail_url($post->ID);
    }
    return $posts;
}

$total = wp_count_posts($post_type);
$total_max_pages = ceil($total->publish / $posts_per_page);
return [
    'items' => $posts,
    'total_pages' => $total_max_pages,
    'current_page' => (int)$paged,
    'next_page' => (int)$paged === (int)$total_max_pages ? null : $paged + 1,
    'prev_page' => (int) $paged === 1 ? null : $paged - 1,
];

// plugins/utils.js
import Vue from 'vue'
Vue.prototype.$loadAssetImage = src => {
  var array = src.split('/')
  var last = [...array].pop()
  if (process.server && process.env.streamRemoteResource === true) {
    var { streamResource } = require('~/assets/js/stream-resource')
    streamResource(src, last)
    return
  }
  try {
    return require('~/assets/images/' + last)
  } catch (e) {
    return src
  }
}

// assets/js/stream-resource.js
import axios from 'axios'
import fs from 'fs'

export const streamResource = async (src, last) => {
  const file = fs.createWriteStream('./assets/images/' + last)
  const { data } = await axios({
    url: src,
    method: 'GET',
    responseType: 'stream'
  })
  data.pipe(file)
}

// pages/index.vue
<script>
export default {
  async asyncData ({ error, $axios }) {
    let { data } = await $axios.get('/wp-json/api/v1/page/home')
    return { post: data }
  }
}
</script>

<template v-for="slide in post.slides" :key="slide.id">
  <img :src="$loadAssetImage(slide.image.sizes.medium_large)">
</template>

// package.json
"scripts": {
  "generate": "nuxt generate",
  "stream": "NUXT_ENV_GEN=stream nuxt generate"
}

// nuxt.config.js
env: {
  streamRemoteResource: process.env.NUXT_ENV_GEN === 'stream' ? true : false
},

// nuxt.config.js
import axios from 'axios'

export default {
  generate: {
    routes: async function () {
      const projects = await axios.get(remoteUrl + '/wp-json/api/v1/projects')
      const routesProjects = projects.data.map((project) => {
        return { route: '/projects/' + project.post_name, payload: project }
      })

      let totalMaxPages = Math.ceil(routesProjects.length / 6)
      let pagesProjects = []
      Array(totalMaxPages).fill().map((item, index) => {
        pagesProjects.push({ route: '/projects/pages/' + (index + 1), payload: null })
      })

      const routes = [ ...routesProjects, ...pagesProjects ]
      return routes
    }
  }
}

$ npm run stream && npm run generate