相信不少小伙伴都看b/p站，其中有个比较有意思的效果就是当鼠标移动到视频上时，视频会随着鼠标移动幅度快进/退展现视频预览图，这个效果用户体验很不错。搜了一圈发现虽然可以前端用定时器+canvas实现，不过性能及兼容性各方面都不太完善，因此大部分还是推荐预先在后端处理好视频需求之后，再到前端做控制。这个扩展就是大名鼎鼎的 FFMpeg，其可以在服务端上安装运行，不过源码已经很久没有维护了（部分以前版本存在漏洞），实测宝塔环境安装指令：wget http://download.bt.cn/install/ext/ffmpeg.sh && sh ffmpeg.sh

安装完成后，花了几天时间研究了下 ffmpeg 指令及相关思路，现已将测试版集成到 wordpress 主题控件，当在后台上传视频类型文件到媒体库时将自动在同级上传目录下生成 jpg 长图/gif 动图以及文件 json 视频信息等，目前仅在部分页面开启（前端），后续再做更新优化。

Ps.

完成后测试体验不错，设计了一个新的样式。总的来说坑还是不少，不过解决问题的方案有非常多，还是需要多灵活变通。

很久没写过博客更新内容了，不过都有在更新的，前不久把服务端的后端 php 性能配置优化了一下（启用memcached、opcache缓存扩展，设置4G并发方案，memory_limit为256m，linux 启用 2G swap 虚拟内存等），感觉还是很有效果。这两天顺便把之前的图片懒加载也给重新安排上了（取消了 lazyload.js 的 jquery 依赖），之前只应用在文章中，现在全站开启，首屏加载效果的确比以前要快很多（尤其是漫游影视这种单页面多图片的，再加上php缓存后，加载速度效果卓越），主要很多页面减少了大量评论表情包请求，这种时候 lazyload 的确有必要。适配完成后已将版本更新到 github 。

在本地 lighthouse 评估测试中（PC端，移动端普遍下浮），除漫游影视主页面（多图片请求）及归档页面（大量sql请求）的 Performance 评分在 80-90 之间浮动外，其他页面均在 95-10 0之间，基本能实现秒开。测试 lighthouse 期间，顺便优化里其中的其他几项评分标准（Accessibility、Best practices、SEO），主要还是一些 seo 的东西（评论图片 alt 优化暂时搁置）。

在测试可访问性（Accessibility）栏目中的 CONTRAST 中有一条：Background and foreground colors do not have a sufficient contrast ratio.

也就是页面对比度不够，可能对视觉障碍用户有影响，这个也有很多博友提到过。还有字体大小，以后再慢慢优化吧。

Ps.

其实优化网站速度还是挺有必要的，以前基本都只是套个cdn，优化代码逻辑而已，其实优化后端还是蛮有必要的，毕竟依赖后端数据支持。

刚刚宕机了一会，上腾讯控制台重启服务器耗时很久重启之后才正常了，我预估是cpu或者内存满载了，至于原因不清楚，然后打算发个工单让他们帮查一下什么原因。在手动 提交工单 页面，选择服务器问题Linux系统卡顿，然后自动跳出来了个 自助检测 ，选择实例后开始检测即可。

然后结果不出所料，“该实例最近12小时的MEM利用率曾达[90%]…”、“该实例最近在2022-12-08 14:28 出现过外网出带宽平均利用率超过90%]…”，应该就是不知道什么情况外网访问把内存爆了，不过既然知道原因了也无所谓了。重启服务器后看到内存占用一半以上还是很高，顺便去把服务器上搭建部署的 seafile 服务暂停了，之后下降到了50%以下。

Ps.

有一说一这个自助检测还是很实用的，免去了发起工单浪费相互的时间。

这里 @小元 提醒到被回复后没有收到邮件提醒，因为我用的 valine 评论所以就去 leancloud 控制台看了下云引擎日志，结果报错 Error: Invalid login: 535 Error: authentication failed, system busy，查了下意思是 smtp 的密码没对，我又去主题后台看了下我自己设置的密码换上去，重新部署后还是一样 535 错误，于是上邮箱设置里看发现那个客户端密码没有了。。必须要绑定微信才可以生成（我记得以前应该是有的，不然我也不会用这个邮箱发件这么久，最近一次是6月份），没办法只能先用另一个绑定了微信的邮箱重新生成新smtp密码，更换邮箱信息重新部署后，就正常收发邮件了。

Ps.

这个不提醒还真不容易注意到，因为我主题开发后评论提醒是分开做的，别人评论我能收到微信（企业）推送，我回复别人走的是 leancloud 的云引擎发件函数，所以还真挺扯淡的。。

通常，我们使用 js 来克隆某一元素时一般会优先考虑 cloneNode(deep) 方法，通过该方法我们可以非常轻松实现元素克隆。当我们使用 on.xxx 为被克隆元素添加方法后，再使用 cloneNode 对其进行克隆后的元素将不再附带其自定义事件，也就是说：cloneNode()无法克隆事件（除元素内联事件外），这就导致其在部分场景无法适用。（注：在 jQuery 中的替代为 clone() 方法，该方法可以完整克隆自定义事件）
后了解到 importNode()及adoptNode()，前者与 cloneNode 一样无法克隆事件，后者则不同：adoptNode(Node)方法用于从另外一个文档中获取一个节点(可以是任何节点类型) adoptNode()会将原文档中的节点删除，类似元素“剪贴”后保留所有事件，这也是我们想要的。

Ps.

搜了一圈也没找到替代方法，一般就让用jquery，估计这个方法知道这个隐藏属性的也比较少，临时使用简单记录一下。

重新开启子域名cdn加速访问图片后，这个生成图文海报的插件又出了之前那个跨域问题，在后端配置了 Access-Control-Allow-Origin 后仍然不能访问（之前不知道是怎么搞的能访问），于是又查了一圈，发现需要给图片添加 crossorigin="anonymous" 属性，试了一下还是不能（此时图片无法访问）然后发现了个新方法：在 src 属性后添加固定字符串参数即可！（实测添加参数后，不添加 crossorigin="anonymous" 也可以正常访问）。在控制台网络中可以看到不携带参数出现cors跨域问题的图片是没有 Access-Control-Allow-Origin 响应头的，其 Referrer Policy 为 stict-origin-when-cross-origin ，原因就是 img 是在缓存数据中读取的，远程访问这个图片的时候没有携带请求头。参考链接：https://www.jianshu.com/p/169f50d95c19

Ps.

流程：首先需要在 nginx 中配置 Access-Control-Allow-Origin 跨域访问，之后在 html2canvas 中配置 useCORS:true 开启跨域，最后在需要跨域的图片 src 属性后添加任意参数（如 ?fixed_cors 不可随机参数，可能造成 cdn 缓存击穿），至于是否需要在跨域图片上添加 crossorigin="anonymous" 属性需要自行尝试。

突然发现 valine 的评论顺序出错了，在 @zlprime 的评论页面，最新评论的内容跑到最后一页去了。因为近两天刚把评论区的表情包地址全部替换了一遍，以为是 leancloud 控制台数据问题，于是赶紧换回去，结果一样。然后想了下最近也没有修改什么 valine 的东西，但还是去 github 看了下历史版本，发现正常的时候也就改了个样式。这就把我难到了，到底是那里出了问题？突然想到曾经修改过“排序”的内容也就只有评论置顶了，于是去注释掉相关代码后，一切恢复正常。

Ps.

这个就是典型的能用就行导致的代码逻辑不规范，至于之前为什么生效就不再去考究了，计划近期重写 valine 评论置顶。

今天发现评论区里之前的表白都失效了，原因是之前的腾讯云cdn过期了没有重新绑定，目前暂时打算先把已存在的评论数据表情包链接修改为当前wp的链接地址。首先去 leancloud 控制台看了下批量操作，结果发现不可行，其使用的 rest api 批量更新包含某个值的表里的 comment 时，只能全部更新 comment 内容，后面突然想到可以把数据导出后在本地用编辑器逐一更新，因为 leancloud 导出数据格式为 jsonl（列式JSON数据）所以可以轻松编辑完成后重新上传到 leancloud 来手动更新数据。虽说是手动替换，但因为是批量替换，2k+数据几分钟就搞定了。

Ps.

需要注意的是，数据上传时可能会提示："error":"E11000 duplicate key error collection: JW6UQqU7IfksnJD56S9QLVSj-gzGzoHsz.Comment index: _id_ dup key，这表示已存在重复的数据，此时，将你需要更新的表从 leancloud 数据表中先删除掉，之后再导入修改后的表导入即可（注意做好备份，leancloud 导出数据时默认会发送24小时有效邮件，若数据出错可重复下载恢复修改前的数据）

如题，这种情况只会在重建相同域名数据库站点的时候才会出现，比如新建一个带mysql的站点后安装完wp再删掉（站点、数据库），重建的时候安装wp就会在最后一步报数据库wp_user表已存在，一堆错误.. 照网上删了frm数据库文件重建也无效（因为没有idb文件，全都是frm文件）

Ps.

暂时不知道什么原因导致的以及如何修复

时隔几日未更日记，近期也是对 2BLOG 主题跟进了很多个小版本，目前打算先暂时这样（beta-v1.2.0），如果后续发现任何问题再进行更新处理（还有些future todo）。目前，在wp上除公告外所有数据均已“文章”形式发布，这样未免显得有些杂乱了，所以对 lbms 的数据新增了单独控制数据切换：默认情况下 leancloud 为关闭状态，当其打开时，所有涉及 BaaS 的（模板）页面均被自动全选，即将默认调用 lbms 返回的数据（包括公告在内），但这里也提供了自选项，可勾选想应用 lbms 数据的分类页面（未被勾选的项目将默认调用wp数据），这样一来可以简单将数据区分开来。需要留意一点，当wp作为数据源时可以在后台 通用控制 中启用“展示型单页”以作为可点击的文章链接（一般这种展示型的简短数据其实不太需要内页作为支撑，不过倒是可以加一个单独评论挂件，个人想法..

Ps.

另一方面也是我留在leancloud的数据有些多了（虽然友链、下载、漫游影视都上传到wp了，不过还是想留这么一两个在lbms上.. 嘛，日后再说啦。

现在开启了 beta v1.0.0 测试，我这边会将现有博客数据同步到2BLOG主题上，以便后续测试维护与更新。

Ps.

测试就开始了。

暂时写好一个大概版本，虽然很多没有详细说明，不过用过 WordPress 的小伙伴只要简单看下应该就能使用了，地址同样是：https://github.com/2Broear/2BLOG

Ps.

你知道吗？项目中的 screenshot 目录是无关紧要的，因其作用仅限于文档说明之中...

这东西不好写啊，总之先概括下整体，其他的细节后面再慢慢迭代。

Ps.

开源地址：https://github.com/2Broear/2BLOG

纠结了很多次，因为也不专业，一开始使用分类来做导航就引发了后续的评论问题，了解一圈知道分类只能调用页面数据不能调用页面评论，于是将分类和页面进行数据同步，使用去url中的“category”目录来拉取同步slug的page评论，这个方法能用，但不完美，存在很多遗留下来的问题，虽然现在已经基本解决了（近期又跟进了分类id同步页面排序、分类模板同步页面模板，以及分类层级等数据同步）但有时候还是很不方便。之前说了几次改也的确去改了一版page导航的header，但页面调用数据方式又得换，不然无法正常调用对应页面的数据（也无法获取文章所属页面的一些小问题），但使用分类做导航就不会有这些问题，分类会自己拉取属于自己的文章列表，同时使用去category实现分类调用数据的同时调用wp原生评论…

Ps.

总之，目前来讲这个东西暂时先搁置一旁，这也就说明了这个主题只适用于少数定制用户，毕竟做分类页面同步还是费了很多时间..

移动端基本都适配好了，目前新增了后台多选控件，修复了一些导航bug，完善新建分类导航页面时的额外选项（同步页面）优化后台各控件显示及逻辑问题等等，接下来就是写主题说明文档了，很多定制的东西并不都能用上，到时候一个个分开写。至于其他所有存在的部分细节问题，打算全都通过后续主题迭代进行更新。

Ps.

鸽了这么久总算是个头了，目前基本能满足我个人需求了，等主题文档写好马上开测～（默认将以邮件方式通知之前问过本主题的同学进行内测，同时也欢迎其他想体验本主题的小伙伴们在留言板告知测试～