内容创作
#ai
preview-import
Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s.
DeepseekModel
官方收录技能
质量 优秀 · 78
v1.0.0
获取
https://deepseekmodel.com/api/download.php?id=adobe-skills-plugins-aem-edge-delivery-services-skills-preview-import-skill-md&format=skill
下载 .skill
标准格式，含 system_prompt 与 model_config，导入任意 Agent 框架即可使用
.skill 文件中 system_prompt 字段的实际内容。
name preview-import description Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s. license Apache-2.0 metadata {"version":"2.0.1"} Preview Import Open and verify imported content in local development server. When to Use This 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) 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) Related Skills page-import - Orchestrator that invokes this skill generate-import-html - Provides HTML file to preview scrape-webpage - Provides screenshot for comparison Preview Workflow Step 1: Start Development Server with HTML Folder Flag 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: aem up --html-folder {dirPath} Examples based on imported content location: 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 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 Step 2: Navigate in Browser 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 Step 3: Verify Rendering 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 Step 4: Compare with Original 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 Troubleshooting Blocks don't render correctly: Check HTML structure matches expected format Verify block names match exactly (case-sensitive) Review ../content-driven-development/references/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 / not /index Check terminal output confirms "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.
Agent 识别该技能的关键词，点击任意一个即可复制。
该技能未提供触发词。
下载的 .skill 包内含以下字段。
| 字段 | 说明 |
|---|---|
| format | 格式标识（skill/v1） |
| skill_id | 技能唯一 ID |
| name | 技能名称 |
| version | 版本号 |
| description | 技能描述 |
| category | 所属分类（数组） |
| trigger_words | 触发词列表 |
| tags | 标签列表 |
| source | 来源标识 |
| source_url | 来源链接（本页地址） |
| exported_at | 导出时间（每次下载生成） |
| system_prompt | 系统提示词正文 |
| model_config | 模型参数：provider / model / temperature / max_tokens / top_p |
| examples | 示例 |
| install_guide | 各平台导入说明（Coze / Dify / Claude / 自定义框架） |
