feat: add auto-generated navigation page

- Add generate-nav.sh to scan directories and build index.html - Add nav generation step in workflow before docker build - Replace nginx autoindex with custom nav page - Auto-extract page title from <title> tag
2026-08-23 14:42:11 +00:00
parent 446a677a43
commit 55a9f889da
4 changed files with 119 additions and 22 deletions
@@ -0,0 +1,96 @@
+#!/bin/sh
+# Auto-generate index.html navigation page based on subdirectories
+
+TARGET_DIR="${1:-.}"
+OUTPUT="${TARGET_DIR}/index.html"
+
+cat > "$OUTPUT" << 'HEADER'
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>图解算法 - 导航</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+            padding: 2rem;
+        }
+        .container { max-width: 800px; margin: 0 auto; }
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .subtitle { color: #94a3b8; margin-bottom: 2rem; }
+        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
+        .card {
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 12px;
+            padding: 1.5rem;
+            text-decoration: none;
+            color: #e2e8f0;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        .card:hover {
+            background: rgba(99,102,241,0.15);
+            border-color: rgba(99,102,241,0.4);
+            transform: translateY(-2px);
+        }
+        .card-icon { font-size: 1.5rem; }
+        .card-title { font-weight: 600; font-size: 1rem; }
+        .card-dir { color: #64748b; font-size: 0.8rem; }
+        .empty { color: #64748b; font-style: italic; }
+        footer { margin-top: 3rem; text-align: center; color: #475569; font-size: 0.85rem; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>📚 图解算法</h1>
+        <p class="subtitle">知识可视化集合</p>
+        <div class="grid">
+HEADER
+
+# Scan subdirectories with index.html
+for dir in "$TARGET_DIR"/*/; do
+    [ -d "$dir" ] || continue
+    name=$(basename "$dir")
+    [ "$name" = ".git" ] && continue
+    [ "$name" = ".gitea" ] && continue
+    [ -f "$dir/index.html" ] || continue
+
+    # Try to extract title from index.html
+    title=$(grep -oP '(?<=<title>)[^<]+' "$dir/index.html" 2>/dev/null | head -1)
+    [ -z "$title" ] && title="$name"
+
+    echo "            <a class=\"card\" href=\"/$name/\">" >> "$OUTPUT"
+    echo "                <span class=\"card-icon\">📄</span>" >> "$OUTPUT"
+    echo "                <div>" >> "$OUTPUT"
+    echo "                    <div class=\"card-title\">$title</div>" >> "$OUTPUT"
+    echo "                    <div class=\"card-dir\">/$name</div>" >> "$OUTPUT"
+    echo "                </div>" >> "$OUTPUT"
+    echo "            </a>" >> "$OUTPUT"
+done
+
+# Check if any cards were added
+if ! grep -q 'class="card"' "$OUTPUT"; then
+    echo "            <p class=\"empty">暂无页面</p>" >> "$OUTPUT"
+fi
+
+cat >> "$OUTPUT" << 'FOOTER'
+        </div>
+        <footer>Powered by QwenPaw · 自动生成</footer>
+    </div>
+</body>
+</html>
+FOOTER