德国沃丰达
第一步：申请免费 eSIM打开德国沃达丰的官网申请页面： https://www.vodafone.de/freikarten/callya-classic-form/ 直接开始申请，选择 eSIM 选项。 A、填写个人信息： 姓名（用拼音，保持和护照一致） 邮箱地址（千万别填错！ eSIM 二维码会发到这个邮箱） 德国地址（一定要在谷歌地图找一个真实的德国地址） 重要提示：姓名就用自己护照上的名字就行，地址一定要填写真实存在的德国街道和邮编，否则可能无法通过验证。你可以用 Google Maps 随便找一个德国的真实地址，一定要真实。 eSIM（强烈推荐）：在线申请，秒级开通，不用等快递。而且配合 XeSIM，国行手机也能用。 姓名（用拼音，保持和护照一致） 邮箱地址（千万别填错！ eSIM 二维码会发到这个邮箱） 德国地址（一定要在谷歌地图找一个真实的德国地址） 重要提示：姓名就用自己护照上的名字就行，地址一定要填写真实存在的德国街道和邮编，否则可能无法通过验证。你可以用 Google Maps 随便找一个德国的真实地址，一定要真实。 然后用手机扫描网页上的二...
服务器备份
^# VPS 自动备份方案 — rsnapshot + rclone + OneDrive 适用环境：Ubuntu 24.04 LTS / Oracle Cloud ARM VPS备份目标：所有服务配置、账号数据、数据库、SSL 证书远程存储：OneDrive（可通过 rclone 扩展其他网盘） 一、安装依赖12345# 安装 rsnapshotapt update && apt install -y rsnapshot# 安装 rclonecurl -s https://rclone.org/install.sh | bash 二、配置 rclone（OneDrive 授权）由于 VPS 没有浏览器，需要在有浏览器的本地电脑上获取 token。 在本地电脑上操作12# 安装 rclone 后执行（macOS: brew install rclone）rclone authorize "onedrive" 浏览器弹出 Microsoft 登录页面，授权后会输出一段 JSON token。 在 VPS 上配置创建配置文件 ...
服务安装检测和开机重启
什么是 systemdsystemd 是 Linux 系统里的一个 系统管理器和服务管理工具。简单理解： 👉 它负责启动、停止和管理系统里的各种服务。 例如： Web 服务器（nginx） 数据库（mysql） Docker 这些程序如果作为 后台服务运行，通常都是由 systemd 管理。 systemd 可以做什么1️⃣ 启动服务1systemctl start nginx 2️⃣ 停止服务1systemctl stop nginx 3️⃣ 重启服务1systemctl restart nginx 4️⃣ 查看状态1systemctl status nginx 什么是 service 文件比如安装cliproxyapi，之后找到～/cliproxyapi目录下的cliproxy.service文件。 1cliproxyapi.service 这是 systemd 的服务配置文件。 一般放在： 1/etc/systemd/system/ 里面会定义： 程序在哪里 如何启动 是否开机启动 用哪个用户运行 例如： 12345678910[Unit]...
服务器IP质量检测
可以用下面的脚本测试一下ChatGPT等平台等解锁情况： https://github.com/xykt/IPQuality 不会用的直接执行下面的命令： 12sudo -ibash <(curl -Ls https://IP.Check.Place) -f 检测结果示例如下：
使用Claude Code项目开发
AI IDE vs AI CLI从Cursor开始，各种AI IDE层出不穷，且已经达到了生产力级别。各家的AI IDE都是基于VSCode改造，接入claude等大模型编程。 然后Anthropic公司推出了claude code，开启了AI IDE。后面open ai和谷歌也跟上，分别开发了codex和gemini cli。 既然有了AI IDE，为何又要推出Cli形式的工具呢？尤其是cursor和claude code都是基于claude大模型。 优势 劣势 IDE 符合操作习惯，上手快；代码补全； 强绑定IDE CLI 终端运行，可以搭配任意IDE使用；CLI 形态天然适合自动化、脚本化、CI 集成、远程/无 GUI 环境；企业侧在安全、合规、权限管理上更容易集成； 需要学习上手；不支持代码补全； claude是目前最好的编程大模型，而claude code是Anthropic官方出品，对于claude的能力调教的更好。claude code新推出的子agents、skills等能力就很强。 目前还有一个问题，就是cursor、trae等一...
基于lit-html开发轻量h5
lit-html介绍什么是lit-htmllit-html是一个轻量的模板引擎，是lit框架的一部分。lit-html是基于原生es6模板字符串，可以单独在原生js中使用，是一个轻量高效的模板引擎。 lit-html的特性lit-html的核心特性： 高效的更新：lit-html 只更新变化的部分，而不是整个模板。 声明式渲染：使用普通的 JavaScript 表达式来声明 UI。 轻量级：只包含必要的功能，没有额外的抽象层。 可以看到，lit-html既轻量、不依赖框架，又能做到针对性只渲染更新的部分。我们在开发一些轻量的h5时，想要提升性能，不想引入过重的框架，就可以用lit-html来开发。 在项目中引入lit-html的两个核心方法，可以看到，只有8.1k，gzip压缩后只有3.4k。 lit-html用法api主要用到两个方法，html和render。 其中html是模板字符串函数，用于构造模板。html``. render是将模板渲染到指定的dom节点上。render(template, el). 事件绑定：lit-html的事件绑定跟vue很像...
【小程序】sjs事件动态调整元素位置
需求描述之前写过一篇利用sjs在小程序实现无卡顿元素拖拽的分享：【小程序】小程序sjs事件及拖拽组件开发。 这次需求做了一个气泡提示的容器组件，需要在遇到屏幕边缘时动态向内调整气泡的位置，就想到利用sjs事件来实现。 要求： 气泡箭头对准该功能中间位置 当气泡箭头无法居中位于功能，靠近页面左/右边缘时，气泡距离页面左右边距统一为16px箭头位置对准该功能 还有一个角标的组件，正常是在元素右上角，要实现到达页面右边缘时变为左上角。 事件文档sjs事件官方文档：小程序文档 - SJS 响应事件。 在 .sjs 文件中定义函数： 1234567891011121314151617181920// index.sjsfunction handleEvent(event, ownerComponent) { // currentTarget 的 Descriptor 描述对象 event.instance.setStyle({ 'font-size': '28rpx', }); // 不往...
序列帧动画css实现
实现原理雪碧图（sprite）雪碧图也叫精灵图， 是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。 雪碧图的作用有两个： 减少图片资源的请求数，提升页面加载速度 制作序列帧动画 这里我们要用第二种方式。假如我们有如下的一系列图片： 现在我们将它合到一张图片中。这时我们可以用ps一张一张拼，也可以用工具直接生成，如textpacker。 https://www.codeandweb.com/texturepacker 如下，我们可以拼成一个几行几列的图，或者都放在一行。 css实现序列帧动画我们都用过css的transition和animation实现动画。这里我们要像幻灯片一样，在每一帧停顿一下，再切换到下一帧。 这里要用到animation的一个属性steps。 animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态（我们称为线性变化）。默认情况下，它以<font style="color:rgb(199, 37, 78);back...
gulp-replace预编译注入环境变量
需求：在小程序使用pagespy，不希望带入到生产环境。期望在编译时而非运行时，动态判断环境注入代码。 要动态注入的代码： 1234567891011121314import PageSpy from '@huolala-tech/page-spy-alipay';(function () { const uid = my.getStorageSync({ key: 'uid' }).data; const map = { 'xxxxxxxxxxxxxxxx': 'xx', } // eslint-disable-next-line new PageSpy({ api: 'xxx', project: 'xxx小程序', title: map[uid] || uid || new Date().toLocaleTimeString(), });})...
draft.js定制富文本编辑器
有一个需求： 需要在输入框中输入/时弹出自定义下拉弹窗，选择组件并插入到输入框。 下拉弹窗是双层，且子目录支持输入文本过滤。 同时插入的块在删除时应该整体删除。 这个弹窗和插入整体感觉跟语雀的功能很像。一般的富文本编辑器可以插入特定的样式，但是整体自定义组件显示是不支持的，尤其是插入的块退格时作为整体删除。 另外这个输入/弹出下拉的功能，联想到很多编辑器中@人的时候的mention功能。 去看了react-mention，唤起键可以自定义，不一定是@，但是下拉弹窗的样式是固定的，只有单层列表，且不支持过滤。看react-mention的介绍，要唤起多个列表，就用多个不同按键唤起。这与我们的需求不符。 库选择第一反应是用tiptap，去翻了下文档，挺复杂的，感觉对我这个功能来说有点重。 再去查了下富文本实现mention，facebook开源的有一个draft.js的库，相对底层一些，可以用来实现自定义的富文本编辑器，网上的示例就有mention和插入整体的代码。参考了这篇文章：https://segmentfault.com/a/1190000041471...