如何在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-embedcomponent 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
resourceTypefor the parsys to preserve editing functionality and styling.
内容的提问来源于stack exchange,提问作者ShAkKiR

