정면이있는 헤드리스 워드 프레스 사이트 만들기

반응 기반 프레임 워크 인 Frontity는 빠르고 헤드리스 워드 프레스 웹 사이트의 생성을 단순화합니다. WordPress의 다음 .js로 생각하십시오. 헤드리스 워드 프레스는 현재 틈새 일지 모르지만 Frontity의 쇼케이스는 CNBC 아프리카 및 포브스 아프리카와 같은 주목할만한 사이트를 특징으로하는 인기가 높아지고 있습니다. 문서 및 튜토리얼은 주로 헤드리스 블로그에 중점을 둡니다.

이 안내서는 기본 Frontity 사이트를 작성하고 기본 화성 테마 (후속 기사)를 사용자 정의합니다. Frontity Framework를 사용하여 헤드리스 워드 프레스 사이트 설정을 다루겠습니다.

목차

• 전제 조건 및 요구 사항
• 전면을 이해합니다
• 정면 사이트 설치 :
  • 1 단계 : 프로젝트 생성
  • 2 단계 : 화성 테마 선택
  • 3 단계 : 프로젝트 설치
  • 4 단계 : 디렉토리 변경 및 서버 재시작
• WordPress 사이트 설정 :
  • 예쁜 퍼머 링크를 활성화합니다
• WordPress에 전면 연결 :
  • 1 단계 : 메뉴 업데이트
  • 2 단계 : 프로젝트 폴더 구조
  • 3 단계 : 스타일 수정
• Vercel에 배포 :
  • 1 단계 : 생산 버전 구축
  • 2 단계 : Vercel 계정 생성
  • 3 단계 : vercel.json 만들기
  • 4 단계 : 배포
• 결론
• 자원

이것은 전문가 가이드가 아니라 실용적인 연습입니다. 포괄적 인 세부 사항은 Frontity의 공식 문서를 참조하십시오.

전제 조건 및 요구 사항

React 및 ES6 JavaScript에 대한 친숙 함이 권장됩니다. 추가 요구 사항 (Frontity의 문서에 자세히 설명) :

• HTML 및 CSS 능력
• 명령 줄 경험
• node.js 서버
• 코드 편집기

전면을 이해합니다

Frontity는 WordPress 용으로 특별히 설계된 반응 프레임 워크입니다. 자체 주 관리자 및 CSS 스타일 솔루션을 특징으로합니다. 두 가지 모드로 작동합니다.

• 디퍼 커플 모드 : Frontity는 WordPress REST API에서 데이터를 가져와 최종 HTML을 동형 반응 앱으로 렌더링합니다. 주요 도메인은 정면을 가리키고 WordPress의 하위 도메인을 가리 킵니다.
• 임베디드 모드 : Frontity 테마는 WordPress 테마를 대체합니다. 플러그인은 내부 HTTP 요청을 HTML의 Frontity Server에 제공합니다. 주요 도메인은 WordPress를 가리 킵니다.

Frontity의 내장 AMP 기능은 페이지 속도를 최적화합니다.

정면 사이트 설치

여기에는 Frontity Project와 WordPress 사이트 (데이터 소스)를 설정하는 것이 포함됩니다.

먼저 Node.js 및 NPM이 설치되었는지 확인하십시오.

 노드 -전환
NPM -전환
NPM이 필요한 경우 NPM@최신 -G # 업그레이드 NPM을 설치하십시오

1 단계 : 전선 프로젝트 만들기

Frontity Cli 사용 :

 NPX Frontity My Frontity를 만듭니다

2 단계 : 화성 테마 선택

Frontity는 두 가지 테마를 제공합니다. mars-theme 선택하십시오.

3 단계 : 전면 프로젝트 설치

Frontity Server는 프로젝트 및 해당 종속성을 설치합니다.

4 단계 : 디렉토리 변경 및 개발 서버 다시 시작

프로젝트 디렉토리로 이동하여 서버를 시작하십시오.

 CD My-Frontity
NPX Frontity Dev # 또는 원사 Frontity Dev

http://localhost:3000 에서 사이트에 액세스하십시오.

WordPress 사이트 설치

WordPress 사이트 (로컬 또는 기존)를 설정하십시오. WordPress REST API에 액세스 할 수 있는지 확인하십시오 (예 : http://mytestsite.local/wp-json ).

예쁜 퍼머 링크를 활성화하십시오

설정> 퍼머 링크 에서 예쁜 퍼머 링크 (Post Name)를 활성화하십시오.

WordPress에 전면을 연결합니다

frontity.settings.js 업데이트 :

 // frontity.settings.js
const 설정 = {
  ...,
  패키지 : [
    ...,
    {
      이름 : "@frontity/wp-source",
      상태: {
        원천: {
          API : "http://your-wordpress-site.com/wp-json"// URL로 교체하십시오
        }
      }
    }
  ]]
}

서버를 다시 시작하십시오.

1 단계 : 메뉴 업데이트

Mars 테마의 구조에 따라 필요에 따라 frontity.settings.js 에 메뉴 항목을 추가하십시오.

2 단계 : 프로젝트 폴더 구조

프로젝트 구조를 이해합니다 : node_modules , package.json , frontity.settings.js , packages/mars-theme .

3 단계 : 스타일 수정

Frontity는 스타일링에 감정을 사용합니다. 테마 구성 요소 내에서 필요에 따라 스타일을 수정하십시오.

Vercel에 배포

1 단계 : 프로덕션 버전 생성

 NPX Frontity 빌드

2 단계 : Vercel 계정 생성

vercel 계정을 만들고 로그인하십시오.

 NPX Vercel 로그인

3 단계 : vercel.json 만들기

vercel.json 만들기 :

 {
  "버전": 2,
  "빌드": [
    {
      "src": "package.json",
      "사용": "@frontity/now"
    }
  ]]
}

4 단계 : 배포

 NPX Vercel

결론

Frontity는 헤드리스 워드 프레스 사이트 구축에 대한 사용자 친화적 인 접근 방식을 제공합니다.

자원

• 정면 문서
• Frontity 블로그
• 관련 YouTube 튜토리얼 ( "Frontity Tutorial"검색)

위 내용은 정면이있는 헤드리스 워드 프레스 사이트 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!