首页 > 文章 > 前端

Rofi快速生成HTMLCSS项目结构教程

时间：2025-12-01 20:00:40 234浏览收藏

还在手动创建HTML+CSS项目结构？试试Rofi一键生成！本教程教你如何利用Rofi菜单，通过简单选择和输入项目名，快速在~/Projects/web目录下生成包含index.html和style.css的基础前端项目结构。支持空白页、导航栏、卡片布局等多种模板，生成后自动发送通知并打开项目文件夹，极大地提升前端开发效率，尤其适合快速原型开发。结合Linux终端脚本和快捷键，只需一键即可完成项目初始化，让前端开发更加便捷高效。快来体验Rofi带来的高效开发流程吧！

通过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\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
<!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"
        ;;
    "navbar")
        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>
    <nav class="navbar">
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">联系</a>
    </nav>
    <main>
        <h1>$project_name - 导航布局</h1>
    </main>
</body>
</html>
EOF
        echo ".navbar { 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>
        <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，就能稳定运行。这个小工具特别适合教学演示或日常练习使用。

本篇关于《Rofi快速生成HTMLCSS项目结构教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！