preview-import

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Preview Import

预览导入

Open and verify imported content in local development server.

在本地开发服务器中打开并验证导入的内容。

When to Use This Skill

何时使用该Skill

Use this skill when:

You have generated HTML file (from generate-import-html)
Ready to preview in browser and verify rendering
Need to compare with original page structure

Invoked by: page-import skill (Step 5)

使用本Skill的场景：

已生成HTML文件（来自generate-import-html）
准备在浏览器中预览并验证渲染效果
需要与原始页面结构对比

调用方： page-import skill（步骤5）

Prerequisites

前置条件

From previous skills, you need:

✅ HTML file at correct path (from generate-import-html)
✅ Images folder in same directory
✅ screenshot.png from scrape-webpage (for comparison)
✅ documentPath from metadata.json (for URL construction)

需具备来自之前Skill的以下内容：

✅ 位于正确路径的HTML文件（来自generate-import-html）
✅ 同一目录下的Images文件夹
✅ 来自scrape-webpage的screenshot.png（用于对比）
✅ 来自metadata.json的documentPath（用于构建URL）

Related Skills

Preview Workflow

预览流程

Step 1: Start Development Server with HTML Folder Flag

步骤1：使用HTML文件夹标志启动开发服务器

Determine the folder from metadata.json:

Look at
```
paths.dirPath
```
from metadata.json (e.g.,
```
/us
```
)
This is the root folder containing your imported HTML file

Command:

bash

aem up --html-folder {dirPath}

Examples based on imported content location:

HTML File Location Command Preview URL

HTML File Location	Command	Preview URL
`us/en.plain.html`	`aem up --html-folder us`	`http://localhost:3000/us/en`
`products/widget.plain.html`	`aem up --html-folder products`	`http://localhost:3000/products/widget`
`blog/2024/post.plain.html`	`aem up --html-folder blog`	`http://localhost:3000/blog/2024/post`

us/en.plain.html

aem up --html-folder us

http://localhost:3000/us/en

products/widget.plain.html

aem up --html-folder products

http://localhost:3000/products/widget

blog/2024/post.plain.html

aem up --html-folder blog

http://localhost:3000/blog/2024/post

Why this is required:

Without
```
--html-folder
```
, AEM CLI proxies requests to the remote server
The remote server doesn't have your locally imported content
Result: 404 "Page not found" errors

从metadata.json中确定文件夹：

查看metadata.json中的
```
paths.dirPath
```
（例如：
```
/us
```
）
这是包含您导入的HTML文件的根文件夹

命令：

bash

aem up --html-folder {dirPath}

根据导入内容位置的示例：

HTML文件位置命令预览URL

HTML文件位置	命令	预览URL
`us/en.plain.html`	`aem up --html-folder us`	`http://localhost:3000/us/en`
`products/widget.plain.html`	`aem up --html-folder products`	`http://localhost:3000/products/widget`
`blog/2024/post.plain.html`	`aem up --html-folder blog`	`http://localhost:3000/blog/2024/post`

us/en.plain.html

aem up --html-folder us

http://localhost:3000/us/en

products/widget.plain.html

aem up --html-folder products

http://localhost:3000/products/widget

blog/2024/post.plain.html

aem up --html-folder blog

http://localhost:3000/blog/2024/post

为何需要此操作：

如果不使用
```
--html-folder
```
，AEM CLI会将请求代理到远程服务器
远程服务器没有您本地导入的内容
结果：出现404“页面未找到”错误

Step 2: Navigate in Browser

步骤2：在浏览器中访问

For most files, use the document path directly:

http://localhost:3000${documentPath}

Example:

HTML file:
```
us/en/about.plain.html
```
URL:
```
http://localhost:3000/us/en/about
```

IMPORTANT: For index files, use
/
instead of
/index
:

If file is: index.plain.html
Preview at: http://localhost:3000/
NOT: http://localhost:3000/index

Note: If you used

--html-folder

flag (e.g.,

aem up --html-folder drafts

), prepend that folder to the URL:

File: drafts/test.plain.html
URL: http://localhost:3000/drafts/test

Use

paths.documentPath

from metadata.json, but for index files ensure the path is

not

/index

对于大多数文件，直接使用文档路径：

http://localhost:3000${documentPath}

示例：

HTML文件：
```
us/en/about.plain.html
```
URL：
```
http://localhost:3000/us/en/about
```

重要提示：对于索引文件，使用
/
而非
/index
：

如果文件是：index.plain.html
预览地址：http://localhost:3000/
而非：http://localhost:3000/index

注意：如果您使用了
--html-folder
标志（例如：
aem up --html-folder drafts
），请在URL前添加该文件夹：

文件：drafts/test.plain.html
URL：http://localhost:3000/drafts/test

使用metadata.json中的

paths.documentPath

，但对于索引文件，请确保路径为

而非

/index

Step 3: Verify Rendering

步骤3：验证渲染效果

Check the following:

✅ Blocks render with correct styling
✅ Layout matches original page structure (compare to screenshot.png)
✅ Images load (or show appropriate placeholders)
✅ No raw HTML visible
✅ Metadata appears in page source (view source, check
```
<meta>
```
tags)
✅ Section styling applied correctly

检查以下内容：

✅ 区块使用正确样式渲染
✅ 布局与原始页面结构匹配（与screenshot.png对比）
✅ 图片加载正常（或显示合适的占位符）
✅ 无原始HTML内容可见
✅ 元数据出现在页面源代码中（查看源代码，检查
```
<meta>
```
标签）
✅ 区块样式正确应用

Step 4: Compare with Original

步骤4：与原始页面对比

Side-by-side comparison:

Open
```
./import-work/screenshot.png
```
alongside browser preview
Check that content structure matches
Verify blocks decorated correctly
Confirm section boundaries align
Validate styling consistency

并排对比：

在浏览器预览窗口旁打开
```
./import-work/screenshot.png
```
检查内容结构是否匹配
验证区块是否正确装饰
确认区块边界对齐
验证样式一致性

Troubleshooting

问题排查

Blocks don't render correctly:

Check HTML structure matches expected format
Verify block names match exactly (case-sensitive)

Review

../page-import/resources/html-structure.md

for format guidance

Images not loading:

Verify images folder is in same directory as HTML file
Check image paths are
```
./images/...
```
format
Ensure images were copied correctly from
```
./import-work/images/
```

Raw HTML visible:

Block name might not match existing block in project
Check browser console for JavaScript errors
Verify block exists in
```
blocks/
```
directory

Metadata not in page source:

Check metadata block is at end of HTML file
View page source and search for
```
<meta>
```
tags in
```
<head>
```
Verify metadata properties match expected format

Dev server not running:

Start server with
```
aem up
```
Check for port conflicts (default 3000)
Verify you're in correct project directory

Page not found (404):

Most common cause: Missing
```
--html-folder
```
flag - restart server with
```
aem up --html-folder {dirPath}
```
Verify HTML file exists at expected path
Check documentPath from metadata.json matches URL
For index files, use
```
/index
```
not
```
/
```
Check terminal output confirms "Serving HTML files from folder: {folder}"

区块渲染不正确：

检查HTML结构是否符合预期格式
验证区块名称是否完全匹配（区分大小写）

查看

../page-import/resources/html-structure.md

获取格式指导

图片无法加载：

验证Images文件夹与HTML文件位于同一目录
检查图片路径为
```
./images/...
```
格式
确保图片已从
```
./import-work/images/
```
正确复制

原始HTML内容可见：

区块名称可能与项目中现有区块不匹配
检查浏览器控制台是否有JavaScript错误
验证区块是否存在于
```
blocks/
```
目录中

元数据未出现在页面源代码中：

检查元数据区块是否位于HTML文件末尾
查看页面源代码，在
```
<head>
```
中搜索
```
<meta>
```
标签
验证元数据属性是否符合预期格式

开发服务器未运行：

使用
```
aem up
```
启动服务器
检查端口冲突（默认3000）
确认您处于正确的项目目录中

页面未找到（404）：

最常见原因： 缺少
```
--html-folder
```
标志 - 使用
```
aem up --html-folder {dirPath}
```
重启服务器
验证HTML文件是否存在于预期路径
检查metadata.json中的documentPath是否与URL匹配
对于索引文件，使用
```
/index
```
而非
```
/
```
检查终端输出是否确认“Serving HTML files from folder: {folder}”

Output

输出结果

This skill provides:

✅ Verified preview that matches original page structure
✅ Visual confirmation of correct rendering
✅ Validated block decoration
✅ Confirmed metadata presence

Import complete when all verification points pass.

本Skill提供以下内容：

✅ 与原始页面结构匹配的已验证预览
✅ 渲染效果正确的可视化确认
✅ 已验证的区块装饰
✅ 确认元数据存在

当所有验证项通过后，导入完成。