0°

Nuxtjs+WordPress主题-免费主题


看看这个牛逼克拉斯的主题! 漂亮吧!而且免费 在这里感谢轩陌大佬开源

Nuxtjs+WordPress主题-免费主题

简介

主题是属于前后端完全分离,也就是前端需要单独部署。

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

源码地址:https://github.com/xuanmos/xm-nuxtjs-wordpress

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

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

安装node环境,如果node环境已有可以忽略这一步

1、需要在服务器安装node环境,需要大于8.9的版本,使用wget命令下载Node.js安装包,目录可以放在root目录,具体随意。该安装包是编译好的文件,解压之后,在bin文件夹中就已存在node和npm,无需重复编译。

wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz

2、解压文件。

tar xvf node-v10.9.0-linux-x64

3、创建软链接,使node和npm命令全局有效。通过创建软链接的方法,使得在任意目录下都可以直接使用node和npm命令。

ln -s /root/node-v10.9.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v10.9.0-linux-x64/bin/npm /usr/local/bin/npm

Linux

到此已经安装完成,使用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

运行项目

1、将源码目录下的service放入wordpress主题目录wp-content/theme/下,并启用此主题,主题启用是一片空白,这个是正常的,因为实际访问并不是在这里,进入到主题设置,将站点前端域名设置为wordpress访问地址,确保https://www.xuanmo.xin/wp-json能有正确的数据,所有wordpress接口都是在这个虚拟目录下;

2、修改项目的一些配置,改为自己的信息,如下截图:

3、将源码整个文件夹上传到服务器的网站根目录即可,使用命令行工具进入到此目录,执行yarn命令,这一步是安装项目所需要的依赖文件,可能会比较慢;

4、依赖安装完成之后,执行yarn dev,如果能出现以下截图代表能够正常运行项目,然后用自己的域名或者IP访问3000端口,这里需要服务器配置开通一个3000端口,如果能够正常访问按ctrl+c退出即可;

5、使用yarn pm2这条命令去运行项目并开启文件更改自动重载项目,pm2是node的一个守护进程,使用pm2 logs可查看日志,至此通过http://domain.xx:3000就能正常访问了,更多说明查看https://segmentfault.com/a/1190000012774650

6、使用pm2 save保存当前的应用列表,使用pm2 startup开机自动启动

使用Nginx或者Apache做反向代理

到现在这一步为止都需要加上一个端口才能访问到项目,这并不是我们需要的,我们需要用80或者443去访问,所以需要用nginx或者apache去做代理,这一步需要自己了解一下nginx或者apache的配置,我也不是很会,所以我这里贴出我的方法。

1、使用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 /fastcgi.conf; # 这里需要引入一个nginx文件,具体可以服务器查找一下这个文件fastcgi_pass 127.0.0.1:9000;fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;}
}

nginx

2、使用nginx监听80端口去代理nuxt服务,如果成功配置就到这里结束了

server {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;}
}

nginx

常用命令

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 设置开机自启

主题设置说明

导航栏logo比例130px*40px

首页banner大图尺寸比例710px*320px,小图尺寸比例180px*100px

文章列表缩略图的比例260px*145px

站点总导航的菜单名称为Home,如果不是这个将获取不到菜单,网站底部菜单名字为SubMenu

菜单前边的图标名字在菜单设置中的css类选项,如果没有显示此选项将右上角的显示选项展开,打开css类即可

nuxt目录说明

static 所有需要在根目录访问的文件可以存放在这里,相当于网站根目录,举个栗子,/static/favicon.ico会被映射到网站根目录https://www.xuanmo.xin/favicon.ico

不得不说这个主题 配置相当的复杂呀, 但是如果真的喜欢还是去折腾的吧!

「点点赞赏,手留余香」

1人已赞赏

  • IT中关村

    ¥2
2 条回复 A 作者 M 管理员
  1. 主题看来中规中矩,适合个人博客,不过,这安装过程也太复杂了吧。

    • 作者还没完善好 就是看着主题不错 还免费就推一下

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论
建站源码 本站小店 网站公告 开通会员
官方客服
  • 官方客服:1612686396一键联系
  • 扫一扫加站长微信
    官方QQ群