Theme development

Julian1936 · ‎Jul 28, 2022

Hi all,

I am developing a them to use in HubSpot and I am using the academy videos as a starting point.

In the videos it discusses partials for things like header, footer etc. but I've created these in the past as global modules.

My question is what is the benefit of using a partial when you can have all the html, styles and js all contained inside a global module?

Thanks in advance for any responses

Teun · ‎Jul 28, 2022

Hi @Julian1936 ,

Very good point! And we use the layouts as well. In our case, they look like this:

<!DOCTYPE html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>

<head>
  <meta charset="utf-8" />
  <title>{{ page_meta.html_title }}</title>
  {% if site_settings.favicon_src %}
  <link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />
  {% endif %}
  <meta name="description" content="{{ page_meta.meta_description }}" />
  {{ require_css(get_asset_url('../../css/new_main.css'), { async: false }) }}
  {{ require_css(get_asset_url('../css/layout.css'), { async: true }) }}
  {{ require_js(get_asset_url('../../js/main.js'), { position: 'footer', async: true }) }}

  {{ standard_header_includes }}
</head>

<body>
  <div class="body-wrapper {{ builtin_body_classes }}">
    {% block header %} {% global_partial path='../partials/header.html' %} {% endblock header %}
    {% block body %} {% endblock body %}
    {% block footer %} {% global_partial path='../partials/footer.html' %} {% endblock footer %}
  </div>

  {{ standard_footer_includes }}
</body>

</html>

So we include the global_partials where the partial itself contains multiple modules.

In the end, you need to find a way to develop a theme that fits your way of developing. You could include a global module in your layout instead of using partials. You just need to think of the best approach to develop a theme that can be easily maintained.

Here is a bit more info on partials.

Learn more about HubSpot by following me on LinkedIn or YouTube

✅ Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

IvanHubsGrowth · ‎May 10, 2023

@Teun thank you for you deep answers here, it's valuble for me as well. Best

Teun · ‎Jul 28, 2022

Hi @Julian1936 ,

So let's say you have a topbar module and a header module that you want to include in each of your templates. You could develop two global modules that you include in each template in the DND area, but you could also use a header partial and include those two modules that way. Because you can set the partial as global, you also have a single screen to edit the content of both the topbar and the header, which saves you quite a few clicks to update the content for those two modules.

It is much more practical to use a partial for elements like the header and footer and the code of the partial can be quite small:

<!--
  templateType: global_partial
  label: Website header
-->
{% module 'top-bar' path='../../modules/bright_top-bar', label='Top bar' %}
{% module 'page-header' path='../../modules/bright_page-header', label='Page Header' %}

Learn more about HubSpot by following me on LinkedIn or YouTube

✅ Did my answer solve your issue? Help the community by marking it as the solution.

Julian1936 · ‎Jul 28, 2022

Thank you for this.

So the benefit is if you wanted to use mutliple modules in the header then the partial can take them and present one editing space for them for the content team. Is thatr right?

In you example couldn't you just build the top bar and header in to a single global module?

Please understand I'm not being argumentative I'm just curious about best practices as this is my first HubSpot theme 😁

Teun · ‎Jul 28, 2022

Hi @Julian1936 ,

I personally like to keep my modules as clean and simple as possible, so we have a very modular approach when we are developing a website or theme. So if I have a template that only needs the pageheader and not the topbar, this can be easily achieved by not including the topbar module.

It really depends on your way of working, but I am convinced that using partials is more efficient, simply because of the fact that you do not have to copy your global module in each of the templates, and if you do use separate modules for a topbar and pageheader, you can simply edit those from a single screen in the UI.

Let's say that you do not have a topbar in your theme, and your theme has 24 templates that have a global module set in each template, you need to edit 24 templates to add that top bar to the header.

If you have a partial that is used in the layout of all those templates, you can easily update the partial, and the top bar is included in all 24 templates. So it saves you a lot of time if used correctly.

Learn more about HubSpot by following me on LinkedIn or YouTube

✅ Did my answer solve your issue? Help the community by marking it as the solution.

Julian1936 · ‎Jul 28, 2022

Thank you Teun for these excellant answers.

Regards the 24 templates in your example, In the hubspot academy tutorials it specifies that you can use a base template and then extend it using the normal templates. For example, below would be the base.html in a layouts folder:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}" />
    {{ require_css(get_asset_url('./../css/main.css')) }} {{ standard_header_includes }}
  </head>
  <body>
    {% block header %} 
        {% module label="header" %}
    {% endblock header %}

    <main>
        {% block body %}{% endblock body %}
    </main>

    {% block footer %} 
        {% module label="footer" %}
    {% endblock footer %} 
    
    {{ standard_footer_includes }}
  </body>
</html>

Then in your about-us.html template you would have the following:

{% extends "./layouts/base.html" %}

{% block body %}
   <h1>TESTER</h1>
{% endblock body %}

The way you are kind of having a global template that you can then add those global modules to so you don't end up with the problem of having to copy it 24 times.

Again please don't think I'm being rude or argumentative you answers are great 👍

Teun · ‎Jul 28, 2022

Hi @Julian1936 ,

Very good point! And we use the layouts as well. In our case, they look like this:

<!DOCTYPE html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>

<head>
  <meta charset="utf-8" />
  <title>{{ page_meta.html_title }}</title>
  {% if site_settings.favicon_src %}
  <link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />
  {% endif %}
  <meta name="description" content="{{ page_meta.meta_description }}" />
  {{ require_css(get_asset_url('../../css/new_main.css'), { async: false }) }}
  {{ require_css(get_asset_url('../css/layout.css'), { async: true }) }}
  {{ require_js(get_asset_url('../../js/main.js'), { position: 'footer', async: true }) }}

  {{ standard_header_includes }}
</head>

<body>
  <div class="body-wrapper {{ builtin_body_classes }}">
    {% block header %} {% global_partial path='../partials/header.html' %} {% endblock header %}
    {% block body %} {% endblock body %}
    {% block footer %} {% global_partial path='../partials/footer.html' %} {% endblock footer %}
  </div>

  {{ standard_footer_includes }}
</body>

</html>

So we include the global_partials where the partial itself contains multiple modules.

In the end, you need to find a way to develop a theme that fits your way of developing. You could include a global module in your layout instead of using partials. You just need to think of the best approach to develop a theme that can be easily maintained.

Here is a bit more info on partials.

Learn more about HubSpot by following me on LinkedIn or YouTube

✅ Did my answer solve your issue? Help the community by marking it as the solution.

Julian1936 · ‎Jul 28, 2022

Hi @Teun

Thanks again for all the great info.

Given your answers I will be using partials because it does make sense because if you wanted to use, say, a social media icons module in the header and the footer you'd have to duplicate it for both the global modules whereas with partials you could pop it in both the header and footer partials and have the one module running it. Just thinking out loud now 😉

Anyway thanks again for your time 😁

Teun · ‎Jul 28, 2022

Awesome! Thank you for the great discussion regarding partials.

Good luck with your theme!

Learn more about HubSpot by following me on LinkedIn or YouTube

✅ Did my answer solve your issue? Help the community by marking it as the solution.

CMS Development