8

Adobe AEM (以前の CQ5 ) では、基本コンポーネント parsys の design_dialog により、ユーザーは「セル パディング」を設定できます。テキスト フィールドに入力された値は、デザイン CSS に表示されます。

例えば：

現在のページが /etc/designs/my-design を使用している場合、ページ出力には /etc/designs/my-design.css スタイルシート仮想パスへの参照が含まれます。

ユーザーが parsys セルのパディングを 30px に設定した場合、my-design.css ファイルには次が含まれます。

.page_full .par div.section {
  padding: 30px;
}

文字列「30px」は、div.padding という jcr:content/page/par/section 属性に格納されていますが、parsys.jsp がそれを my-design.css に挿入する方法がわかりません。

編集: 明確にするためcurrentDesign.writeCssIncludes(pageContext);に、基本ページ headlibs.jsp の呼び出しは、次のようなデザイン css インクルードを設定するコードです。

<link href="/etc/designs/my-design/static.css" rel="stylesheet" type="text/css"/>
<link href="/etc/designs/my-design.css" rel="stylesheet" type="text/css"/>

ただし、 /etc/designs/my-design.css 要求の応答本文に含まれる独自の CSS を取得する方法は明確ではありません。

4

2 に答える 2

13

parsys は実際にはスタイルを挿入しませんが、parsys コンポーネントのデザイン パラメーターを変更すると、それらはデザイン ページに保存され、これが Design クラスによって css としてレンダリングされ、出力にそれらの更新が含まれます。

デザイン CSS のレンダリング方法

/etc/designs/my-designお気づきのように、設計情報は に保存されます。このページのこのコンポーネントは、含まれている情報の CSS 表現をサポートしています。

製品に含まれている CQ 開発ツールを使用して、レンディションのソースを追跡できます...

crx/de または crx/explorer で設計ページを見ると、sling:resourceType がwcm/core/components/designer.

これは、次の Java クラスによってレンダリングされます/libs/wcm/core/components/designer/designer.css.java。このファイルは crx/de でも確認できます。そのファイルのライセンスでここにスニペットを投稿できるかどうかはわかりませんが、自分で簡単に見つけることができるはずです。

このクラスはページ リソースを受け取り、オブジェクトをcom.day.cq.wcm.api.designer.Designインスタンスに適合させます。

Web コンソールの依存関係ファインダーを見ると、Design クラスは cq-wcm-api バンドルによって提供されます。

<dependency>
  <groupId>com.day.cq.wcm</groupId>
  <artifactId>cq-wcm-api</artifactId>
  <version>5.5.0</version>
  <scope>provided</scope>
</dependency>

/libs/wcm/core/install/cq-wcm-api-5.5.0.jarこれは、CQ にバンドルされている jar: によって提供されます。

デザイン CSS のカスタマイズ

あなたが達成しようとしていることを見ると... デザインページのコンテンツをカスタマイズできます（これは通常、作業しているコンポーネントにデザインダイアログを追加することによって行われます）そのコンポーネントに関連付けられたプロパティ/ css属性を追加します。

この例として、geometrixx デザイン内のロゴ コンポーネントを見てください ( /etc/designs/geometrixx/jcr:content/contentpage/logo)。これにはすでに次のようdiv img.marginに変換されるプロパティがあります

.contentpage div.logo img {
  margin: 1px;
}

出力 css ( /etc/designs/geometrixx.css?cacheKiller=xyz) で。

div img.borderの値を持つ名前のプロパティをこのノードに追加すると、 5px solid redcss が次のように出力されます。

.contentpage div.logo img {
  margin: 1px;
  border: 5px solid red;
}

あなたの例を考えると、デザイン コンテンツ ノードは/etc/designs/my-design次のようになります。

+jcr:content
  + page_full
    + par
      + section
        - div .margin = 30px

または、リポジトリ XML 形式では、次のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:lastModified="{Date}2013-01-13T17:22:51.339+01:00"
        cq:lastModifiedBy="admin"
        cq:template="/libs/wcm/core/templates/designpage"
        jcr:primaryType="cq:PageContent"
        jcr:title="design"
        sling:resourceType="wcm/core/components/designer">
        <page_full jcr:primaryType="nt:unstructured">
            <par jcr:primaryType="nt:unstructured">
                <section
                    jcr:primaryType="nt:unstructured"
                    div_x0020_.margin="30px"/>
            </par>
        </page_full>
    </jcr:content>
</jcr:root>

デザイン ダイアログ (デザイン コンテンツをカスタマイズするために使用する必要があります) については、コンポーネントの開発ページである程度説明されています。上記のロゴ コンポーネントのデザイン ダイアログ (例) は、次の URL にあります。/libs/foundation/components/logo/design_dialog.html

于 2013-03-28T23:55:03.210 に答える
2

CSS でのこの変更は、クラスIncludeOptionsを使用して parsys で行われます。基盤コンポーネントの parsys.jsp を見ると、このクラスが使用されていることがわかります。IncludeOptions クラスのメソッド getCssClassNames() は、div タグに追加される変更可能な CSS クラス名のセットを返します。したがって、セクション フィールドが parsys 用に作成されるときは常に、コンポーネントの CSS に動的に追加され、リソースがページに含まれます。

于 2013-03-26T16:44:25.807 に答える