Windows repo及Cygwin配置/WKND Tutorial筆記

學習網址

Getting Started with AEM Sites - WKND Tutorial

• 從左導航欄的WKND Tutorial Overview從git上拉項目，只不過我是從gitee里找來拉的。拉了項目，第二步Project Setup就可以不用做了
• Component Basics中最后一小節內容需要下載repo，在以下記錄

---

repo

當Component做到js那，會發現在IDE中操作頁面上並不會更改。這時候就需要repo。總而言之，repo的作用就是可以將代碼同步上去。

• repo的git地址(英語能力好點可以自己按步驟做):Adobe-Marketing-Cloud/tools
• 首先，下載repo(下載過來后就是很小的單個文件，名為repo)
• 其次，下載Cygwin配置repo的環境變量
• 最后在IDEA中配置put指令:
  • IDEA的Settings中External Tools
    • name：repo put
    • program：cygwin/bin/bash，這個目錄下的bash
    • arguments：-l repo put -f $FilePath$
  • 使用的話，到Tools-->External Tools，也可以設置快捷鍵keymap，到上面git地址里去看文檔就好了。
    當我添加了js等，再push一下，網頁上就能看到效果了，push以后你可以先去Lite中看是否已經更新完畢，如果有js那些，那頁面肯定就會有效果了

cygwin配置repo環境

• 官網下載cygwin
• 安裝
  • 因為正常下載不下來，需要添加一個鏡像:https://mirrors.aliyun.com/cygwin/
  • Select Packages:zip, unzip, curl, rsync
• 配置
  • 將repo移至cygwin的bin目錄下
  • 打開.bashrc，添加內容export PATH="$PATH:/bin/repo"

---

Page Template

Template來創建這個結構，頁面由結構和內容組成

• Editable Template，Author也可以進行更改，Static不行
• Editable Template，Template被更改以后頁面是有關聯的，頁面也會隨之改動
• 有鎖，當鎖起來，Author就更改不了
• policy 可以對一個框進行限制，比如只能放button
• Initial
• Structure
• Editable在conf中，Static在apps中
• AEM用jcr這種NoSQL來存儲，就一個個節點

Fragments(Content Fragment/Experience Fragment)

• Tools > General > Configuration Browser > Create Configuration
  然后在目錄下再創建一個
  注意創建Configuration的時候要先小寫，節點出現以后再改名(有bug，直接大寫的話，節點並不會自動變小寫)
• Tools > Assets > Content Fragment Models
  往里面添加一些小組件
• Navigation > Assets > Files >找到目錄，創建Content Fragment(引用上一步創建的Models)
  創建一個folder修改properties中的cloud Services指向第一步中所創建的configuration
  此時再在該folder中創建fragment就可以引用第二步創建的Model了
• 最后在Page中，就可以添加該組件

而像header/footer這些都是Experience Fragment
Experience Fragment就在Sites邊上可以進去直接創建

整個教程的過程

1. WKND Tutorial Overview（略過）
2. Project Setup（略過）
3. Component Basics

創建新頁面Component Basics
Hello World組件添加並添加一些參數

---HTL/Dialog
ui.apps, helloworld模塊下的_cq_dialog, .content.xml添加greeting標簽（dialog）名字為./greeting
打開helloworld.html渲染組件的主要HTL腳本

---Sling
打開core下的HelloWorldModel.java, 添加屬性與get方法
更新html以sling這種方式來呈現

---Client-Side Libraries組織和管理CSS/JS
文件目錄
/helloworld
        /clientlibs
            /css/helloworld.css
            /js/helloworld.js
            +js.txt
            +css.txt
每個節點下都會有.content.xml文件

4. Pages and Templates

AdobeXD

---頁眉/頁腳
倆logo

---Create a Template
There are 3 main areas of Editable Templates:
1.Structure - defines components that are a part of the template. These will not be editable by content authors.
2.Initial Content - defines components that the template will start with, these can be edited and/or deleted by content authors
3.Policies - defines configurations on how components will behave and what options authors will have available.

position:Tools > General > Templates > WKND Site
！！！右上角有個Structure/Initial Content
- Structure：可以對頁面進行布局，添加想要的組件，最后還有Layout Container，最后一個有什么用呢？他是用於Initial Content頁面的
- Initial Content：可以自己對Container進行添加內容，但是會受限制。Structure的時候可以設置Policy來限制該容器能添加什么東西。還有一個鎖可以讓Initial不能添加內容

---Create a Page
edit
Site中選個目錄就能創建Page。然后就可以選擇之前創建的Template

---Inspect the node structure
position：Tools > General > Lite
有點復雜，沒細看

5. Client-Side Libraries and Front-end Workflow

項目中的apps > wknd > clientlibs有四個目錄

client-base
      注意categories/embed
      categories是clientlib的標記機制，也是如何引用他們的方法
client-grid
client-site
client-dependencies
講了這四個目錄怎么怎么樣，我是一臉懵逼

小插曲：npm和webpack，因為ui.frontend中都是用到這些的（說的可能不對）：
npm就像maven，做好依賴和構建
webpack是一個工具，就類似於將一堆js文件合並為一個，也包括html文件，打包
SASS是CSS的一種加強版。但是他不能像CSS一樣直接在頁面上展示效果，所以需要npm去編譯成CSS。
腳手架：就像是jar包集合，需要的什么環境都給你打包好了。

---ui.frontend
總之這里就是很關鍵，添加樣式等，可以運用scss等技術，相比於原來的css和js要提高很多

ui.frontend中, npm install, npm run dev
該命令npm run dev應構建並編譯Webpack項目的源代碼，並最終在ui.apps模塊中填充clientlib -site和clientlib -dependencies。

6. Style System

將特定品牌的CSS應用於AEM核心組件
了解BEM

需要npm start啟動ui.fontend,添加class，並且修改scss文件就可以直接添加樣式，與正常的css引用一樣

Structure
Container中例如Title右邊有個小圖標，進去style，添加新策略。
要注意css的Classes要與寫好的對應起來

然后再用毛筆添加一下

7. Custom Component

自定義組件，相當於是一個整合了。
創建組件的節點/Dialog
然后寫好前端
Java代碼獲取Dialog中的數據傳給前端，通過HTL展示出來
ui.frontend中寫樣式

8. Unit Testing

先創建測試用例，經過一堆設置

@BeforeEach //最開始執行的方法
@Test //默認情況下，所有的測試都設置為失敗

---
@ExtendWith(AemContextExtension.class)
private final AemContext ctx = new AemContext();//ctx用於模擬上下文

---
@BeforeEach
public void setUp() throws Exception {
    ctx.addModelsForClasses(BylineImpl.class);
    ctx.load().json("/com/adobe/aem/guides/wknd/core/models/impl/BylineImplTest.json", "/content");
}
- addModelsForClasses將要測試的Sling模型注冊到模擬AEM上下文中，以便可以在@Test方法中實例化它。
- load().json將資源結構加載到模擬上下文中，數據交互，文件BylineImplTest.json中的資源定義被加載到/ content下的模擬JCR上下文中。
- BylineImplTest.json 創建的數據

自個兒看官網的把，反正一大堆

---

以下覺得沒什么用

Project Setup

• 有一大串mvn的指令來創建項目，可以直接git bash在里面執行，就會直接拉一個原始項目下來了
• 至項目下mvn -PautoInstallSinglePackage clean install
  將整個項目構建並部署到AEM

高級Maven命令

• 核心模塊 coremvn -PautoInstallBundle clean install
• ui.apps模塊 mvn -PautoInstallPackage clean install
  • mvn -PautoInstallPackagePublish clean install
    旨在將程序包部署到在端口4503上運行的發布環境。如果找不到在http：// localhost：4503上運行的AEM實例，則會發生上述錯誤。
  • mvn -PautoInstallPackage clean install -Daem.port=4504
    部署到4504上
• ui.content
  唯一的區別是ui.content模塊包含所謂的可變內容。可變內容實質上是指非代碼配置，例如模板，策略或文件夾結構，這些配置存儲在源代碼管理中，但可以直接在AEM實例上進行修改。
• ui.frontendmvn clean install
  ui.frontend模塊不會直接部署到AEM。而是將CSS和JS復制到ui.apps模塊中，然后將ui.apps模塊部署到AEM。如果您從第一個Maven命令開始查看構建順序，就會看到ui.frontend總是在 ui.apps之前構建。