Linux rofi菜单一键生成HTML+CSS基础项目结构_技术学院_宜昌市隼壹珍商贸有限公司

您好,欢迎访问宜昌市隼壹珍商贸有限公司

400 890 5375
当前位置: 主页 > 新闻动态 > 技术学院

Linux rofi菜单一键生成HTML+CSS基础项目结构

发布时间:2025-11-17  |  点击率:
通过Rofi菜单选择模板并输入项目名,脚本自动在~/Projects/web下创建含index.html和style.css的项目目录,支持空白、导航栏、卡片三种布局,生成后发送通知并打开文件夹,结合快捷键可实现高效初始化前端项目。

使用 Rofi 一键生成 HTML + CSS 基础项目结构,可以大幅提升前端开发效率,尤其适合快速搭建静态页面原型。结合 Linux 的终端脚本能力与 Rofi 菜单交互,只需一次选择即可自动创建包含 index.htmlstyle.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 "blank\nnavbar\ncards" | rofi -dmenu -p "选择模板")

# 输入项目名
project_name=$(echo "" | rofi -dmenu -p "项目名称")

# 验证输入
if [ -z "$project_name" ] || [ -z "$choice" ]; then
    notify-send "❌ 操作取消或输入为空"
    exit 1
fi

# 创建项目路径
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

$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

卡片 1

描述内容

卡片 2

描述内容

卡片 3

描述内容

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,就能稳定运行。这个小工具特别适合教学演示或日常练习使用。

全国统一服务电话

400 890 5375

电子邮箱:879577@qq.com

公司地址:宜昌市西陵区黄河路5号三峡明珠10栋1051室

咨询微信

TEL:13680874598