簡單自訂範例

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

使用者
管理員

現在，讓我們來瞭解如何在AEM Guides應用程式中整合這些自訂專案。

假設我們想要在應用程式的現有檢視中新增此按鈕。
為此，我們需要3項基本功能：

我們要新增元件的檢視JSON的id。
target，也就是我們想要新增元件的JSON位置。已使用key和value定義target。機碼 — 值組可以是任何用來定義元件的屬性，可有助於識別元件的唯一識別。
我們也可以使用索引來參照目標。
我們有3個viewStates： APPEND、PREPEND、REPLACE。
新建立之元件的JSON和對應方法。

假設我們想要新增按鈕到稽核中使用的註釋工具箱，該按鈕會在AEM中開啟檔案。

export default {
  id: 'annotation_toolbox',
  view: {
    items: [
      {
        component: 'button',
        icon: 'linkOut',
        title: 'Open topic in Assets view',
        'on-click': 'openTopicInAEM',
        target: {
          key: 'value',
          value: 'addcomment',
          viewState: VIEW_STATE.APPEND

        },
      },
    ],
  },
  controller: {
    openTopicInAEM: function (args) {
        const topicIndex = tcx.model.getValue(tcx.model.KEYS.REVIEW_CURR_TOPIC)
        const {allTopics = {}} = tcx.model.getValue(tcx.model.KEYS.REVIEW_DATA) || {}
        tcx.appGet('util').openInAEM(allTopics[topicIndex])
    },
  },
}

在上述範例中，我們有：

我們想要插入元件的JSON的id，即annotation_toolbox
目標是addcomment按鈕。我們使用viewState append在addcomment按鈕之後新增按鈕。
我們定義控制器中按鈕的點按事件。

「annotation_toolbox」的JSON .src/jsons/review_app/annotation_toolbox.json

在自訂之前，註解工具箱看起來像這樣：

註解工具箱

自訂後，註解工具箱看起來像這樣：

customized-annotation-toolbox

新增CSS

為了保持一致性，我們提供已設定樣式的元件。插入的JSON將套用其固有樣式
管理css的主要方式是透過擴充功能中的extraClass索引鍵。

{
    "view":{
        items:[
            {
                compoenent:"button",
                extraClass:"underline bg-red",
            }
        ]
    }
}

您可以將CSS檔案新增至clientlibs，以使用CSS類別放置自訂樣式。在建置期間，我們也會為順風中的公用程式類別建立順風輸出。相同專案的設定可在擴充功能的tailwind.config.js的./tailwind.config.js找到

recommendation-more-help

11125c99-e1a1-4369-b5d7-fb3098b9b178