CMS React: Blog Templates

Developer Support CMS Development
1

Hello,

I’m trying to create a blog template with CMS React. This is an example of my template. How do I inject the Blog Body entry field into my theme template?

Thank you!

Tricia

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

{% block header %}
 {% module "header_js_module"
 path="@projects/app/src/components/modules/Header" %}
{% endblock header %}

{% block body %}
 HOW DO I PUT BLOG BODY HERE?
{% endblock body %}

{% block footer %}
 {% module "footer_js_module"
 path="@projects/app/src/components/modules/Footer" %}

{% endblock footer %}
2

Hi @tricialeach and welcome, we are so glad to have you here!
Thanks for asking the HubSpot Community!
I’d love to put you in touch with our Top Experts: Hi @Anonymous, @jeremymandle and @Anton do you have suggestions to help @tricialeach, please?
Have a wonderful day and thanks so much in advance for your valuable contributions!
Kind Regards,
Bérangère

3

Why are you using react for this? Are you building this locally and having it build, then pushing the built js into the module?
If your template is set up as a blog template, you should refer to the how the blog template is setup. That is going to be the first step -- I’d attempt to get the template setup with html/hubl before approaching anything with react.
Template markup and examples

4

I’m using React for this, because I’m using HubSpot’s CMS React product, and want to create a blog using custom React components.

5

Okay -- so what you look to be needing is a react/js partial

You would create this Blog.jsx partial and build out your component there, this is super basic

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

{% block header %}
 {% module "header_js_module"
 path="@projects/app/src/components/modules/Header" %}
{% endblock header %}

{% block body %}
 {% js_partial "blog_partial"
 path="@projects/project-folder/js-package/components/partials/Blog.jsx"
 %}
{% endblock body %}

{% block footer %}
 {% module "footer_js_module"
 path="@projects/app/src/components/modules/Footer" 
 %}
{% endblock footer %}

You could use graphql to bring in the blog data, or you could pass the data to your partial -- this is a bit more thought out and better example:

Example blog listing component from the elevate theme