木灵鱼儿

使用Github Actions打包前端项目并自动上传到Github Pages分支

木灵鱼儿 3天前教程

使用Github Actions打包前端项目并自动上传到Github Pages分支

前言之前写了一篇 Github Actions 怎么将build的内容发布到 Releases 上，这次想将前端的SPA项目搞一个在线预览的站点，但是又没有经济实力提供一个服务器来进行部署，所以就参考了下一些开源项目，发现他们都是用 Github Pages 来做在线预览的，所以我也想弄一个。本篇文章就不细说基本内容了，想入门的可以看之前那篇：《使用Github Actions打包前端项目并自动上传到Releases》教程我本来的意思是，先用 Actions 打包后，再克隆一个仓库，切换到 Github Pages 的分支，将dsit目录里的内容复制到这个 Github Pages 的...

78 0 0

预览 github actions

使用Github Actions打包前端项目并自动上传到Github Pages分支

vue3中使用shiki实现代码高亮和注意事项

木灵鱼儿 1周前 vue 项目实战

vue3中使用shiki实现代码高亮和注意事项

前言最近在写AI训练器的UI界面，有一个需求就是展示TOML配置，为此就需要用到代码高亮，我之前用过 highlight.js 和 PrismJS，但是在撰写VitePress项目配置时发现了一个新的代码高亮库：shiki。shiki可以省去维护css和html，并且原生就是ESM按需加载，支持多种主题等，已经满足了我对一个代码高亮的需求，为此我去尝试用了下这个，于是有了本篇文章。插件文档：Shiki语法高亮器github：shiki注意事项shiki是按需加载的，它的实现方式就是除了一个主体的js文件，在打包后会有非常多的不同代码语言的解析器脚本文件，但是不用担心，这些脚本文件只有在真...

227 2 0

代码高亮异步 vue3

爱快ikuai和windows电脑使用iperf3测试内网传输速度

木灵鱼儿 2周前教程

爱快ikuai和windows电脑使用iperf3测试内网传输速度

前言最近终于将常用的设备都替换成了2.5g网口了，为了就是希望局域网看电影的时候，拖拽视频进度条能少卡顿一点，但是发现一个很蛋疼的问题，明明wifi已经是wifi6的极致了，2400mbps了，换算成文件大小怎么也可以300m每秒的文件，但是在内网传输文件的时候发现速度只有10mb，贼难受，想要测试一下速度，发现不知道怎么弄。为此写一篇文章留给有需要的人，也方便自己以后使用。首先我的路由器是ikuai爱快，或者你的路由器支持iperf3这个功能，那么也能照着这个教程来测试内网速度。教程首先我们开启爱快的内网测试功能，如果是支持iperf3的路由器，自行去开启这个功能。找到：应用工具 --...

805 0 0

windows ikuai iperf3

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

木灵鱼儿 1月前教程

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

需求想实现网络层完整的翻墙处理，除了旁路由的方式，我们还可以通过爱快的双wan口来实现，爱快本身实现了双wan口无网自动切换，我们只需要让其中一个wan口是可以翻墙的，并设置为主wan即可。当翻墙的主wan口无法访问时，爱快会切换另一条wan口，从而保持网络畅通，虽然切换的时候会有一小段时间是没有网络的。示意图功能实现[hide]安装PVE首先我们拥有一台多网口的x86设备，并且安装了pve系统，具体的操作就不多说了，基本上就是：下载pve系统iso文件，刻录到U盘，启动，安装，b站有很多教程，随便找一个照着做就行了。这里提供一个脚本，用于给pve显示设备温度和cpu功耗等信息。你需要S...

1505 19 17

翻墙爱快 PVE

了解前端的复制功能

木灵鱼儿 2月前前端功能

了解前端的复制功能

前言前端的复制功能第一次使用的时候还记忆犹新，那时根本不知道怎么操作，复制它到底是怎么实现的，该怎么去触发，百度查看了不知道多少所谓的复制功能文档，每篇都有不一样的用法，我总想着有一天能搞清楚这些，毕竟现在复制功能已经web功能开发中离不开了。execCommand API浏览器在document对象上暴露了execCommand方法，该方法允许使用者通过输入“命令”的方式来操作可编辑内容区域的元素。可编辑内容区域被官方认为是contenteditable="true"的html元素，但按道理，input这些应该也是算可编辑内容区域的。这些都不重要，我们这次关注的...

2474 36 6

copy clipboard 复制

表维护笔记

木灵鱼儿 2月前 MySQL

表维护笔记

更改表名ALTER TABLE test RENAME tests;或者：RENAME TABLE test to tests;将test表改成tests表。更改表的字符集比如更改为gbk，不过用的很少，一般创建数据库时就已经定好了，不会再改动。ALTER TABLE tests CHARSET gbk;清空表数据DELETE FROM test;使用delete删除有的软件会提示你没有where条件，是否全部删除，有的不会，这种方式删除会比较慢。我们可以用这种方式：TRUNCATE test;删除表DROP TABLE IF EXISTS test;用if判断下表是否存在，存在则删除。...

625 1 0

MySQL 表

搭建一个vite+vue+ts的Chrome插件开发模板

木灵鱼儿 2月前 Chrome插件

搭建一个vite+vue+ts的Chrome插件开发模板

前言最近在开发一个Chrome插件，在阅读官方文档时发现它提供的都是js的方式，完全没有工程化的概念，而且插件的版本已经到v3了，v3版本限制了非常多的东西，比如我们使用vue的template渲染，由于vue用到了eval来实现，导致插件会报错，蛋疼的很，总不能写手写render函数吧，太累了。最好的解决办法就是用vite来打包vue项目，这样既可以用vue组件的方式开发，打包时也会将template转换成render函数，从而避免了eval的报错，我们还可以使用到ts和scss这些便利的工具。为此我们搭建一个开发模板需要实现以下功能：支持vite打包支持typescript支持scs...

2675 22 23

插件模板 vue3

Debian12 更新系统版本（目前更新至12.8版本）

木灵鱼儿 2月前运维

Debian12 更新系统版本（目前更新至12.8版本）

前言更新系统需要下载很多相关依赖，如果在国内，我建议是先换源，换成国内源再更新，如果是vps主机，应该就不用考虑这个事情了，不知道换源可以看我之前的文章。教程首先更新软件包索引：sudo apt update然后升级已安装的软件包：sudo apt upgrade如果你想更加果断，比如你是新装的系统，不需要考虑包之前的依赖啥的，可以直接全面升级：sudo apt full-upgrade这种方式也适合有时候的内核更新。完事后我们清理下无用的安装包：sudo apt autoremove一般情况下不需要重启系统，如果你不放心可以重启一下：reboot查看系统版本完事后重新连接ssh，我们可...

3477 17 0

debian 更新系统

基本查询SQL笔记

木灵鱼儿 2月前 MySQL

基本查询SQL笔记

查询一个表的所有字段SELECT * FROM user;查询了user表的所有字段。指定字段查询SELECT id,email FROM user;别名SELECT id,email AS emails FROM user;它会将email字段名改成emails展示。查询条件-包含查询email中含有@符号的数据：SELECT * FROM user WHERE email LIKE "%@%";查询email中含有@符号并且id大于2的数据：SELECT * FROM user WHERE email LIKE "%@%" AND id>...

449 0 0

MySQL 表查询子查询

表生成的SQL笔记

木灵鱼儿 2月前 MySQL

表生成的SQL笔记

先进入数据库。创建表CREATE TABLE user ( id INTEGER PRIMARY KEY AUTO_INCREMENT NOT NULL, nickname VARCHAR(30) NULL, gender TINYINT NOT NULL DEFAULT 0, email VARCHAR(100) NOT NULL );查看表结构DESC user;给表添加数据INSERT INTO user SET email = "13xxx@qq.com",gender = 1;另一种添加方式，适合多条数据：INSERT INTO user (...

515 0 0

MySQL 表生成

数据库管理SQL笔记

木灵鱼儿 2月前 MySQL

数据库管理SQL笔记

创建数据库CREATE DATABASE test CHARSET utf8mb4;查看所有数据库show DATABASES;进入指定数据库use 数据库名;查看创建的数据库信息SHOW CREATE DATABASE `ease-change-backend`;得到：CREATE DATABASE `ease-change-backend` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci */ /*!80016 DEFAULT ENCRYPTION='N' */数据库名可以用`来包...

512 0 0

MySQL 数据库管理

使用Github Actions打包前端项目并自动上传到Releases

木灵鱼儿 2月前教程

使用Github Actions打包前端项目并自动上传到Releases

前言应公司业务需求，最近在写一个谷歌插件，我本来想手动build后将dist目录打包成zip手动Releases一下，但leader说这样太浪费时间了，让我用github的Actions来做，我也是头一回接触这个，两眼一抹黑，花了点时间了解后，成功实现了该功能，可以理解为actions就是预先定义的操作步骤，将多个步骤组合成一个workflows工作流，每次通过触发条件触发这个工作流，有点类似CI/CD的感觉。教程创建workflows首先我们需要在项目根目录创建文件夹：.github └─ workflows创建一个.github目录，在该目录下再创建一个workflows目录，之...

1519 103 0

github actions 自动打包

pnpm 查看插件的版本和测试版本

木灵鱼儿 2月前 vue 项目实战

pnpm 查看插件的版本和测试版本

前言最近在写Chrome插件，版本是V3版本，找了好久找到一个插件可以帮助我快速开发：@crxjs/vite-plugin，但是这个插件目前正式版只支持vite2版本，vite3版本还在测试阶段，为此我需要知道最新版的是哪个版本。教程查看正式版版本号：pnpm list @crxjs/vite-plugin如果我要查看测试版：pnpm info @crxjs/vite-plugin versions --json不想用命令我们可以去 npmjs 网站查看插件的版本：

789 6 0

版本 pnpm

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

木灵鱼儿 3月前 vue 项目实战

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

前言一直很头疼axios的失败重试插件axios-retry会重复调用axios自定义的响应错误拦截器，而我们常常会在这个拦截器中编写一个用于弹出错误消息的弹窗，这就导致了一个问题：如果我们失败会重试3次，那么全部都失败的话就会触发4次响应错误拦截器，然后就会导致触发4次错误消息的弹窗，非常蛋疼。为此常常需要考虑怎么避免重复触发的问题，常见的一些做法比如通过自定义的拦截器接受的error对象上的config属性，添加一个计数器来处理，如果计数器大于等于3的话就可以触发消息弹窗。本来axios-retry插件本身就会在config上注入一个计数的属性和总次数，但是也没法用，实际测试中发现，...

1149 0 1

axios 拦截器失败重试

ts-node 使用项目中的tsconfig.json和路径别名

木灵鱼儿 3月前 TypeScript

ts-node 使用项目中的tsconfig.json和路径别名

前言在使用 Prisma 的 seed 功能时，我遇到了一个非常棘手的问题：默认情况下，ts-node 会将其运行的脚本视为一个独立的文件进行转换，这导致无法识别较新的 JavaScript API 或路径别名。这在一些复杂场景中特别麻烦，因为我们往往需要复用项目中的工具函数，而由于文件层级的原因，往往不得不使用大量的 ../../../ 路径。更糟糕的是，如果 A 文件引入 B 文件，而 B 文件又无法使用路径别名，这种链式问题使得项目结构变得更加复杂且难以维护。因此，我开始思考一下如何能够简化这一过程，并复用已有的 TypeScript 配置。教程[hide]首先我们先看下我的运行命...

1652 88 2

路径别名 TypeScript ts-node

openWrt或者iStoreOS如何手动卸载openClash

木灵鱼儿 4月前教程

openWrt或者iStoreOS如何手动卸载openClash

前言有时候因为我们误操作导致openClash核心啊或者其他发生了问题，没法恢复了，以前的土办法就是重新安装系统，再来一遍，最近不想再折腾了，想着能不能手动卸载再安装一下呢？但是路由系统本身没有提供卸载可视化按钮，于是我们只能通过命令的形式卸载了。手动卸载先ssh连接路由，这一步就不多说了，连完之后我们输入命令：opkg list-installed | grep openclash这是用于筛选查询，查询openclash的包名，因为我们卸载需要完整包名。一般会返回如下：luci-app-openclash - 0.46.014-beta如果你想查看所有已安装的包，然后自己找，去掉gre...

3776 0 3

卸载 OpenWrt OpenClash

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

木灵鱼儿 4月前运维

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

前言最近pve换了一块新固态，用于替换原来的机械硬盘，换固态第一个原因是主机搬来搬去，机械盘怕到时候有损伤，那数据就没了，第二是我用来看视频的话，机械的读取确实是一个瓶颈，当然也有可能是因为程序垃圾导致读取卡顿，毕竟我没有装nas这种系统来使用。在更换之前我考虑到数据的迁移，由于pve格式化后的磁盘格式为ext4，这个格式在linux和mac系统中是可以通用的，但是windows本身是没有对它的官方支持，所以当我把磁盘拆下来用移动硬盘盒插电脑时，文件资源管理器中是不是出现对应盘符的。为此我考虑了一下几种数据迁移的方式：pve通过smb局域网共享磁盘；windows本身通过wsl2进行挂载...

1896 0 0

磁盘 windows PVE

mysql 9.0 便携版开启局域网共享

木灵鱼儿 4月前 MySQL

mysql 9.0 便携版开启局域网共享

前言最近使用mysql的时候都是用的一个便携版，打开命令界面就能用了，也不用安装什么依赖，也不需要安装服务，比较方便。但是有时候需要局域网共享一下mysql，为此水个文章记录一下。注意本教程不适用大部分便携版，可能只适用我这种版本的，大家可以参考一下。教程首先我们需要在mysql的配置文件：my.ini添加如下内容：[mysqld] bind-address=0.0.0.0表示mysql启动时要使用ip地址。然后由于便携版的mysql没法直接通过终端进入到命令界面，我们使用Navicat Premium Lite 17这个软件来进入mysql的命令界面。Navicat先本地连接mysql...

1478 2 0

MySQL 局域网共享

git merge合并分支，将多个commit压缩成一条进行提交

木灵鱼儿 4月前 Git 笔记

git merge合并分支，将多个commit压缩成一条进行提交

前言随着项目的复杂度，有时候会用到cherry-pick的情况，但是cherry-pick如果应对太多的commit操作上也会不方便，假如我们有一个dev分支，一个功能分支A，现在功能A上有10个commit提交，都是针对这一个功能的，我们需要将其合并到dev分支。传统的merge合并会将A分支的10个commit提交都合并到dev上，导致commit树变得繁琐。为此我们需要把这10次commit改成一个commit提交。教程首先我们先切到dev分支：git checkout develop然后通过--squash命令来压缩commitgit merge --squash aa就是被合并...

2155 2 2

压缩 git 合并

git 同步远程仓库已删除的分支，本地批量删除分支

木灵鱼儿 4月前 Git 笔记

git 同步远程仓库已删除的分支，本地批量删除分支

前言我们创建了很多分支，但是有一天一些旧的无用的分支已经在远程仓库删除了，但是我们本地对应的分支信息还在，我们需要将其和远程仓库同步。教程首先是远程分支同步处理：git fetch --all --prune获取所有远程仓库的最新提交，并删除本地仓库中不再存在的远程跟踪分支。但是我们只能删除远程的分支，事实上git会在本地创建一个本地的分支，分支名的区别：远程分支是origin/xxx，本地是xxx，通过这个命令我们只是删除了origin/xxx，本地的分支还在。如果分支不多，可以自己手动一个个删除。如果分支多，或者很频繁处理这个事情，我们可以创建一个bash脚本来处理这个事情。创建文件...

1987 0 0

git 分支同步

git cherry-pick 提取提交进行合并

木灵鱼儿 4月前 Git 笔记

git cherry-pick 提取提交进行合并

前言最近在发版的时候遇到一个头疼的问题，就是develop开发分支上的一个功能暂时还不能上线，但是其他的功能提交需要上线，此时平时常用的merge合并就不太行了。为此老大提了一个新的合并方式：git cherry-pick，这个我之前都没有使用过，它的作用就是可以提取其他分支的指定commit进行合并，这样就可以跳过不能上线的功能提交了。教程没有图，在b站视频上偷了一张图来用。可以看到我们有两列分支，左边的12357就是主分支，右边的468就是开发的新功能，但是6这个提交不能进行合并，我们需要提取4和8合并到主分支。在cherry-pick之前我们需要将分支切换到main分支，因为最终代...

1950 0 2

git cherry-pick 提取合并

Nuxt3 控制打包输出目录

木灵鱼儿 5月前 nuxt

Nuxt3 控制打包输出目录

前言Nuxt3采用了nitro作为http服务，所以打包输出相关的配置其实就是nitro的配置。教程打开next.config.ts文件export default defineNuxtConfig({ nitro: { output: { dir: "", // 这个是配置总的输出路径，一般没必要配置 serverDir: "", // 这个是SSR打包输出路径 publicDir: "" // 这个是SSG打包输出路径 } } });比如我希望通过genera...

2248 115 0

打包输出路径 Nuxt3

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

木灵鱼儿 5月前 nuxt

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

前言最近在使用Nuxt3开发官网的时候，需要有一些地址跳转，但是跳转的地址是绝对路径，比如我官网是/a的域名路径，但是需要从官网跳转到/b路径的时候，nuxt就会报错。在控制台会报警告：No match found for location with path "/b"在通过generate命令打包的时候还会报错： Error: [404] Page not found: /b导致我们打包失败，实际上这个路径在生产环境是存在的，只是在本地开发的时候不存在。不管我们使用A元素还是NuxtLink标签，配置的target="_blank"也没有用，该报...

2183 0 4

路径 Nuxt3 a元素

Windows安装Starship

木灵鱼儿 5月前教程

Windows安装Starship

前言安装的时候总是碰到windows的PowerShell总是没有配置文件，一般谁会去记创建配置的命令啊，为此写个文章记录一下。教程安装Starship先去github下载Starship的msi安装包。github地址：Starship找到starship-x86_64-pc-windows-msvc.msi这个安装包下载。下载完毕后安装即可。创建PowerShell配置文件安装完毕后我们配置一下PowerShell。首先看看配置文件有没有，输入命令：notepad $PROFILE如果打开的不是Microsoft.PowerShell_profile.ps1文件就是没有，我们手动创建...

1964 4 0

windows Starship 终端

微信如何判断是否关注公众号

木灵鱼儿 5月前微信

微信如何判断是否关注公众号

前言最近写微信相关的功能，要求用户必须关注公众号才能使用功能，所以我们要有一个办法去判断是否关注了公众号，查了下，网上好多乱七八糟的教程，全都没说到点子上，当然也有可能是历史原因，微信的api年年改。教程[hide]获取用户信息判断是否关注实际上现在用于用户是否判断关注公众号，微信官方有提供一个接口，接口会返回一个subscribe字段，用于告知该用户是否关注。官方文档：获取用户基本信息(UnionID机制)GET https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lan...

4137 56 15

微信公众号

木灵鱼儿

使用Github Actions打包前端项目并自动上传到Github Pages分支

vue3中使用shiki实现代码高亮和注意事项

爱快ikuai和windows电脑使用iperf3测试内网传输速度

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

了解前端的复制功能

表维护笔记

搭建一个vite+vue+ts的Chrome插件开发模板

Debian12 更新系统版本（目前更新至12.8版本）

基本查询SQL笔记

表生成的SQL笔记

数据库管理SQL笔记

使用Github Actions打包前端项目并自动上传到Releases

pnpm 查看插件的版本和测试版本

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

ts-node 使用项目中的tsconfig.json和路径别名

openWrt或者iStoreOS如何手动卸载openClash

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

mysql 9.0 便携版开启局域网共享

git merge合并分支，将多个commit压缩成一条进行提交

git 同步远程仓库已删除的分支，本地批量删除分支

git cherry-pick 提取提交进行合并

Nuxt3 控制打包输出目录

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

Windows安装Starship

微信如何判断是否关注公众号

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

使用Github Actions打包前端项目并自动上传到Github Pages分支

vue3中使用shiki实现代码高亮和注意事项

爱快ikuai和windows电脑使用iperf3测试内网传输速度

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

了解前端的复制功能

表维护笔记

搭建一个vite+vue+ts的Chrome插件开发模板

Debian12 更新系统版本（目前更新至12.8版本）

基本查询SQL笔记

表生成的SQL笔记

数据库管理SQL笔记

使用Github Actions打包前端项目并自动上传到Releases

pnpm 查看插件的版本和测试版本

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

ts-node 使用项目中的tsconfig.json和路径别名

openWrt或者iStoreOS如何手动卸载openClash

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

mysql 9.0 便携版开启局域网共享

git merge合并分支，将多个commit压缩成一条进行提交

git 同步远程仓库已删除的分支，本地批量删除分支

git cherry-pick 提取提交进行合并

Nuxt3 控制打包输出目录

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

Windows安装Starship

微信如何判断是否关注公众号

最近评论

博客文章RSS订阅

博客评论RSS订阅