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]さらに3つのテーマが追加され、フローバイト、フローリフトが追加されました。
[04/02/2023]バージョン2はNPMにリリースされました。 Destack@2またはdestack@raptで試してみてください。
[17/12/2022] Destack V2は現在ベータ版です。これは、craft.jsに基づいた新しいカスタムページビルダーが来る主要な書き直しです。 Destack-Starter-Betaでチェックしてください。 Pull/62およびIssues/22で詳細。
[11/10/2022] Destackは複数のテーマをサポートするようになりました。 Meraki UIとHyper UIが2つの新しいテーマが追加されています。
これは、Reactまたはnext.jsプロジェクト内でランディングページを構築するためのツールです。 Destackには、Tailblocks、Meraki UI、Hyper UI、Preline、Flow Bite、Flow Riftの複数のコンポーネントが含まれています。また、画像のアップロードとフォームの送信もサポートしています。
Destackは、プロジェクトに集中できるように、マーケティングページについて心配するのをやめるのに役立ちます。
Destackは現在、テーマの選択をサポートしています。
| テーマの選択 | Meraki UI(コンポーネント) |
| ハイパーUI(コンポーネント) | テールブロック(コンポーネント) |
| PRERINE(コンポーネント) | フローリフト(コンポーネント) |
| フローバイト(コンポーネント) |
Destackがサポートできるオープンソースの追い風のテーマはたくさんあります。新しいテーマを追加するのを手伝いたい場合は、ディスカッションで新しいトピックを作成するか、Twitterで私に連絡してください。
テールブロック、Meraki UI、Hyper UI、Preline、Flow Bite、Flow Riftから、数百の適切に設計された機能的なブロックがあります。赤、黄色、緑、青、インディゴ、紫とピンク。
シンプルさを念頭に置いて作成されたカスタムメイドの最小ページビルダーを搭載しています。ブラウザDevtoolsのインスペクターとのTailwind CSSクラスとCSSプロパティの変更をサポートします。
Destackは、編集者を通じてGithub、Bitbucketなどのすべての資産を保存します。管理または心配する外部依存関係はありません。
リポジトリの編集者にアップロードされた画像を保存し、必要に応じて生産時に表示されます。また、HTMLおよびAPIフォームの送信をボックスからサポートしています。
既存および新しいReactおよびnext.jsプロジェクトを機能させます。ランディングページを生産に展開するための最小限のセットアップと追加の構成は必要ありません。
Destack-Starterプロジェクトをフォークします
または、プロジェクトを展開してvercel:
または、gitpodでオンラインでプレビューします。
npm i destackpages/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'Destack-React-Starterプロジェクトをフォークします
または、プロジェクトを展開してvercel:
または、gitpodでオンラインでプレビューします。
npm i destackpackage.json :
destack -d "react-scripts start"に置き換えますdestack -b "react-scripts build"に置き換えますrace.jsコンポーネントでは、Destackをセットアップするもので:
export { ContentProviderReact as default } from 'destack'? Destackは2つの主要なコンポーネントで構成されています。1つ目は、エディターまたは生成されたページを表示するReactコンポーネントで、2つ目はRepositoryに進行状況を節約するJS APIルートです。
?dovelopment development中にプロジェクトを実行すると(つまり、 npm run devを使用)、ReactコンポーネントはNODE_ENV環境変数からそれを理解し、編集者にランディングページを視覚的に作成できることを示します。
変更するすべての変更は、 default.jsonファイルを更新するAPIルートに移動します。そのファイルには、ランディングページのHTMLが含まれており、ページを構成する方法を覚えているため、後で戻って更新できます。
productionに進む時間(つまり、 npm run buildまたはdeploy on Vercel)を使用する時期は、 NODE_ENV再度読み取り、 default.jsonファイルDestackからビルドしたページのHTMLバージョンを以前に作成します。
注:上記の説明はnext.js用です。 React.jsでは、
destack -bスクリプトは、上記のものと同様のAPIルートを作成し、テンプレートの変更とファイルアップロードを開発します。制作では、destack -dスクリプトがdefault.jsonpublicフォルダーにコピーし、ページの静的バージョンを構築します。
プロジェクトのアーキテクチャの詳細はこちらです。
asyncを確認してくださいasyncフォームを処理するには、APIルートを作成できます/api/submit必要ですpublic/uploaded例: https://github.com/liveduo/destack-landing
next.jsプロジェクトのpagesフォルダーに新しいページファイルを作成し、さまざまなページに#With-An-AnextJS-Projectで説明されているようにdestackをインポートします。
React.jsプロジェクトにreact-router-domやrouter-tutorialなどのルーティングライブラリをインストールし、#with-new-reacjs-projectにさまざまなルートに記載されているように、 destackをインポートします。詳細については、Destack-React-Starterをご覧ください。
Convributing.mdを参照してください
このプロジェクトは、迅速にプロトタイプを作成し、生成されたページの所有権を維持し、サーバーレスジャムスタックフレームワークと互換性があるという必要性から進化しました。
next.js? tailwind css? = ??
行って、これらのプロジェクトにいくつかの愛を示してください(€)。
Tailblocks、Meraki Ui、Hyper UI、Preline、Flow Bite、Flow Riftをチェックすることを忘れないでください。
寄稿者で作られています。