使用NEXT.JS开发WordPress主题

东明兄 2022-04-26
0条评论 1,581 次浏览
东明兄 2022-04-260条评论 1,581 次浏览

next.js是一款react的服务端渲染框架,在服务端渲染页面返回给浏览器,nextjs 通过graphql将wordpress作为api服务端,通过next.js,基本能够脱离php开发WordPress主题。基于一切能用js实现的功能都要用js实现的想法,最近计划使用next.js重构WordPress博客主题。作为前端开发,这样做能够把更多的关注度放在JavaScript上。

基于nextjs wp模板

仓库地址:https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress

准备步骤:

  1. 使用npx或yarm或pnpm 执行create-next-app 下载安装wordpress模板案例 。

npx create-next-app --example cms-wordpress cms-wordpress-app
# or
yarn create next-app --example cms-wordpress cms-wordpress-app
# or
pnpm create next-app --example cms-wordpress cms-wordpress-app
  1. 安装并启用wp-graphql插件 https://cn.wordpress.org/plugins/wp-graphql

  1. 将根目录的环境配置模板文件拷贝一份 进行修改。

cp .env.local.example .env.local

将 WORDPRESS_API_URL 改为 wp-graphql插件 设置的值。

WORDPRESS_API_URL=https://xxx.xx.com/xx123113cv1graphql345

  1. 修改根目录的next.config.js文件,将wp博客的域名加入到 domains 数组。

  1. npm run dev

设计与开发 待更新…

本文通过 YUQUE WORDPRESS 同步自语雀云端知识库

发表评论

您的电子邮箱地址不会被公开。