Shopify テーマ開発者向けスターターキット

3308 ワード
shopify webdev テキストリンク
Shopify テーマ開発者向けのスターター キットを作成しました.
テーマをカスタマイズして、ゼロから効率的に新しいテーマを作成できます.

🚀 shopify-quick-theme

Shopify テーマの開発には、常に Shopify スレート と Shopify テーマ キット を使用してきました.

Shopify は、特に Online Store 2.0 で作業する場合に Shopify CLI を使用することをお勧めします. (2022/03)

📖 Choosing between Shopify CLI and Theme Kit
shopify-quick-theme 基本的に Shopify CLI で動作します.

要件


  • ノード v16+
  • Shopify CLI v2.13.0

    • まだ Shopify CLI をインストールしていない場合は、Install Shopify CLI を参照してください.

    特徴


  • Shopify CLI コマンドの抽象化
  • webpack でファイルをバンドルする
  • dart-sass による SCSS から CSS へのトランスパイル
  • ESLint を使用した Lint TS ファイル
  • Stylelint を使用した Lint SCSS ファイル
  • よりきれいなフォーマットコード
  • Jest と Playwright を備えた組み込みテスト ランナー

    • 使い方



    このリポジトリから新しいリポジトリを直接生成できます.

    🚀 shopify-quick-theme

    「このテンプレートを使用する」をクリックしてください.

    プロジェクト リポジトリのクローンを作成する


    shopify-quick-theme から生成したリポジトリを複製します.

    git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY


    パッケージをインストールする



    次のコマンドを使用して、プロジェクトのすべての依存関係をインストールします.

    yarn install


    認証する



    作業したいストアに Shopify CLI を接続します.

    shopify login --store xxxxxxxxx.myshopify.com


    新しいテーマを作成する



    newTheme コマンドを使用して、新しいテーマを最初から作成します.このコマンドは、Dawn のコピーを作成します.

    yarn newTheme


    既存のテーマをカスタマイズする



    pull:new コマンドを使用して、既存のテーマをカスタマイズします.

    yarn pull:new


    テーマ ファイルに CSS と JavaScript を追加する



    これらのタグを <head></head> セクションに追加します.

    {{ 'style.css' | asset_url | stylesheet_tag }}




    <script src="{{ 'main.js' | asset_url }}" defer></script>


    開発を開始



    開始コマンドを実行します.

    yarn start


    プロジェクトを開始する前に行うことはこれですべてです🎉.
    asp.Net毎日定点実行タスク
    Redis+Luaに基づく分散型ストリーム制限