WordPress+React+dva 打造单页面博客

简介: React WordPress由WordPress提供json(安装插件JSON API),React做前端视图,这意味着你可以继续使用WordPress强大的CMS管理系统.

React WordPress

由WordPress提供json(安装插件JSON API),React做前端视图,这意味着你可以继续使用WordPress强大的CMS管理系统.

不需要修改WordPress就可以使用使用.

WordPress 后台演示

账号 guest 密码 guest (会定时清理数据库和媒体库)

React 前台演示

特性

1 使用WordPress做内容管理,React重写前端.

2 使用dva构建React项目,dva内置React全家桶.

3 使用少部分antd组件,为后期更迭.

使用说明

首页的幻灯片是读取有特色图页面的数据

导航会依照有文章的分类自动生成

调试

$ npm install

$ npm start

如果显示缺失dll.js 文件请执行

$ npm run build:dll

构建

$ npm run build

部署

Nginx

跨域问题

我是使用nginx做API代理,配置如下

location /api/ {

proxy_pass http://react.wordpress.femirror.com/;

}

http://react.wordpress.femirror.com/替换成你的WordPress的地址即可

路由问题

在正式环境下刷新可能会出现路由重定向问题,配置以下内容即可

location / {

try_files $uri /index.html;

}

目录
相关文章
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
754 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
6月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
180 58
|
6月前
|
前端开发
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
170 57
|
6月前
|
前端开发 UED
在React Router中,如何处理路由的404错误页面?
在React Router中,如何处理路由的404错误页面?
246 57
|
5月前
|
前端开发 数据安全/隐私保护
“WP页面水印助手”的WordPress插件
“WP页面水印助手”的WordPress插件
107 14
|
5月前
|
存储 监控 安全
用户为啥跳出页面?装这个WordPress插件,直接看回放!
nicen-replay 是一款强大的用户行为监控与回放插件,可完整记录用户在网站上的操作,如点击、滚动、输入等,并以视频形式呈现,助您深度分析用户行为。支持表单填写回放(隐私脱敏)、轻量无感监控,且数据存储于本地服务器,安全合规。适用于电商、内容创作、企业官网等多种场景,帮助优化用户体验和提升转化率。
|
6月前
|
数据可视化 Linux 网络安全
零基础搭建WordPress博客全流程指南!
本指南详细介绍如何使用宝塔面板与WordPress搭建个人博客。宝塔面板提供可视化操作,简化服务器管理;WordPress拥有丰富的主题和插件生态,支持快速建站。教程涵盖准备阶段(服务器、域名、面板安装)、环境配置、站点创建、SSL证书申请、WordPress一键部署及网站配置等步骤,并推荐必备插件提升安全性和性能。零基础用户也可轻松上手,适合日均5000PV以下的博客需求,扩展性强,助你开启创作之旅。
537 7
【wordpress教程】wordpress博客网站添加非法关键词拦截
有的网站经常被恶意搜索,站长们不胜其烦。那我们如何屏蔽恶意搜索关键词呢?下面就随小编一起来解决这个问题吧。
248 1
|
移动开发 前端开发 语音技术
WordPress轻拟物博客主题niRvana 4.5.3(自适应手机端)
WordPress轻拟物主题niRvana,设计上不再趋从于现有的扁平风,我认为是时候从极致的扁平稍微向拟物致敬了,因此采用了轻拟物的风格。niRvana 设计和样式更加新颖,一眼看上去就会被他吸引住,主题配色也非常舒服。而且它有两个功能特别有意思,一个是自动根据文章特色图片识别出图片的主色调,在首页、文章分类页用最美的方式显示滚动图片,另一个则是文章支持语音朗读。主题细腻有质感,手机端体验非常好。
183 2
|
Java Android开发
java利用xml-rpc协议操作wordpress博客
java利用xml-rpc协议操作wordpress博客
170 1