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;

}

目录
相关文章
|
8月前
|
存储 前端开发 JavaScript
react怎么实现跨页面传参
react怎么实现跨页面传参
236 2
|
8月前
|
关系型数据库 MySQL Apache
怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?
怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?
617 1
|
4月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
362 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
2月前
|
SEO
wordpress如何添加tag标签页面
如何在 WordPress 中添加标签页面
80 2
|
6月前
【wordpress教程】wordpress博客网站添加非法关键词拦截
有的网站经常被恶意搜索,站长们不胜其烦。那我们如何屏蔽恶意搜索关键词呢?下面就随小编一起来解决这个问题吧。
104 1
|
2月前
WordPress小白傻瓜式一键搭建博客个人网站详细教程
用宝塔功能来一键搭建WordPress博客网站。 最详细教程! 整个过程简单、易用,即使是零基础用户也能轻松上手。
324 1
|
7月前
|
移动开发 前端开发 语音技术
WordPress轻拟物博客主题niRvana 4.5.3(自适应手机端)
WordPress轻拟物主题niRvana,设计上不再趋从于现有的扁平风,我认为是时候从极致的扁平稍微向拟物致敬了,因此采用了轻拟物的风格。niRvana 设计和样式更加新颖,一眼看上去就会被他吸引住,主题配色也非常舒服。而且它有两个功能特别有意思,一个是自动根据文章特色图片识别出图片的主色调,在首页、文章分类页用最美的方式显示滚动图片,另一个则是文章支持语音朗读。主题细腻有质感,手机端体验非常好。
104 2
|
4月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
66 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
3月前
|
域名解析 弹性计算 程序员
想要轻松地搭建一个即开即用的WordPress博客吗?借助宝塔面板镜像+阿里云ECS,迅速拥有自己的个人博客
拥有个人博客是每位程序员的梦想,但对服务器不熟悉的初学者而言,搭建博客颇具挑战。本文介绍利用阿里云市场的宝塔面板镜像与ECS云服务器,轻松搭建WordPress博客的方法,让您快速拥有专属博客空间。通过简单的操作步骤,即使是新手也能轻松上手,实现从零到有的博客搭建过程。
282 3
|
8月前
|
PHP
菊子曰备份Wordpress网站的博客内容出错的解决办法(原创)
菊子曰备份Wordpress网站的博客内容出错的解决办法(原创)
541 2