使用符号链接实现 Halo 主题的热更新

Erzbir #theme-dev #halo

介绍

在开发插件的时候有 Devtools 可以很方便的调试和重载插件, 但是找了一下之后没发现主题有类似的开发工具, 每次更新了代码都需要把新的主题重新上传安装再测试. 虽然可以用 Vite 启动开发服务器, 不过我想更偷懒一点, 而且也不想引入其他依赖和过多代码

可以用符号连接的方式实现热更新 (思路源自 howiehz)

核心就是在 halo 存放主题的 themes 文件夹里做一个符号链接指向主题解压缩之后的文件夹

也就是这样:

theme-terminal-ez -> /Projects/halo-theme-terminal/dist/theme-terminal-ez

在 MacOS 上的命令如下:

ln -s  /path/to/theme-terminal-ez theme-terminal-ez

这里的符号链接名字需要和主题的 ID 一样

如果使用 halo 官方的主题开发工具 @halo-dev/theme-package-cli, 这个工具的产物是一个压缩包, 可以写一个脚本手动解压一下就可以轻松实现

我的主题本身就是用 theme-package-cli + make + esbuild, 所以这里直接用 Makefile 来配合主题开发工具使用的会比较方便

NODE_MODS := node_modules
DIST_DIR := dist
NAME := $(shell grep '^[[:space:]]*name:' theme.yaml | head -n1 | cut -d ':' -f2 | xargs)
VERSION := $(shell grep '^[[:space:]]*version:' theme.yaml | head -n1 | cut -d ':' -f2 | xargs)
THEME := $(NAME)-$(VERSION)
ARCHIVE := $(THEME).zip

all: install build test

$(NODE_MODS): package.json
	pnpm install

$(DIST_DIR): $(NODE_MODS) theme.yaml settings.yaml build.js templates
	pnpm build

install: $(NODE_MODS)

build: $(DIST_DIR)

test: $(DIST_DIR)/$(ARCHIVE)
	@unzip $(DIST_DIR)/$(ARCHIVE) -d $(DIST_DIR)/$(NAME)

.PHNOY: clean
clean:
	@rm -rf $(DIST_DIR)
	@rm -rf $(BUILD_DIR)
	@rm -rf $(NODE_MODS)
	@rm -rf templates/assets/$(DIST_DIR)

这个 Makefile 会先用 esbuild 编译样式和脚本, 然后使用 @halo-dev/theme-package-cli打包, 最后再解压到dist文件夹

这样只需要使用 make 命令就可以自动生成一个压缩包产物和一个解压后的主题文件夹

可以根据自身的工具链来写

具体流程

  1. 先正常安装主题
  2. 写一个脚本每次 build 产出一个放主题文件的文件夹 (就是主题压缩包解压后的文件夹)
  3. 在 halo 的 themes 文件夹下, 做一个和主题 ID 名字一样的符号链接, 链接到产出的主题文件夹

每次代码更新重新构建之后, 就可以应用新代码了, 如果更新了 settings.yaml 或者没有成功更新, 就重载一下主题或者再清理模板缓存之后再重载一遍

其他思路

可以尝试用 halo 安装主题的 API, 在 build 的完成之后调用 API 自动安装. 虽然这要写更多代码, 不过这更通用, 可以封装成一个工具在多个项目中使用

Comments