通过Rofi菜单选择模板并输入项目名，脚本自动在~/Projects/web下创建含index.html和style.css的项目目录，支持空白、导航栏、卡片三种布局，生成后发送通知并打开文件夹，结合快捷键可实现高效初始化前端项目。
使用 Rofi 一键生成 HTML + CSS 基础项目结构，可以大幅提升前端开发效率，尤其适合快速搭建静态页面原型。结合 Linux 的终端脚本能力与 Rofi 菜单交互，只需一次选择即可自动创建包含 index.html 和 style.css 的标准目录结构。
功能说明
该方案通过一个 Shell 脚本调用 Rofi 弹出菜单，提供多个基础模板选项（如空白页、带导航栏布局、卡片式布局等），用户选择后脚本会在指定目录下自动生成对应的 HTML 和 CSS 文件，并打开编辑器进行后续操作。
实现步骤
以下为完整实现方法：
立即学习“前端免费学习笔记（深入）”；
创建脚本文件：~/.local/bin/create-html-project赋予执行权限：chmod +x ~/.local/bin/create-html-project将以下内容写入脚本：
#!/bin/bash# 项目根目录（可修改）PROJECT_DIR="$HOME/Projects/web"# 确保目录存在mkdir -p "$PROJECT_DIR"# Rofi 菜单选项choice=$(echo -e "blanknnavbarncards" | rofi -dmenu -p "选择模板")# 输入项目名project_name=$(echo "" | rofi -dmenu -p "项目名称")# 验证输入if [ -z "$project_name" ] || [ -z "$choice" ]; then notify-send "❌ 操作取消或输入为空" exit 1fi# 创建项目路径dir_path="$PROJECT_DIR/$project_name"mkdir -p "$dir_path/css"# 根据选择生成文件case $choice in "blank") cat > "$dir_path/index.html" << EOF$project_name 欢迎来到 $project_name
EOF touch "$dir_path/css/style.css" ;; "navbar") cat > "$dir_path/index.html" << EOF$project_name EOF echo ".navbar { display: flex; gap: 1rem; padding: 1rem; background: #f0f0f0; }" > "$dir_path/css/style.css" ;; "cards") cat > "$dir_path/index.html" << EOF $project_name - 导航布局
$project_name EOF echo ".card-container { display: flex; gap: 1rem; padding: 1rem; } .card { border: 1px solid #ddd; padding: 1rem; border-radius: 8px; }" > "$dir_path/css/style.css" ;;esac# 发送通知并打开文件夹notify-send "✅ 项目 '$project_name' 已创建" "路径: $dir_path"xdg-open "$dir_path"
绑定快捷键（推荐）
在桌面环境中为脚本设置快捷键（如 Super+Shift+H），即可实现一键唤起菜单并创建项目。
以 i3 或 Xfce 为例，在快捷键设置中添加：
sh -c '~/.local/bin/create-html-project'
每次按下快捷键，Rofi 菜单弹出，选择模板 → 输入名称 → 自动生成项目，流程流畅高效。
基本上就这些，不复杂但容易忽略细节，比如目录权限和 notify-send 是否安装。确保已安装 rofi、libnotify-bin，脚本路径加入 PATH，就能稳定运行。这个小工具特别适合教学演示或日常练习使用。
以上就是Linux rofi菜单一键生成HTML+CSS基础项目结构的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596249.html
微信扫一扫 
支付宝扫一扫 
