Question

我有这个包含

组件的页面结构

homepage
  - jcr:content
    - topBanner
      - background
        - file
secondpage
  - jcr:content
    - topBanner (different component from the homepage)
      - background (same component as homepage)
        - file

我需要的是，当我将图像上传到主页背景时，我想要将相同的图像转到第二页。

我尝试过使用花岗岩属性，但我被卡住了，因为我无法找到javascript的AEM文档

这是我用于上传图片的服务器端javascript，基于AEM的图像

"use strict";

use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js",
"/apps/digital/components/content/utils/Image.js",
"/libs/sightly/js/3rd-party/q.js"], function(AuthoringUtils, Image, Q) {

var image = new Image(granite.resource);
var imageDefer = Q.defer();
image.resource=granite.resource;

var CONST = {
    PLACEHOLDER_SRC: "/etc/designs/default/0.gif"
};

// check if there's a local file image under the node
image.path=granite.resource.path;

granite.resource.resolve(granite.resource.path + "/file").then(function(localImageResource) {
    imageDefer.resolve(image);
}, function() {

    // Modifying the image object to set the placeholder if the content is missing
    if (!image.fileReference()) {
        image.src = CONST.PLACEHOLDER_SRC;
    }
    imageDefer.resolve(image);
});

// Adding the constants to the exposed API
image.CONST = CONST;

// check for image available sizes
if (image.width() <= 0) {
    image.width = "";
}

if (image.height() <= 0) {
    image.height = "";
}

return imageDefer.promise;

}）;

基本上我想将文件从主页复制到第二页和其他可能存在的页面。或者在主页的第二页的背景中创建指向该文件的指针。

我该怎么做？

TopBanner组件HTML

<div class="dashboard-hello">

<div data-sly-resource="${ 'background' @ resourceType='digital/components/content/authored/vf_background'}"/>
    <div class="spring" id="homepage--greeting">
        <div class="dashboard-hello__content">
            <div data-sly-resource="${ 'greeting' @ resourceType='digital/components/content/authored/vf_greeting'}"/>
        </div>
    </div>
</div>

Answer 1

您需要的是design_dialog以及dialog组件的background。

设计对话框内容更改是全局可访问的，而对话框内容更改是特定于页面的。这意味着通过设计对话框存储的内容存储在设计路径（通常位于/etc/design/下），而通过dialog修改的内容存储在组件节点下的页面级别。

您还必须修改background组件的JSP呈现脚本。

我首先从页面特定内容的JCR属性中获取背景图像路径：properties.get("<image_path_property_name>");。如果没有设置，我会回退到全局背景图片currentStyle.get("<image_path_property_name>");。这样，您就可以在secondpage/../background或＆＃34;其他可能存在的页面中设置不同的背景图像＆＃34;。

或者，如果您不希望作者在secondpage/../background页面中使用其他背景图片，则只能从设计属性中获取背景图片路径。

多页AEM中的相同背景

1 个答案: