悠悠楠杉
网站页面
LinuxRofi菜单一键生成HTML+CSS基础项目结构
11/28
![]()
在日常的前端开发中，即便是最简单的静态页面，也需要一套基本的文件结构：一个 index.html 入口文件，一个 css 样式目录，有时还需要 images 或 js 文件夹。每次新建项目时手动创建这些目录和基础文件，看似简单，实则重复且容易出错。尤其是在 Linux 桌面环境中，如果能通过一个快捷键调出菜单，选择“新建前端项目”，然后输入项目名称，就能自动完成所有初始化工作，那将极大提升开发流畅度。
这正是 Rofi 的用武之地。
Rofi 并不是一个传统的图形界面应用，而是一个基于文本的、高度可定制的运行器（runner）和菜单工具。它常被用于启动程序、切换窗口或搜索文件，但其强大的脚本支持能力让它可以成为自动化流程的入口。我们完全可以将它改造成一个“项目生成器”。
实现思路并不复杂。首先，在系统中创建一个 Bash 脚本，比如命名为 create-web-project.sh。这个脚本的核心功能是接收用户输入的项目名称，然后在指定目录（如 ~/Projects）下创建同名文件夹，并在其中生成标准结构：
project-name/
├── index.html
├── css/
│ └── style.css
├── images/
└── js/
└── main.js
index.html 不是空文件，而是预置了一个语义化的基本结构：包含 <meta> 标签、正确的字符集声明、视口设置以支持响应式设计，以及对 style.css 和 main.js 的引用。CSS 文件则默认写入一些基础重置样式，比如清除默认边距、设置盒模型为 border-box，并预留注释区块方便后续扩展。
接下来，让 Rofi 接管这个脚本的触发过程。在 i3、bspwm 或其他平铺式窗口管理器中，通常可以通过配置快捷键来启动 Rofi 的自定义模式。例如：
bash
rofi -dmenu -p "New Project:" < ~/.config/rofi/scripts/project-templates.txt | xargs ~/.config/rofi/scripts/handle-project-input.sh
这里，project-templates.txt 可以列出几种项目类型，比如 “HTML+CSS”、“React Starter”、“Static Blog” 等。当前我们只关注第一种。当用户选择后，输入项目名，handle-project-input.sh 脚本会解析输入内容，并调用对应的生成逻辑。
整个流程强调“无感操作”。你按下 Mod+P，输入“landing-page”，回车，不到一秒，项目文件夹已就绪，终端甚至可以自动打开 VS Code 进入该项目目录。这种丝滑体验，正是高效开发环境的体现。
更重要的是，这套机制完全可扩展。未来若需要加入 JavaScript 框架模板、Tailwind 配置或构建工具链，只需在脚本中新增分支判断即可。Rofi 成为了通往各种项目模板的统一入口，而不再是一个孤立的启动器。
值得一提的是，这种方式特别适合教学场景。新手开发者往往卡在“从哪里开始”这一关。有了这个菜单，他们不必记忆复杂的命令行操作，也不必复制粘贴别人的文件结构，只需要几个按键，就能获得一个干净、规范、即开即用的练习环境。老师也可以预先设定好标准模板，确保全班同学使用一致的基础配置。
当然，安全性和路径校验不可忽视。脚本必须检查项目名是否合法（避免特殊字符）、目标路径是否存在、是否已有同名文件夹等。一旦检测到冲突，应通过 notify-send 弹出提示，而不是强行覆盖。
最终，这个看似微小的工具，实际上体现了一种 Linux 哲学：用简单的组件组合出强大的功能。Rofi 提供界面，Shell 脚本处理逻辑，文件系统承载结果——三者协同，完成一次优雅的自动化旅程。它不依赖任何重型 IDE 或图形化向导，却能在极短时间内完成专业级的项目初始化。
对于追求极简与效率的开发者而言，这才是真正的“现代工作流”。
