I’m just starting with HubSpot development and running into an issue with my custom theme.
I built a new theme and made a file called “article-listing.html” for showing blog posts. The blog entries display fine, but the header and footer sections don’t appear on this page. They work perfectly on my main homepage though.
I tried adding the header.html file from my theme folder but I’m not sure if I’m doing it right. The styles aren’t loading either. Since I’m still learning, I could really use some guidance on the proper way to include these elements.
<!--
templateType: blog_listing
isAvailableForNewContent: true
enableDomainStylesheets: true
label: Custom - article listing
screenshotPath: ../images/previews/article-page.png
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Listing</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap');
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.category-nav {
display: flex;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
</style>
</head>
<body>
{% block top_section %}
{% global_partial path="MyTheme/templates/partials/top-nav.html" %}
{% endblock top_section %}
<div class="category-nav">
<a
href="/articles"
class="{% if request.path == '/articles' or request.path == '/articles/' %}current{% endif %}">
Show All
</a>
{% set article_categories = blog_topics('default', 200) %}
{% for category in article_categories %}
<a
href="{{ blog_tag_url(group.id, category.slug) }}"
class="{% if '/articles/category/' + category.slug in request.path %}current{% endif %}">
{{ category.name }}
</a>
{% endfor %}
</div>
<div class="article-grid">
<div class="grid-wrapper">
{# Pagination setup #}
{% set items_per_page = 8 %}
{% set total_items = contents|length %}
{% set page_count = (total_items / items_per_page)|round(0, 'ceil')|int %}
{% set active_page = request.query_dict.page|default('1')|int %}
{% set first_item = (active_page - 1) * items_per_page %}
{% set last_item = first_item + items_per_page %}
{# Show paginated articles #}
{% for post in contents[first_item:last_item] %}
<div class="article-card">
<img src="{{ post.featured_image }}" alt="{{ post.name }}">
<div class="card-content">
<div class="post-categories">
{% if post.tag_list %}
<div>
{% for category in post.tag_list %}
<a class="category-link" href="/articles/category/{{ category.slug }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
{% endif %}
</div>
<h3 class="post-title"><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
<p class="post-excerpt">{{ post.post_summary|truncate(120, true) }}</p>
</div>
</div>
{% endfor %}
</div>
{# Page navigation #}
{% if page_count > 1 %}
<div class="page-nav">
{# Back button #}
<a href="?page={{ active_page - 1 }}"
class="{% if active_page == 1 %}inactive{% endif %}">
Back
</a>
{# Number links #}
{% for num in range(1, page_count + 1) %}
<a href="?page={{ num }}"
class="{% if num == active_page %}current{% endif %}">
{{ num }}
</a>
{% endfor %}
{# Forward button #}
<a href="?page={{ active_page + 1 }}"
class="{% if active_page == page_count %}inactive{% endif %}">
Forward
</a>
</div>
{% endif %}
</div>
{% block bottom_section %}
{% global_partial path="MyTheme/templates/partials/bottom-nav.html" %}
{% endblock bottom_section %}
</body>
</html>