Blog

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.

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

Content Model > Blog Section

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:

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

Relation field for Categories Content Model

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.

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.

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

Content Model > Blog Section

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;
};

Function	Description
getAPIQueryObject	This 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'`
getFilterString	The 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.

Getting Started

Overview

Theme Components

Create Custom Widget

Theme Templates

Experro CLI

Other

Blog Templates

Blog Content Model in Experro Admin

Content Library > Blog Section

Content Model > Blog Section

Relation field for Categories Content Model

BlogPage Component

BlogListing Component

Content Library > Blog Section

Content Model > Blog Section

Blog-Detail Page

​Blog Templates

​Blog Content Model in Experro Admin

​Content Library > Blog Section

​Content Model > Blog Section

​Relation field for Categories Content Model

​BlogPage Component

​BlogListing Component

​Content Library > Blog Section

​Content Model > Blog Section

​Blog-Detail Page

Blog Templates

Blog Content Model in Experro Admin

Content Library > Blog Section

Content Model > Blog Section

Relation field for Categories Content Model

BlogPage Component

BlogListing Component

Content Library > Blog Section

Content Model > Blog Section

Blog-Detail Page