博客

调整网页应用的窗口、图标和页面样式

窗口与行为 · · 约 6 分钟

Pake 应用有三层可以各改各的,窗口边框(尺寸、标题栏、是否置顶)、图标,以及里面的网页,网页属于网站本身,只能靠注入的少量 CSS 或 JavaScript 去调整。先改边框,因为它不会碰到网站,页面本身出问题时再考虑注入代码。

先分清改的是哪一层

窗口是 Pake 在网页视图外面做的一层原生外壳,尺寸、标题栏、深色边框和层级都是原生窗口的属性,所以在任何网站上表现一致。页面则是网站发来的内容,由系统的网页视图绘制,Mac 上是 WebKit,Windows 上是 WebView2,Pake 不会替它改样式,这也是深色窗口只让边框变深、浅色页面仍然是浅色的原因。

注入的代码处在两者之间。注入 CSS 里写的内容会被 Pake 包成一个 <style> 元素,在页面加载时追加到 <head> 里,两者写在同一个自定义脚本里,注入 JavaScript 的内容接在 CSS 部分后面,在应用打开的每个页面上运行。它们都站在网站那一侧,网站改了页面结构就可能失效。

设置尺寸和图标

在我的应用里点编辑,在默认尺寸里,宽和高都可以填 200 到 10000,默认是 1200 × 780。选一个让网站主要控件不出现横向滚动条的宽度,点保存修改再重新打开。编辑是原地重装同一个应用,登录状态还在,改尺寸会清掉应用上次记住的窗口大小,新的默认尺寸才能生效。

图标一行点选择…,或者直接把图片拖上去,Mac 支持 PNG、JPEG、ICO、ICNS、TIFF 和 WebP,Windows 支持 PNG、JPEG、ICO、BMP、GIF、WebP 和 TIFF。要看它在程序坞或开始菜单里的实际大小,细节多的图缩小后糊成一团,简单的标记反而好认,移除会回到网站自己的图标,网站没有图标时 Pake 会画一个字母图标。

按遇到的问题选设置

想要设置所在分组
小窗口一直在最前始终置顶窗口外观
页面铺到窗口顶部(Mac)隐藏标题栏窗口外观
深色标题栏和边框深色窗口窗口外观
同一个应用开多个窗口多窗口窗口外观
用 Command-F 或 Ctrl-F 搜索页面页内查找运行偏好
关窗口后应用继续运行常驻后台运行偏好
登录弹窗留在应用里(Windows)新窗口在应用内打开运行偏好
指定哪些链接留在应用里、哪些交给浏览器内部链接正则高级

前四项是原生窗口设置,始终置顶有单独一篇让网页应用保持在最前,常驻后台加菜单栏或托盘图标放在把网站放进菜单栏里讲。Mac 上的隐藏标题栏属于窗口而不是页面,容易搞混,没开的时候标题栏会用网页的颜色,打开后页面一直铺到窗口边缘。

每个应用还带有缩放快捷键,Mac 上是 Command 加 =、- 或 0,Windows 上是 Ctrl 加同样的键,页面显得太大或太小时往往不用写代码,完整列表在快捷键说明。

决定哪些链接留在应用里

默认情况下,指向同一个网站的链接在应用里打开,其他链接交给浏览器。高级里的内部链接正则会替换这条规则,地址匹配这个正则的链接留在应用内,比如 ^https://(app|accounts)\.example\.com 会让两个子域名留在里面,其余的都送到浏览器,正则写得不合法时 Pake 不会保存。登录时弹出新窗口是另一类问题,Windows 上对应的是新窗口在应用内打开,登录排查里有具体步骤。

页面不合适时,加一条 CSS

高级里有注入 CSS 和注入 JavaScript,下面是给天天要读的网站用的一个例子:

article {
  line-height: 1.7;
  max-width: 46rem;
  margin: 0 auto;
}

页面得用 article 元素,而且网站自己的样式没有压过它,这条规则才会生效。很多网站用优先级更高的选择器设置同一个属性,这时要写更具体的选择器,或者只给那一个属性加 !important。先改一个看得见的地方,再打开第二个页面、设置页和一个表单看看,因为注入的 CSS 对应用打开的每个页面都生效,div 或 button 这种范围太大的选择器会碰到不想碰的东西。

能用 CSS 就先不用 JavaScript,样式规则在页面结构变化后只是悄悄失效,会点击或删除元素的脚本出问题时更难发现。网站改版后规则不起作用了,就在浏览器里打开那个页面,检查元素,更新选择器,不需要把应用整个重做。

检查结果,出了问题怎么退回去

点保存修改之后重新打开应用,不要只看已经打开的那个窗口。尺寸不对时,先确认数字在 200 到 10000 之间,再确认编辑的是对的应用。CSS 改完页面乱了,就清空注入 CSS,保存,重新打开,页面会回到网站原本的样子。导入的配置里自定义代码是关着的,在高级里看过之后点使用导入的代码才会启用。

用命令行的话,同样的选择就是参数,--width、--height、--hide-title-bar、--always-on-top、--dark-mode 和 --inject ./style.css 对应上面的选项,其余的见 CLI 参数说明,其中 --min-width、--min-height 和 --zoom 在桌面版里没有对应的输入框。

调好以后留一份配置

布局合适之后,从应用的 ⋯ 菜单导出配置,文件里有尺寸、选项、链接规则、CSS、JavaScript 和图标,不包含登录状态和 Cookie,换电脑的做法见配置迁移教程,完整选项见创建应用说明。

常见问题

开了深色窗口,页面为什么还是浅色的?

深色窗口只改标题栏和窗口边框,页面颜色由网站决定,要变深就用网站自己的主题设置,或者自己写 CSS。

改了窗口尺寸要重新打包吗?

不用,在我的应用里编辑,点保存修改再重新打开就行,Pake 会原地重装同一个应用。

注入的 CSS 会影响别的网站吗?

它对应用打开的每个页面都生效,如果让其他域名的链接也留在应用里,这些页面同样会受影响,所以选择器尽量写具体。