社群元件指南 community-components-guide
社群元件指南是互動式開發工具,適用於 社交元件架構(SCF). 它提供可用的Adobe Experience Manager (AEM) Communities元件清單,或由多個元件建置的更複雜功能。
除了每個元件的基本資訊外,本指南還允許實驗SCF元件/功能的工作方式,以及如何對其進行設定或自訂。
如需與每個元件相關的開發要件的相關資訊,請參閱 功能和元件要點.
快速入門 getting-started
本指南適用於製作執行個體(localhost:4502)和發佈執行個體(localhost:4503)的開發安裝。
社群元件網站可透過瀏覽存取:
與Communities元件的互動會依據以下因素而有所不同:
- 伺服器(製作或發佈)。
- 網站訪客是否已登入。
- 如果登入,則為成員指派許可權。
- 預設SRP、 JSRP,正在使用中。
在作者上,若要進入編輯模式,請插入 editor.html
或 cf#
做為伺服器名稱之後的第一個路徑區段:
首頁 home-page
本指南提供可在頁面左側預覽及建立原型的SCF元件清單。
在編輯模式中的作者執行個體所檢視的元件指南:
元件頁面 component-pages
從頁面左側的清單中選取元件。
指南的主體隨即顯示:
作者互動 author-interactions
在製作例項上使用指南時,可以透過開啟對話方塊來體驗設定元件的方式。 有關開發人員的資訊,請參閱 元件和功能要點 區段,對話方塊設定則在中說明 Communities元件 區段供作者使用。
在社群元件指南中,有些元件對話方塊設定會以 包含 切換狀態。 若要在使用現有資源或動態包含的資源之間切換,請在編輯模式中選取元件和可包含的文字,然後按兩下以開啟編輯對話方塊:
在 範本 標籤:
-
使用sling:include包含子元件
如果取消勾選,「元件指南」會使用存放庫中的現有資源(jcr節點,是par節點的子節點)。
- 文字顯示為:「透過其par節點包含此元件」。
如果勾選,「元件指南」會使用Sling來動態包含子節點的resourceType (非現有資源)的元件。
- 文字顯示為:「此元件為動態包含。」
預設為未勾選。
發佈互動 publish-interactions
在發佈執行個體上使用指南時,元件和功能可能會以網站訪客(未登入)及具有各種許可權的成員身分在登入時體驗。
用戶端資源庫 client-side-libraries
針對每個元件所列出的使用者端資料庫(clientlibs)即為 必填 將元件放置到頁面上時要參考的。 clientlibs提供一種方法,用於管理和最佳化瀏覽器中用於呈現元件的JavaScript和CSS的下載。
如需詳細資訊,請造訪 適用於社群元件的Clientlibs.
模擬 impersonation
在作者執行個體上,如果使用者通常是以管理員或開發人員的身分登入,若要以其他使用者的身分體驗元件,請使用 模擬 按鈕以輸入使用者名稱或從下拉式清單中選取,然後按一下按鈕。 按一下「回覆」以登出並結束模擬。
發佈執行個體不需要模擬。 只要使用登入/登出連結來模擬各種使用者即可,例如 示範使用者.
自訂 customization
啟用後,每個SCF元件都可暫時修改元件的範本、CSS和資料,以建立可能自訂專案的原型。
啟用自訂 enabling-customization
若要快速實驗自訂,請 scg:showIde
屬性必須新增至元件頁面的內容JCR節點,並設定為true。
以comments元件為例,在作者或發佈執行個體上,以管理員許可權登入:
-
瀏覽至 CRXDE Lite
-
選取元件的
jcr:content
節點例如
/content/community-components/en/comments/jcr:content
-
新增屬性
- 名稱
scg:showIde
- 型別
String
- 值
true
- 名稱
-
選取 全部儲存
-
重新載入指南中的「註解」頁面
http://localhost:4503/content/community-components/en/comments.html
-
請注意,範本、CSS和資料現在有三個索引標籤。
範本標籤 templates-tab
選取範本標籤以檢視與元件相關聯的範本。
範本編輯器可以編譯本機編輯,並將其套用至頁面頂端的範例元件例項,而不會影響存放庫中的元件。
在本機編輯時執行編譯,將透過在排水槽中放置點並將文字標示為紅色來反白顯示任何錯誤。
CSS索引標籤 css-tab
選取CSS標籤以檢視與元件相關聯的CSS。
如果元件是由多個元件組成的複合專案,則某些CSS可能會列在其他某個元件下。
CSS編輯器可以修改CSS,並將其套用至頁面頂端的範例元件例項。
您可以按一下溝渠中規則旁的按鈕,選取規則來反白使用該規則的DOM部分。
資料標籤 data-tab
選取「資料」標籤,以顯示.social.json端點資料。 此資料可編輯,並套用至範例元件例項。
語法錯誤可能會在Gutter中標示並在編輯器中反白顯示。