wxm

2026 使用 Astro 重构主页

wxmvv@outlook.com (wxm) — Tue, 08 Sep 2026 10:26:00 GMT

没想到吧，我又来了,这回是Astro~

项目在这里 minimal-astro-blog

最近流行去 nextjs 风潮，有很多项目开始使用 TanStack 来替代 nextjs，让我想起了这个古老的博客项目，本来想升级一下项目版本，结果很多不兼容，很多包的问题，改起来很麻烦，索性再次重构。

Astro 用起来很顺手而且简洁方便，并且可以无缝衔接vue或react，代码写起来很舒服，再加上现在的ai检查，搞的飞起！

ai已经成为开发主体了

wxmvv@outlook.com (wxm) — Wed, 15 Jul 2026 00:00:00 GMT

ai的发展太快了，回顾去年2025年末尾，我还在使用者 ”对话框复制+粘贴“ 的模式去使用ai编程。再看今年，这半年多工作我已经基本没有手动去写过逻辑或者改bug了，全部都是claude code或pi在写。

工作流的进化

最早：回顾这半年的工作，前几个月我还是在复制粘贴结合人工手写代码，保证每一行代码我都可以理解和负责。

转变：随着大模型的不断变强，以及skill的流行，我去安装尝试了很多skill以及自己也针对自己负责的项目写了很多针对的skill。同时在工作中慢慢切换agent工具去写，不过还是会审核ai写的代码，并且也总能找到一些问题。也同时会去更准确的描述需求，让ai去修改代码。

目前：到最近呢，我开始精简skill，只保留我确定需要并且有用的skill，并且在提示词方面会写的更加详细精确，ai给出的代码基本一次就能过。而且随着各种开发工具cli的普及，甚至可以让agent按流程自动化处理很多事情如api、产品对接等等。

我对目前的工作与ai开发的一些思考

首先就是对ai大模型未来发展的预期，就我使用来说其实目前的大模型已经可以完美完成很复杂的代码任务了，当然最领先的claude或gpt在工作中用起来无疑会更省时省力，但是其实就拿deepseek v4 flash也足够完成工作中的任务了，我觉得他们的区别主要在于对意图的领会，也就说对于稍差一点的dsv4只要你提供的提示词prompt将你的需求描述准确完全可以达到claude和gpt的水平。而且我觉得以目前的ai来说其实已经到了一个瓶颈，未来方向未知，但是肯定不会在短时间发生质变。

第二个要说的是agent，也就是对代码开发的工程化的发展。这个我倒是觉得还有可发展的空间，尤其是对于一些办公环境的适配，对于一些特定办公软件等等。

最后是一个老生常谈的问题，我也会经常问我自己，ai目前能不能替代我呢？其实就目前来看，如果只是前端工作慢慢确实会被替代，对于ai写的代码js部分在我使用了skill进行规范后简直无可挑剔，只有一些样式需要手动调整，但是随着工作的进行，我也会慢慢发现，工作中写代码的时间变少了，相对的和产品经理沟通产品设计的时间反而变多了一些，并且随着ai开发的效率提高，我也能更快的去验证方案的可行性。

随便写写

随着年纪增大，阅历增加，其实会发现真实生活中很多时候代码写的好与不好其实都没啥关系，更多的在于“沟通”，不管是和领导汇报，或者忽悠买家之类的，这些所谓“人情世故”，这些ai也是真的替代不了，起码目前是这样。

不过不管怎样生活还要继续，ai的提效对我来说，让我有了很多时间“发呆”，我觉得也是真的挺开心的。

从 vscode 迁移到 zed

wxmvv@outlook.com (wxm) — Fri, 08 May 2026 00:00:00 GMT

经过大概2个月的磨合，最终从vscode迁移到zed，所有我在vscode中需要的功能zed已经可以全部提供，所有我在vscode讨厌的功能，zed也都可以作对应的设置，并且在速度方面zed可以说全方面碾压vscode。

vscode让我难受的地方

无法去掉的 AI copilot

这个真的是，自从微软接管 github copilot 后，就不断在vscode中添加AI功能，当然这是没问题的，不过当我不想使用的时候却总是会在各种未知看到它，真的很烦。

速度

没想到这个居然会成为问题，因为在之前这个可是vscode的强项，但是随着越来越臃肿的app，确实出现了很多问题

Vim模式

vscode的Vim模式总是出现各种问题，使用很难受。按键冲突不说，经常用着用着就挂了，无语。

那zed呢？

zed大概是4年前知道，那个时候感觉只有快，其他的都没法和vscode比，尤其是稳定性，并且各种语言适配都有问题，连输入预测都没有。但是如今2026年zed已经发版1.0了，再次相遇已经是一个成熟的代码编辑器了。

舒适的Vim模式

zed上使用vim模式真的丝滑，甚至可以使用helix模式，并且在vim模式原生就适配了，不会出任何问题的稳定，以及各种符合直觉的按键设置，我只能用“舒适”来形容。

并且可以通过keymap来自定义各种vim按键组合，很适合折腾。

直观的lsp信息

你可以在底部看到lsp的全部信息，包括占用运行情况等，并且设置编辑很方便。

干净的界面

舒服干净的界面，烦人的ai可以轻松在设置中关闭，令人心情愉悦。

后话

在如今的ai时代，可能代码编辑器已经没那么重要了，但是zed依然值得。不过话又说回来，zed的agent做的真的挺烂的哈哈。

最近的机场波动以及surge相关的瓜

wxmvv@outlook.com (wxm) — Fri, 08 May 2026 00:00:00 GMT

关于我对 REALITY、uTLS、鹦鹉已死，以及 Sukka 那些人的一些看法从双重标准到“大新闻”：浅谈代理协议设计与实现上的一些本质问题与优先级区别 XTLS、ShadowTLS、REALITY，客户端真的需要大改 TLS 库吗？ECH 与 EIP

pi才是我心目中code-cli最完美的样子

wxmvv@outlook.com (wxm) — Fri, 10 Apr 2026 00:00:00 GMT

codex,claude code,opencode,大家都很厉害，但是自从我认识了pi，再碰其他的CLI都感觉索然无味，因为只有pi才能给我那种她的一切属于我的感觉，其他的大家都很优秀，只是你们再优秀也不属于我，我就像你们生命中的过客一样。

2026年的codex强的可怕

wxmvv@outlook.com (wxm) — Fri, 20 Mar 2026 00:00:00 GMT

codex真香，订阅了Plus会员一百多，用它把我的旧项目修了一个遍…就一个感受：额度太多了！用不完！根本用不完！

gpt5.4 ! gpt5.4 ! gpt5.4 ! 香！

0405 补充

已经用了快一个月了，codex 给我的最大感受就是修 bug 真的很准！尤其是在公司有大型屎山项目的情况下，改 bug 甚至比 claude 还要准，并且用的 token 还少，这谁受的了。

不过也不是没有缺点，比如 codex 的审美真的很拉，相比之下 Claude 设计的 UI 就要好看很多。还有就是如果启动一个新项目，尤其在架构设计方面，codex 给出的方案会非常抽象工程化，而且起名真的苦手，很多名字结构感觉都是直接从书上扒下来的，相比之下 Claude 给出的架构方案会更贴近实际情况，并且起名明显也是参考了不少实际项目。

所以目前我也在更多使用 Claude 来制定开发计划，设计 UI，而让 codex 去执行，或者修 bug。

用html和css实现一下液态玻璃(liquid glass)效果

wxmvv@outlook.com (wxm) — Fri, 06 Feb 2026 00:00:00 GMT

参考1 juejin 参考2 kube.io

参考了大神的实现，自己又调整了参数，并且适配了黑暗模式，仅供参考。

效果就在主页的菜单Hover就可以看到，在Safari中svg反射效果不生效，用Chrome就能正常显示。

1
<div className="liquid_glass-wrapper h-full w-full">
2
  <svg style={{ display: "none" }}>
3
    <defs>
4
      <filter
5
        id="liquid_glass_filter"
6
        x="0%"
7
        y="0%"
8
        width="100%"
9
        height="100%"
10
        filterUnits="objectBoundingBox"
11
      >
12
        <feDisplacementMap scale="200" />
13
      </filter>
14
    </defs>
15
  </svg>
16
  <div className="liquid_glass-outer"></div>
17
  <div className="liquid_glass-cover"></div>
18
  <div className="liquid_glass-sharp"></div>
19
  <div className="liquid_glass-reflect"></div>
20
</div>

适配了黑暗模式的css

1
.liquid_glass-wrapper {
2
  --liquid_glass-border-radius: 1rem;
3
  position: relative;
4
  display: flex;
5
  overflow: hidden;
6
  border: 1px solid #00000020;
7
  background: linear-gradient(180deg, #ffffff10, #fafafa00);
8
  box-shadow:
9
    inset 0 2px 4px 0 #fff,
10
    inset 0 -4px 4px 0 hsla(0, 0%, 100%, 0.1),
11
    inset 0 -4px 16px 0 #fff,
12
    inset 0 4px 10px 0 hsla(240, 3%, 45%, 0.07),
13
    0 4px 14px -10px rgba(53, 53, 79, 0.4),
14
    0 11px 28px -10px rgba(53, 53, 79, 0.1);
15
  border-radius: var(--liquid_glass-border-radius);
16
}
17

18
.liquid_glass-border-radius {
19
  border-radius: var(--liquid_glass-border-radius);
20
}
21

22
.liquid_glass-outer {
23
  backdrop-filter: url(#liquid_glass_filter);
24
  position: absolute;
25
  inset: 0;
26
  z-index: 0;
27
  border-radius: var(--liquid_glass-border-radius);
28
  mask-image:
29
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" rx="0" ry="0" fill="white"/></svg>'),
30
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="5" y="5" width="calc(100% - 10px)" height="calc(100% - 10px)" rx="21" ry="21" fill="white"/></svg>');
31
  mask-composite: exclude;
32
}
33

34
.liquid_glass-cover {
35
  backdrop-filter: blur(2px);
36
  position: absolute;
37
  inset: 0;
38
  z-index: 2;
39
  border-radius: var(--liquid_glass-border-radius);
40
  background: rgba(0, 0, 0, 0.02);
41
}
42

43
.liquid_glass-sharp {
44
  position: absolute;
45
  inset: 0;
46
  z-index: 3;
47
  box-shadow:
48
    inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5),
49
    inset -1px -1px 0px 0px rgba(255, 255, 255, 0.6);
50
  border-radius: var(--liquid_glass-border-radius);
51
}
52

53
.liquid_glass-reflect {
54
  position: absolute;
55
  inset: 1px;
56
  z-index: 2;
57
  border-radius: var(--liquid_glass-border-radius);
58
}
59

60
.dark {
61
  /* https://juejin.cn/post/7514618352829448244 */
62
  .liquid_glass-wrapper {
63
    --liquid_glass-border-radius: 1rem;
64
    position: relative;
65
    display: flex;
66
    overflow: hidden;
67

68
    border: 1px solid #ffffff20;
69
    background: linear-gradient(180deg, #ffffff10, #fafafa00);
70
    box-shadow:
71
      inset 0 2px 4px 0 #00000040,
72
      inset 0 -4px 4px 0 hsla(0, 0%, 0%, 0.1),
73
      inset 0 -4px 16px 0 #00000060,
74
      inset 0 4px 10px 0 hsla(0, 0%, 13%, 0.07),
75
      0 4px 14px -10px rgba(112, 112, 167, 0.4),
76
      0 11px 28px -10px rgba(53, 53, 79, 0.1);
77
    border-radius: var(--liquid_glass-border-radius);
78
  }
79

80
  .liquid_glass-border-radius {
81
    border-radius: var(--liquid_glass-border-radius);
82
  }
83

84
  .liquid_glass-outer {
85
    backdrop-filter: url(#liquid_glass_filter);
86
    position: absolute;
87
    inset: 0;
88
    z-index: 0;
89
    border-radius: var(--liquid_glass-border-radius);
90

91
    mask-image:
92
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" rx="0" ry="0" fill="white"/></svg>'),
93
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="5" y="5" width="calc(100% - 10px)" height="calc(100% - 10px)" rx="21" ry="21" fill="white"/></svg>');
94
    mask-composite: exclude;
95
  }
96

97
  .liquid_glass-cover {
98
    backdrop-filter: blur(2px);
99
    position: absolute;
100
    inset: 0;
101
    z-index: 2;
102
    border-radius: var(--liquid_glass-border-radius);
103
    background: rgba(0, 0, 0, 0.02);
104
  }
105

106
  .liquid_glass-sharp {
107
    position: absolute;
108
    inset: 0;
109
    z-index: 3;
110
    box-shadow:
111
      inset 1px 1px 0px 0px rgba(255, 255, 255, 0.2),
112
      inset -1px -1px 0px 0px rgba(255, 255, 255, 0.3);
113
    border-radius: var(--liquid_glass-border-radius);
114
  }
115

116
  .liquid_glass-reflect {
117
    position: absolute;
118
    inset: 1px;
119
    z-index: 2;
120
    border-radius: var(--liquid_glass-border-radius);
121
  }
122
}

20251013 work music sharing

wxmvv@outlook.com (wxm) — Mon, 13 Oct 2025 00:00:00 GMT

youtube take your time

youtube utopic_dreamer

完全解决nvm启动速度慢的问题2

wxmvv@outlook.com (wxm) — Thu, 03 Jul 2025 00:00:00 GMT

时隔 3 年，我终于找到了彻底解决 nvm 启动速度慢的方法，并且这个方法对 macOS 和 Windows 系统都有效！

那就是：删掉 nvm 使用 fnm！

几乎一样的使用方式，完全没有迁移成本！速度贼快！

fnm

Aria2Helper新版本1.4来啦!!

wxmvv@outlook.com (wxm) — Sat, 28 Jun 2025 00:00:00 GMT

距离上一次更新已经很久了，这次更新带来了新的 setting 界面，使用 tailwind+daisyUI 重新构建，整体设计参考苹果系统的设置，以及ghostty-config项目，并且添加了更多的色彩主题。

项目地址: Aria2Helper for Safari

MyTuner也上线啦，简约设计的调音器，支持多种乐器~

wxmvv@outlook.com (wxm) — Tue, 27 May 2025 00:00:00 GMT

链接

项目地址: My Tuner

商店链接：

预览

Dark	Light

介绍

大概花了半个月时间，断断续续把这个 My Tuner 完成了。

一开始在 AI 的建议下从 0 开始码了一个版本，自己实现了一个 FFT 音高识别，无奈的是准确度有点低，最后只能先放弃，最后参考了 AudioKit 这个库实现的音高识别，准确度大大提高。

其他的功能包括设置的实现都相对简单，也算是从编程的角度对音调又有了一些更全面的尝试。

欢迎大家下载下来尝试～

Aria2Helper更新1.1 !

wxmvv@outlook.com (wxm) — Sat, 15 Mar 2025 00:00:00 GMT

最近在使用过程中遇到一些小 bug，于是修复了一下更新了 1.1 版本，顺便添加了新功能：

添加了监听白名单于黑名单
popup 页面添加了监听快捷按钮
添加了多语言支持
更新了 icon
更新了 UI 界面
修复了一些 content 脚本 bug

项目地址: Aria2Helper for Safari

App 文件: Aria2Helper.zip

VPS下载测速文件100M/1GB/10GB

wxmvv@outlook.com (wxm) — Sat, 15 Mar 2025 00:00:00 GMT

转载自 lot.pm

推荐：全球通用（Cloudflare Anycast）

速度极快，推荐国外使用。

100MB

1
https://speed.cloudflare.com/__down?during=download&bytes=104857600

1GB

1
https://speed.cloudflare.com/__down?during=download&bytes=1073741824

10GB

1
https://speed.cloudflare.com/__down?during=download&bytes=10737418240

中国大陆推荐

200MB（QQ）

腾讯 CDN 加速。

1
https://dldir1.qq.com/qqfile/qq/PCQQ9.7.17/QQ9.7.17.29225.exe

300MB（阿里 CDN)

1
https://wirelesscdn-download.xuexi.cn/publish/xuexi_android/latest/xuexi_android_10002068.apk

1000MB (教育网)

1
http://speedtest.zju.edu.cn/1000M

1GB/10GB（电信）

1
http://vipspeedtest8.wuhan.net.cn:8080/download?size=1073741824
2

3
http://vipspeedtest8.wuhan.net.cn:8080/download?size=10737418240

2GB（推荐）

1
自适应 https://dlied4.myapp.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk
2
联通 https://ml-dlied4.bytes.tcdnos.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk
3
移动 https://875e1151af8aa9e3b793f51f6049996d.dlied1.cdntips.net/dlied4.myapp.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk
4
电信 https://dlied4.csy.tcdnos.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk

3GB（Apple）

国内似乎用的是金山 CDN，国际是 Akamai 和苹果自家 CDN。

1
http://updates-http.cdn-apple.com/2019WinterFCS/fullrestores/041-39257/32129B6C-292C-11E9-9E72-4511412B0A59/iPhone_4.7_12.1.4_16D57_Restore.ipsw

亚洲

中国香港

100MB （Datapacket/CDN77）

1
http://hkg.download.datapacket.com/100mb.bin

1000MB（Datapacket/CDN77）

1
http://hkg.download.datapacket.com/1000mb.bin

10000MB（Datapacket/CDN77）

1
http://hkg.download.datapacket.com/10000mb.bin

新加坡

100/1000/10000MB （Datapacket/CDN77）

1
http://sgp.download.datapacket.com/100mb.bin
2
http://sgp.download.datapacket.com/1000mb.bin
3
http://sgp.download.datapacket.com/10000mb.bin

100MB（OVH）

1
https://sgp.proof.ovh.net/files/100Mb.dat

100MB（Vultr）

1
https://sgp-ping.vultr.com/vultr.com.100MB.bin

1GB（OVH）

1
https://sgp.proof.ovh.net/files/1Gb.dat

1GB（Vultr）

1
https://sgp-ping.vultr.com/vultr.com.1000MB.bin

10GB（OVH）

1
https://sgp.proof.ovh.net/files/10Gb.dat

日本东京

100/1000/10000MB （Datapacket/CDN77）

1
http://tyo.download.datapacket.com/100mb.bin
2
http://tyo.download.datapacket.com/1000mb.bin
3
http://tyo.download.datapacket.com/10000mb.bin

100MB/1GB（Vultr）

1
https://hnd-jp-ping.vultr.com/vultr.com.100MB.bin
2
https://hnd-jp-ping.vultr.com/vultr.com.1000MB.bin

欧洲

德国

推荐使用 Hetzner 的测速文件。
100MB（Nuremberg-Hetzner）

1
https://nbg1-speed.hetzner.com/100MB.bin

100MB（Frankfurt-Vultr）

1
https://fra-de-ping.vultr.com/vultr.com.100MB.bin

1GB（Nuremberg-Hetzner）

1
https://nbg1-speed.hetzner.com/1GB.bin

1GB（Frankfurt-Vultr）

1
https://fra-de-ping.vultr.com/vultr.com.1000MB.bin

10GB（Nuremberg-Hetzner）

1
https://nbg1-speed.hetzner.com/10GB.bin

10GB（Frankfurt-Hivelocity）

1
https://speedtest.fra1.hivelocity.net/10GiB.file

法国

100/1000/10000MB （Datapacket/CDN77）

1
http://par.download.datapacket.com/100mb.bin
2
http://par.download.datapacket.com/1000mb.bin
3
http://par.download.datapacket.com/10000mb.bin

100MB（OVH）

1
https://gra.proof.ovh.net/files/100Mb.dat

1GB（OVH）

1
https://gra.proof.ovh.net/files/1Gb.dat

10GB（OVH）

1
https://gra.proof.ovh.net/files/10Gb.dat

北美

美西

100/1000/10000MB （Datapacket/CDN77 洛杉矶）

1
http://lax.download.datapacket.com/100mb.bin
2
http://lax.download.datapacket.com/1000mb.bin
3
http://lax.download.datapacket.com/10000mb.bin

100MB（Oregon-OVH）

1
https://hil.proof.ovh.us/files/100Mb.dat

100MB（LA-Vultr）

1
https://lax-ca-us-ping.vultr.com/vultr.com.100MB.bin

1GB（Oregon-OVH）

1
https://hil.proof.ovh.us/files/1Gb.dat

1GB（LA-Vultr）

1
https://lax-ca-us-ping.vultr.com/vultr.com.1000MB.bin

10GB（Oregon-OVH）

1
https://hil.proof.ovh.us/files/10Gb.dat

10GB （Oregon-Hetzner）

1
https://hil-speed.hetzner.com/10GB.bin

美东

100/1000/10000MB （Datapacket/CDN77 阿什本）

1
http://ash.download.datapacket.com/100mb.bin
2
http://ash.download.datapacket.com/1000mb.bin
3
http://ash.download.datapacket.com/10000mb.bin

100MB（Virginia-OVH）

1
https://vin.proof.ovh.us/files/100Mb.dat

100MB（New Jersey-Vultr）

1
https://nj-us-ping.vultr.com/vultr.com.100MB.bin

1GB（Virginia-OVH）

1
https://vin.proof.ovh.us/files/1Gb.dat

1GB（New Jersey-Vultr）

1
https://nj-us-ping.vultr.com/vultr.com.1000MB.bin

10GB（Virginia-OVH）

1
https://vin.proof.ovh.us/files/10Gb.dat

10GB（Virginia-Hetzner）

1
https://ash-speed.hetzner.com/10GB.bin

Safari插件Aria2Helper开发踩坑集

wxmvv@outlook.com (wxm) — Fri, 31 Jan 2025 00:00:00 GMT

花了大概 1 周多时间，断断续续终于把这个 Aria2Helper 插件完成了。如果使用有什么问题也可以邮寄联系我，或者在 github 上提 issue。

项目地址: Aria2Helper for Safari

App 文件: Aria2Helper for Safari.zip

商店链接

也欢迎去 App Store 下载，支持一下我的开发。

为何而做

Safari 本身的下载器无法断点续传，下载大文件到一半断网后重新下载需要重新下载，实在是让人崩溃。如果想使用其他下载方式则需要复制粘贴下载链接，如果需要下载的链接一多真的是鼠标点爆炸。在 chrome 有很多好用的插件可以通过设置 rpc 来想配合 Motrix 下载文件，而且都包含下载拦截功能，在我搜索了 app store 之后也没有看到相关功能的插件。于是决定自己开发一个。

主要功能

通过多种方式在 Safari 中快速添加下载链接到 Aria2
实时显示 Aria2 的任务下载进度
支持 Aria2 的多种功能，如暂停、删除、强制开始、强制暂停、强制移除等
支持对点击下载链接拦截，使用 aria2 代替 Safari 下载

遇到的一些问题与解决

safari 不支持 notification

在mdn notification 文档最下面可以看到 safari 并不支持，但是我确实有在其他 safari 中看到调用 notifications 的案例。其实他们是使用的 app 端口的 notifications API，需要将信息从 web 项目发送到 app 端，然后通过 app 展示。

safari 不支持 browser.download API

本来想用 browser.download 这个来实现获取默认下载然后发送 aria2 的，但是safari 不支持 browser.download API，于是考虑其他方案，经过尝试，选择了拦截用户点击请求的方式，拦截后获取点击链接中的文件链接，然后发送到 aria2。

web 插件开发中 popup 页面的背景问题

我在插件中的 popup 页面，的很多地方使用了透明背景，如果是第一次运行，它会像 chrome 插件一样显示白色或黑色的背景(根据电脑是否黑暗模式)，但是当你的 safari 运行一段时间后，它的背景色会消失，变成苹果的磨砂玻璃背景，虽然很好看，但是完全随机发生,目前没有好的解决办法。

动态获取并设置 body 宽度造成的问题

因为我是希望开发一个外观类似 safari 本身下载器外形的插件，所以想动态设置 body 宽度。具体实现是先将 body 的宽设置为 auto，在打开 popup 页面是根据下载项中的最宽一项设置 body 宽度，但这样会在打开的一瞬间 body 还没有设置 width，导致页面大小闪烁，无法接受，最后还是选择了使用固定宽度。

app 开发模式中的调试问题

其中有一个 os_log() 函数用于调试，但是输出不知道在哪，后来才发现是系统自带 console.app，在这里面搜索就能看到，记得打开流式传输。

还有，如果使用 %@ 来作为占位符，则在控制台中会显示 “pravite” 标签 ,如果像明文显示信息，可以使用 %{public}s 来作为占位符。

xcode 打包之后，再 run 有概率会让 safari 的 app 出现错误

解决办法就是 product -> clean build folder,如果还是有问题就打开 build 文件夹 Show Build Folder in Finder，然后将里面的文件夹都删了，在重启 safari 就好了。

关于在 css 中使用系统色 background: -apple-system-control-accent;

stackoverflow 参考

最后

比预计多花了不少时间，但是总算是完成了，后续再慢慢优化吧。

也想总结下 safari 插件开发的一些经验，方便以后开发。

终于通关八方旅人2

wxmvv@outlook.com (wxm) — Tue, 03 Dec 2024 00:00:00 GMT

断断续续终于通关了八方旅人 2，这么久才通过一方面是最近时间少，另一方面是我的心里总是会有一些复杂的情绪，让我不想通关，希望故事能一直持续下去。

音乐部分很棒，在编曲方面可以说全面性的丰富了，不过再回去听 1 代的音乐，虽然没有 2 代乐器更多，编织更丰富，但是依然有很多亮点。仅仅听着音乐久可以让我在城镇树林间穿梭时沉浸其中。

剧情部分相比 1 代丰富了不少，每个人多了一个剧情场景，而且还多了双人剧情，用一条暗线将每个角色联系在一起。不过也有一些莫名其妙的狗血剧情，比如我使用的盗贼小姐开局，前三章玩完觉得有点意思，一个很正的复仇舞台剧，从杀“蛇父”那里就开始不对劲了，本来觉得“复仇爽”的故事，一下变成了狗血伦理剧？当时看完剧情的我满头问号。虽然有狗血的，但是也有我觉得很亮眼的剧情设计，比如商人部分，尤其是最后富豪开着船来支援的时候，还有最后的大战火车，这的让我有一种中二的热血感，很赞。其他的，如猎人，神官，舞娘的剧情也都很有意思，让我印象深刻。

不过，无论是怎样精彩的旅途，也难免有结束的时候，希望下一作尽快来吧～

Parallels Desktop 20.1.1 55740

wxmvv@outlook.com (wxm) — Thu, 21 Nov 2024 00:00:00 GMT

不得不说 PD 真的很流氓，之前买过两年，大版本一更新，旧的版本会出现各种问题，而且所谓的更新才能用新系统大部分时候也只是加了个版本号检测，纯纯逼你花钱买新版。

pd 本体

Parallels Desktop 20.1.1 55740

crack 补丁

注意：需要先关闭 SIP

Parallels Desktop Activation Tool SIPOFF 6.3.0 MacKed

blog 新的动画效果

wxmvv@outlook.com (wxm) — Sat, 16 Nov 2024 00:00:00 GMT

页面出现的线性的动画，之前在刚开始重构 blog 时就想实现，不过因为当时比较忙，就暂时搁置了，最近有空，就还是使用 motion 库来实现一下。

需要实现的效果

页面元素依次出现，首先是过渡动画包括 opacity blur X 这三部分的变化，并且需要有一个 delay 的效果，让元素一个一个的出现。

实现思路

opacity blur X 这种变化，使用 motion 实现十分简单，甚至用原生 js 也很简单，问题在于 delay 的效果。页面有很多元素甚至包括需要渲染的列表，如果一个一个添加恐怕是十分浪费时间。

花了一点时间仔细查了 motion 的文档，发现一个好东西 staggerChildren (文档) ,使用这个配合 variants 属性，可以轻松实现元素和子元素的依次出现。

代码

先新建一个 motionVariants.tsx 组件重复调用。在其中定义 containerVariants 和 itemVariants。

1
export const containerVariants = {
2
  hidden: {
3
    opacity: 0,
4
    filter: "blur(8px)",
5
    transform: "translateY(16px) translateZ(0)"
6
  },
7
  visible: {
8
    opacity: 1,
9
    filter: "blur(0)",
10
    transform: "none",
11
    transition: {
12
      transform: { duration: 0.4, timeConstant: 750 },
13
      opacity: { duration: 0.7, timeConstant: 350 },
14
      filter: { duration: 0.8, timeConstant: 350 },
15
      type: "tween",
16
      duration: 0.6,
17
      ease: [0.25, 0.3, 0.5, 1],
18
      delayChildren: 0,
19
      //   staggerChildren: 0.12, // 每个子项之间的延迟时间
20
      staggerChildren: 0.08 // 每个子项之间的延迟时间
21
    }
22
  }
23
};
24
export const itemVariants = {
25
  hidden: {
26
    opacity: 0,
27
    filter: "blur(8px)",
28
    transform: "translateY(16px) translateZ(0)",
29
    transition: {}
30
  },
31
  visible: {
32
    opacity: 1,
33
    filter: "blur(0)",
34
    transform: "none",
35
    transition: {
36
      transform: { duration: 0.2, timeConstant: 350 },
37
      opacity: { duration: 0.4, timeConstant: 350 },
38
      filter: { duration: 0.4, timeConstant: 350 },
39
      duration: 0.4,
40
      ease: [0.25, 0.3, 0.5, 1]
41
    }
42
  }
43
};

在你的组件中添加效果

1
import { motion } from 'framer-motion'
2
import { containerVariants, itemVariants } from '@/components/MyMotion'
3
  return (
4
    <>
5
      <motion.div variants={containerVariants} initial="hidden" animate="visible">
6
          <motion.div variants={itemVariants}>
7
            <h2>title</h2>
8
          </motion.div>
9
          <motion.div variants={itemVariants}>
10
            <p>body</p>
11
          </motion.div>
12
          <motion.div variants={itemVariants}>
13
            <p>link</p>
14
          </motion.div>
15
      </div>
16
    </>
17
  )
18
}

最终效果

AppleScript 实现鼠标连点

wxmvv@outlook.com (wxm) — Sun, 13 Oct 2024 00:00:00 GMT

因为最近在玩一个老游戏，开了作弊但是还需要手动点击才能升级，于是使用 applescript 来实现一下自动点击。

事前准备

鼠标点击使用 cliclick 包,可以使用 brew 安装 brew install cliclick 键盘则直接使用 applescript 即可

脚本实现

鼠标点击

1
-- 定义点击位置,点击次数,点击间隔
2
set x to 615
3
set y to 461
4
set clickNum to 1000
5
set clickNum to 0.4
6
-- 执行点击
7
repeat clickNum times
8
do shell script "/usr/local/bin/cliclick c:" & x & "," & y
9
delay delayNum -- 调整延迟以控制点击速度
10
end repeat

使用步骤如下

然后通过命令行cliclick p获取你想点击的位置
填入 x,y,clickNum,clickNum 四个变量,运行即可

也可以配合电脑中的 shortcut 来实现快捷键启动

键盘输入

输入文字

1
-- 定义输入内容
2
set inputText to "hello world"
3
-- 执行输入
4
tell application "System Events"
5
    keystroke inputText
6
end tell

模拟键盘按键

1
-- 激活目标应用，比如 Safari
2
tell application "Safari"
3
    activate
4
end tell
5

6
-- 设置按键组合的次数和延迟
7
set pressCount to 10 -- 重复次数
8
set delayTime to 0.1 -- 每次按键后的延迟（秒）
9

10
-- 模拟键盘连按
11
repeat pressCount times
12
    tell application "System Events"
13
        key code 49 -- 这里的 49 是空格键的 keycode
14
        delay delayTime
15
    end tell
16
end repeat

其中的 keycode 是对应键盘的键码,可以通过System Events中的key code来使用, keycode 在这里可以查看 keycode 列表,顺便我也在下面也列出一些常用按键的键码

键	键码
Enter	36
Backspace	51
Tab	48
空格	49
Delete	51
Escape	53
Command	55
Shift	56
Caps Lock	57
Option	58
Control	59
方向左	123
方向右	124
方向下	125
方向上	126

参考

使用 Capacitor 来构建你的 app 吧！

wxmvv@outlook.com (wxm) — Sun, 11 Aug 2024 20:47:00 GMT

capacitor[^doc] 作为一个跨平台 ios 和安卓的框架，本身和 flutter、RN 并不是同一赛道，capacitor 在官网也清晰的写着，基于两个平台 webview 来展示你的 html 静态网站，我们可以先用各种框架如 vue、react 来写一个静态网站，然后使用 capacitor 来把它变成 app，或者仅仅把它当成一个 app 的扩展工具，用 js 库来实现一些原生不太好实现的功能。相比直接用 capacitor 来构建 app，把它作为一个 js 扩展应该是一个更好的选择。

doc

简单尝试

随便新建一个项目

我这里新建了一个 nextjs 项目。

Terminal window

1
npx create-next-app@latest

记得在 next.config 中设定 output。

1
output: "export",

安装 Capacitor

Terminal window

1
# 安装cap命令
2
npm install @capacitor/cli @capacitor/core
3
# 新建cap项目
4
npx cap init

你可以看到目录中出现了 capacitor.config.json 下面有一个简单的设置。

1
{
2
  "appId": "com.example.captest", //唯一id
3
  "appName": "captest",
4
  "webDir": "out", //这个是静态网站的位置，nextjs导出的静态页面在out文件夹
5
  "server": {
6
    "url": "http://127.0.0.1:3000", //这里设定是对应nextjs dev模式的端口，设定后可以热更新
7
    "cleartext": true
8
  }
9
}

安装 cap 对应 sdk

这里以 ios 项目为例，

这里特别说一下在 ios 开发中需要安装 cocoapods，如果正常安装出错可以使用 brew 安装，我有个专门的日志写了如何解决这个问题。

Terminal window

1
# 先把nextjs的预览打开
2
npm run dev
3
# 安装cap包
4
npm install @capacitor/ios @capacitor/android
5
# 添加ios支持
6
npx cap add ios
7
# 使用原生app xcode打开app,可以查看原生代码，然后编译在模拟器执行
8
npx cap open ios
9
# 或者不打开xocde 通过命令行直接编译
10
npx cap run ios
11
# 可以打开同步，这样就可以热更新了
12
npx cap sync

这样一个可预览的 nextjs 的 app 就出来啦～

是不是很简单～

不过对比 flutter 和 RN 速度上明显还是有差距，还是要根据具体情况使用。

解决安装 cocoapods 失败的问题

wxmvv@outlook.com (wxm) — Sun, 11 Aug 2024 13:15:00 GMT

最近在尝试使用 capacitor 制作 ios app，涉及到使用 cocoapods 来安装插件，但是 macos 安装会出现各种问题，经过查看各种方法，最后还是使用 brew 成功的。

其实主要问题在于 macos 自带的 ruby 版本比较低，

Terminal window

1
ruby --version
2
# 查看ruby版本 如果是2.6那说明你需要这个教程

首先使用 brew 安装 ruby

Terminal window

1
# 安装ruby
2
brew install ruby
3
# 配置PATH 这里请仔细看brew的log信息，地址可能会不同
4
echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
5
echo 'export LDFLAGS="-L/opt/homebrew/opt/ruby/lib"' >> ~/.zshrc
6
echo 'export CPPFLAGS="-I/opt/homebrew/opt/ruby/include"' >> ~/.zshrc
7
# 重新加载配置
8
source ~/.zshrc
9
# 再次查看ruby版本 这时候应该变成3.x了
10
ruby --version

安装 pod

这里仍然使用 brew 来安装。

Terminal window

1
brew install cocoapods
2
# 按照提示link
3
brew link cocoapods
4
# 这里如果提示已经存在，需要按照brew给出的方法删除原文件，并再次链接

使用

Terminal window

1
# 正常显示没有报错就ok了
2
pod env

参考

cocoapods issues

名渡山辽 - Smile in the morning 指弹谱

wxmvv@outlook.com (wxm) — Tue, 16 Jul 2024 10:17:00 GMT

虽然很久没弹琴，也没制作谱子了，赶上这次名渡山来天津的机会，再次拿起来练一下。

就挑了一首他的新曲来练一下。刚好骑鹅尤克里里的伊老师也在扒这首曲子，我们就一起合作完成谱子的整理，放在这里。

smileinthemorning.pdf

2024 使用 Nextjs 重构主页

wxmvv@outlook.com (wxm) — Fri, 05 Jul 2024 18:26:00 GMT

最近在使用 Nextjs 完成工作，用的很舒服，遂决定用来重新开发下之前 hexo 弄的主页。

项目在这里 minimal-tailwind-nextjs-blog

技术选择

首先是框架，除了 Nextjs 之外，我平时也很常用的 tailwindcss，可以快速构建网站页面。经过查找最后决定使用“开箱即用”的 tailwind-nextjs-starter-blog作为基础来重构主页。

设计参考

nelson

很喜欢这种干净的页面，但是同时又有不少小设计，作为参考来制作。

开发列表

layout 修改
色彩模式
i18n 国际化
评论系统
rss 生成
音乐播放器
主页的线性动画效果
PDF 预览

问题与一些解决方案

favicons 以及 manifest

动效框架

页面的动画效果使用的framer-motion

能打打节省开发动画的时间,并且让动画的过渡更加丝滑。

不得不说和 vue 相比，react 的动画库真的多太多了。

github page 静态部署

首先是项目中关于静态部署的设置，在文档中写的很清楚tailwind-nextjs-starter-blog，设置过就可以 build 了。

已经 build 过后，就会生成网页静态文件，然后在 github 新建一个 YourGitName.github.io 的仓库，将文件上传到仓库中即可。不过手动上传毕竟十分麻烦，可以使用 github action 来自动部署。可以自行参考文档部署。

需要注意的是，github page 使用 jekyll 部署，会自动忽略下划线开头的文件，导致_next 文件夹中的 js css 无法加载，在其中新建一个.nojekyll 即可

meta 信息

tailwind-nextjs-starter-blog 项目本身的 meta 信息就是参考 Hugo 的设置, 可以自行查看文档。

过滤 Post 的修改

在修改 Post 过滤过程中，其实就是 daaft 设置为 true，在 dev 模式还能正常显示，在 build 模式就会消失，如果想要做一些修改可以搜索一个外部方法 allCoreContent ，这个方法会在 NODE_ENV 为 production 的时候过滤掉 draft 修改。然后做自己的修改即可。

评论系统

tailwind-nextjs-starter-blog 所提供的 comments 组件似乎有一些加载问题，所以最后还是自己解决。

giscus giscus-react

Terminal window

1
npm i @giscus/react

1
//作为组件中使用  现在giscus官网获取id 然后将下面替换即可
2
import Giscus from "@giscus/react";
3
export default function MyApp() {
4
  return (
5
    <Giscus
6
      id="comments"
7
      repo="giscus/giscus-component"
8
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
9
      category="Announcements"
10
      categoryId="DIC_kwDOF1L2fM4B-hVS"
11
      mapping="specific"
12
      term="Welcome to @giscus/react component!"
13
      reactionsEnabled="1"
14
      emitMetadata="0"
15
      inputPosition="top"
16
      theme="light"
17
      lang="en"
18
      loading="lazy"
19
    />
20
  );
21
}

build 后的中文路径问题

我在 dev 模式中没有问题，但是当我打包 build 后出现路径问题。

app/blog/[...slug]/page.tsx

1
const isDev = process.env.NODE_ENV === "development";
2
const isBuild = process.env.NEXT_PUBLIC_IS_BUILD === "true";
3
export const generateStaticParams = async () => {
4
  if (isDev) {
5
    return allBlogs.map((p) => ({
6
      slug: p.slug.split("/").map((name) => encodeURIComponent(name))
7
    }));
8
  } else {
9
    return allBlogs.map((p) => ({
10
      slug: p.slug.split("/").map((name) => decodeURI(name))
11
    }));
12
  }
13
};

next.config.js

1
const isDev = process.env.NODE_ENV === 'development'
2
const isBuild =process.env.NODE_ENV === 'production' && process.env.NEXT_PUBLIC_IS_BUILD === 'true'
3
env: {
4
 NEXT_PUBLIC_IS_BUILD: isBuild.toString(),
5
},

package.json

1
"scripts":{
2
 "build": "cross-env NEXT_PUBLIC_IS_BUILD=true && cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",
3
}

最后

断断续续花了快 1 周时间才大概整好，其中比较花时间的是音乐播放器的动画效果，我使用 rive，从一开始画图到制作动画，还是很有趣的过程，最后效果也还可以，未来有时间我还会继续优化的。

mdx 常用元素

wxmvv@outlook.com (wxm) — Fri, 05 Jul 2024 18:26:00 GMT

这里是这个模版的一些常用 mdx 元素,写在这里方便复制使用。

引入组件

1
import { Image } from "astro:assets";
2
import WorkImage from "../../../assets/images/work.jpg";
3
import TestVideo from "../../../assets/video/test_video.mp4";

B 站视频

1
<iframe
2
  src="//player.bilibili.com/player.html?isOutside=true&aid=1355658592&bvid=BV1Xz421b7FU&cid=1574676110&p=1&autoplay=0&muted=0"
3
  style="width:100%;height:344px;"
4
  autoPlay="0"
5
  muted="0"
6
  scrolling="no"
7
  border="0"
8
  frameborder="no"
9
  framespacing="0"
10
  allowfullscreen
11
></iframe>

markdown 图片

1
![测试图片](../../../assets/images/work.jpg))

mdx 图片(宽)

1
<div class="flex flex-row justify-center bg-zinc-100  rounded md:-mx-28">
2
  <Image
3
    alt="GitHub test"
4
    loading="lazy"
5
    width="2000"
6
    height="1000"
7
    decoding="async"
8
    data-nimg="1"
9
    class="my-0 rounded"
10
    srcSet=""
11
    src={WorkImage}
12
  />
13
</div>

mdx 视频(普通)

1
<div class="flex flex-row justify-center bg-zinc-100 rounded-sm ">
2
    <video autoPlay loop preload="auto" playsInline class="my-0 rounded">
3
        <source src={TestVideo} type="video/mp4">
4
    </video>
5
</div>

mdx 视频(宽)

1
<div class="flex flex-row justify-center bg-zinc-100 rounded-sm md:-mx-28">
2
  <video autoPlay loop preload="auto" playsInline class="my-0 rounded">
3
    <source src={TestVideo} type="video/mp4" />
4
  </video>
5
</div>

链接

1
<a href="https://google.com" target="blank"></a>

前往谷歌

布局

两列布局(宽)

1
<div class="grid gap-6 md:grid-cols-2 md:-mx-24"></div>

Github Test

Github Test Github Test Github Test Github Test Github Test Github Test

Github Test

Github Test Github Test Github Test Github Test Github Test Github Test

两列布局(窄)

1
<div class="flex flex-col gap-6 md:grid md:grid-cols-2"></div>

Github Test

Github Test Github Test Github Test Github Test Github Test Github Test Github Test

Github Test

Github Test Github Test Github Test Github Test Github Test Github Test Github Test

item 单列

1
<div class="flex flex-col gap-2">
2
  <video autoPlay loop preload="auto" playsInline class="my-0 rounded-md md:max-h-[540px]">
3
    <source src={TestVideo} type="video/mp4" />
4
  </video>
5
  <div class="flex flex-col px-2 pt-2">
6
    <div>Github Test</div>
7
    <div class="imgDesc text-zinc-400">
8
      Github Test Github Test Github Test Github Test Github Test Github Test Github Test
9
    </div>
10
  </div>
11
</div>

item 双列

1
<div class="col-span-2">
2
  <div class="flex flex-col gap-2">
3
    <a href="https://google.com" target="blank">
4
      <video autoPlay loop preload="auto" playsInline class="my-0 rounded-md md:max-h-[540px]">
5
        <source src={TestVideo} type="video/mp4" />
6
      </video>
7
    </a>
8
    <div class="flex flex-col px-2 pt-2">
9
      <div>Github Test</div>
10
      <div class="imgDesc text-zinc-400">
11
        Github Test Github Test Github Test Github Test Github Test Github Test
12
      </div>
13
    </div>
14
  </div>
15
</div>

开始使用 Markdown 之前你也许需要看一下排版规范

wxmvv@outlook.com (wxm) — Sat, 15 Jun 2024 00:00:00 GMT

最近我在写文档，但是对比自己写的文档和 github 上其他大佬写的文档，总觉得差了很多意思，也许是时候学习下如何去写文档了，于是找到了 github 的文档规范 GitHub Flavored Markdown Spec 。

花了一些时间看过之后，觉得确实很有学习的必要，本来挑选了一些更容易碰到用到的规范，想翻一下写出来供大家参考，但是发现网上已经有人整理好了，其中也有一些关于中文的排版建议，我个人觉得很有帮助，所以也一并分享出来，「物联网学前班」这篇文章基于 Markdown 的中文文档排版规范。

获取屏幕宽高

wxmvv@outlook.com (wxm) — Sun, 19 Nov 2023 21:04:00 GMT

在 ios 中如果需要做一些页面，如抽屉侧边栏，就需要获得屏幕宽度，那么如何获取呢？

以下是两种方式：

通过 GeometryReader 获取

GeometryReader包装器提供了对父视图几何信息的访问，从而使你能够根据视图的实际大小来设置内容，当设备横置或者纵置，也会跟随动态调整。

1
struct ContentView: View {
2
 var body: some View {
3
  GeometryReader { geo in
4
   Text("Screen Width: \(geo.size.width)")
5
  }
6
 }
7
}

通过 UIScreen 获取

UIScreen.main.bounds 将返回设备的逻辑宽度，不考虑横置或纵置的情况,包含 width 和 height 等信息，如果需要获取实际物理宽高也可以使用 UIScreen.main.nativeBounds.width

1
// 通过 UIScreen.main.bounds.width 来获得宽度
2
struct ContentView: View {
3
 var body: some View {
4
  Text("Screen Width: \(UIScreen.main.bounds.width)")
5
 }
6
}

总结

如果需要考虑横纵就必须使用 GeometryReader 其他情况就随意喽。

Macos 隐藏文件&显示隐藏文件

wxmvv@outlook.com (wxm) — Thu, 16 Nov 2023 00:00:00 GMT

macos 命令使用 chflags

最近在使用 obsidian 的时候，出现了文件会变成隐藏，目前原因不明，最后使用 chflags nohidden 命令将它们取消隐藏。

使用 man chflags 可以了解大致使用方式

Terminal window

1
#常用指令
2
chflags hidden  # 隐藏单一文件或文件夹
3
chflags nohidden # 取消隐藏单一文件或文件夹
4
chflags -R hidden # 隐藏或取消隐藏目录所有文件

还有官方论坛相关的回答url

GitHub Profile 美化

wxmvv@outlook.com (wxm) — Sun, 24 Sep 2023 14:45:00 GMT

好像是去年更新的功能，今天整理 github 文件顺便尝试一下。

原理就是新建一个和你的 github 账号名一样的仓库，然后这个仓库中的 read me 就会显示在 profile 页面。

这是一个 md 文件，可以使用 markdown，也可以使用 html+css 来制作样式。

也有一些相关美化的项目可以用来搭配使用

skillicons 添加小图标
github-readme-stats 你的 github 状态

好啦！快去试一下吧～(^_−)−☆

音乐分享 second wind

wxmvv@outlook.com (wxm) — Wed, 20 Sep 2023 17:12:45 GMT

最近听到的非常棒的一张专辑，非常喜欢其中的曲子的 solo 部分，非常有趣，整体音色会让人很舒适放松，然后 solo 又会像小精灵一样不多不少制造一点紧张，并且完美解决，确实很棒。

Surge 个人使用配置

wxmvv@outlook.com (wxm) — Sun, 03 Sep 2023 11:13:00 GMT

个人配置

surge.conf

导入后替换配置中的订阅地址即可使用

参考

surge 官方

参考仓库

模块参考

一些特殊模块

sub-store 订阅转换
box.js boxjs 脚本
iRingo 解锁苹果功能
script.hub 脚本转换
MIITAllHost 抓包使用

一些工具

surgio 规则转换

把 Obsidian 变成 IA writer

wxmvv@outlook.com (wxm) — Mon, 21 Aug 2023 14:34:00 GMT

随便说

用了 obsidian 好久了，真的是符合我心中电子笔记最完美样子的软件，唯一的问题就是界面太乱，所以利用闲暇时间好好整理了一下！

之前用过 IA writer，真的很干净、很舒服的界面，字体也是我喜欢的，所以我们今天的目标就是把 obsidian 变成 IA writer！(obsidian:所以我只是 IA 的替身吗 😭)

换装开始！╮(￣ ▽ ￣“”)╭

首先是先大体上整理一下外表！让我们换一个主题 - 对的没错！就是你 minimal ！(主题店常年第一名的) 虽然有直接 copy IA 的主题比如 IB，不过实际使用效果不是很理想，minimal 凭借她优秀的可调教性成为我们的选择！

我们同时还需要 3 个插件配合

Hider
Minimal Theme Settings
Style Settings
Focus Active Sentence (可选)

然后是 IA 的字体

IA-Fonts 选择你喜欢的下载并安装

OK！前期准备完成！

设置设置

官方文档

1
#00C6FF

IA 的大蓝色

点击 import 将下面的拷贝进去

1
{
2
  "minimal-style@@bg1@@dark": "#191A1A",
3
  "minimal-style@@bg1@@light": "#F7F7F7",
4
  "minimal-style@@ui1@@light": "#00BEFF",
5
  "minimal-style@@ax1@@dark": "#CCCCCC",
6
  "minimal-style@@ax1@@light": "#1A1A1A",
7
  "minimal-style@@ax2@@dark": "#CCCCCC",
8
  "minimal-style@@ax2@@light": "#1A1A1A",
9
  "minimal-style@@code-background@@dark": "#252524",
10
  "minimal-style@@code-background@@light": "#EEEEEE",
11
  "minimal-style@@h1-size": "1.5em",
12
  "minimal-style@@h2-size": "1.2em",
13
  "minimal-style@@h3-size": "1.125em",
14
  "minimal-style@@h3-weight": 600,
15
  "minimal-style@@h3-style": "italic",
16
  "minimal-style@@active-line-on": true,
17
  "minimal-style@@checkbox-shape": "checkbox-square",
18
  "minimal-style@@ribbon-style": "ribbon-hidden",
19
  "minimal-style@@bold-weight": 600
20
}

新建一个随便的名字.css 然后放在里面并且打开就能看到啦！

1
.markdown-source-view.mod-cm6 .cm-content {
2
  /* 光标颜色 */
3
  caret-color: var(--ia-primary-color);
4
}
5
/*修改顶部导航栏  hover时候才显示*/
6
.view-header:hover {
7
  opacity: 1 !important;
8
}
9
.workspace-tabs.mod-stacked.mod-top .workspace-tab-header-container:hover {
10
  opacity: 1 !important;
11
}
12
.view-header {
13
  opacity: 0 !important;
14
}
15
.workspace-tabs.mod-stacked.mod-top .workspace-tab-header-container {
16
  opacity: 0 !important;
17
}
18
/*选中的tab 标题栏和边框颜色*/
19
.workspace-tab-container .workspace-tab-header {
20
  box-shadow: -1px 0 0 0 var(--ia-link-color), var(--tab-stacked-shadow) !important;
21
}
22
.workspace-tab-container .workspace-tab-header.mod-active.is-active {
23
  box-shadow: -1px 0 0 0 var(--ia-primary-color), var(--tab-stacked-shadow) !important;
24
}
25
.workspace-tab-header.mod-active.is-active .workspace-tab-header-inner-title,
26
.workspace-tab-header.mod-active.is-active .workspace-tab-header-inner-icon {
27
  color: var(--ia-primary-color) !important;
28
  /* font-weight:600 !important; */
29
}
30
/* 外部链接url和括号颜色 */
31
.cm-string.cm-url,
32
.cm-formatting.cm-formatting-link.cm-link,
33
.cm-active > .cm-formatting.cm-formatting-link-string.cm-string.cm-url {
34
  color: var(--ia-link-color) !important;
35
}
36
/* 内部链接括号颜色 */
37
.cm-formatting-link.cm-formatting-link-end,
38
.cm-formatting-link.cm-formatting-link-start {
39
  color: var(--ia-link-color) !important;
40
}
41
/* 选中后的外部链接url和括号颜色 */
42
.cm-active > .cm-string.cm-url {
43
  color: var(--ia-active-link-color) !important;
44
}
45

46
/* theme-dark */
47
.theme-dark {
48
  --ia-link-color: #7b7a79;
49
  --ia-active-link-color: #00bbff;
50
}
51
/* theme-light */
52
.theme-light {
53
  --ia-link-color: #b5b3b0;
54
  --ia-active-link-color: #00bbff;
55
}
56
/* theme-dark & theme-light */
57
.theme-dark,
58
.theme-light {
59
  --ia-primary-color: #00bbff;
60
}

设置好了吗？是不是大变样了呢？哈哈

变装结束

还是有很多没有弄好的，比如光标宽度，选中文字颜色等，有空再折腾你啦！ ╮(￣ ▽ ￣“”)╭

有什么更好的建议也欢迎邮件我哦！

TailwindCSS 以及 Svelte 使用尝试

wxmvv@outlook.com (wxm) — Sun, 21 May 2023 00:00:00 GMT

参考文档

先看文档，tailwindCSS 真的我花了一小会时间适应了一下就可以算是入门了吧，真的太方便了，但是 svelte 则需要认真读一下文档，要不连文件怎么建都不知道… 和 vue 使用有很多相似地方，不同的地方更多，尤其是使用方法似乎变简单了，不过我也没有特别深入的使用，不好做评价。

我的项目

softwhite

随便说

去年了解到的 tailwindCSS 不过也没花时间去尝试，最近用了一下简直是停不下来，使用体验极为舒适，这里记录一下顺便也做下推荐。

另一个 svelte，是在我看 DaisyUI 的示例项目时候，看到的框架，搜了下说是前端届一颗冉冉升起的新星，就一起用起来了。(vue 自认为用的还不是很好，也不知道哪来的勇气在这瞎试，笑)

使用过程中也学到很多新的东西，或者一些踩的坑，有时间也会写下来给大家参考。

解决 nvm 启动速度慢的问题

wxmvv@outlook.com (wxm) — Thu, 10 Feb 2022 00:00:00 GMT

Terminal window

1
export NVM_DIR="$HOME/.nvm"
2
export PATH=$HOME/.nvm/versions/node/v18.14.0/bin/:$PATH
3
nvm() { . "$NVM_DIR/nvm.sh" ; nvm $@ ; }

注释掉之前添加的 nvm 启动命令

然后将上面代码中的版本号改为自己想默认启动的 node，存入配置文件

参考

Pjax 实现无刷新加载页面

wxmvv@outlook.com (wxm) — Sat, 05 Dec 2020 00:00:00 GMT

给朋友制作网站的时候，收到一个需求，就是要无刷新完成页面切换，最好还要有过渡动画。

因为是原生 js 做的网页，便想到使用 jquery 的 ajax 解决问题。不过由于考虑到文件大小并且也并没有使用 jq 其他功能，最后决定使用了不需要引入 jq 的pjax。

使用

引入pjax

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/pjax/0.2.8/pjax.min.js"></script>

script

1
$(document).ready(function () {
2
  var pjax = new Pjax({
3
    elements: "a",
4
    selectors: ["main"],
5
    cacheBust: false,
6
    scrollRestoration: false,
7
    switches: {
8
      main: Pjax.switches.sideBySide,
9
    },
10
    //切换动画效果
11
    switchesOptions: {
12
      main: {
13
        classNames: {
14
          remove: "Animated-easeOut Animate--noDelay",
15
          add: "Animated-easeIn",
16
          backward: "Animated-easeOut",
17
          forward: "Animated-easeOut",
18
        },
19
      },
20
    },
21
  });
22
});

问题与解决方案

script 重载

问题

因为 pjax 切换页面并没有完全刷新，所以页面的 js 不会从头执行一遍，导致 js 不生效。

解决

方式 1 - 重载部分 js

1
function pjax_reload() {
2
  //需要执行的js
3
}
4
// Pjax 完成后，重新加载上面的函数
5
document.addEventListener("pjax:complete", function () {
6
  pjax_reload();
7
});

方式 2 - 重载 js 文件这种情况多数用于第三方文件，比如，卜算子统计的脚本、谷歌/百度/腾讯分析的脚本等，这些脚本在每一次页面加载后都需要执行。在引入这些文件的标签上添加 data-pjax 属性，然后将具有这个属性的标签重新添加在页面中。有时候不方便在这些标签上添加额外的属性，那么你可以在这些标签外套一层标签，如<div class=".pjax-reload"></div>，然后将 .pjax-reload 里的元素全部重新添加到页面中即可。

1
<script data-pjax src="https://cdn.jsdelivr.net/gh/sukkaw/busuanzi/bsz.pure.mini.js"></script>
2
<div class=".pjax-reload">
3
  <script src="https://www.google-analytics.com/analytics.js"></script>
4
</div>

1
// jQuery 写法
2
$("script[data-pjax], .pjax-reload script").each(function () {
3
  $(this).parent().append($(this).remove());
4
});

参考

使用 Hexo 部署静态博客

wxmvv@outlook.com (wxm) — Tue, 03 Nov 2020 18:47:39 GMT

前言

最近购买下载了 IA writer，确实是一个十分干净的 md 编辑器，能激发自己写字的欲望。于是考虑重新开始博客部署。翻出了以前的 hexo 博客（大概 18 年部署的一直没更新，并且原来的设置文件都丢失了），整理一下重新部署。

安装 hexo 和 cactus 主题

hexo cactus

hexo 安装

Terminal window

1
npm install hexo-cli -g
2
hexo init blog
3
cd blog
4
npm install
5
hexo server   #启动服务

cactus 主题安装

Terminal window

1
cd blog
2
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

配置文件参考

hexo 文档 cactus 主题

使用方法

hexo new 文件名 hexo clean 或 hexo c 清除缓存 hexo generate 或 hexo g 生成静态文件 hexo server 或 hexo s 本地查看 hexo deploy 或 hexo d 上传

参考

Markdown 语法参考以及 Hexo 部分扩展语法

wxmvv@outlook.com (wxm) — Sun, 24 Jun 2018 00:00:00 GMT

Markdown 基础语法

标题

1
# 这是 H1
2

3
## 这是 H2
4

5
...
6

7
###### 这是 H6

字重

**加粗**, 加粗 *强调*, 强调 ~~删除线~~, 删除线斜体 *斜体* 斜体

图片

![备注](https://test.com/test.jpg)

链接

1
邮箱: [mail](w05172075@outlook.com)
2
链接: [wxm's blog](https://wxmvv.github.io)

邮箱: mail 链接: wxm’s blog

引用

右尖括号>开头，引用一段话：

右尖括号 > 表示引用。

代码

内嵌代码

用两个反引号键包围起来。 int var = 100;

固定的代码块

以三个反引号开始一行，并且以同数量的反引号结束一行，中间的内容就是固定的代码块。

1
NSString \*str = @"Hello Markdown";

有序列表

有序列表以 “数字.” + “空格”开始：

选项 1
选项 2

无序列表

无序列表以 * 或 - 或 + + 空格开始：

选项 1
选项 2

任务列表

可以在有序列表或无序列表的基础上，加上 [ ] 创建任务列表；如果任务已完成，用 [x] 或 [X]。

任务 1
任务 2

水平分割线

三个以上的星号或破折号：

1
---
2
---
3

4
---

表格

简单的表格：

Header 1	Header 2	Header 3
Cell	Cell	Cell
Cell	Cell	Cell

也可以在首、尾加上分割线：

Header 1	Header 2	Header 3
Cell	Cell	Cell
Cell	Cell	Cell

通过冒号来决定单元格内容的对齐方式：

Header 1	Header 2	Header 3
左	中	右
左	中	右

脚注

脚注类似于引用样式的链接。脚注用于完成两件事：标志的文本会变成上标符号；脚注定义将被放置在一个文档末尾的列表。一个脚注看起来是这样的：

这是包含脚注的文本。¹

MDX 扩展语法

什么是 mdx？

mdx 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到你所书写的内容当中。

示例:

1
<div className="note">> Some notable things in a block quote!</div>

> Some notable things in a block quote!

Hexo 扩展语法

如何设置「阅读全文」?

1
在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式

如何修改图片样式？

1
![title](path)
2
<img src="链接" width="宽度" height="高度" alt="图片名称" align="center">

文档

1
在主页添加播放器
2
https://aplayer.js.org/#/zh-Hans/

其他选择cplayer

插入 pdf

1
npm install --save hexo-pdf
2

3
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

插入视频

参考

添加图片预览

fancyapps

参考

Footnotes

这是脚注内容。 ↩