hello云胜

技术与生活

0%

小程序使用vantUI组件库步骤

我已经通过微信小程序工具创建了一个云开发小程序。

image-20210516172214831

1,通过npm安装安装

一定要在项目的根目录下执行:

1
2
npm init
npm i @vant/weapp -S --production

image-20210516173358674

看到多出来了node的相关依赖

2,修改app.json

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

image-20210516172435286

3,修改project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内修改如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

1
2
"packNpmManually": false,
"packNpmRelationList": [],

修改为:

1
2
3
4
5
6
7
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]

4,构建npm包

打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

image-20210516173523181

成功后,在miniprogram下生成了miniprogram_npm依赖包

image-20210516173632929

5,引入使用

全局使用就在app.json中引入,局部使用就在对应的json文件中引入。

如使用vant的日历组件

1
2
3
"usingComponents": {
"van-calendar": "@vant/weapp/calendar/index"
}
1
<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />

image-20210516174353245

1,多于两行文字省略

image-20210107214548415

2,在代码里使用动态数据的写法

image-20210108230257452

3,获取视口高度宽度

image-20210109184847175

小程序Swipper组件自适应图片高度

问题:

Swipper组件默认最小高度是150px,如果图片比较大,超过的部分不会显示。如果把swipper的高度设置的比较大,又会导致小图片下面有一块空白部分,看着很丑。所以,需要做到根据图片的实际高度动态计算swipper组件的高度。

原理

图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后的宽高,保存到一个数组中。在swipper切换时监听当前显示的图片,根据其索引找到对应的高度,并赋值给swipper组件。

代码

xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<swiper indicator-dots='true' 
indicator-active-color='#ff5777'
autoplay='true'
circular='true'
interval='3000'
bindchange="bindchange"
style="height:{{imgheights[current]}}rpx;">
<block wx:for="{{images}}" wx:key="index">
<swiper-item>
<image mode="widthFix" class="swiper-image" src="{{item}}" data-id='{{index}}' data-url='{{item}}' bindlongtap="savePic" bindload="imageLoad"/>
</swiper-item>
</block>
</swiper>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// components/w-swiper/w-swiper.js
Component({
/**
* 组件的属性列表
*/
properties: {
images: {
type: Array,
value: []
}
},

/**
* 组件的初始数据
*/
data: {
//所有图片的高度
imgheights: [],
//图片宽度
imgwidth: 750,
//默认
current: 0
},

/**
* 组件的方法列表
*/
methods: {
savePic(e) {
const $this = this
const imgUrl = e.currentTarget.dataset['url'];
wx.showActionSheet({
itemList: ['保存到手机'],
success(res) {
console.log(res.tapIndex)
if (res.tapIndex === 0) {
$this.saveImage(imgUrl)
}
},
fail(res) {
console.log(res.errMsg)
}
})
},
saveImage(imgUrl) {
wx.showLoading({
title: '保存中...',
mask: true,
});
wx.downloadFile({
url: imgUrl,
success: function (res) {
if (res.statusCode === 200) {
let img = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: img,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
},
fail(res) {
wx.showToast({
title: '保存失败',
icon: 'success',
duration: 2000
});
}
});
}
wx.hideLoading()
}
});
},
imageLoad: function (e) { //获取图片真实宽度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight;
console.log(imgwidth, imgheight)
//计算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight;
var imgheights = this.data.imgheights;
//把每一张图片的对应的高度记录到数组里
imgheights[e.target.dataset.id] = imgheight;
this.setData({
imgheights: imgheights
})
},
bindchange: function (e) {
// console.log(e.detail.current)
this.setData({
current: e.detail.current
})
},
}
})

css

1
2
3
4
.swiper-image {
width: 100%;
height: auto;
}

效果

image-20210107111404976

image-20210107111438916

一键获取微信收货地址

在小程序中获取用户的收货地址,还是比较简单的。

下面总结下步骤:

页面:

image-20200526161910209

image-20200526162627758

点击确定,显示地址,再确定后,可以得到地址信息:

1
2
3
4
5
6
7
8
9
cityName: "广州市"
countyName: "海珠区"
detailInfo: "新港中路397号"
errMsg: "chooseAddress:ok"
nationalCode: "510000"
postalCode: "510000"
provinceName: "广东省"
telNumber: "020-81167888"
userName: "张三"

还是很简单的。但是,要注意:一旦这里点击了取消,以后再点击一键获取地址,不会再弹出这个授权界面

我们需要先判断,用户是否给了授权

先调用 wx.getSetting,

1
2
3
4
5
6
wx.getSetting({
success: function(res) {
console.log(res)
},

})

打印一下:

1
2
3
4
authSetting:
scope.address: false
__proto__: Object
errMsg: "getSetting:ok"

看到对收货地址的授权是false

所以,加上让用户重新授权的代码

1
2
3
4
5
6
7
8
// 有值,并且是false。打开授权页面,重新授权
if (res.authSetting['scope.address'] == false) {
wx.openSetting({
success: function(res) {
console.log(res.authSetting)
}
})
}

image-20200526163643758

再次点击,就可以了

image-20200526163819822

rook-ceph的PVC扩容测试

1、先看storageclass是否配置了自动扩容

先查看storageclass是否配置了动态扩容,主要看storageclass是否存在allowVolumeExpansion字段

1
2
3
4
5
# kubectl get sc rook-ceph-block -oyaml
#kubectl get sc rook-ceph-block -oyaml | grep allowVolumeExpansion
allowVolumeExpansion: true
{"allowVolumeExpansion":true,"apiVersion":"storage.k8s.io/v1","kind":"StorageClass","metadata":{"annotations":{},"name":"rook-ceph-block"},"parameters":{"clusterID":"rook-ceph","csi.storage.k8s.io/controller-expand-secret-name":"rook-csi-rbd-provisioner","csi.storage.k8s.io/controller-expand-secret-namespace":"rook-ceph","csi.storage.k8s.io/fstype":"ext4","csi.storage.k8s.io/node-stage-secret-name":"rook-csi-rbd-node","csi.storage.k8s.io/node-stage-secret-namespace":"rook-ceph","csi.storage.k8s.io/provisioner-secret-name":"rook-csi-rbd-provisioner","csi.storage.k8s.io/provisioner-secret-namespace":"rook-ceph","imageFeatures":"layering","imageFormat":"2","pool":"replicapool"},"provisioner":"rook-ceph.rbd.csi.ceph.com","reclaimPolicy":"Delete"}
f:allowVolumeExpansion: {}

看到有"allowVolumeExpansion":true,表示允许扩容

2,扩容测试

1
2
3
4
5
6
[root@paas-m-k8s-master-1 ~]# kubectl get pvc -n test
NAME STATUS VOLUME CAPACITY ACCESS MODES STORAGECLASS AGE
redis-data-redis-service-master-0 Bound pvc-5e7e4eb1-5a11-4379-ab27-586c4e244720 8Gi RWO rook-ceph-block 169m
redis-data-redis-service-replicas-0 Bound pvc-f6db74f7-d59b-4e2f-8dd5-8efb74eabad5 8Gi RWO rook-ceph-block 169m
redis-data-redis-service-replicas-1 Bound pvc-93ebaeeb-1808-4b4e-9098-f85771b14a7d 8Gi RWO rook-ceph-block 167m
redis-data-redis-service-replicas-2 Bound pvc-59cbcd88-d434-49b7-b93a-6e99835a714d 8Gi RWO rook-ceph-block 166m

当前redis pvc的容量是8G

修改一下,改成10G

1
kubectl edit pvc redis-data-redis-service-master-0 -n test

image-20210805140433999

再次查询

1
2
3
4
5
6
# kubectl get pvc -n test
NAME STATUS VOLUME CAPACITY ACCESS MODES STORAGECLASS AGE
redis-data-redis-service-master-0 Bound pvc-5e7e4eb1-5a11-4379-ab27-586c4e244720 10Gi RWO rook-ceph-block 172m
redis-data-redis-service-replicas-0 Bound pvc-f6db74f7-d59b-4e2f-8dd5-8efb74eabad5 8Gi RWO rook-ceph-block 172m
redis-data-redis-service-replicas-1 Bound pvc-93ebaeeb-1808-4b4e-9098-f85771b14a7d 8Gi RWO rook-ceph-block 170m
redis-data-redis-service-replicas-2 Bound pvc-59cbcd88-d434-49b7-b93a-6e99835a714d 8Gi RWO rook-ceph-block 170m

已经变成10G

ROOK简介

Rook是一个自管理的分布式存储编排系统,可以为Kubernetes提供便利的存储解决方案。Rook本身并不提供存储,而是在kubernetes和存储系统之间提供适配层,简化存储系统的部署与维护工作。目前,rook支持的存储系统包括:Ceph、CockroachDB、Cassandra、EdgeFS、Minio、NFS,其中Ceph为Stable状态,其余均为Alpha。

Rook由Operator和Cluster两部分组成:

Operator:由一些CRD和一个All in one镜像构成,包含包含启动和监控存储系统的所有功能。
Cluster:负责创建CRD对象,指定相关参数,包括ceph镜像、元数据持久化位置、磁盘位置、dashboard等等…

下图是Rook的体系架构图,Operator启动之后,首先创建Agent和Discover容器,负责监视和管理各个节点上存储资源。然后创建Cluster,Cluster是创建Operator时定义的CRD。Operator根据Cluster的配置信息启动Ceph的相关容器。存储集群启动之后,使用kubernetes元语创建PVC为应用容器所用。

img

Ceph基础

Ceph同时支持3种存储访问接口,因此被广泛应用于开源私有云计算平台中,为云计算平台提供虚拟机存储和对象访问能力。

Ceph存储系统的设计目标是提供高性能、高可扩展性、 高可用的分布式存储服务。它采用 RADOS在动态变化和异构的存储设 备集群上,提供了一种稳定、可扩展、高性能的单一逻辑对象 存储接口和能够实现节点自适应和自管理的存储系统。数据的放置采取 CRUSH 算法,客户端根据算法确定对象的位置并直接访问存储节点,不需要访 问元数据服务器。CRUSH算法具有更好的扩展性和性能。

../_images/stack.png

术语

  • Monitor :保存ceph集群的核心状态数据,如集群的节点信息,鉴权信息等。 生产环境需要3个monitor。paxos算法。

  • Manager:管理ceph集群各节点

  • OSD :OSD全称Object Storage Daemons,职责就是存数据。一个Ceph集群有很多个OSD。一个OSD一般由一个存储设备支持,也可以由多个存储设备混合支持。

​ 一个最小的ceph集群也要有1个monitor,1个manager和2个osd

  • BlueStore:osd有两种管理数据的方式(BlueStore和FileStore)。从Luminous 12.2.z 版本开始,默认的也是建议的是BlueStore。

    BlueStore是为ceph osd专门设计的。关键特性包括:对存储设备的直接管理,元数据使用RocksDb存储,全量数据校验,压缩存储,可使用多层存储,高性能的copy-on-write。

  • MDS :MDS全称Ceph Metadata Server,是CephFS服务依赖的元数据服务。

  • CRUSH:Ceph的对象映射算法,确定一个对象被放置的位置。是ceph得以跨越大规模分布式集群的性能瓶颈的关键算法。

  • Object:Ceph最底层的存储单元是Object对象,每个Object包含元数据和原始数据。

  • Pools:Ceph使用pools存储数据,pools是一个逻辑概念。ceph有一个默认的pool,pools管理pg的数量,复制集的数量和pool的CRUSH规则。一个pool中的pg数量建议是100左右。默认是8

  • PG : 全称Placement Groups,PG是一个逻辑概念,我们linux系统中可以直接看到对象,但是无法直接看到PG。它在数据寻址时类似于数据库中的索引:Ceph将对象映射进一个PG中,所以当我们要寻找一个对象时,只需要先找到对象所属的PG,然后遍历这个PG就可以了,无需遍历所有对象。而且在数据迁移时,也是以PG作为基本单位进行迁移,ceph不会直接操作对象。

    一个OSD会被分成多个PG。引入PG这一层其实是为了更好的分配数据和定位数据。

  • RADOS :RADOS全称Reliable Autonomic Distributed Object Store,是Ceph集群的精华,用户实现数据分配、Failover等集群操作。

  • Libradio :Librados是Rados提供库,因为RADOS是协议很难直接访问,因此上层的RBD、RGW和CephFS都是通过librados访问的,目前提供PHP、Ruby、Java、Python、C和C++支持。

  • CRUSH :CRUSH是Ceph使用的数据分布算法,类似一致性哈希,让数据分配到预期的地方。

  • RBD(块存储):RBD全称RADOS block device,是Ceph对外提供的块设备服务。

  • RGW(对象存储):RGW全称RADOS gateway,是Ceph对外提供的对象存储服务,接口与S3和Swift兼容

  • CephFS(文件系统):CephFS全称Ceph File System,是Ceph对外提供的文件系统服务。

架构

对象存储设备(OSD)是 RADOS 集群的基本存储单元,它的主要功能是存储、备份、恢复数据,并与其他 OSD之间进行负载均衡和心跳检查等。一块硬盘 通常对应一个 OSD,由 OSD对硬盘存储进行管理,但有时一 个分区也可以成为一个 OSD,每个 OSD皆可提供完备和具有强一致性语义的本地对象存储服务。MDS是元数据服务器,向外提供 CephFS在服务时发出的处理元 数据的请求,将客户端对文件的请求转换为对对象的请求。RADOS中可以有多个 MDS分担元数据查询的工作。

img

RADOS取得高可扩展性的关键在于彻底抛弃了传统存 储系统中的中心元数据节点,另辟蹊径地以基于可扩展哈希 的受控副本分布算法——CRUSH 来代替。

通过 CRUSH 算法,客户端可以计算出所要访问的对象所在的 OSD。

全键盘操作浏览器神器Vimium C

![image-20240312102414416](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\image-20240312102414416.png)

参考连接

vimium 成神之路-键盘党的胜利 - 知乎 (zhihu.com)

安装

不说了,我用的是edge

快捷建

shift + ? : 展示快捷键列表

![image-20240312095104692](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\image-20240312095104692.png)

绝技放在最前面

只用敲三下,打开当前页面上任意一个链接
任意一个页面上,哪所有再多链接,你也不用鼠标,最多只需要敲三个键,你就可以迅速打开任意一个链接

你只需要按一下「f」,然后当前页面会显示所有可点击的元素,vimium 会生成一个对应的快捷键给这些链接。

![image-20240312095542723](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\image-20240312095542723.png)

这是如果我想打开更多,只要按sc键即可

太爽了吧~~相见恨晚

当前页面操作

在浏览器当前页面的所有操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
?       显示帮助对话框以获取所有可用键的列表
h 向左滚动一点
j 向下滚动一点
k 向上滚动一点
l 向右滚动一点
gg 滚动到页面顶部
G 滚动到页面底部
d 向下滚动半页
u 向上滚动半页
f 打开元素定位器,是在当前标签页打开
F 打开元素定位器,是在新标签页打开
r 刷新
gs 查看源码
i 进入插入模式 - 在您按Esc退出之前,将忽略所有命令
yy 将当前网址复制到剪贴板
yf 将链接URL复制到剪贴板
gf 循环到下一帧(尤其在选择网页内置视频的时候很管用)
gF 聚焦主/顶框架

新页面操作

1
2
3
4
5
o   从URL、书签、历史记录中搜索地址,回车打开
O 从URL、书签、历史记录中搜索地址,回车在新标签页中打开
b 仅从书签搜索地址,回车打开
B 仅从书签搜索地址,回车新标签页中打开
T 搜索当前浏览器的所有标签

使用搜索

1
2
3
/       进入查找模式 - 输入您的搜索查询并按Enter键进行搜索,或按Esc键取消
n 查找下一个匹配项
N 查找上一个匹配项

浏览历史记录

1
2
H       回到历史,也就是回到前一页
L 在历史上前进,也就是回到后一页

标签操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
J, gT   跳到左标签
K, gt 跳到右标签
g0 跳转到第一个标签(根据不同的数字跳到第几个标签)
g$ 跳转到最后一个标签
^ 回到上一个访问的标签
t 创建一个新的标签
yt 复制当前页面,在新标签页打开
x 关闭当前标签
X 恢复关闭的上一个标签
p 在当前标签页打开剪切板中的URL,如不是URL则默认引擎搜索
P 在新标签页打开剪切板中的URL,如不是URL则默认引擎搜索
T 在当前打开的标签中搜索
W 将当前标签移动到新窗口
<a-p> pin/unpin current tab

标记(锚点)

1
2
3
4
5
ma      设置本地标记 a
mA 设置全局标记 A
`a 跳转到本地标记 a
`A 跳转到q全局标记 a
`` 跳回到跳转之前的位置 (也就是说,在执行gg,G,n,N,或/ a 之前的位置)

其他高级浏览命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<<      当前标签页向左移动  
>> 当前标签页向右移动
<a-f> 在新标签中打开多个链接
gi 聚焦页面上的第一个(或第n个)文本输入框
gu 跳转到URL层次的父类(xxx.com/yyy/zzz 跳转到 xxx.com/yyy)
gU 转到URL层次结构的根目录(也就是 xxx.com)
ge 编辑当前URL
gE 编辑当前URL并在新选项卡中打开
zH 向左滚动
zL 向右滚动
v 进入预览模式;使用p / P粘贴,然后使用y来拷贝
V enter visual line mode
<a-m> 开/关静音
<a-p> 固定标签栏

预览模式(visual mode)

预览模式跟 vim 很类似

1
2
3
4
5
6
7
8
9
10
先用 / 定位,找到想要选择的字符
再按 v ,进入模式
然后使用
j:向下一行
k:向上一行
h:向左一个字符或标点(数字+h,可以移动多个字符)
l:向右一个字符或标点(数字+l,可以移动多个字符)
w:下一个标点符号后位置,包括看不见的换行符
e:下一个标点符号前位置
b:取消选中上一个字符,字符和标点算一个字符

打开新页面

  • 复制一段链接:经常在网页上看到一段链接文字,但却是不可点的。原来你需要先复制,然后新建标签页,再粘贴,敲回车后才能打开。现在呢?你只需要把要打开的链接复制一下,直接按「p」或「P」就可以打开了,小写的 p 是在当前标签页打开,大写的 P 则新建标签页打开。
  • 从收藏夹、历史记录打开:是不是之前看过什么网页,现在又想看了,还需要再打开历史记录找?或者想打开收藏夹里的某个链接?现在,直接按下「o」,输入对应的关键字后,会一起搜索你的历史记录和收藏夹,如果你输的是一个网址,回车还能直接打开。

![img](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\v2-69b5fcc3acb4061fe67d842d10b9c653_720w.webp)

b是只从收藏夹里找

显示当前所有的标签页,并快速切换

  • 有时候在查找信息、翻阅资料时,经常会一口气打开几十个网站,东西一多,Chrome 会自动将每个标签页的宽度缩小,几乎就看不到它们的标题了。用了 Vimium,你可以按一下大写的「T」,就可以显示当前打开的所有标签页,并支持快捷搜索和跳转。

![img](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\v2-c2ed0a6b6059ba7a1e58e0fa58ce4262_720w.webp)

自定义搜索引擎

配置自定义搜索引擎,通过快捷键 o/O 调起搜索框,输入搜索引擎简写,再输入空格,再输入搜索词回车,则会调用对应的搜索引擎进行搜索

1
2
搜索引擎简写 搜索引擎地址 搜索引擎名字
例如:BZ https://search.bilibili.com/all?keyword=%s b站
  • 唤醒搜索引擎

![img](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\v2-845b4b4c27f8b5c18a8c94f833d0345b_720w.webp)

  • 如何进行搜索

![img](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\v2-e64308f73fd56f00d6997db590ccd78d_720w.webp)

  • 自定义搜索引擎配置

![img](D:\github\docs\各种工具\全键盘操作浏览器神器Vimium C.assets\v2-c55f9a0537f8ef13c2521ff678899c17_720w.webp)

  • 我常用的搜索引擎配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
w: https://www.wikipedia.org/w/index.php?title=Special:Search&search=%s Wikipedia

# More examples.
#
# (Vimium supports search completion Wikipedia, as
# above, and for these.)
#
g: https://www.google.com/search?q=%s Google
G: https://www.google.com/search?q=%s Google
zh: https://www.zhihu.com/search?type=content&q=%s 知乎
ZH: https://www.zhihu.com/search?type=content&q=%s 知乎
tb https://s.taobao.com/search?q=%s 淘宝
TB https://s.taobao.com/search?q=%s 淘宝
jd https://search.jd.com/Search?keyword=%s 京东
JD https://search.jd.com/Search?keyword=%s 京东
bd: https://www.baidu.com/s?wd=%s 百度
BD: https://www.baidu.com/s?wd=%s 百度
bz https://search.bilibili.com/all?keyword=%s b站
BZ https://search.bilibili.com/all?keyword=%s b站
az: https://www.amazon.com/s/?field-keywords=%s Amazon
AZ: https://www.amazon.com/s/?field-keywords=%s Amazon
aqy https://so.iqiyi.com/so/q_%s 爱奇艺
AQY https://so.iqiyi.com/so/q_%s 爱奇艺
tm https://list.tmall.com/search_product.htm?q=%s 天猫
TM https://list.tmall.com/search_product.htm?q=%s 天猫
yk https://so.youku.com/search_video/q_%s 优酷
YK https://so.youku.com/search_video/q_%s 优酷
db https://www.douban.com/search?q=%s 豆瓣
DB https://www.douban.com/search?q=%s 豆瓣
y: https://www.youtube.com/results?search_query=%s Youtube
Y: https://www.youtube.com/results?search_query=%s Youtube
# l: https://www.google.com/search?q=%s&btnI I'm feeling lucky...
# gm: https://www.google.com/maps?q=%s Google maps
# b: https://www.bing.com/search?q=%s Bing
# d: https://duckduckgo.com/?q=%s DuckDuckGo
# qw: https://www.qwant.com/?q=%s Qwant

复制

复制一段文字:yv 进入自由选择文本段落模式

复制网址 yf 进入选择模式

复制当前tab页的网址 yy

复制图片 yi 进入选择模式

自主配置

Vimium 的功能当然不止于此,我们可以通过自行配置快捷键来做更多的事情。右键它的图标,选择进入 Option,找到 Custom key mappings,在这里建立或者取消快捷键映射。配置「快捷键-动作」的格式如下 ,如果想设置的快捷键被预设的占用,可以考虑先解除映射(unmap),再建立映射(map):

1
2
3
4
5
6
7
8
9
10
11
12
#格式
unmap [预设快捷键] [默认动作]
map [快捷键] [新动作]


#例子
#点击 [l] 前往右边的标签页
map l nextTab


#点击 [Shift + i] 进入新隐身页
map I createTab incognito

根据官方文档的 Read MeTips-and-Tricks,我做了一些改善阅读体验的个性化配置:

① 快捷键访问指定网站

对于最常用的、且首字母不是常用预设快捷键的网站,推荐使用语义性的略称(如 ins );而其它较常用的网站,使用一个非预设字母(比如 z )加上网站的首字母(如 zzzy )。

1
2
3
4
5
6
7
8
#格式
map [快捷键] createTab [网址]
#以打开 Instagram 为例
unmap i
map ins createTab https://www.instagram.com/
#以打开 YouTube 和本站为例
map zy createTab https://www.youtube.com/
map zs createTab https://beta.sspai.com/

② 快捷键打开站内搜索

建立「关键词-搜索栏」映射:

  1. 打开你想映射的网站
  2. 找到该站搜索框
  3. 搜索任意内容回车后,复制网址
  4. 进入 Custom Search Engine 编辑框修改网址,以匹配以下命令
1
2
3
4
5
#格式
# 这里的 %s 就是需要你输入的搜索内容
[关键词]: [https://xxx.com/XXXXX=%s [网站名]]
#配置 [zhihu] 为知乎搜索关键词
zhihu: https://www.zhihu.com/search?type=content&q=%s 知乎

建立「快捷键-关键词」映射

  • 进入 Custom Mapping Key 编辑框
1
2
3
4
#格式
map [快捷键] Vomnibar.activateInNewTab keyword=[关键词]
#点击 [sz] (即 Search Zhihu 的略写)进入知乎站内搜索
map zh Vomnibar.activateInNewTab keyword=zhihu

③ 更合理的 f 键导航

如前面所介绍的,点按 f 键可以进入链接导航模式。在 Advanced Options,将 Characters used for link hints 中的 sdfercvjkluim替换成 fjdkghsl,这样的配置能充分利用最灵活的食指和中指来点击链接。

④ 更方便地在标签页之间移动

下面的配置可以让你使用键盘的 hl 前往相邻的标签页。你可能会担心文本框内固有快捷键会不会被占用,实际上不会1 。

1
2
3
4
5
6
# 代码
map <left> previousTab
map <right> nextTab

map h previousTab
map l nextTab

注意事项

win键

win + 上下 最大/最小化窗口

win + 左右 窗口往左移或者往右移

shift + f10 鼠标右键

ctrl + n 新建窗口,不会选中。这个操作的目的是在打开的窗口中如果选择了一个文件,如果要使用邮件新建文件夹功能,需要先取消选中状态,一种操作是 alt键显示出快捷键,然后H 再SN 。比较麻烦。如果用alt n直接打开新的窗口,此时不是选中任何文件的状态,就可以直接shift f10新建了

image-20240312160429635

alt + f4 关闭窗口