Create Blog page

Technical Questions
, ,
1

I want to create a Blog Page which loads all the blogs in card structure of data model that contain blog title, image, Category, and short description. When a user clicks on Blog card , it should navigate to the detailed Blog description page. I want to use only single Blog description page according to blog title the description will change. How can I achieve this using Builder’s functionality without using Visual Editor(with minimal code).

2

@apatil There are few things that would move forward to doing this.

My builder.io tool uses my favorite tool is Symbols and GraphQL, because it keeps understanding how to use the data model, and picks what best works for your workflow. You do not have to follow everything in Builder; your workflow matters than following the Builder workflow in development at the time.

@manish-sharma Is this correct?

Builder.registerComponent(Blog, {
  name: 'Blog',
  inputs: [
    {
      name: 'items',
      type: 'list',
      subFields: [

        { 
          name: 'title', 
          type: 'string', 
          defaultValue: 'Blog Title' 
        },

        {
          name: 'link',
          type: 'url'
        }
            
        { 
          name: 'description', 
          type: 'string', 
          defaultValue: 'Blog Description' 
        },

        {
          name: 'image',
          type: 'file',
          allowedFileTypes: ['jpeg', 'png', 'svg', 'webp'],

        }
      ],
    },
  ],
});

Then, from your going, import your code correctly into HTML after you preview everything. Styling is the most important part of your project. You can begin to style your page to your liking by following your GraphQL correctly.

This will allow you to try as many times as needed to get the coding workflow correct for your blog, using the template I created for you.

import React from 'react';
import { BuilderBlocks } from '@builder.io/react';

function Blog({ items }) {
  return (
    <>
      {items && items.length > 0 ? (
        <ul>
          {items.map((item, index) => (
            <li key={index}>
              <h1>{item.title}</h1>
              {item.image && <img src={item.image} alt={item.title} />}
              <article>{item.description}</article>
              {item.builderContent && (
                <BuilderBlocks
                  blocks={item.builderContent.blocks}
                  data={item.builderContent.data}
                />
              )}
              {item.link && <a href={item.link}>Read more</a>}
            </li>
          ))}
        </ul>
      ) : (
        <p>No blog items found.</p>
      )}
    </>
  );
}

export default Blog;

Make sure you style your Blog Card becuase if you do not style your Blog Card then you will not be like your design layout that you are design in your project.

3

Hello @apatil,

For guidance on creating a blog page in Builder.io, you may find the following resources helpful:

These links provide step-by-step instructions and examples for setting up both blog pages and dynamic content fetching.

Thanks,