道招网终于完成改版了
道招网终于完成改版了
这个清明节放假三天,由于疫情还没有完全退去,大家还不太适合大规模聚集,更重要的是我本来也爱宅着不动。放假前就决定这三天干点正事,于是就想起把之前立的flag扶一下,把道招网的vue服务端渲染版彻底上线,之前的flag就是把将道招网的wordpress只作为后台管理用,前端页面改用自己更加得心应手的vue,2019年下半年就把道招网常用的几个接口的graphql接口写好了,但是当时由于服务端渲染后感觉排版后有点问题和工作调整等事情凑在一起就暂时没有继续弄了。4月4日就优先解决排版的问题,最后发现这个跟vue的ssr没什么关系,主要是我当时希望列表页能够展示一部分正文内容,但是因为WordPress的正文内容在数据库存储的是html格式,当时的截取过于粗暴,简单截取了前200个字符串,并且为了让样式html生效,我直接使用了v-html指令,最终导致页面的分页器渲染出现了问题:在#app这个div外面居然重复渲染了一次,渲染后端页面大致如下
最外面的这个分页器纯粹是多余的。
第一个问题结局了,接下来就要看怎么让vue服务端渲染的服务器接管原daozhao.com的前端了。
顺便说一下,之前设立这个flag的时候就考虑url的完全兼容,所以在写后端接口和设计前端路由就充分考虑了这一点,为的就是以后在不影响用户访问路径的情况下实现替换。
为了确保万无一失,我在主机另外一个目录又重新装了个新的wordpress来作为试验,因为之前wordpress用的服务器被我换成了强大的nginx,并且WordPress文章的固定链接用的是%post_id%.html
(虽然这样对seo不够好),所以调整起来并不算麻烦,我只需要设置后相应的location
就好。
- .php结尾的文件路径,当然是走原来的php fastcgi
- 其它资源都在ssr的node服务器
- 最好WordPress原来文章的固定链接改成
%post_id%.php
,那样我们的文章既可以以vue方式访问,将url路径改成.php后又可以用WordPress来访问了,方便对比下文章排版
在新的WordPress登录实测过程发现了一点小问题
- WordPress后台界面大量使用了js和css,如果又插件的话会更多,这个文件一般是放在wp-admin和wp-includes文件夹里面,这一部分资源也是要走原来的WordPress的
- WordPress创建的比如www.daozhao.com/feed 等自定义路径也是要走WordPress的,除非你想在node服务器那边再弄一份
这样弄完再试试,如果主要流程没问题,没有发现有资源请求错误的,就可以直接切了。
既然现在flag里面有提到PWA,所以上线前一并把这一块弄好,之前练习过这部分,加上本身难度也不大,所以加上也很容易。现在道招网要变成缓存狂魔了,很缓存的尽量缓存了,哈哈。除了post请求外都缓存。
之前还没发现,原来WordPress编辑文章时需要请求的资源是那么的多,那样能不慢吗,原来这就是我一直不想更新的原因啊。
我就点进去新建文章wp-admin/post-new.php,就会有如此多的请求。再加上我平时都是把network里面的disable cache 勾上的,所以没有用缓存,速度可想而知了。
主要问题都解决了,可以上线了,道招网在2020年4月5日 21点20分左右切换成了vue服务端渲染
上线时用的扁平化风格常见的蓝色作为主色调,今天早上想了想,自己网站原来就是红色调风格,网站logo还有favicon全是红色调的,所以还是保留红色吧,改动太大怕老用户还以为走错了呢,其实对我而言换个背景色肯定比换图片容易啊。
现在网站相比以前还是有部分功能缺失的,后续完善。
- 分类信息那部分在优化接口数的时候改动导致没有用到服务端渲染
- 没有搜索功能
- 左侧菜单和右边的副栏内容过于寒酸
- 没有相关推荐和上一篇下一篇
- 通过
router-link
访问的时候只调用了接口,实际是没有请求整个页面的,导致PWA无法缓存这部分,目前右边的几篇是我用a
标签实现的,可以用到PWA缓存。
上述几点也不在本次计划之内,今天不准备花太多精力搞这个了,此次清明节假期任务圆满完成,最后一天假期,出去溜达溜达。
- 分类:
- 吐槽
相关文章
2011.5.15道招daozhao.com正式上线
使用WordPress构建 道招 ( daozhao.com ) 阅读更多…
网站更新至wordpress3.3
刚升级,使用中... 阅读更多…
wordpress博客提示“Briefly unavailable for scheduled maintenance. Check back in a minute”
所谓“Briefly unavailable for scheduled maintenance. Check back in a minute”翻译过来就是“正在执行例行维护,请一分钟后回来”,这 阅读更多…
PWA缓存控制和版本升级实践
PWA是会注册一个 service-worker 的,每次任何被 service worker 控制的资源被请求到时,都会触发 fetch 事件,这些资源包括了指定的 scope 内的文档,和这些文 阅读更多…
百度“道招”这个关键字现在终于第一页
想起来就觉得是一种讽刺,哎,本站是 道招 ,域名都是道招的拼音 daozhao ,可到了今天道招和daozhao这两个很显然的关键字才都到各大搜索引擎的第一页。之前“ 道招 ”在百度的关键字总是不在第 阅读更多…
凡客联盟会员猛增,联盟实行收款账户信息升级
尊敬的凡客联盟会员: 随着联盟会员数量的不断增加,为加快联盟会员付款的进程、确保银行账户信息的安全性。我们将针对联盟用户的付款信息做相关升级,请联盟会员按照我们的提示规范自己的收款账户信息,以保 阅读更多…