【HubSpot】オリジナルテーマをつくってみる

Raynya

作成中・・・
うちの猫が運営する架空のカフェがテーマ
https://46553999.hs-sites.com/home

HubSpot で簡単にブランドキットを作ってくれるツールがあった、便利

Raynya

お手軽に作りたいので、ボイラープレートをつかう

Raynya

背景に動画を入れる方法

https://blog.hubspot.com/website/video-background-css
position: fixed; とすると、他の要素に干渉してきたため position: sticky; で調整

また記事では vw と vh が使われてるけど、横幅がはみ出したので これは % でよさそう

https://rilaks.jp/blog/problem-overflow/
＊はみ出した要素を特定する方法：

https://on-ze.com/blog/9030

Raynya

back to top ボタンを追加する方法
難しいことを考えるのが面倒だったので、html 要素は base.html に入れて CSS は新しくファイルつくって main.css に include されるようにした
https://rilaks.jp/blog/pagetop-css/

Raynya

Our team をカスタムモジュールで作ってみる

モジュールを作る時、CSS がモジュール外の要素に影響しないよう scope_css タグを使うと便利

https://developers.hubspot.jp/beta-docs/reference/cms/modules/files#:~:text=CSSをscope_cssタグで囲むことにより、CSSをモジュールインスタンスにのみ適用することもできます。
こんな感じになりました

↓

Raynya

メニューページは HubDB で作りたい
今回は下記参考に・・・ for loop を使うってことですね

フィルタリングする方法を完全に忘れてた汗クエリでフィルタリングしてみる

    {% set menus = hubdb_table_rows(<HubDB ID>,'category__eq=drinks&orderBy=name')%}
    {% for menu in menus %}
      <h2>
       {{(menu.name)}}
     </h2>
    <h4>
       {{(menu.price)}}
     </h4>
    <p>
       {{(menu.description)}}
    </p>
    {% endfor %}

画像についてはなんか、image だけじゃだめで image.url としないとだめなんよね

  <img src="{{ menu.image.url }}" alt="{{ menu.name }}" class="menu__image">

Raynya

色々と体裁を整えてとりあえず完成～
https://46553999.hs-sites.com/home