Menu
创建多页面导航入口，整合多个独立 HTML 文件为统一的导航中心
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| type | skill |
| name | multi-page-hub |
| description | 创建多页面导航入口，整合多个独立 HTML 文件为统一的导航中心 |
根据现有 HTML 文件自动创建导航入口页面，将多个独立的 HTML 文件整合为一个统一的导航中心。
首先询问用户或从上下文中获取：
如果用户提供了目录，使用 Glob 工具查找该目录下的所有 HTML 文件。
读取 1-2 个已有的 HTML 文件，提取：
创建 index.html 文件，包含：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[导航入口标题]</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
/* CSS 样式 */
</style>
</head>
<body>
<div class="container">
<!-- 左侧导航 -->
<nav class="sidebar">
<div class="logo">
<i class="[logo图标]"></i>
<span>[标题]</span>
</div>
<ul class="nav-menu" id="navMenu">
<!-- 菜单项将由 JS 生成 -->
</ul>
</nav>
<!-- 右侧内容区 -->
<main class="main-content">
<iframe id="contentFrame" src="[第一个页面]"></iframe>
</main>
</div>
<script>
// JavaScript 逻辑
</script>
</body>
</html>
:root {
--primary-color: [提取的主色调];
--sidebar-width: 260px;
--header-height: 60px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
background: #f5f7fa;
overflow: hidden;
}
.container {
display: flex;
height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
width: var(--sidebar-width);
background: linear-gradient(180deg, var(--primary-color), [深色变体]);
color: white;
display: flex;
flex-direction: column;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.logo {
padding: 20px;
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo i {
font-size: 24px;
}
.nav-menu {
list-style: none;
padding: 10px 0;
flex: 1;
overflow-y: auto;
}
.nav-item {
padding: 12px 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.nav-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.nav-item.active {
background: rgba(255, 255, 255, 0.15);
border-left-color: white;
font-weight: 600;
}
.nav-item .number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 12px;
font-weight: 600;
}
/* 右侧内容区 */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
#contentFrame {
width: 100%;
height: 100vh;
border: none;
background: white;
}
// 菜单配置
const menuItems = [
{ number: '01', icon: 'fas fa-home', name: '[菜单名称1]', url: '[页面1.html]' },
{ number: '02', icon: 'fas fa-file-alt', name: '[菜单名称2]', url: '[页面2.html]' },
// ... 更多菜单项
];
const navMenu = document.getElementById('navMenu');
const contentFrame = document.getElementById('contentFrame');
// 生成菜单
menuItems.forEach((item, index) => {
const li = document.createElement('li');
li.className = 'nav-item' + (index === 0 ? ' active' : '');
li.innerHTML = `
<span class="number">${item.number}</span>
<i class="${item.icon}"></i>
<span>${item.name}</span>
`;
li.addEventListener('click', () => loadPage(item.url, li));
navMenu.appendChild(li);
});
// 加载页面
function loadPage(url, element) {
contentFrame.src = url;
document.querySelectorAll('.nav-item').forEach(item => {
item.classList.remove('active');
});
element.classList.add('active');
}
完成后向用户展示：
✅ 多页面导航入口已创建完成！
📁 文件位置：[目录]/index.html
📋 菜单项与跳转目标对照表：
┌──────┬─────────────────────┬──────────────────────┐
│ 编号 │ 菜单名称 │ 目标文件 │
├──────┼─────────────────────┼──────────────────────┤
│ 01 │ [菜单名称1] │ [页面1.html] │
│ 02 │ [菜单名称2] │ [页面2.html] │
└──────┴─────────────────────┴──────────────────────┘
🚀 使用方法：
直接用浏览器打开 index.html 即可使用。
常用图标（Font Awesome）：
fas fa-home - 首页fas fa-file-alt - 文档fas fa-book - 教程/课程fas fa-tools - 工具fas fa-chart-bar - 图表/数据fas fa-cog - 设置fas fa-user - 用户fas fa-graduation-cap - 教育/培训fas fa-lightbulb - 创意/场景fas fa-rocket - 战略/启动字体风格自适应提示生成器 - 输入任意文字，自动生成专业字体设计提示词并生成图片
Automatically add "Save as PNG" screenshot functionality to HTML files. Use this skill whenever the user mentions: adding screenshot functionality to HTML, converting HTML to images, saving web pages as pictures, creating downloadable screenshots from HTML, adding export-to-image buttons, generating PNG from HTML content, or when they need to capture long scrolling HTML pages as complete images. Also trigger when users mention html2canvas, full-page screenshots, or need to share HTML content as image files.
Use this skill whenever the user needs to extract knowledge and experiences from organizations, including AI implementation, digital transformation, organizational change, business innovation, and best practices documentation. Typical triggers: - "萃取XX经验" (Extract XX experience) - "萃取知识" (Extract knowledge) - "设计访谈提纲" (Design interview outline) - "萃取报告" (Extraction report) - "AI萃取" (AI extraction) - "知识萃取" (Knowledge extraction) - "经验萃取" (Experience extraction) - "最佳实践" (Best practices) - "案例总结" (Case study summary) - Any task involving extracting, summarizing, or documenting experiences from organizations This skill automatically handles: 1. Auto-detection of input type (single file vs batch folder) 2. Zero-confirmation pipeline: text extraction → Agent萃取 → Agent渲染 → 验证 3. Pipeline status tracking with visual summary 4. Interview outline generation for 4 types of interviewees 5. Extraction report generation using extraction-schema.json + report-template.html ## Pipeline Sub-Agents (called automatically) -
从访谈录音/文本中萃取结构化知识。TRIGGER when: 用户需要"萃取"、"提取知识"、"访谈分析"、 "知识萃取报告"、从DOCX/TXT提取专家经验。支持单文件和多文件综合萃取，自动检测输入类型。 输出严格按 extraction-schema.json 的 JSON 结构。 SKIP: 生成 HTML/PPTX/DOCX 交付物（那是 zhongwen-content 的职责）。
Use this skill whenever the user wants to convert any file format to Markdown. Supports PDF, DOCX, PPTX, XLSX, audio, video, images, and more. This is Microsoft's markitdown tool that converts various document formats to clean Markdown text.
Use this skill whenever the user needs to extract knowledge and experiences from Ping An (平安) related organizations, including Ping An Life Insurance (平安人寿), Ping An Zhiniao (平安知鸟), Ping An Bank (平安银行), Ping An Good Doctor (平安好医生), Ping An Technology (平安科技), and other Ping An subsidiaries. Typical triggers: - "萃取平安XX经验" (Extract Ping An XX experience) - "萃取平安知识" (Extract Ping An knowledge) - "设计访谈提纲" (Design interview outline) - "萃取报告" (Extraction report) - "平安AI萃取" (Ping An AI extraction) - "平安知识萃取" (Ping An knowledge extraction) - "平安经验萃取" (Ping An experience extraction) - Any task involving extracting, summarizing, or documenting experiences from Ping An organizations This skill automatically handles: 1. Batch document conversion (DOCX/XLSX/PPTX → Markdown) for fast processing 2. Parallel chunk-based processing (9-part methodology for large projects) 3. Interview outline generation for 4 types of interviewees (strategic, business, IT product, execution) 4. Extraction report generation using 4 frameworks