destack
1.0.0
قم ببناء صفحات الهبوط بصريًا في مشاريع 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. المزيد في السحب/103 والقضايا/104.
[13/06/2023] تمت إضافة ثلاثة مواضيع أخرى مسببة ، لدغة التدفق وتدفق الصدع.
[04/02/2023] تم إصدار الإصدار 2 على NPM. جربها مع Destack@2 أو Destack@الأحدث.
[17/12/2022] Destack V2 الآن في بيتا. إنها إعادة كتابة رئيسية تأتي منشئ صفحات مخصص جديد على أساس Craft.js. تحقق من ذلك في Destack-Starter-Beta. المزيد في السحب/62 والقضايا/22.
[11/10/2022] يدعم Destack الآن موضوعات متعددة. تمت إضافة موضوعين جديدين Meraki UI و Hyper UI.
إنها أداة لبناء صفحات مقصودة ضمن مشاريع React أو Next.js. يتضمن Destack مكونات متعددة من Bblocks و Meraki UI و Hyper UI و Preline و Flow Bite و Flow Rift .. كما يدعم تحميل الصور وتقديمات النماذج.
يساعدك Destack على التوقف عن القلق بشأن صفحات التسويق حتى تتمكن من التركيز على مشروعك.
DESTACK يدعم الآن اختيار الموضوع.
| اختيار الموضوع | Meraki UI (مكونات) |
| Hyper UI (مكونات) | حبلاء (مكونات) |
| PRIEN (مكونات) | الصدع التدفق (المكونات) |
| لدغة التدفق (المكونات) |
هناك العديد من موضوعات الريح ذات المصدر المفتوح التي يمكن أن تدعمها Destack. إذا كنت ترغب في المساعدة في إضافة موضوع جديد ، قم بإنشاء موضوع جديد في المناقشات أو التواصل معي على Twitter.
هناك المئات من الكتل الوظيفية المصممة جيدًا والوظيفية من حبات التيل ، و Meraki UI ، و Hyper UI ، و Priline ، و Flow Bite and Flow Rift .. يدعم ألوان موضوع Tailwind أي. أحمر ، أصفر ، أخضر ، أزرق ، نيلي ، أرجواني ووردي.
مدعومًا ببناء صفحات مخصص مخصص تم إنشاؤه مع وضع البساطة في الاعتبار. وهو يدعم تغيير فئات CSS وخصائص CSS مع المفتش في DevTools متصفح.
يقوم Destack بتخزين جميع أصولك على Github و Bitbucket وما إلى ذلك من خلال المحرر. لا توجد تبعيات خارجية لإدارة أو القلق.
يخزن الصور التي تم تحميلها في المحرر في المستودع الخاص بك ويعرضها عند الحاجة على الإنتاج. يدعم أيضًا نموذج HTML و API Out Out Out of the Box.
يعمل مشاريع React & NEXT.JS الحالية والجديدة. يتطلب الحد الأدنى من الإعداد ولا يوجد تكوين إضافي لنشر صفحات المقصود الخاصة بك على الإنتاج.
شوكة مشروع Destack-Starter
أو نشر مشروع إلى Vercel:
أو معاينةها عبر الإنترنت باستخدام gitpod:
npm i destack قم بإنشاء pages/api/builder/handle.js وأضف ما يلي:
export { handleEditor as default , config } from 'destack/build/server' على أي صفحة Next.js تريد إعداد Destack:
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'شوكة المشروع المتفاعل
أو نشر مشروع إلى Vercel:
أو معاينةها عبر الإنترنت باستخدام gitpod:
npm i destack في package.json :
destack -d "react-scripts start"destack -b "react-scripts build" في أي مكون React.js تريد إعداد Destack:
export { ContentProviderReact as default } from 'destack'؟ يتكون Destack من مكونين رئيسيين ، الأول هو مكون React الذي يعرض المحرر أو الصفحة التي تم إنشاؤها والثاني هو طريق API التالي. js يحفظ تقدمك إلى مستودعك.
؟ عند تشغيل المشروع في development (على سبيل المثال. مع npm run dev ) ، يفهمه مكون React من متغير بيئة NODE_ENV ويظهر لك المحرر حيث يمكنك إنشاء صفحتك المقصودة بصريًا.
كل تغيير تقوم به يذهب إلى مسار API الذي يقوم بتحديث ملف default.json . يحتوي هذا الملف على HTML لصفحتك المقصودة ويتذكر كيف تقوم ببنية صفحتك حتى تتمكن من العودة لاحقًا لتحديثها.
عندما يحين الوقت default.json إلى production NODE_ENV أي npm run build
ملاحظة: الوصف أعلاه هو لـ Next.js. في React.js ، يقوم البرنامج النصي
destack -bبإنشاء مسار API يشبه المسار الموضح أعلاه والذي يعالج تغييرات القالب وتحميلات الملفات في التطوير. في الإنتاج ، يقوم برنامجdestack -dScript بنسخdefault.jsonإلى المجلدpublicويبني نسخة ثابتة من الصفحة.
المزيد عن بنية المشروع هنا.
async إذا كنت لا تريد إعادة توجيهasync ، يمكنك إنشاء مسار API/api/submitpublic/uploaded بأسماء الملفات الأصليةمثال: https://github.com/liveduo/destack-landing
قم بإنشاء ملف صفحة جديد في مجلد pages من مشروع Next.js واستيراد destack كما هو موضح في #مع وجود-Nextjs-project إلى صفحات مختلفة.
قم بتثبيت مكتبة التوجيه مثل react-router-dom أو router-tutorial في مشروع React.js واستيراد destack كما هو موضح في #with-a-new-reactjs-project إلى طرق مختلفة. لمزيد من المعلومات تحقق من Destack-React-Starter.
انظر المساهمة
تطور هذا المشروع من الحاجة إلى النموذج الأولي بسرعة ، والحفاظ على ملكية الصفحات التي تم إنشاؤها وتتوافق مع أطر عمل المربى الخادم.
Next.js؟ ➕ CSS Tailwind؟ = ؟؟
يرجى الذهاب وإظهار هذه المشاريع بعض الحب (️).
لا تنس التحقق من حبات التيل ، و Meraki UI ، و Hyper UI ، و Priline ، و Play Bite و Flow Rift. ، دون أن يكون مكوناتها المفتوحة المذهلة من هذا القبيل لا يمكن أن يكون ذلك ممكنًا.
صنع مع المساهمين-IMG.
