【主题】Nuxtjs + WordPress主题使用说明

轩陌 2018-10-28 18:49:01

分类：主题使用 20480 204

简介

我的博客一直是用的wordpress做的后台，主题已经换了好几版了，学到vue的时候，用vue做了一个主题，但是不能SEO，所以采用vue的服务端渲染来做了一版，也是对服务端渲染做一下学习，也就是目前的页面，源码已经放在我的GitHub上了，相对于之前的主题配置，这次有点不一样，稍微麻烦一点，这次是属于前后端分离，也就是前端需要单独部署，WordPress 只作为内容发布管理平台，不参与任何渲染工作，渲染工作由 Nuxtjs 完成。

流量有限，用本主题的站点可留言或者私信，可开启avatar头像加速。

部署

所需环境准备

php环境推荐7.0+

Nodejs推荐14+

源码相关

建议直接clone一份源码在本地，修改之后再推到服务器，这样可以在本地先改好，能正常运行跑一下流程

源码地址：https://github.com/D-xuanmo/Nuxtjs-Wordpress

小程序版源码：https://github.com/D-xuanmo/blog-miniprogram-wordpress

所有图标：https://www.xuanmo.xin/iconfont

QQ群：809825850

如果想要更换主体风格可以编辑assets->scss->variable.scss文件中的$color-theme变量即可

主题已集成代码高亮，目前只下载了部分语言，如需要支持其他语言可自行下载，替换static/css/prism.css和static/js/prism.js即可，Prism.js下载地址>>

安装 Nodejs 环境，如果 Nodejs 环境已有可以忽略这一步

需要在服务器安装node环境，需要大于14，文档node版本为16.0.0推荐的版本，使用wget命令下载Node.js安装包，目录可以放在root目录，具体随意。该安装包是编译好的文件，解压之后，在bin文件夹中就已存在node和npm，无需重复编译。wget https://nodejs.org/dist/v16.0.0/node-v16.0.0-linux-x64.tar.xz
解压文件tar xvf node-v16.0.0-linux-x64.tar.xz
创建软链接，使node和npm命令全局有效。通过创建软链接的方法，使得在任意目录下都可以直接使用node和npm命令。
```
ln -s /root/node-v16.0.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v16.0.0-linux-x64/bin/npm /usr/local/bin/npm
```
到此已经安装完成，使用node -v查看node版本，使用npm -v查看版本号，如果出现正确版本号则安装成功，更多安装文档查看：https://help.aliyun.com/document_detail/50775.html?spm=5176.doc25426.6.655.kn1mB7

使用npm安装其他的全局命令

npm i -g yarn pm2 这条命令是全局安装yarn和pm2(如果安装比较慢，可以使用淘宝镜像安装，npm i -g yarn pm2 --registry=https://registry.npmmirror.com，后续的安装都可以加上这个)，如果执行了这一步操作，提示command not found: yarn或者command not found: pm2，可以使用下边两条命令：


ln -s /root/node-v16.0.0-linux-x64/bin/yarn /usr/local/bin/yarn
ln -s /root/node-v16.0.0-linux-x64/bin/pm2 /usr/local/bin/pm2

运行项目

将源码目录下的service放入WordPress主题目录wp-content/theme/下，并启用此主题，进入Nuxtjs主题设置，启用本主题之后，会在外观菜单下加入一个子菜单，将站点前端域名设置为WordPress访问地址，确保http://{domain}/wp-json能有正确的数据，所有WordPress接口都是在这个虚拟目录下；如果访问报错可以尝试在后台设置=>固定链接设置为数字型；
修改项目的一些配置，改为自己的信息，如下截图，这一步不是必选的，可以安装完成之后在修改：
将源码整个文件夹上传到服务器的网站根目录即可，使用命令行工具进入到此目录，执行yarn命令，这一步是安装项目所需要的依赖文件，如果比较慢可以使用这个命令yarn --registry=https://registry.npmmirror.com；
依赖安装完成之后，执行yarn dev，如果能出现以下截图代表能够正常运行项目，然后用自己的域名或者IP访问3000端口，这里需要服务器配置放行3000端口，如果能够正常访问按ctrl+c退出即可；
使用yarn pm2这条命令去运行项目并开启文件更改自动重载项目，pm2 是 Nodejs 的一个守护进程，使用pm2 logs可查看日志，至此通过http://domain:3000就能正常访问了，更多说明查看https://segmentfault.com/a/1190000012774650
使用pm2 save保存当前的应用列表，使用pm2 startup开机自动启动

使用 Nginx 或者 Apache 做反向代理

到现在这一步为止都需要加上一个端口才能访问到项目，这并不是我们需要的，我们需要用80或者443去访问，所以需要用 nginx 做代理，这一步需要自己了解一下nginx 配置，以下是我的配置文件：

Tips: 先到数据库找到WordPress的表wp_options，一般是第一条记录也就是你的域名地址（siteurl字段），改为你的域名+3002端口，因为后续WordPress只会作为一个CMS管理系统，如果不理解欢迎留言或者联系我的QQ

使用nginx启动一个端口，用于代替之前的WordPress访问端口;


# wordpress
server {
    listen 3002;
    server_name xuanmo.xin;
    root /htdocs/blog;

    location / {
        index index.php index.html index.htm;
        try_files $uri $uri/ /index.php?q=$uri&$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        include /etc/nginx/fastcgi.conf; # 一般此文件在nginx目录下
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

使用nginx监听80或者443端口去代理nuxt服务，如果成功配置就到这里结束了，80端口配置删除ssl证书相关的东西即可


server {
  listen 80;
  listen 443;
  server_name www.xuanmo.xin xuanmo.xin;
  # 引入证书文件开始
  ssl on;
  ssl_certificate   /etc/xxx.pem;
  ssl_certificate_key  /etc/xxx.key;
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;
  # 引入证书文件结束

  location / {
    # 这里是每次访问域名将请求转发到3000端口
    proxy_pass http://127.0.0.1:3000;
  }

  # 下边两个是代理wordpress的一些服务
  location /wp-json {
    proxy_pass http://127.0.0.1:3002/wp-json;
  }

  location /wp-content {
    proxy_pass http://127.0.0.1:3002/wp-content;
  }
}

常用命令

node -v 查看nodejs版本
npm -v 查看npm版本
npm i -g yarn 使用npm全局安装yarn
yarn 安装项目依赖
yarn dev 启动nuxt开发模式，关闭终端或者使用ctrl+c就会终止，用于查看项目是否能正常启动
pm2 logs 查看实时pm2日志，比如nuxt目录的文件有更改时，可以查看打包进度
yarn pm2 使用pm2启动nuxt服务，并监听目录更改重新打包项目，注：每次服务器重启之后需要再次进入到nuxt项目目录执行此命令，如果设置了开机启动则不用重新执行
pm2 save 保存当前应用列表
pm2 startup 设置开机自启