화성 테마 : Frontity의 헤드리스 워드 프레스 테마에 대한 깊은 모습

이 기사는 Automattic이 Frontity와 그 팀을 인수하기 전에 시작되었습니다. Frontity의 설립자들은 프레임 워크를 커뮤니티 중심 프로젝트로 전환하여 안정성, 버그없는 작동 및 포괄적 인 문서를 보장 할 계획입니다. 다른 오픈 소스 프로젝트와 마찬가지로 Frontity는 무료로 유지되며 지역 사회 기여 및 개선 기회를 제공합니다. 자세한 내용은 FAQ에서 제공됩니다.

이전 기사는 Frontity가있는 헤드리스 WordPress 사이트 작성에 대해 자세히 설명하고 파일 구조를 간단히 조사했습니다. 이 기사는 @frontity/mars-theme 패키지 (MARS 테마)를 탐구하여 사용자 정의에 대한 단계별 안내서를 제공합니다. 화성 테마는 WordPress의 20 개 스물 11과 비슷한 Frontity의 기본 테마 인 훌륭한 출발점이됩니다.

"빌딩 블록"을 포함하여 화성 테마의 핵심 구성 요소를 살펴보고 패키지에 포함 된 다양한 구성 요소를 검사합니다. 우리는 실용적인 예제로 기능, 운영 및 스타일을 다룰 것입니다.

시작하자!

목차

• 소개 : Frontity의 빌딩 블록 이해
• 섹션 1 : 화성 테마 구조 탐색
• 섹션 2 : 목록 구성 요소 활용
• 섹션 3 : 링크, 메뉴 및 특집 이미지
• 섹션 4 : 정면 프로젝트 스타일
• 섹션 5 : Frontity Mars 테마 사용자 정의
• 섹션 6 : 자원 및 승인
• 결론 : 최종 생각과 반성

Frontity의 기본 구성 요소

이전 기사에서 Frontity Project 파일 구조를 다시 방문하여 Frontity의 핵심 구성 요소를 강조 표시합니다 : frontity.settings.js , package.json 및 packages/mars-theme 폴더. package.json 파일은 이름, 설명, 저자 및 종속성을 포함한 중요한 프로젝트 정보를 제공합니다. 주요 패키지는 다음과 같습니다.

• frontity : Frontity App Development Methods 및 CLI를 포함하는 주요 패키지.
• @frontity/core : 번들링, 렌더링, 병합, 전달 및 서빙을 처리합니다. 직접 액세스는 일반적으로 앱 개발에 필요하지 않습니다. 전체 목록은 Frontity 문서에 있습니다.
• @frontity/wp-source : WordPress REST API에 연결하여 화성 테마의 데이터를 가져옵니다.
• @frontity/tiny-router : window.history 및 Routing을 관리합니다.
• @frontity/html2react : html 섹션을 반응 구성 요소로 바꾸기 위해 프로세서를 사용하여 HTML을 반응으로 변환합니다.

Frontity 's Core 또는 @frontity/package ( "빌딩 블록"이라고도 함)에는 @frontity/components 의 유용한 React 구성 요소 라이브러리, Link , Auto Prefetch , Image , Props , Iframe 및 기타 기능 및 객체와 같은 구성 요소를 Switch 구성 요소가 포함됩니다. 자세한 설명 및 구문 정보는 패키지 참조 API에 있습니다.

Frontity Documentation은 프로젝트 시작 프로세스 @frontity/core 설명합니다. frontity.settings.js 에 정의 된 모든 패키지 세트 @frontity/file-settings 이 상점을 사용하면 Frontity의 주 관리자 인 @frontity/connect 사용하여 개발 중에 다양한 패키지의 상태 및 작업에 액세스 할 수 있습니다.

다음으로,이 빌딩 블록이 화성 테마 내에서 사용되는 방법을 살펴보기 위해 헤드리스 워드 프레스 엔드 포인트가있는 기능적 프론티피 프로젝트를 만듭니다.

섹션 1 : 화성 테마 구조 이해

사용자 정의 전에 화성 테마 ( @frontity/mars-theme ) 파일 구조에 익숙해 봅시다.

 <code>packages/mars-theme/ |__ src/ |__ index.js |__ components/ |__ list/ |__ index.js |__ list-item.js |__ list.js |__ pagination.js |__ featured-media.js |__ header.js |__ index.js |__ link.js |__ loading.js |__ menu-icon.js |__ menu-model.js |__ menu.js |__ nav.js |__ page-error.js |__ post.js |__ title.js</code>

Mars 테마의 주요 구성 요소는 /src/index.js , src/list/index.js 및 src/components/index.js 입니다. Frontity Documentation은 이러한 구성 요소가 정의되고 상호 연결되는 방식에 대한 자세한 설명을 제공합니다. 루트, 테마 및 목록의 세 가지 가장 중요한 세 가지에 중점을 두겠습니다.

테마 루트 구성 요소 ( /src/index.js )

src/index.js 파일 (테마의 루트)이 중요합니다. a<div> 사이트 마크 업에서 모든 설치된 패키지의 루트를 주입합니다. 정면 테마는 <code>root 및 기타 필요한 패키지를 DOM으로 내 보냅니다. Frontity Documentation은 슬롯을 사용하여이를 보여줍니다. Mars 테마 패키지의 예는 루트 구성 요소를 초기화하는 방법을 보여줍니다.

 // mars- 테마/src/components/index.js
// ... (간결성을 위해 코드가 생략 됨) ...

루트 구성 요소는 roots , fills , state , actions 및 libraries 포함한 패키지를 내 보냅니다. 루트 구성 요소에 대한 자세한 내용은 Frontity 문서에 있습니다.

테마 구성 요소 ( /src/components/index.js )

Frontity 테마 구성 요소는 Theme 네임 스페이스로 내보낸 기본 루트 레벨 구성 요소입니다. @frontity/connect 함수로 랩핑되어 상태, state 및 libraries 소품 actions 대한 액세스 권한을 제공합니다. 이를 통해 테마 구성 요소는 상태를 읽고, 동작을 사용하며, 다른 패키지의 코드를 활용할 수 있습니다.

 // mars- 테마/src/components/index.js
// ... (간결성을 위해 코드가 생략 됨) ...

이 예는 화성 테마의 /src/components/index.js 에서 state.source.get() 사용하여 목록 및 게시물과 같은 구성 요소를위한 데이터를 검색합니다.

섹션 2 : 목록 구성 요소 작업

이전 섹션에서는 테마 수준 구성 요소를 다루었습니다. 이제 특정 구성 요소 : List를 살펴 보겠습니다.

목록 구성 요소는 코드 분할을 위해 @loadable/components 사용하여 src/components/list/index.js 에서 내보내고 있습니다. 구성 요소는 사용자가 목록을 볼 때만로드됩니다. 단일 게시물을 볼 때 렌더링하지 않습니다.

게시물 목록 표시

src/components/list/list.js 구성 요소는 state.source.get(link) 및 해당 items 필드를 사용하는 게시물 목록을 렌더링합니다.

 // src/components/list/list.js
// ... (간결성을 위해 코드가 생략 됨) ...

connect 함수는 글로벌 상태에 대한 액세스를 제공합니다. list-item.js 및 pagination.js 도 가져옵니다.

게시물 목록을 작성합니다

Pagination 구성 요소 ( src/components/list/pagination.js )를 통해 사용자는 게시물 페이지를 탐색 할 수 있습니다.

 // src/components/list/pagination.js
// ... (간결성을 위해 코드가 생략 됨) ...

connect 함수는 글로벌 상태 및 동작에 대한 액세스를 부여합니다.

단일 게시물 표시

Post 구성 요소는 단일 게시물과 페이지를 표시합니다. 게시물에는 메타 데이터 (저자, 날짜, 카테고리 등)가 포함 된 구조가 유사합니다.

 // src/components/post.js
// ... (간결성을 위해 코드가 생략 됨) ...

조건부 렌더링은 메타 데이터가 게시물에 대해서만 표시되도록하고 주제 설정에 따라 주요 이미지가 표시됩니다.

섹션 3 : 링크, 메뉴 및 특집 이미지

목록 구성 요소는 게시물을 표시하는 데 중요합니다. 다른 필수 구성 요소를 살펴 보겠습니다.

링크 구성 요소 ( src/components/link.js )

MarsLink 구성 요소 ( src/components/link.js )는 @frontity/components/link component 주변의 래퍼입니다.

 // src/components/link.js
// ... (간결성을 위해 코드가 생략 됨) ...

링크를 클릭 할 때 모바일 메뉴를 닫는 핸들러가 포함되어 있습니다.

Frontity 메뉴 ( src/components/nav.js )

Nav 구성 요소 ( src/components/nav.js )는 frontity.settings.js 또는 Frontity State에 정의 된 메뉴 항목을 반복하여 URL과 일치하고 헤더 내에 구성 요소를 표시합니다.

 // src/components/nav.js
// ... (간결성을 위해 코드가 생략 됨) ...

connect 기능은 상태에 대한 액세스를 제공합니다. 모바일보기에는 추가 메뉴 구성 요소 ( menu.js 및 menu-modal.js )가 제공됩니다.

주요 이미지 구성 요소 ( /src/components/featured-media.js )

추천 미디어는 루트 구성 요소의 theme.state.featured 에 정의되어 있습니다. 전체 코드는 /src/components/featured-media.js 에 있습니다.

섹션 4 : 정면 프로젝트 스타일

전면 스타일은 WordPress와 다릅니다. Frontity는 CSS-in-JS 라이브러리 인 스타일의 경쟁자와 감정으로 제작 된 재사용 가능한 구성 요소를 제공합니다.

스타일링 컴포넌트 사용

스타일의 구성 요소는 감정의 styled 기능을 사용하여 만들어집니다. 예를 들어:

 // 버튼 스타일 구성 요소 작성
"Frontity"에서 {Styled} 가져 오기;

const button = styled.div`
  배경 : Lightblue;
  너비 : 100%;
  텍스트 정렬 : 센터;
  색상 : 흰색;
`;;

CSS 소품 사용

css 소품은 템플릿 리터럴을 사용하여 인라인 스타일을 허용합니다.

 / * CSS 소품 사용 */
"Frontity"에서 {CSS} 가져 오기;

const pinkbutton = () => (
  <div css="{css`background:" pink>
    내 분홍색 버튼
  </div>
);

사용<global></global> 요소

그만큼<global></global> 구성 요소는 사이트 전체 스타일을 적용합니다.

 // ... (간결성을 위해 코드가 생략 됨) ...

섹션 5 : Frontity Mars 테마 사용자 정의

이 섹션에서는 화성 테마를 사용자 정의하는 것을 보여줍니다. (간결성을 위해 생략 된 자세한 예제 및 코드 스 니펫; 완전한 코드 예제는 원래 응답을 참조하십시오.) 주요 사용자 정의에는 다음이 포함됩니다.

• 테마 패키지의 이름 바꾸기.
• 동적 메뉴 페치 (WP-Rest-API V2 메뉴 플러그인 사용)를 사용한 리팩토링 내비게이션.
• 더 나은 구성을 위해 파일 구조 수정.
• 사용자 지정 바닥기 구성 요소 추가.
• 테마 헤더 사용자 정의.
• 첨가<global></global> 스타일 구성 요소.
• 유체 타이포그래피 구현.
• 웹 폰트 추가.
• 스타일링 페이지 및 게시물 (Gutenberg 블록 스타일 포함).

섹션 6 : 자원 및 승인

(Brevity에 대한 자원 및 크레딧 목록; 전체 목록의 원래 응답을 참조하십시오.)

결론 : 최종 생각과 반성

이러한 Frontity와 Mars 테마에 대한 탐구는 초보자 친화 성, 낮은 유지 보수 및 실험 블록 테마와의 호환성을 강조합니다. 그러나 현재 호스팅 비용과 문서 개선 영역이 주목됩니다. WordPress 블록 테마의 진화와 함께 Gatsby와 Frontity를 사용한 헤드리스 사이트 개발에 대한 추가 탐색이 계획되어 있습니다.