destack 다운로드 destack 소스 코드 다운로드

destack

AI 소스 코드

1.0.0

다운로드

destack? 디자인을 포용하십시오. 스택을 소유하십시오.

React 또는 Next.js 프로젝트에서 방문 페이지를 시각적으로 구축하십시오. 추가 구성 제로 배치!

? 예 : PrettyFunnels.com, getDestack.com

공지 사항

[13/03/2024] Destack V3가 NPM에서 방금 출시되었습니다. Pull/103 및 Issues/104에서 자세히 알아보십시오. V2로 생성 된 페이지는 부드럽게 작동하려면 V3로 다시 만들어야합니다.

[10/10/2023] Destack V3는 베타 버전에 있습니다. 이 릴리스는 처음부터 편집자를 다시 쓰는 것입니다. Destack-Starter-Beta에서 확인하십시오. Pull/103 및 Issues/104에서 더보기.

[13/06/2023] 세 가지 테마가 추가되었습니다.

[04/02/2023] 버전 2가 NPM에서 방금 출시되었습니다. destack@2 또는 destack@thice로 시도하십시오.

[17/12/2022] Destack V2는 이제 베타에 있습니다. Craft.js를 기반으로 새로운 사용자 정의 페이지 빌더가 제공되는 주요 재 작성입니다. Destack-Starter-Beta에서 확인하십시오. PULL/62 및 ISSUSE/22에서 더 많이.

[11/10/2022] Destack은 이제 여러 테마를 지원합니다. 두 가지 새로운 테마가 추가되었습니다. Meraki UI와 Hyper UI가 추가되었습니다.

Destack은 무엇입니까?

React 또는 Next.js 프로젝트 내에 방문 페이지를 작성하는 도구입니다. Destack에는 Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite and Flow Rift의 여러 구성 요소가 포함됩니다. 이미지 업로드 및 양식 제출도 지원합니다.

Destack은 마케팅 페이지에 대한 걱정을 중단하여 프로젝트에 집중할 수 있도록 도와줍니다.

테마

Destack은 이제 테마 선택을 지원합니다.

테마 선택	Meraki UI (구성 요소)
하이퍼 UI (구성 요소)	테일 블록 (구성 요소)
프린 (구성 요소)	흐름 균열 (구성 요소)
흐름 물린 (구성 요소)

기여 (새 테마 추가)

Destack이 지원할 수있는 오픈 소스 테일 윈드 테마가 많이 있습니다. 새로운 테마를 추가하는 데 도움이되면 토론에서 새로운 주제를 만들거나 트위터에서 저에게 연락하십시오.

특징

? 강력한 블록

테일 블록, 메라 키 UI, 하이퍼 UI, 프린, 흐름 바이트 및 흐름 균열에는 수백 가지 잘 설계되고 많은 기능적 블록이 있습니다. Tailwind의 테마 색상을 지원합니다. 빨간색, 노란색, 녹색, 파란색, 인디고, 보라색 및 분홍색.

? 유쾌한 빌더

단순성을 염두에두고 만들어진 맞춤형 최소 페이지 빌더로 구동됩니다. 브라우저 DevTools의 검사관과 함께 Tailwind CSS 클래스 및 CSS 속성 변경을 지원합니다.

? 데이터 소유권

Destack은 모든 자산을 편집자를 통해 Github, Bitbucket 등에 저장합니다. 관리하거나 걱정할 외부 의존성은 없습니다.

? 자산 및 양식 지원

저장소의 편집기에 업로드 된 이미지를 저장하고 제작시 필요할 때 표시합니다. 또한 박스에서 HTML 및 API 양식 제출을 지원합니다.

?? de 쉬운 설정 및 배포

기존 및 New React 및 Next.js 프로젝트 작업. 랜딩 페이지를 제작에 배포하려면 최소한의 설정과 추가 구성이 필요하지 않습니다.

시작하기

새로운 Next.js 프로젝트와 함께 :

Destack-Starter 프로젝트를 포크하십시오
또는 프로젝트를 Vercel에 배포하십시오.
또는 gitpod로 온라인으로 미리보기 :

기존 Next.js 프로젝트 :

1. 다음 Next.js 프로젝트에 destack을 설치하십시오

npm i destack

2. 빌더 엔드 포인트를 설정하십시오

pages/api/builder/handle.js 작성하고 다음을 추가하십시오.

 export { handleEditor as default , config } from 'destack/build/server'

3. 그런 다음 새 페이지를 만듭니다

다음 .js 페이지에서 destack을 설정하려고합니다.

 export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'

새로운 React.js 프로젝트 :

Destack-React-Starter 프로젝트를 포크하십시오
또는 프로젝트를 Vercel에 배포하십시오.
또는 gitpod로 온라인으로 미리보기 :

기존 React.js 프로젝트 :

1. React.js 프로젝트에 destack을 설치하십시오

npm i destack

2. 빌더 엔드 포인트를 설정하십시오

package.json :

"시작"스크립트를 destack -d "react-scripts start" 로 바꾸십시오.
그런 다음 "빌드"스크립트를 destack -b "react-scripts build" 로 바꾸십시오.

3. 그런 다음 새 페이지를 만듭니다

모든 react.js 구성 요소에서 Destack을 설정하려는 구성 요소 :

 export { ContentProviderReact as default } from 'destack'

작동 방식

? Destack은 두 가지 기본 구성 요소로 구성되어 있으며 첫 번째는 편집기 또는 생성 된 페이지를 표시하는 React 구성 요소이며 두 번째는 다음.JS API 경로입니다.

? project development 중에서 프로젝트를 실행할 때 (예 : npm run dev ) REACT 구성 요소는 NODE_ENV 환경 변수에서이를 이해하고 방문 페이지를 시각적으로 생성 할 수있는 편집기를 보여줍니다.

모든 변경 사항은 default.json 파일을 업데이트하는 API 경로로 이동합니다. 해당 파일에는 방문 페이지의 HTML이 포함되어 있으며 페이지를 구조화하는 방법을 기억하여 나중에 다시 돌아와서 업데이트 할 수 있습니다.

production 시간이 언제입니까 (예 : npm run build 또는 Vercel에 배포) React 구성 요소는 NODE_ENV 다시 읽고 default.json 파일에서 편집기에서 작성한 페이지의 HTML 버전을 이전에 작성했습니다.

참고 : 위의 설명은 Next.js입니다. React.js에서 destack -b 스크립트는 템플릿 변경 및 개발 중 파일 업로드를 처리하는 위에서 설명한 것과 유사한 API 경로를 만듭니다. 제작에서 destack -d 스크립트는 default.json public 폴더에 복사하고 정적 버전의 페이지를 빌드합니다.

프로젝트의 아키텍처에 대한 자세한 내용은 여기에 있습니다.

방법 및 안내 방법

HTML 양식 추가

양식이 포함 된 블록을 떨어 뜨립니다
양식을 클릭하고 구성 요소 설정으로 이동하십시오
양식 URL 추가 및 리디렉션을 원하지 않는 경우 async 확인
async 양식을 처리하려면 API 경로를 만들 수 있습니다.
- Next.js : API/Submit.js에서 파일을 만듭니다
- React.js : Seperate Node.js 서버가 필요합니다 /api/submit

이미지 업로드

이미지가 포함 된 블록을 떨어 뜨리거나 이미지 블록을 사용하십시오.
이미지를 클릭하여 업로드 모달을 엽니 다
업데이트 할 이미지를 선택하고 클릭하여 페이지에 추가하십시오.
참고 : 이미지는 원래 파일 이름으로 public/uploaded

블로그를 만듭니다

블로그 관련 페이지를 만듭니다.
헤더 및 바닥 글을 재사용하십시오. 이를 위해서는 Tailwind CSS를 설정해야합니다.

예 : https://github.com/liveduo/destack-landing

다중 페이지 지원

다음 .js

#with with-an-nexting-nextjs-project와 함께 다양한 페이지에 설명 된대로 pages 폴더에서 새 페이지 파일을 만들고 destack 가져옵니다.

React.js

React.js 프로젝트에 react-router-dom 또는 router-tutorial 과 같은 라우팅 라이브러리를 설치하고 #에 설명 된대로 a-new-reactjs-project와 함께 다양한 경로로 destack 하십시오. 자세한 내용은 Destack-React-Starter를 확인하십시오.