2026-08-23 14:42:11 +00:00
|
|
|
#!/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;
|
2026-08-23 14:57:45 +00:00
|
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 50%, #dfe6ed 100%);
|
2026-08-23 14:42:11 +00:00
|
|
|
min-height: 100vh;
|
2026-08-23 14:57:45 +00:00
|
|
|
color: #1e293b;
|
2026-08-23 14:42:11 +00:00
|
|
|
padding: 2rem;
|
|
|
|
|
}
|
|
|
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
|
|
|
h1 {
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
margin-bottom: 0.5rem;
|
2026-08-23 14:57:45 +00:00
|
|
|
color: #1e293b;
|
2026-08-23 14:42:11 +00:00
|
|
|
}
|
2026-08-23 14:57:45 +00:00
|
|
|
.subtitle { color: #64748b; margin-bottom: 2rem; font-size: 1.1rem; }
|
2026-08-23 14:42:11 +00:00
|
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
|
|
|
|
|
.card {
|
2026-08-23 14:57:45 +00:00
|
|
|
background: #ffffff;
|
|
|
|
|
border: 1px solid #e2e8f0;
|
2026-08-23 14:42:11 +00:00
|
|
|
border-radius: 12px;
|
|
|
|
|
padding: 1.5rem;
|
|
|
|
|
text-decoration: none;
|
2026-08-23 14:57:45 +00:00
|
|
|
color: #1e293b;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
2026-08-23 14:42:11 +00:00
|
|
|
transition: all 0.2s;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.card:hover {
|
2026-08-23 14:57:45 +00:00
|
|
|
background: #faf5ff;
|
|
|
|
|
border-color: #c4b5fd;
|
|
|
|
|
box-shadow: 0 4px 12px rgba(139,92,246,0.1);
|
2026-08-23 14:42:11 +00:00
|
|
|
transform: translateY(-2px);
|
|
|
|
|
}
|
|
|
|
|
.card-icon { font-size: 1.5rem; }
|
|
|
|
|
.card-title { font-weight: 600; font-size: 1rem; }
|
2026-08-23 14:57:45 +00:00
|
|
|
.card-dir { color: #94a3b8; font-size: 0.8rem; }
|
|
|
|
|
.empty { color: #94a3b8; font-style: italic; }
|
|
|
|
|
footer { margin-top: 3rem; text-align: center; color: #94a3b8; font-size: 0.85rem; }
|
2026-08-23 14:42:11 +00:00
|
|
|
</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
|
2026-08-23 14:48:01 +00:00
|
|
|
echo ' <p class="empty">暂无页面</p>' >> "$OUTPUT"
|
2026-08-23 14:42:11 +00:00
|
|
|
fi
|
|
|
|
|
|
|
|
|
|
cat >> "$OUTPUT" << 'FOOTER'
|
|
|
|
|
</div>
|
2026-08-23 14:57:45 +00:00
|
|
|
<footer>Powered by QwenPaw · 图解算法</footer>
|
2026-08-23 14:42:11 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
FOOTER
|
