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之前构建。