选择“HTML Preview”后，dmenu触发脚本启动Python服务器并在8000端口预览~/projects/html-preview中的文件，自动打开浏览器并支持热重载，实现快速编辑与实时刷新。
想要通过 dmenu 快速启动一个能实时预览 HTML + CSS 的轻量级开发环境？可以结合 dmenu、shell 脚本和一个极简的本地服务器来实现快速编辑与预览，无需打开重型 IDE 或浏览器手动刷新。
利用 dmenu 选择并触发一个前端预览脚本，该脚本启动一个本地 HTTP 服务（如 Python 的 http.server），自动打开默认浏览器，并监听文件变化后自动刷新页面，实现“一键预览”效果。
创建一个脚本，比如 ~/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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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 启动快捷键脚本中（如通过 sxhkd 触发），加入这个选项：
#!/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-refreshlive-server：更完整，自带自动刷新替换脚本中的服务启动行为为：
exec live-server --port=8000 "$PROJECT_DIR"
按下快捷键 → dmenu 弹出 → 选择预览项 → 自动启动服务 + 打开浏览器 → 编辑 HTML/CSS 文件 → 页面自动刷新。整个流程无需鼠标，适合极简前端调试。
基本上就这些，不复杂但很实用。配合 vim 和终端复用，就能构建一个真正轻快的前端实验环境。
以上就是Linux dmenu快速启动HTML+CSS实时预览终端的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
198
收藏
