技术手记

修复 WordPress 插件 Collapsing Archives 在 PHP8 下不能使用的问题

使用 Collapsing Archives 这个 WordPress 插件很多年了,就是本文右边能看到的历年存档,可以很漂亮折叠起来,而不是官方默认插件只能按年聚合,不能展开看有哪些文章

但是在 WordPress 升级到某个版本,及容器升级到 PHP8 后,只要开启这个插件,必然整个 WP 站都挂的,开 WordPress Debugging 看报错信息也没有头绪,没有可以联系作者的渠道,在 WordPress 论坛反馈也没反应

其中一个普遍的报错是

[error] 1088#1088: *266661 FastCGI sent in stderr: “PHP message: PHP Fatal error: Uncaught TypeError: call_user_func_array(): Argument #1 ($callback) must be a valid callback, class collapsArch does not have a method “enqueue_scripts” in /home/foo/www/blog/wp-includes/class-wp-hook.php:307

这个问题参考 https://wordpress.org/support/topic/an-error-occurred-11/#post-15472977 获得了解决,具体办法是到 ~/wp-content/plugins/collapsing-archives/ 目录下修改 collapsArch.php 的 42 行,从

if (!is_admin()) {
    wp_enqueue_script('jquery');
    add_action( 'wp_enqueue_scripts', array( 'collapsArch', 'enqueue_scripts' ) );
} else {

改为

if (!is_admin()) {
    wp_enqueue_script('jquery');
    add_action( 'wp_head', array( 'collapsArch', 'get_head' ) );
} else {

但是问题依然没有解决,还有一处拼写错误需要修改,参考 https://wordpress.org/support/topic/great-until-php-8/#post-16349890 的办法,在 ~/wp-content/plugins/collapsing-archives/ 目录下修改 defaults.php 的 27 行,从

  'post_type' => 'post',
  'taxoncmy' => 'category',
  'postTitleLength' => '');

改为

  'post_type' => 'post',
  'taxonomy' => 'category',
  'postTitleLength' => '');

至此,重新启用插件恢复正常

macOS 还是需要 Karabiner 来解决 CapsLock 和 Shift 延迟的问题

在前阵子的 macOS 实用小工具记录 2 里提到,因为有原生锁屏快捷键后不用装 Karabiner 了,但最近在 macOS 下打字,按 CapsLock 切换大小写或临时按 Shift 时总有延迟的感觉,搜到这个现象很普遍,但怎么解决不知道

今天看到 v2ex 这个帖 https://www.v2ex.com/t/851971 ,以及里面提到的几个其他讨论帖,还是把 Karabiner 装了回来,因为

How to disable caps lock delay
Karabiner-Elements disables the caps lock delay without any action since v13.3.0.

官网在 https://karabiner-elements.pqrs.org/

如果用 brew 则用 brew install karabiner-elements 安装

macOS 实用小工具记录 2

本文用于更新和补充 macOS 实用小工具记录 里提到的工具 v2022.03.16

更新部分

Hidden Bar

  • 最终发现不用也能接受,只要吧 Stats 显示的监控变少一点就好了,不用放那么多图标在菜单栏里

Karabiner

  • 如原文所说,之前是为了映射 Power 键方便锁屏,现在用原生 Ctrl+Cmd+Q 已经可以解决了,自己没有别的键映射就没再装了

Scroll Reverser

  • 这个工具的作者说未来会改为收费工具,虽然一直没有落地,但不想白嫖
  • 另外是这个工具在 macOS Monterey 下(macOS 12.x)偶尔会失效,找到了另一个工具来替代

补充部分

Cleaner

Keka

  • https://www.keka.io
  • 压缩解压工具,命令行版的 p7zip 对非专业用户还是不够友好

MOS

  • https://mos.caldis.me/
  • 替代 Scroll Reverser 的小工具,将鼠标的滚轮方向单独调整成跟 Windows 下方向一样,保留触摸板是原生方向
  • 在 GitHub 上有免费开源,也可以 brew 安装,界面看起来更现代化一些

macOS 实用小工具记录

记录一下自己目前在 macOS 上常用的小工具们(按字母序)v2022.02.10

DaisyDisk

  • https://daisydiskapp.com/
  • 磁盘空间分析工具,免费可试用,我某次买过付费的就一直在用
  • 可以用 gdu 等工具替代,只是这个可视化做的更漂亮

displayplacer

EasyRes

  • http://easyresapp.com/
  • 屏幕分辨率快速管理工具,免费,Mac App Store (MAS) 直接有下载
  • 相比 RDM 等工具,这个安装和使用更方便

Hidden Bar

Itsycal

Karabiner

  • https://karabiner-elements.pqrs.org/
  • 键位重映射工具,之前主要用来把外接键盘的 Pause/Break 重置为 Power 方便锁屏,现在有了原生 Ctrl+Cmd+Q 后好像用不上了

Rectangle

  • https://rectangleapp.com/
  • 窗口布局管理工具,之前的 Spectacle 不更新了,这个适配新的更好点,同样免费且开源

Scroll Reverser

  • https://pilotmoon.com/scrollreverser/
  • 鼠标滚动方向调整小工具,系统原生只能触摸板和鼠标方向同时改,实际上触摸板保留 macOS 原生方向跟手挺好,外接鼠标还是跟 Win 保持一致更舒服

Snipaste

  • https://www.snipaste.com/
  • 截图小工具,也有推荐 Shottr 的,不过这个在 macOS/Win 上都有,国人开发界面也更好理解

Stats

近期用电脑的几个小技巧调整

Edge 浏览器在某个版本后默认开启了拷贝当前访问网页链接时,复制的是网页标题,粘贴时如果遇到富文本编辑器,出来是标题文字加跳转链接,如果遇到纯文本编辑器,出来就是网页标题。这个可以在 Edge 的设置里「共享、复制和粘贴」里将格式改成「纯文本」来解决

macOS 12 Monterey 里新增了快捷备忘录的操作,默认是屏幕右下角作为触发角,以及 Fn+Q 唤起。这个本是个好事,但增加了触发角其实会有不必要的困扰,在 macOS 的系统偏好设置里,到「桌面与屏幕保护程序」里,在屏幕保护程序页的右下角来设置「触发角」将其改为没有任何行为即可。顺带吐槽下触发角这个设置项的入口其实挺反直觉的,好在还能有搜索

MacBook Pro 通过 BootCamp 安装 Windows 10 及取消 Office365 链接 OneDrive

公司有一批换旧下来的 MacBook Pro,同时因为一些调试需求,又需要 Windows 设备,看了下公司买的 Windows 10 Pro 授权是有多的,可以通过 BootCamp 在这些机器上装 Win10 来当测试机用

BootCamp 在 macOS 里自带

准备好 Win10 的安装文件,因为我们有买企业授权,直接去批量许可服务中心去下载对应 ISO 文件

这里有踩一个坑,在 macOS Catalina (10.15) 之前版本,BootCamp 可能提示复制 ISO 文件失败,这里需要使用一个叫 Boot Camp ISO Convert 的工具,将原版 ISO 做一下转换。简单说原因就是 FAT32 文件系统不支持单个文件超过 4GiB,转换工具可以将 ISO 里的 install.wim 转成更小的文件,工具下载链接在 https://twocanoes-software-updates.s3.amazonaws.com/Boot%20Camp%20ISO%20Converter1_6.dmg

按 BootCamp 提示,选择转换好后的 ISO 文件,确定分区大小,直接下一步就好了。重启进入 Windows 安装流程可能发现没有网络,先跳过,等完成安装后在资源管理器里看有一个虚拟光驱,里面是 Win10 安装文件,进入发现里面相比原版安装镜像多了个 Boot Camp 工具包文件夹,进去 setup.exe 安装好各种驱动,再重启一次就完成安装

目前看 Win10 对 MacBook Pro 的高分屏支持也还不错,除了安装过程一开始只能 100% DPI,后面的安装流程和系统内,200% DPI 下显示效果很棒

因为是测试机,登录企业 Office 365 后不希望跟账户绑定的 OneDrive 和 OneDrive for Business 打通,先在系统设置里卸载 OneDrive,然后在注册表里到 计算机\HKEY_CURRENT_USER\Software\Microsoft\Office\16.0\Common\Internet 路径下,新增一个名为 OnlineStorage 的 DWORD 键值,数值写 3,关闭所有 Office 应用再重新打开,在个人账户页和打开页就都没有 OneDrive 在线内容了

macOS 下维持鼠标滚动方向和 Windows 一致

macOS 有很多神奇的小细节会让 Win/macOS 双持党会感觉别扭,比如 macOS 的触摸板滚动方向是用了一个「自然」来描述,就是想象你摁着触摸板当一张纸在移动,方向跟 Windows 是反的

这个其实本不是问题,用 MacBook Pro 时按苹果的逻辑来就好,但是当外接鼠标时,还期望鼠标的滚轮方向跟 Windows 一样,就比较麻烦,修改 macOS 的滚动设置,只能触摸板和鼠标的方向同时改

我用的罗技和赛睿的鼠标都有厂商特定的工具,设置了后可以做到只修改鼠标的垂直滚动方向而不影响触摸板。罗技的叫 Logitech Options,之前都能正常工作,最近不知道是升级了 10.15.4 还是别的啥原因,这货工作不正常了,卸载重装也试了,在 macOS 的安全隐私里重新设置过也没用

各种搜索后发现了这么一个小工具 https://pilotmoon.com/scrollreverser/ ,下载试用感觉良好,不像罗技那个应用非常大,这个工具只用了 1M 不到就解决了问题,而且不仅限于特定品牌的鼠标

屠龙少年终变龙 从 Chrome 切换成 Edge

犹记得 2007 年在 Google 上海实习时,看到当时还没公开发布的 Chrome,还是那个蓝底 Tab 栏的早期版本,简洁清爽。相比之下 IE6 那时候已经被吐槽的很厉害,似乎 Vista 也只是自带了 IE7,然后因为吃硬件也没普及,我那时候似乎用的是遨游(Maxthon),随着遨游 2 的发布也愈显臃肿

过了十多年,当年大家吐槽的各种 IE only 甚至 IE6 only,变成了现在的 webkit only 甚至 chrome only,微软也放弃了自己的 IE 内核 Trident,新版的 Edge 浏览器最终还是基于 Chromium,又一个天下大势分久必合合久必分的循环

Chrome 被 Google 变得越来越私有化,各种更新和决策也完全是 Google 的一己私好,界面不知道是正大光明的为了对移动端和触屏更友好,还是单纯的一帮 UI 想彰显存在感,改的也越来越莫名其妙,最终,因为最近几个版本的 Chrome,在从别的应用冷启动唤起时,必然会页面全挂,且后续页面都会跟着挂,于是考虑迁移到 Microsoft Edge 上

在 Win10 1909 和 macOS 10.15 上都完成迁移,比想象中的无痛,相关的收藏夹密码记录等可以无缝导入,只是 Google 的账号同步变成了微软的账号同步,平常需要的插件在 Edge 的应用商店里也有,几乎就没变化。上周开始办公和家用所有电脑的默认浏览器都改成 Edge 了

到目前 Edge 还有一些小细节期望得到改善,不过应该都是在不久未来版本里会实现的

  • 搜索引擎自动发现。目前 Edge 还需要各种手动添加各网站自己的搜索,比如 taobao 我访问并搜索过后,下次并不能直接在地址栏里用淘宝的搜索,必须自己手动添加过
  • 访问记录跨设备同步
  • 下载过程可视化。现在只有下载完成后才在窗口下部跟 Chrome 一样有下载完成的提示,下载中的似乎默认不可见,需要打开下载管理页才能看到

记一次诡异的被 yarn 坑的过程

事情的起源是 @tdzl2003 说他用 VSCode 的 remote 模式用的很开心,放弃 Hyper-V 回到 VirtualBox 的怀抱,笨狗去看了下 remote 相关功能好像还在 VSCode Insider 里,可以装来试试看,弄好后看了下文档和教程,知道插件分装在本地和装在远端,但是项目里 eslint 插件就一直在报错,说找不到模块

找不到就去补吧,到远端的目录下 yarn install 装好依赖,回到本地一看,还是报错,怎么会这样?在远端也执行下看看?

$ ./node_modules/.bin/eslint index.js
Error: Cannot find module 'jsx-ast-utils/elementType'
...

What the fuck?! 一定是哪里不对,把 jsx-ast-utils 这个包也重装一下?再来

$ yarn add jsx-ast-utils
$ ./node_modules/.bin/eslint index.js
Error: Cannot find module 'jsx-ast-utils/elementType'
...

你特么是在逗我?去看看这个包到底怎么回事,里面只有 lib src 两个目录,其他都没有,看起来好像是不太对

确认了一下环境,Windows 10 Pro 1903, WSL Ubuntu 18.04.2, node 12.3.1, yarn 1.16.0,都是最新的,换个环境试试看?在自己另一台 MacBook Pro 上 yarn install 后就是正常的,hmmm,难道是 Windows 目录挂载到 WSL 下后文件权限啥的锅?试了下在 WSL 里用 WSL 的文件系统重新来过,问题依旧。在 Windows 里把 WSL 映射成网络盘,用 PowerShell 进到 WSL 文件系统里 yarn install 就是好的,嗯?好了?回到 WSL 下执行 PowerShell 安装好的 node_modules 也成功

难道是 WSL 的奇怪问题,搜了下好像也没有任何相关信息?难道是最近新崩的问题所以大家都找不到,我印象中之前确实也能跑来着?那就是这个锅了。等几乎认定就是 WSL 有奇怪的问题后,晚上回家后拿另一台同样环境的机器,在 WSL 下就正常的装好了

这这这,等会,冷静一下,一定有哪里不对,要不用下重启大法?把所有相关的东西都干掉重来一下?在有问题的机器上,把 git 仓库清空重来(虽然之前已经换不同的路径做过了),把 nodejs 和 yarn 都卸载重装,对了是不是跟 yarn 源还有关系?确认一下

$ yarn config get registry
https://registry.yarnpkg.com

果然这里不一样,忘了改成淘宝源,改一个再来一次(官方源为啥可能会有坑嘛,难道是最近撞墙撞的?不管了先死马当活马医好了)

$ yarn config set registry https://registry.npm.taobao.org
yarn config v1.16.0
success Set "registry" to "https://registry.npm.taobao.org".
Done in 0.06s.

这下应该没问题了,走你,等 yarn install 跑完,先检查下 node_modules/jsx-ast/utils/ 路径下文件对不对,嗯?还是只有 lib src 这两个文件夹?这到底是为什么啊,yarn 你这个坑货,要不换 npm 试试看?

npm install 跑一下,提示有文件权限不对,看了下,哦是之前有 sudo npm install -g 装过东西,把 ~/.npm 目录下相关内容清掉就好了。用 npm 装完一看,好了。。。呃,果然 yarn 你个坑货到底哪里不对啊!?

缓存?去吧 ~/.yarn 下的内容都清掉,/tmp 下有一堆 yarn- 开头的不知道是啥应该也都可以干掉,再来,还挂?去搜 yarn install package missing files,终于看到了一个很相似的情况,不过他这个最后也是清了 yarn 的 cache 就好了。看了下除了 ~/.yarn 还有人说 Cache 目录是 ~/.yarn-cache 目录,但是我压根都没这个目录啊。顺着这条线索继续搜,找到 yarn cache clean 这个命令,执行后再装就好了

那看来就是之前的缓存有问题,而我弄这么多各种重装也并没有清掉 cache,或者触发重新从远端拉包。那么 yarn 的 cache 到底在哪里?到用户根目录下查看所有文件,发现有一个目录叫 .cache,看着挺可疑,进去看看果然里面有 pipyarn 等目录,看了下里面文件时间,就是这了,应该就是之前某次安装过程中被强制退出,导致那个点在装的一个或几个包是不对的,但是目录还在 yarn 就一直傻乎乎的用本地的

结论:yarn 的 cache 机制对包的完整性保证不够,如果之前安装过程中有异常退出,赶上异常退出过程中的包就有可能损坏,后面如果不手动清 cache,就会一直挂

如何得到一个自适应宽度的高宽比固定的 HTML 容器

写上一篇文章时遇到了一个问题,我想插入一个 bilibili 的 iframe 来嵌入视频,如果直接用 B 站给的 iframe 代码,出来的是很小的一块,强行把 iframe 的 width 变成 100% 后,宽度是自适应撑开了,高度还是只有一点点高,然后 height 怎么写都不太对,如果再考虑手机等小屏幕设备需要自适应宽度,这个更无解了。搜了一圈,找到了一篇文章【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频,按这个做法解决了问题

仔细看了下实现,其实挺有意思的,应该可以算前端的一个经典问题,就是如何设定一个 HTML 元素,能做到自适应宽度,且高宽比固定

一般我们需要维持高宽比的是图片,这个在 <img> 标签上可以有各种缩放选项能满足需求。对于视频,或者 iframe 嵌入,则没有比较好的原生实现方式。在上面找到的那个文章里,其实是先构建一个能自适应宽度且高宽比固定的 HTML 容器(一个 position: relative<div>),然后把真正要做到自适应的元素放到这个容器里,并用绝对定位占满空间,那么问题从怎么设定这个元素属性变成怎么得到可以自适应宽度且高宽比固定的一个容器

按搜到的那个实现做,是用一个空 <div>,先设定宽度 width: 100% 可以做到自适应宽度,接着为了维持高宽比,先强行设定高度 height: 0,然后用 padding-bottom: 75% 来做到等比撑开。这里的百分比计算是按照宽度来计算的,详细的定义可以看 w3.org 里关于 box 元素 padding-properties 的定义 http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties。搜索结果里也都有这么来介绍,比如这两例:

今天问公司的前端担当 @tdzl2003,给出了另一个思路清奇的操作,直接塞一个比例图片进去,然后把这个图片撑开就行了,图片可以用透明色,而且 base64 编码后的图并没有多大,不会影响视觉效果也不影响性能,比如要 4:3 就弄一个 4 像素宽 3 像素高的空白图

果然前端都是各种骚操作,各种给跪