新主题更换计划

近期准备更换博客主题,为了优化访问速度,所以准备用SPA(Single Page Application) 单列页面的方式来接管前端页面,对没错,全程异步,按照理论来说的话,一旦网页加载完毕之后,切换到任何页面是不需要再次刷新的,不然就失去了“单列应用”的意义了。

想法

目前打算使用vue.js来作为本次主题的前端框架,为什么用vue而不用react呢,原因是(由于一些七七八八的黑历史,我已经受够了react了),这里就不多吐槽了。

加上,可能我还是比较喜欢vue的文档吧,感觉文档写的蛮清晰,加上我也懒得折腾各种第三方插件了,所以比较起来干脆用vue算了。

更换原因

主要是最近迷上了SPA这种风格的网站,主要的理由,比起传统的方式,SPA应用一次会把整个网站样式加载到用户浏览器,然后通过异步的方式获取,更新数据,所以体验和流畅度上来说,就是一个字爽~,因为相同部分的视图不会被更新(具体是多亏了Virtual DOM 技术),所以,一旦用户切换页面,只有一部分地方会重新渲染,例如Header,footer之类的不需要重新渲染的地方则不会被更新,这就是为什么流畅度体验会更好的原因了hhh。

其次,SPA应用还能减轻服务端的负载,例如,一般的WP主题,每个页面的元素都是由php负责渲染的,而且,和服务端的交互也是由php负责,这样,服务端就相当于需要处理视图+业务逻辑等所有的请求,如果换成SPA这种价格,则前端视图部分将会完全脱离出来,由Javascript处理,JavaScript是运行在用户浏览器上的,所以,速度和体验肯定比在php远程服务器负责渲染好后传回来要好很多(虽然慢的时候还是会慢),不过至少负载已经减少到纯粹的REST请求上了,只有客户端和服务端直接的数据交互了,并没UI,视图部分。

架构/实现思路

所以这次应该是这样的

  • 首先利用WordPress主题的 fuctiion.php、index.php 注入vue的js文件,仅此而已,因为其他例如archive.php、comment.php啥等功能都被vue单列应用给接管了。
  • 第二就是折腾webpack了,需要想办法使用webpack打包整个vue应用+一些需要用到的静态资源(例如图片啥的),到dist文件夹作为build后的版本,这里的bundle.js会被注入到前面的index.php中。
  • 第三,为了方便开发,需要配置webpack watch功能来实时build和打包修改后的js源码。

可能的问题

因此和WordPress默认主题不同,所有的视图将不会由后端php来逐个渲染,而是一次吧Client side JS下载到用户的浏览器,然后通过rest的方式来实现Client side 和WordPress的数据交互。因此这种模式则会丢失一些WordPress主题自带的功能,例如搜索,页面模板之类的,所以需要Think differently。

  • WP默认路由需要用Vue Router重写,例如默认看文章的路由/archives/[文章名称/ID], 搜索路由 /s?=[keywords] 等等全部都得重写
  • 依赖第三方插件支持,因为WP自带的REST API并不是所有的东西都能获取到,例如Widgets,Links,Menu之类的组件则需要安装一系列第三方插件来实现,虽然我也可以考虑在主题functions.php文件里重写并注册这些REST 路由,但是既然有现成的插件,干嘛不用呢(好吧,我承认我懒=w=),所以这种做法估计对某些极度洁癖者会有些不适hhh
  • 搜索引擎SEO问题,这个并不是我的问题,因为,你懂的,凡是SPA架构的网站,基本上都会有这种问题,因为现在整个网页的渲染完全交给了VUE的Virtual-DOM(这里就不多废话VirtualDOM是什么了,感兴趣的朋友可以去这里看看),所以对于搜索引擎爬虫来说,可能就有点不太友好了,具体为什么你也可以试试看右键查看源码,看看本文章的内容在不在HTML中hhh。
  • JQuery问题!!!  – 这是重点 -无论是VUE.JS还React,Angular等前端SPA框架,似乎都和JQuery有仇,只要它们2个在一起,多多少少会出现一些问题。不过目前最大的问题是WP很多插件都是基于JQuery的,例如lightbox,github profile插件啥的,所以,这个是一个大坑,但愿能找到解决方法Orz。

 

新主题更换计划」への1件のフィードバック

  1. 对于 SEO 已经放弃了,服务端渲染太麻烦了【况且我也没有服务器~】,个人小站能有人看就不错了。

    既然用了 spa,不然直接写个主题吧~,搜索这种功能感觉没啥用,没人会在小站搜啥的。【或者直接用 google 的搜索还行】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください