destack

Dectack? โอบกอดการออกแบบ เป็นเจ้าของสแต็ค

สร้างหน้า Landing Pages ที่ถูกต้องในโครงการ React หรือ Next.js ของคุณ ปรับใช้เป็นศูนย์การกำหนดค่าเพิ่มเติม!

- ตัวอย่าง: prettyfunnels.com, getdestack.com

การประกาศ

[13/03/2024] Destack V3 เพิ่งเปิดตัวใน NPM เรียนรู้เพิ่มเติมที่ Pull/103 และปัญหา/104 โปรดทราบว่าหน้าเว็บที่สร้างขึ้นด้วย V2 จะต้องสร้างใหม่ด้วย V3 เพื่อให้ทำงานได้อย่างราบรื่น

[10/10/2023] Destack V3 อยู่ในช่วงเบต้า รุ่นนี้เป็นการเขียนใหม่ของตัวแก้ไขตั้งแต่เริ่มต้น ลองดูที่ Destack-Starter-Beta เพิ่มเติมที่ pull/103 และปัญหา/104

[13/06/2023] อีกสามธีมได้รับการเพิ่ม preline, Flow Bite และ Flow Rift

[04/02/2023] เวอร์ชัน 2 เพิ่งเปิดตัวใน NPM ลองใช้กับ Destack@2 หรือ Destack@ล่าสุด

[17/12/2022] Destack V2 อยู่ในเบต้าแล้ว เป็นการเขียนใหม่ที่สำคัญที่มาพร้อมกับตัวสร้างหน้าแบบกำหนดเองใหม่ตาม craft.js ลองดูที่ Destack-Starter-Beta เพิ่มเติมที่ pull/62 และปัญหา/22

[11/10/2022] ตอนนี้ DeStack รองรับหลายธีม มีการเพิ่มธีมใหม่สองชุดใหม่และ Hyper UI

Destack คืออะไร?

เป็นเครื่องมือในการสร้างหน้า Landing Page ภายในโครงการ React หรือ Next.js ของคุณ Destack มีหลายองค์ประกอบจาก tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite และ Flow Rift .. นอกจากนี้ยังรองรับการอัปโหลดรูปภาพและการส่งแบบฟอร์ม

Destack ช่วยให้คุณหยุดกังวลเกี่ยวกับหน้าการตลาดเพื่อให้คุณสามารถมุ่งเน้นไปที่โครงการของคุณ

ธีม

ตอนนี้ Destack รองรับการเลือกธีม

การเลือกธีม	Meraki UI (ส่วนประกอบ)
Hyper UI (ส่วนประกอบ)	tailblocks (ส่วนประกอบ)
preline (ส่วนประกอบ)	Flow Rift (ส่วนประกอบ)
Flow Bite (ส่วนประกอบ)

มีส่วนร่วม (เพิ่มธีมใหม่)

มีธีม Tailwind โอเพนซอร์สมากมายที่ Destack สามารถรองรับได้ หากคุณต้องการช่วยเพิ่มธีมใหม่ให้สร้างหัวข้อใหม่ในการสนทนาหรือติดต่อฉันบน Twitter

คุณสมบัติ

- บล็อกที่ทรงพลัง

มีบล็อกที่ได้รับการออกแบบมาอย่างดีและใช้งานได้ดีหลายร้อยบล็อกจาก tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite และ Flow Rift .. รองรับสีธีมของ Tailwind เช่น สีแดง, เหลือง, เขียว, น้ำเงิน, คราม, สีม่วงและสีชมพู

- ผู้สร้างที่น่ายินดี

ขับเคลื่อนโดยผู้สร้างหน้าขั้นต่ำที่กำหนดเองที่สร้างขึ้นด้วยความเรียบง่ายในใจ รองรับการเปลี่ยนแปลงคุณสมบัติของคลาส CSS และคุณสมบัติ CSS กับผู้ตรวจสอบในเบราว์เซอร์ Devtools

- การเป็นเจ้าของข้อมูล

Destack เก็บทรัพย์สินทั้งหมดของคุณไว้ใน GitHub, BitBucket ฯลฯ ผ่านทางบรรณาธิการ ไม่มีการพึ่งพาภายนอกที่จะจัดการหรือกังวลเกี่ยวกับ

- การสนับสนุนสินทรัพย์และแบบฟอร์ม

จัดเก็บภาพที่อัปโหลดในตัวแก้ไขในที่เก็บของคุณและแสดงเมื่อจำเป็นในการผลิต ยังรองรับการส่งแบบฟอร์ม HTML และ API ออกจากกล่อง

?? ‍ การตั้งค่าและการปรับใช้ง่าย ๆ

ทำงานที่มีอยู่ & ใหม่ React และโครงการ next.js ต้องมีการตั้งค่าน้อยที่สุดและไม่มีการกำหนดค่าเพิ่มเติมเพื่อปรับใช้หน้า Landing Page ของคุณเพื่อการผลิต

เริ่มต้น

ด้วยโครงการ Next.js ใหม่:

• แยกโครงการ Destack-Starter

• หรือปรับใช้โครงการไปยัง Vercel:

• หรือดูตัวอย่างออนไลน์ด้วย gitpod:

ด้วยโครงการ next.js ที่มีอยู่:

1. ติดตั้ง destack ในโครงการ next.js ของคุณ

npm i destack

2. การตั้งค่าจุดสิ้นสุดของตัวสร้าง

สร้าง pages/api/builder/handle.js และเพิ่มสิ่งต่อไปนี้:

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

3. จากนั้นสร้างหน้าใหม่

ในหน้า next.js ใด ๆ ที่คุณต้องการตั้งค่า DESTACK:

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

ด้วยโครงการ React.js ใหม่:

• แยกโครงการ Destack-React-Starter

• หรือปรับใช้โครงการไปยัง Vercel:

• หรือดูตัวอย่างออนไลน์ด้วย gitpod:

ด้วยโครงการ React.js ที่มีอยู่:

1. ติดตั้ง destack ในโครงการ React.js ของคุณ

npm i destack

2. การตั้งค่าจุดสิ้นสุดของตัวสร้าง

ใน package.json :

• แทนที่สคริปต์ "เริ่ม" ด้วย destack -d "react-scripts start"
• จากนั้นแทนที่สคริปต์ "build" ด้วย destack -b "react-scripts build"

3. จากนั้นสร้างหน้าใหม่

ในส่วนประกอบ react.js ใด ๆ ที่คุณต้องการตั้งค่า DESTACK:

 export { ContentProviderReact as default } from 'destack'

มันทำงานอย่างไร

- Dectack ประกอบด้วยสององค์ประกอบหลักส่วนแรกคือองค์ประกอบปฏิกิริยาที่แสดงตัวแก้ไขหรือหน้าสร้างและเส้นทางที่สองคือเส้นทางถัดไป JS API ที่ช่วยประหยัดความคืบหน้าของคุณไปยังที่เก็บข้อมูลของคุณ

? ‍ เมื่อคุณเรียกใช้โครงการใน development (เช่นด้วย npm run dev ) ส่วนประกอบ React จะเข้าใจได้จากตัวแปรสภาพแวดล้อม NODE_ENV และแสดงให้คุณเห็นตัวแก้ไขที่คุณสามารถสร้างหน้า Landing Page ของคุณได้

การเปลี่ยนแปลงทุกครั้งที่คุณทำจะไปที่เส้นทาง API ซึ่งอัปเดตไฟล์ default.json ไฟล์นั้นมี HTML สำหรับหน้า Landing Page ของคุณและจะจำได้ว่าคุณจัดโครงสร้างหน้าของคุณอย่างไรเพื่อให้คุณสามารถกลับมาได้ในภายหลังเพื่ออัปเดต

เวลาที่จะไปใน production (เช่นทำ npm run build หรือปรับใช้กับ Vercel) ส่วนประกอบ React จะอ่าน NODE_ENV อีกครั้งและสร้างเวอร์ชัน HTML ของหน้าเว็บที่คุณสร้างในตัวแก้ไขจากไฟล์ default.json ที่สร้างขึ้นสำหรับคุณก่อนหน้านี้

หมายเหตุ: คำอธิบายข้างต้นสำหรับ next.js ใน React.js สคริปต์ destack -b สร้างเส้นทาง API คล้ายกับเส้นทางที่อธิบายไว้ข้างต้นที่จัดการกับการเปลี่ยนแปลงเทมเพลตและการอัปโหลดไฟล์ในการพัฒนา ในการผลิตสคริปต์ destack -d จะเริ่ม default.json ไปยังโฟลเดอร์ public และสร้างเวอร์ชันคงที่ของหน้า

เพิ่มเติมเกี่ยวกับสถาปัตยกรรมของโครงการที่นี่

วิธีการและคำแนะนำ

การเพิ่มแบบฟอร์ม HTML

• วางบล็อกที่มีแบบฟอร์ม
• คลิกที่การตั้งค่าแบบฟอร์ม & มุ่งหน้าไปยังส่วนประกอบ
• เพิ่ม URL แบบฟอร์ม & ตรวจสอบ async หากไม่ต้องการการเปลี่ยนเส้นทาง
• ในการจัดการแบบฟอร์ม async คุณสามารถสร้างเส้นทาง API
  • next.js: สร้างไฟล์ใน api/subment.js
  • React.js: คุณจะต้องมีเซิร์ฟเวอร์ Seperate Node.js ฟัง ON /api/submit

อัพโหลดรูปภาพ

• วางบล็อกที่มีรูปภาพหรือใช้บล็อกภาพ
• คลิกที่ภาพเพื่อเปิดการอัปโหลด Modal
• เลือกรูปภาพที่คุณต้องการอัปเดตและคลิกเพื่อเพิ่มลงในหน้าเว็บ
• หมายเหตุ: รูปภาพจะถูกอัปโหลดไปยัง public/uploaded ด้วยชื่อไฟล์ดั้งเดิมของพวกเขา

สร้างบล็อก

• สร้างหน้าบล็อกที่เกี่ยวข้อง
• นำส่วนประกอบส่วนหัวและส่วนท้ายกลับมาใช้ซ้ำ โปรดทราบว่าสิ่งนี้ต้องมีการตั้งค่า Tailwind CSS

ตัวอย่าง: https://github.com/liveduo/destack-landing

การสนับสนุนหลายหน้า

next.js

สร้างไฟล์หน้าใหม่ในโฟลเดอร์ pages ของโครงการ Next.js และนำเข้า destack ตามที่อธิบายไว้ใน #พร้อมกับโครงการ Nextjs ไปยังหน้าต่างๆ

react.js

ติดตั้งไลบรารีการกำหนดเส้นทางเช่น react-router-dom หรือ router-tutorial ในโครงการ React.js และนำเข้า destack ตามที่อธิบายไว้ใน #กับ -a-new-reactjs-project ไปยังเส้นทางต่าง ๆ สำหรับข้อมูลเพิ่มเติมลองดู Destack-React-Starter

มีส่วนร่วมในโครงการ

ดูการสนับสนุน. md

โครงการนี้มีอยู่อย่างไร

โครงการนี้พัฒนาขึ้นจากความต้องการต้นแบบอย่างรวดเร็วรักษาความเป็นเจ้าของหน้าสร้างและเข้ากันได้กับเฟรมเวิร์กติดขัดแบบไร้เซิร์ฟเวอร์

next.js? ➕ tailwind css? -

โปรดไปและแสดงโครงการเหล่านี้ความรัก (️)

อย่าลืมที่จะตรวจสอบ tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite และ Flow Rift โดยไม่มีส่วนประกอบที่เปิดกว้างที่น่าตื่นตาตื่นใจของพวกเขาจะไม่เป็นไปได้

ผู้มีส่วนร่วม

ทำกับผู้มีส่วนร่วม-IMG

งานที่กำลังจะมาถึง

• เพิ่ม admin ui เป็นเส้นทาง next.js