新闻中心

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

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

linux rofi菜单一键生成html+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 "blank\nn*bar\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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>$project_name</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>欢迎来到 $project_name</h1>
</body>
</html>
EOF
        touch "$dir_path/css/style.css"
        ;;
    "n*bar")
        cat > "$dir_path/index.html" << EOF
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>$project_name</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <n* class="n*bar">
        <a href=&quot;#">首页</a>
        <a href="#">关于</a>
        <a href="#">联系</a>
    </n*>
    <main>
        <h1>$project_name - 导航布局</h1>
    </main>
</body>
</html>
EOF
        echo ".n*bar { display: flex; gap: 1rem; padding: 1rem; background: #f0f0f0; }" > "$dir_path/css/style.css"
        ;;
    "cards")
        cat > "$dir_path/index.html" << EOF
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>$project_name</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="card-container">
        <div class="card"><h3>卡片 1</h3><p>描述内容</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2294">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/175712858367437.png" alt="ChatCut">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2294">ChatCut</a>
                            <p>AI视频剪辑工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ChatCut">
                                <span>1086</span>
                            </div>
                        </div>
                        <a href="/ai/2294" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ChatCut">
                        </a>
                    </div>
                </div>
        <div class="card"><h3>卡片 2</h3><p>描述内容</p></div>
        <div class="card"><h3>卡片 3</h3><p>描述内容</p></div>
    </div>
</body>
</html>
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基础项目结构的详细内容，更多请关注其它相关文章！


# 加载  # 长治seo公司询问13火星  # 天猫店网站优化获客  # 网站建设路美食  # 丰都网站关键词推广  # 创意营销推广文案怎么写  # 云南营销推广加盟电话号码  # 晋江网站建设指南最新  # 泉州永春seo优化推广  # 营销项目选题网站建设  # 营销推广底层逻辑分析  # 无闪烁  # 多个  # 就能  # css  # 拖放  # 自动生成  # 表单  # 弹出  # 鼠标  # 一键  # ai  # 前端开发  # 工具  # 前端  # html  # linux 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： Fabric模组开发：自定义物品与物品组的现代管理方法  天眼查怎么看公司融资情况 天眼查企业融资历史查询步骤【攻略】  KFC套餐升级怎么获取优惠代码_KFC套餐升级活动与优惠代码获取方法  黑鲨3Pro怎样在相册开漫画风滤镜_iPhone黑鲨3Pro相册开漫画风滤镜【趣味滤镜】  MAC如何将整个网页截长图_MAC使用Safari的导出为PDF或第三方工具  深入理解Promise链：如何在catch后中断then的执行  KFC早餐时段怎么领特惠代码_KFC早餐订餐优惠代码获取与使用说明  J*aScript中localStorage数据的获取、清洗与格式化教程  Yandex官网搜索引擎免登录_俄罗斯Yandex一键直达入口  Mac怎么使用表情符号_Mac Emoji快捷键面板  Sublime怎么配置Nim语言环境_Sublime Nim代码高亮与补全  如何在Python中使用Optional类型处理可变对象并避免Pylint警告  为什么我的微信朋友圈看不到别人的更新_微信朋友圈更新显示异常解决方法  漫蛙网页登录入口 漫蛙漫画官方授权网址  windows10怎么查看本机ip_windows10命令提示符ipconfig使用  126邮箱网页版官方入口 126邮箱账号在线登录平台  AO3官方镜像站点汇总 AO3同人作品网页版直达链接  电脑IP地址怎么查 查看本机IP地址的几种方法  vivo浏览器自带的下载器速度慢怎么办 vivo浏览器提升文件下载速度的技巧  Tabulator表格中精确实现日期时间排序的指南  解决 MongoDB 聚合查询中对象数组 _id 匹配问题  PyTorch模型训练效果不佳？深入剖析常见错误与调试技巧  cad如何更改注释性对象的比例_cad注释性比例调整方法  抖音极速版最新版本 抖音极速版官方下载地址  React中useState与局部变量：理解组件状态管理与渲染机制  Tabulator表格日期时间排序问题及自定义解决方案  Go语言中对Map值调用带指针接收者方法：原理与最佳实践  QQ邮箱网页版邮箱入口 QQ邮箱官方登录平台  css子元素高度不一致导致布局错位怎么办_使用align-items:stretch解决高度差异  UC浏览器如何安装插件 UC浏览器添加扩展程序详细教程【进阶】  在J*a中如何开发简易博客标签推荐系统_博客标签推荐项目实战解析  使用Python高效删除Word宏并转换DOCM为DOCX格式  Windows10怎么开启夜间模式 Windows10系统设置调整色温与亮度缓解夜间用眼疲劳【教程】  12306怎么选座位选到安静区_12306选座安静区域选择策略  2025AO3夸克浏览器通道_AO3手机HTTPS安全入口分享  C++如何操作注册表_Windows平台下C++读写注册表的API函数详解  怎么在html里运行vbs脚本_html中运行vbs脚本方法【教程】  QQ邮箱网页版快速登录 QQ邮箱邮箱账号官方入口地址  Win11怎么开启卓越性能模式 Win11电源选项启用高性能释放硬件潜力【方法】  优化 Jest 模拟：强制未实现函数抛出错误以提升测试效率  在J*a中如何隐藏复杂性_使用门面模式组织对象交互  汽车之家官方网站官网入口_汽车之家网页版直接进入  抖音从哪里进入网页版_抖音官方入口链接  抖音创作助手登录入口_抖音创作辅助工具官网直达  J*aScript中如何高效提取对象指定属性  EMS快递官网app_中国邮政速递物流手机客户端  win11专注助手在哪 Win11免打扰模式设置与自动化规则【指南】  期待已久：小米17 Ultra、小米首款NAS本月登场  将HTML Canvas内容转换为可上传的图像文件（File对象）  C++ map遍历方法大全_C++ map迭代器使用总结 

上一篇：解决J*aScript预加载器内容泄露（FOUC）问题：一种稳健的实现方法
下一篇：理解React中useState状态在事件回调中滞后的问题与解决方案

搜索