You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在AEM的JSP组件中引入内容页面?

Got it, let's break down how to embed your existing page's content into a component to boost editability—this is a go-to pattern when you want to reuse page sections while keeping them author-friendly, especially since you mentioned a parsys (a dead giveaway you're working with AEM). Here's a step-by-step approach:

解决方案:将现有页面内容引入组件以提升可编辑性

1. 先创建一个可复用的嵌入组件

Start by building a custom component (let's name it page-content-embed) in your project's component directory. It needs two core files:

  • A dialog (optional but recommended, for author configuration)
  • An HTL script to pull and render the target page's content

2. Write the HTL script to reference the page's parsys

In your component's page-content-embed.html file, use AEM's data-sly-resource to pull in the parsys from your existing page. Make sure the path matches your page's actual JCR structure:

<div class="page-content-embed">
    <!-- Replace the path below with your parsys's exact JCR location -->
    <sly data-sly-resource="${'/content/www-mysite-com/en/page1/jcr:content/parsys' @ resourceType='foundation/components/parsys'}"></sly>
</div>

Pro tip: Double-check the parsys node name—sometimes projects use custom names like main instead of the default parsys.

3. Add a config dialog (for flexible author control)

If you want authors to pick which page's content to embed (instead of hardcoding it), add a dialog to your component. Create a dialog.xml file with a path browser field:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Page Content Embed"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties">
                        <items jcr:primaryType="nt:unstructured">
                            <pagePath
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                fieldLabel="Target Page Path"
                                name="./pagePath"
                                rootPath="/content/www-mysite-com/en"/>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Then update your HTL script to use the configured path instead of hardcoding:

<div class="page-content-embed" data-sly-test="${properties.pagePath}">
    <sly data-sly-resource="${properties.pagePath + '/jcr:content/parsys' @ resourceType='foundation/components/parsys'}"></sly>
</div>

4. Deploy and test the component

  • Drag your new page-content-embed component into any parsys on your site.
  • If you added the dialog, configure the target page path to /content/www-mysite-com/en/page1.
  • Now, any edits made to the components in page1's parsys will automatically show up in this embedded component—edits stay centralized, and reuse is seamless.

Critical Notes to Avoid Headaches

  • Permissions: Ensure authors have read access to the target page, otherwise the content won't render.
  • No Loops: Don't embed this component inside page1's parsys—you'll create an infinite render loop that crashes your instance.
  • Resource Type Match: Always specify the correct resourceType for the parsys to preserve editing functionality and styling.

内容的提问来源于stack exchange,提问作者ShAkKiR

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.28 03:59:10