Linux dmenu快速启动HTML+CSS实时预览终端
选择“HTML Preview”后，dmenu触发脚本启动Python服务器并在8000端口预览~/projects/html-preview中的文件，自动打开浏览器并支持热重载，实现快速编辑与实时刷新。
想要通过 dmenu 快速启动一个能实时预览 HTML + CSS 的轻量级开发环境？可以结合 dmenu、shell 脚本和一个极简的本地服务器来实现快速编辑与预览，无需打开重型 IDE 或浏览器手动刷新。
思路概述
利用 dmenu 选择并触发一个前端预览脚本，该脚本启动一个本地 HTTP 服务（如 Python 的 http.server），自动打开默认浏览器，并监听文件变化后自动刷新页面，实现“一键预览”效果。
所需工具
- dmenu：作为图形化快速启动器
- bash/zsh：编写自动化脚本
- Python 3：用于启动本地服务器
- browser-refresh 或 live-server（可选）：实现热重载
- 你的 HTML/CSS 文件目录：例如 ~/projects/html-preview/
步骤一：准备预览脚本
创建一个脚本，比如 ~/bin/start-html-preview：
#!/bin/bash # 启动 HTML+CSS 实时预览服务 <p>PROJECT_DIR="$HOME/projects/html-preview" PORT=8000</p><p>if [ ! -d "$PROJECT_DIR" ]; then mkdir -p "$PROJECT_DIR" echo "<html><body><h1>Hello</h1><p>Edit index.html here.</p></body></html>" > "$PROJECT_DIR/index.html" fi</p><p>cd "$PROJECT_DIR"</p><h1>使用 Python 启动服务器，并用 browser-refresh 实现自动刷新</h1><p>if command -v browser-refresh > /dev/null; then exec browser-refresh -p $PORT python3 -m http.server $PORT & else python3 -m http.server $PORT & BROWSER_PID=$! xdg-open "<a href="https://www.php.cn/link/92df9a438175ad64dbd06312acf13ade">https://www.php.cn/link/92df9a438175ad64dbd06312acf13ade</a>" &</p><h1>提示用户按 Enter 停止服务</h1><p>echo "Server running on <a href="https://www.php.cn/link/92df9a438175ad64dbd06312acf13ade">https://www.php.cn/link/92df9a438175ad64dbd06312acf13ade</a>. Press Enter to stop." read kill $BROWSER_PID fi</p>
赋予执行权限：
chmod +x ~/bin/start-html-preview
步骤二：将脚本接入 dmenu
在你的 dmenu 启动快捷键脚本中（如通过 sxhkd 触发），加入这个选项：
标贝AI虚拟主播
一站式虚拟主播视频生产和编辑平台
69
查看详情
#!/bin/sh
echo "HTML Preview" | dmenu -l 10 | {
read choice
case "$choice" in
"HTML Preview") exec ~/bin/start-html-preview ;;
esac
}
按下快捷键后，dmenu 弹出选项，选择 “HTML Preview” 即可启动服务并打开浏览器。
增强体验：支持热重载
安装 node.js 工具 browser-refresh 或 live-server 提升体验：
npm install -g browser-refresh- 或使用
live-server：更完整，自带自动刷新
替换脚本中的服务启动行为为：
exec live-server --port=8000 "$PROJECT_DIR"
最终效果
按下快捷键 → dmenu 弹出 → 选择预览项 → 自动启动服务 + 打开浏览器 → 编辑 HTML/CSS 文件 → 页面自动刷新。整个流程无需鼠标，适合极简
前端调试。
基本上就这些，不复杂但很实用。配合 vim 和终端复用，就能构建一个真正轻快的前端实验环境。
以上就是Linux dmenu快速启动HTML+CSS实时预览终端的详细内容，更多请关注其它相关文章！
热门内容推荐
快捷栏目导航
