컬렉션 차단

<h3>제목</h3>

기본 콘텐츠

머리글의 수준이 다르면 문서의 의미 체계 중추를 제공할 수 있습니다

<h3>텍스트</h3>

기본 콘텐츠

서식 있는 의미 체계 서식 옵션을 사용하여 본문 텍스트 또는 복사

<h3>이미지</h3>

기본 콘텐츠

사진을 통해 콘텐츠를 사용할 수 있습니다.

<h3>목록</h3>

기본 콘텐츠

필요한 위치에 정렬된 목록과 순서가 지정되지 않은 목록

<h3>링크</h3>

기본 콘텐츠

다른 웹 사이트 또는 자체 콘텐츠 참조

<h3>버튼</h3>

기본 콘텐츠

콜 투 액션 버튼 등

<h3>코드</h3>

기본 콘텐츠

콘텐츠에서 미리 서식이 지정된 코드 조각 강조 표시

<h3>섹션</h3>

기본 콘텐츠

페이지의 콘텐츠를 섹션으로 그룹화

<h3>아이콘</h3>

기본 콘텐츠

아이콘을 사용하여 콘텐츠를 더 재미있게 만들기

<h3>영웅</h3>

블록

페이지 상단의 영웅 처리

<h3>열</h3>

블록

응답형 방식으로 다중 열 레이아웃을 처리하는 유연한 방법

<h3>카드</h3>

블록

이미지 및 링크가 있거나 없는 카드 목록

<h3>헤더</h3>

블록

유연한 헤더 및 탐색 예

<h3>바닥글</h3>

블록

간단하게 확장 가능한 바닥글 블록

<h3>메타데이터</h3>

필요한 경우 페이지에 메타데이터 추가

<h3>섹션 메타데이터</h3>

섹션의 모든 콘텐츠 강조 표시 또는 구조

<h3>임베드</h3>

블록

소셜 미디어 콘텐츠를 AEM 페이지에 임베드하는 간단한 방법

<h3>조각</h3>

블록

여러 페이지에서 컨텐츠 조각 공유

<h3>표</h3>

블록

테이블 형식 데이터를 행과 열로 구성하는 방법

<h3>비디오</h3>

블록

AEM에서 바로 비디오 표시 및 재생

<h3>아코디언</h3>

블록

관련 전체 콘텐츠를 표시하도록 전환할 수 있는 설명 레이블의 스택입니다

<h3>이동 경로</h3>

추가 기능 차단

탐색 계층에서 현재 페이지의 위치를 보여 주는 페이지 제목 및 관련 링크 목록

<h3>슬라이드</h3>

블록

선택적 텍스트 콘텐츠가 포함된 일련의 이미지를 원활하게 전환하는 동적 표시 도구입니다

<h3>양식</h3>

블록

사용자가 정보를 제출할 수 있도록 그룹화된 입력 컨트롤 집합

<h3>인용</h3>

블록

문서 내의 특정 문구(또는 "인용문 가져오기")의 따옴표 또는 강조 표시

<h3>검색</h3>

블록

사용자가 검색어를 입력하여 사이트 콘텐츠를 찾을 수 있습니다.

<h3>탭</h3>

블록

여러 레이블이 지정된(또는 "탭") 패널로 정보를 세그먼트화합니다.

<h3>양식</h3>

자동 차단

다른 사이트 콘텐츠 위에 표시되는 팝업

코드 조각
하네솔로

양식

미리보기

<small>프랭클린 페이지에 모달을 추가하는 스크립트입니다. 이렇게 하면 새로운(ish) 기본 대화 상자 요소가 사용됩니다.

작동 중인 항목을 확인할 수 있습니다.

링크

</small>

코드 조각
미사골즈

비디오 자동 재생

<small>다양한 브라우저에서 비디오를 자동 재생하려면 속성 세트를 설정해야 합니다. videoTag.muted = true를 이런 식으로 설정하는 것이 중요합니다. 그렇지 않으면 chrome에서 재생되지 않습니다. 예: setAttribute('muted', true)가 작동하지 않습니다.</small>

Sidekick 플러그인
배외통

Sidekick 라이브러리

미리보기

<small>Sidekick 라이브러리는 개발자가 컨텐츠 작성자를 위한 UI 기반 도구를 만들 수 있는 AEM Sidekick의 확장입니다. 여기에는 작성자에게 모든 블록 목록을 직관적인 방식으로 표시할 수 있는 내장된 블록 플러그인이 포함되어 있어, 작성자가 블록의 모든 변형을 기억하거나 검색하지 않아도 됩니다. 개발자는 사이드 킥 라이브러리에 대한 플러그인을 직접 작성할 수도 있습니다.</small>

코드 조각
davidnuescheler

메타데이터/JSON 기반 CSP

<small>이 접근 방식은 한 번만 유선으로 이동한 다음 클라이언트에 캐시되는 방식으로 CSP를 설정하는 것입니다. 읽기 쉬운 JSON 파일에서 CSP를 관리할 수 있습니다</small>

빌드 도구
사키오로스

SASS + AEM

<small>AEM에서 로컬로 개발하는 동안 CSS를 위한 SASS 컴파일</small>

코드 조각
부후우

얼룩

<small>ffetch는 구성 가능한 애플리케이션을 빌드할 때 AEM Content API를 처리하는 데 도움이 되는 JavaScript 가져오기 함수 주위의 작은 래퍼입니다. 이를 통해 AEM 색인에서 콘텐츠를 쉽게 가져오고, 소극적 페이지 매김 을 적용하고, 페이지 링크를 따라가며, 페이지 메타데이터를 가져올 수도 있습니다. Headless SDK의 성능 짐과 Headless API의 복잡성 없이 Headless 애플리케이션을 쉽게 만들 수 있습니다.</small>

코드 조각
구두쇠

동적으로 로드된 템플릿

<small>템플릿에 고유한 CSS 및 JS를 로드하여, 해당 코드를 전역 스크립트/스타일에 혼합하지 않고 템플릿별 스타일 지정 및 자동 차단을 허용합니다.

참고: 템플릿 js는 블록이 로드되기 전에 로드되지만 섹션/블록이 데코레이트된 후에는 이를 염두에 두고 자동 차단을 수행해야 합니다(즉, 블록을 빌드하고 데코레이트한 다음 섹션에 추가하지만 로드하지는 않음).</small>

코드 조각
fkakatie

링크가 있는 이미지

미리보기

<small>이 스니펫은 이미지에 하이퍼링크를 추가합니다. 사용하려면 연결된 코드 조각을 참조하십시오. Wod/GDoc에서 작성하는 동안 이미지 바로 뒤에 링크 URL을 지정합니다.</small>

차단
잘라가리

양식 블록

미리보기

<small>다양한 기능을 가진 양식 블록

• Google Recaptcha 통합

• Forms의 첨부 파일 지원.

• 사후 처리

  • 이메일 알림
  • 데이터를 Marketo 또는 Salesforce에 동기화합니다.</small>

차단
니크라아이케스족

탭

미리보기

<small>scripts.js에서 자동으로 차단되는 섹션을 기반으로 한 탭 블록 탭 블록뿐만 아니라 스타일과 같은 섹션 메타데이터에서도 탭 블록의 "중첩" 블록을 지원합니다.

css에 의해 부분적으로 제어되는 탭 블록 논리</small>

차단
데이브 핑크

이미지 비교

미리보기

<small>슬라이더를 사용하여 두 이미지를 비교하여 왼쪽 또는 오른쪽 이미지를 표시하거나 숨길 수 있는 간단한 콘텐츠 블록입니다.</small>

차단
구두쇠

이동 경로

<small>상위 페이지의 페이지 제목을 기반으로 이동 경로 탐색 만들기</small>

코드 조각
안드레이투이쿠

DOM 도우미(React JSX-Like)

미리보기

<small>Dom Helpers는 React JSX에서 영감을 얻어 AEM JS 코드를 보다 간결하고, 쉽게 작성하고, 이해하고, 검토할 수 있도록 지원합니다. DOM은 컴파일 또는 외부 종속성이 필요하지 않은 100% vanilla JS를 사용하여 코드를 볼 때 결과 HTML을 쉽게 시각화하기 위한 구문 구조와 유사합니다. 최소 오버헤드(몇 가지 ifs 및 함수 호출)를 통해 100LHS를 유지하고 문자열 템플릿을 사용하여 DOM을 조작할 때 발생할 수 있는 위험을 방지할 수 있습니다. 시트에서 동적 데이터를 렌더링하거나 Word 문서에서 가져온 데이터를 렌더링하는 데 모두 사용할 수 있습니다.</small>

Sidekick 플러그인
herzog31

블록 및 섹션 예약

미리보기

<small>이 코드를 사용하면 블록 또는 섹션을 예약할 수 있습니다. 블록이나 섹션 메타데이터 테이블에 날짜나 날짜 범위를 행으로 추가하면 콘텐츠는 날짜 이후나 범위 내에만 표시됩니다.

과거 또는 미래 콘텐츠를 미리 볼 수 있는 Sidekick 확장과 함께 제공됩니다.

예약된 콘텐츠는 여전히 DOM에 있으므로 기밀 데이터에 적합하지 않습니다.</small>

기타
보스샤에르트

docx 도구: 명령줄 linux 스타일의 여러 .docx 파일에서 작업

<small>이 명령줄 도구를 사용하면 linux 'grep' 또는 'sed' 명령을 사용할 때처럼 .docx 파일의 디렉터리 트리에서 작업을 약간 수행할 수 있습니다. 현재 지원 대상: * cat - 콘솔에 docx 파일의 텍스트 컨텐츠 출력 * grep - 문서에서 정규 표현식 검색 * replace/replace-link search and replace text or hyperlink inside the word .docx files 참고: 도구는 Rust로 작성되며 릴리스는 플랫폼별 실행 파일을 제공합니다. 다른 플랫폼에서 David B를 ping하거나 PR에 기여해야 하는 경우.</small>

기타
녹스

RSS 피드 생성기 Github 워크플로

미리보기

<small>이 Github 워크플로우는 새 페이지가 게시될 때마다 RSS 피드 XML을 업데이트합니다. 워크플로:

링크

스크립트:

링크

</small>

코드 조각
람보즈

Icon Sprite 만들기

미리보기

<small>CSS에서 직접 아이콘의 스타일을 지정할 수 있도록 문서에서 직접 SVG 아이콘을 인라인하는 메커니즘(크기, 색상 등)</small>

기타
vtsaplin

AEM 표현식

미리보기

<small>AEM 표현식을 사용하면 매개 변수가 있는 간단한 표현식을 추가하여 AEM 문서를 템플릿으로 변환할 수 있습니다. 그러면 이러한 표현식은 동적으로 가져온 콘텐츠를 표시하는 HTML 요소가 됩니다. 표현식을 데코레이터로 사용하여 삽입점 주변의 콘텐츠 스타일을 지정하고 콘텐츠를 보강할 수도 있습니다. 이렇게 하면 표현식이 재사용 가능한 조각으로 변환되어 최상위 AEM 블록 내에 배치될 수 있습니다.</small>

코드 조각
에스디엠크래프트

외부 이미지

미리보기

<small>이 코드 조각은 외부 시스템(AEM AEM 외부)에서 가져온 AEM AEM 웹 페이지의 이미지를 사용하기 위한 메커니즘을 보여 줍니다</small>

기타
녹스

Excel 시트를 사용하여 모든 .docx 파일의 링크 바꾸기

<small>Word 문서의 오래된 링크를 매핑이 있는 Excel 시트(일반적으로 redirects.xlsx)를 기반으로 하는 새 링크로 재귀적으로 대체합니다.</small>

기타
에스디엠크래프트

웹 페이지의 시각적 비교 도구

미리보기

<small>웹 페이지를 비교하기 위한 시각적 비교 도구입니다. 사이트에 대한 스타일 변경 작업을 수행하는 동안 사이트 전체에서 해당 변경이 미치는 영향을 평가하려는 경우가 많습니다. 모든 페이지에 대해 수동으로 이 작업을 수행하는 것은 지루한 프로세스입니다. 이 도구를 사용하여 이 작업은 상당한 정도로 자동화됩니다. 분기 참조 및 URL 목록이 시각적으로 테스트되도록 제공되면 "기본" 및 "테스트" 분기의 모든 URL을 통과하여 플레이라이트 기반 헤드리스 브라우저에 로드하고 스크린샷을 찍고 차이점을 기록합니다. 이 도구는 사용자에게 차이점에 대해 알리고 차이점을 검토할 수 있는 스크린샷의 위치를 제공합니다.</small>

기타
아몰아난드

로그 뷰어

미리보기

<small>AEM Edge 게재 프로젝트에 대한 로그를 쉽게 볼 수 있는 방법</small>

Sidekick 플러그인
우스만칼리드

접근성 모드

미리보기

<small>이 플러그인은 콘텐츠 관점에서 페이지를 감사하고 이미지에 대한 대체 텍스트 누락, 가독성 편의성 및 기타 접근성 항목과 같은 항목에 대해 보고하는 지정된 프랭클린 페이지에서 "접근성 모드"를 활성화하기 위해 사이드 킥에 단추를 추가합니다.

또한 사용자 정의 검사를 만들 수 있도록 확장할 수 있으며, 이를 통해 올바른 블록 사용을 촉진하고 스타일 지침을 준수할 수 있습니다. 저장소에는 페이지에 있는 블록의 너무 많은 인스턴스를 확인하고 보고하는 예제가 있습니다.

콘텐츠 작성자는 페이지를 보고 게시하기 전에 프리플라이트 확인으로서 콘텐츠 또는 접근성 관련 문제를 해결하는 데 사용할 수 있습니다.</small>

Sidekick 플러그인
구두쇠

참조 확인

<small>페이지에서 사용하는 참조(양식, 조각, 링크 등)를 검색합니다. 작성자가 한 번의 클릭으로 보고 편집할 수 있습니다. 들어오는 참조를 확인할 수도 있습니다.</small>