HubSpotのCMSでテーマを使用します。
hs create website-theme my-website-theme
を実行します。これにより、my-website-theme
ディレクトリーが作成されて、そこにCMSテーマボイラープレートのファイルが格納されます。
CMSボイラープレートをHubSpotアカウントにアップロードする
hs upload my-website-theme my-website-theme
を実行します。これにより、ボイラープレートがアカウントのデザインマネージャーにアップロードされ、「my-website-theme」というタイトルのフォルダーにアップロードされます。ページを作成する
テーマフィールドを編集する
ローカルでの変更に向けて準備する
hs watch my-website-theme my-website-theme
を実行します。このコマンドは、ローカルディレクトリーを監視し、以後、ファイルが保存されると変更内容をHubSpotアカウントに自動的にアップロードします。テーマフィールドを追加する
fields.json
ファイルを開きます。これは、テーマエディターのサイドバーで利用可能なフィールドを制御するためのファイルです。フッターの高さを指定するための新しいフィールドを追加します。footer
グループを見つけます。fields.json
を保存し、HubSpotでテーマのプレビューアーを再読み込みします。左のサイドバーに新しいフィールドが表示されます。CSSでフィールドを参照する
theme-overrides.css
ファイルを開きます。次に、.footer
のCSSセレクターを見つけます。続いて、このセレクターにmin-height
を追加します。
theme
オブジェクトを使用します。例えば{{ theme.footer.height }}
を使用して、高さフィールドに設定された高さの値にアクセスします。.footer
宣言を次のコードで置き換えます。theme-overrides.css
を保存し、HubSpotアカウントにアップロードします。変更をテストする