Skip to main content
The base theme enables you to host and manage a dedicated blog section, where you can effortlessly write, publish, and share articles, news, and other informative content. It comes with default support to host the blog for your web application.

​
Blog Templates

Within templates, the base theme includes two specific templates for the blog:
  • blog-page.tsx
  • blog-detail.tsx
src
 └── templates
      ├── blog
          ├── blog-detail.tsx
          ├── blog-item.tsx
          ├── blog-listing.tsx
          └── blog-page.tsx
      ├── template.ts
      └── template-list.ts
You will get a field called a relation field that will enable you to establish relationships between two blog content models created in the Admin Panel. This field enables various types of relations, such as many-to-many, one-to-many, many-to-one and one-to-one.

​
Blog Content Model in Experro Admin

In the Admin panel, a workspace is already equipped with a pre-defined content model specifically designed for the blog section. This content model includes the necessary fields and configurations to manage and display the blog content effectively. To utilize the Blog page functionality in the base theme, you need to create a record in the Web-pages content model with a page-slug of /blog/.
This setup should align with the instructions and visual reference provided in the accompanying screenshots below.
image.png image.png Once you have a clear understanding of the Blog functionality in the base theme, you can make any necessary modifications to suit your specific requirements.

​
Content Library > Blog Section

image.png

​
Content Model > Blog Section

image.png In the pre-defined content model for the blog section in the Admin panel, there are two fields of the relation field type.

These fields are:
  1. Author: This field allows you to associate a blog post with the author or creator of the post.
  2. Categories: This field allows you to assign one or multiple categories to a blog post, helping organize and classify the content.
image.png

​
Relation field for Categories Content Model

image.png As shown in the above image, we can arrange the relationship between Category and Post to many-to-many relationship. This indicates that multiple blog posts can be associated with a single category, and a single blog post can be associated with multiple categories. It allows for a flexible and versatile categorization of blog posts based on various topics or themes. image.png image.png

​
BlogPage Component

To access the blog template in the base-theme, you can navigate to the following directory structure. 
src
 └── templates
      ├── blog
          ├── blog-detail.tsx
          ├── blog-item.tsx
          ├── blog-listing.tsx
          └── blog-page.tsx
      ├── template.ts
      └── template-list.ts
In the Admin Panel, the blog-page(blog-page.tsx) template needs to be assigned to all the categories and author records in order to display the blog content correctly. image.png The blog-page template in the base theme contains a component that handles the listing of blog posts when the page assigned with the blog-page. 
import ExpBlogListing from "./blog-listing";

const BlogPage = ({ pageData, components }) => {
  return (
    <>
      // ...
      <DraggableArea
        style={{ width: "auto" }}
        cssClass=""
        id={"blog-page-drop1"}
        components={components}
        modelField=""
        pageData={pageData}
      />

      <ExpBlogListing pageData={pageData} />
    </>
  );
};

​
BlogListing Component

The blog-page template in the base theme utilizes the ExpBlogListing component, which receives the pageData as a prop. In the blog-listing component, there are two important functions that need to be considered for manipulating how the blog data is fetched and displayed on the blog-page template. These functions are responsible for fetching the blog data and c

​
Content Library > Blog Section

image.png

​
Content Model > Blog Section

image.png In the pre-defined content model for the blog section in the Admin panel, there are two fields of the relation field type.

These fields are: ontrolling its rendering on the page. By modifying these functions, you can customize the data you get from the Admin Panel. 
const getAPIQueryObject = () => {
  let queryObject = {
    fieldKey: "idid",
    fieldValue: "*",
    modelInternalName: "posts",
    fieldsToQuery:
      "summary_et,page_slug,page_title_esi,thumbnail_image_emd,publish_date_edsi",
    sortBy: "created_at",
    sortType: "asc",
    contentDataSortBy: "created_at",
    relationField: "categories_exp_rel,author_exp_rel",
    relationFieldDataToQuery: "page_slug,title",
    skip: "5",
    limit: "5",
  };

  return queryObject;
};


const getFilterString = () => {
  let filter = "";
  if (pageData.content_model_internal_name === "categories") {
    filter += `categories_exp_rel:(${pageData?.content_model_data_id})`;
  }
  if (pageData.content_model_internal_name === "author") {
    filter += `author_exp_rel:(${pageData?.content_model_data_id})`;
  }
  return filter;
};
FunctionDescription
getAPIQueryObjectThis function is responsible for preparing an object for the API payload. It retrieves the data for the Post content model from the Experro Admin, including all the records related to posts. This function helps organize and structure the data in a format suitable for the API requests and subsequent usage in the application.

To fetch data from the Experro Admin for the posts content model, including the related category and author information, you need to provide the necessary values in the query object. This allows you to retrieve the desired data from the specified content model, along with its associated category and author data.

realtionField :
This key, when provided with a specific value, instructs the query to fetch the data of the content model along with the related data from other content models that are associated with it. This allows you to retrieve the interconnected data and access the related content model’s data within the main content model’s data.
Example,
In the code snippet above, we are fetching the data of the posts content model. Additionally, we want to retrieve the data of the category content model and the author content model, which are related to the post records. This allows us to access and include the related data of the category and author content models when fetching the “post” data.
relationField:'categories_exp_rel,author_exp_rel'


relationFieldData:
The relationFieldData key allows you to specify the fields of the related content models that you want to retrieve. By providing the desired field names in the relationFieldData key, you can fetch the specific data from the related content models that are associated with the posts content model.
Example, To retrieve the page_slug and title fields for the related content model associated with the posts record, specify those fields in the query’s relationFieldData key for the related content model (related_content_model).
relationFieldDataToQuery: 'page_slug,title'
getFilterStringThe Blog-page template is designed to be assigned to records of content models such as Categories, Author, and the main Blog Page. The Blog-page record itself is created in the web-pages content model with a page-slug value of /blog/.

In the getAPIQueryObject function, there is a condition that distinguishes whether it is a main Blog-page or not. In the case of a other page, we need to fetch and display the posts that belong to the specified category or author.To specify whether the page is related to the categories content model or the author content model from pageData?.content_model_internal_name, we add an additional key to the apiData object called filter.

This filter key contains information about the content model type and the content_model_data_id. It uses the category_exp_rel value when it is related to the categories content model. You can refer to the getFilterString function to understand more about how this filter string is constructed.

​
Blog-Detail Page

For Blog-Detail page, template is already created in the the base theme, you need to use a template named blog-detail.tsx. This template should be assigned to the records of the posts content model in the Experro Admin panel. This assignment will ensure that the blog-detail template is used to render the individual blog post pages. For a better understanding of the implementation details, you can refer to the code in the base theme template directory. The code will provide more insights into how the Blog functionality is implemented.