rofi菜单一键生成HTML+CSS完整项目结构！-html教程-PHP中文网

rofi菜单一键生成HTML+CSS完整项目结构！

雪夜

发布： 2025-11-16 15:21:06

原创

130人浏览过

答案：通过Shell脚本与rofi集成实现HTML+CSS项目一键创建。首先编写脚本生成包含css、js、images目录及基础文件的项目结构，并填充默认HTML内容；接着创建rofi菜单脚本，提供web、blog、dashboard等选项，调用对应项目生成逻辑；最后配置模板预设，在主脚本中添加模板选择功能，利用rofi列出~/templates中的HTML模板并复制到新项目中，实现多场景快速初始化。

rofi菜单一键生成html+css完整项目结构！

如果您希望快速生成一个包含HTML和CSS的完整项目结构，并通过rofi菜单一键完成创建，可以借助脚本自动化实现该流程。以下是具体操作步骤：

本文运行环境：ThinkPad X1 Carbon，Ubuntu 24.04

一、使用Shell脚本自动生成项目结构

通过编写一个简单的Shell脚本，可以在指定目录下自动创建标准的HTML+CSS项目文件夹结构，并初始化基础文件。

1、打开终端，输入以下命令创建脚本文件：nano create_html_project.sh

立即学习“前端免费学习笔记（深入）”；

2、将以下内容粘贴到编辑器中：

#!/bin/bash
read -p "请输入项目名称: " project_name
mkdir -p "$project_name"/{css,js,images}
touch "$project_name"/index.html
touch "$project_name"/css/style.css
touch "$project_name"/js/main.js
echo "<!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>
  <script src='js/main.js'></script>
</body>
</html>" > "$project_name/index.html"
echo "项目 $project_name 已成功创建！"

登录后复制

3、保存并退出编辑器，然后运行命令赋予脚本执行权限：chmod +x create_html_project.sh

4、执行脚本：./create_html_project.sh，根据提示输入项目名即可生成完整结构。

二、集成rofi菜单实现图形化选择

利用rofi提供图形界面选项，让用户通过键盘快捷方式触发不同项目的创建动作。

1、确保已安装rofi，若未安装，请运行：sudo apt install rofi -y

2、创建一个新的启动脚本：nano rofi_project_launcher.sh

3、插入如下内容：

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

#!/bin/bash
option=$(echo -e "web\nblog\ndashboard" | rofi -dmenu -p "选择项目类型")
case $option in
  web)
    ./create_html_project.sh
    ;;
  blog)
    mkdir -p blog_{css,js,images}
    touch blog_index.html
    echo "简易博客结构已创建"
    ;;
  dashboard)
    mkdir -p dashboard/{css,js,img}
    touch dashboard/index.html dashboard/css/styles.css
    echo "<html><head><link rel='stylesheet' href='css/styles.css'></head><body><div class='dashboard'>仪表板页面</div></body></html>" > dashboard/index.html
    ;;
esac

登录后复制

4、为新脚本添加执行权限：chmod +x rofi_project_launcher.sh

5、绑定快捷键或直接运行脚本调用rofi菜单，选择对应模板生成项目。