identify-page-structure

用途

identify-page-structure 是一个用于分析网页结构的技能，主要服务于 AEM Edge Delivery Services 的页面导入（page-import）流程。当已经完成网页抓取、拿到截图、HTML 和元数据后，使用该技能来识别页面的区块边界和内容序列，从而在做出创作决策之前先理解页面结构。

该技能由 page-import 技能在第二步（Step 2）调用。

前置条件

来自 scrape-webpage 技能，需要以下输入：

• screenshot.png：展示完整页面
• cleaned.html：包含页面内容
• metadata.json：包含路径信息

相关技能

• page-import：调用本技能的编排器
• scrape-webpage：提供输入（截图、HTML）
• page-decomposition：本技能对每个区块调用它
• block-inventory：本技能调用它来盘点可用区块
• authoring-analysis：使用本技能的输出做出创作决策

核心概念

内容遵循严格的两级层级结构：

DOCUMENT
├── SECTION（顶层容器，可带元数据）
│   ├── Content Sequence 1（默认内容或区块）
│   ├── Content Sequence 2（默认内容或区块）
│   └── ...
├── SECTION
│   └── Content Sequence 1
└── ...

本技能分析两个层级：

• 第一级：区块边界（Step 2a）
• 第二级：每个区块内部的内容序列（Step 2b，逐区块进行）

结构识别工作流

Step 2a：识别区块边界（第一级）

查看截图，找出指示新区块的视觉或主题断点。

区块边界的视觉线索：

• 背景颜色变化（白 → 灰 → 深色 → 白）
• 间距/内边距变化（紧凑 → 宽松 → 正常）
• 明显的水平分隔或分割线
• 主题内容切换

需要排除的内容：

• 页眉/导航（自动填充）
• 页脚（自动填充）
• Cookie 横幅、弹窗

对每个区块记录：

• 区块编号（顺序：1、2、3……）
• 视觉样式（浅色、深色、灰色、强调色）
• 内容简要概述

示例输出：

Section 1: light background, hero content
Section 2: light background, grid of features
Section 3: grey background, article cards
Section 4: dark background, tabs

Step 2b：分析每个区块内部的内容序列（第二级）

对 Step 2a 中识别出的每个区块，分析其内部内容序列。

什么是“内容序列”？

一段垂直排列的相关内容流，它将成为以下两者之一：

• 默认内容（标题、段落、列表、内联图片）
• 区块（结构化、重复或交互式组件）

序列之间的断点：

• 从默认内容 → 区块
• 从区块 → 不同区块
• 从区块 → 默认内容

对每个区块调用 page-decomposition 技能，获取中性描述。

对每个区块获取：

Sequence 1: [中性描述——暂不使用区块名称]
Sequence 2: [中性描述]
...

示例输出：

Section 1 (light):
  - Sequence 1: Large centered heading, paragraph, two buttons
  - Sequence 2: Two images displayed side-by-side

Section 2 (light):
  - Sequence 1: Centered heading
  - Sequence 2: Grid of 8 items, each with icon and short text
  - Sequence 3: Two centered buttons

Section 3 (grey):
  - Sequence 1: Eyebrow text, heading, paragraph, button
  - Sequence 2: Four items in grid, each with image, category tag, heading, description

Section 4 (dark):
  - Sequence 1: Tab navigation with three switchable content panels

Step 2.5：盘点可用区块

停止：在做出任何创作决策之前，先了解有哪些可用区块。

调用 block-inventory 技能，编目可用区块。

为什么重要：

真实作者会查看区块库并从可用选项中挑选。你需要同样的上下文，才能按照 David's Model 做出真实的创作决策。

提供的内容：

• 项目中已有的本地区块
• 可添加的 Common Block Collection 区块
• 每个区块的用途/描述
• 在线示例 URL

示例输出：

Available Blocks:

LOCAL BLOCKS:
- custom-banner: Special promotional banner
- testimonial-slider: Customer testimonials carousel

BLOCK COLLECTION AVAILABLE:
- hero: Large heading, text, buttons for page intro
- cards: Grid of items with images/text
- columns: Side-by-side content layout
- accordion: Expandable Q&A sections
- tabs: Switchable content panels
- carousel: Rotating image/content displays
- quote: Highlighted testimonials
- fragment: Reusable content sections

输出格式

本技能提供完整的页面结构：

1. 带样式的区块边界：

Section 1: light background
Section 2: light background
Section 3: grey background (#f5f5f5)
Section 4: dark background (#1a1a1a)

1. 每个区块的内容序列（中性描述）：

Section 1 (light):
  - Sequence 1: Large centered heading, paragraph, two call-to-action buttons
  - Sequence 2: Two images displayed side-by-side

Section 2 (light):
  - Sequence 1: Single centered heading
  - Sequence 2: Grid of 8 items, each with icon and short text
  - Sequence 3: Two centered buttons

[Continue for all sections...]

1. 区块清单：

LOCAL BLOCKS: [list]
BLOCK COLLECTION AVAILABLE: [list with purposes]

下一步：将这些输出传递给 authoring-analysis 技能。

关键原则

两级分析是强制性的：

• 必须先识别区块（2a）
• 然后分析每个区块的内容序列（2b）
• 不要跳过层级或合并层级

在此阶段保持中性：

• 描述你看到的内容，而不是它应该是什么
• 说“Grid of items with images”，而不是“Cards block”
• 创作决策在下一个技能中进行

决策前先盘点区块：

• 在做出任何创作选择之前先盘点区块
• 作者查看区块库并挑选——你需要同样的上下文

适用场景

• 已获得网页抓取输出（截图、HTML、元数据）
• 需要识别区块边界和内容序列
• 准备在做出创作决策之前理解页面结构

限制

资料未提供关于收费、价格、平台支持范围、性能效果等方面的信息。