Creating Blog Feed Page using Visual editor

[OmPrakash]

I’d like to share a no-code approach for building a feed page. In this example, I’ll provide step-by-step instructions on creating a Blog feed page. This approach can be adapted for various purposes such as News, Products, and more.

Prerequisite: You’ll need a builder account space. If you don’t have one, you can choose to Sign Up.

1. Create a data model for blogs:

• Go to the Models tab.
• Click → “+ Create Model” → Choose “Data Model”.
• Fill in the name for your model and include fields like title, subtitle, image, etc. then save it.
  
  

2. Create content for the blog data model:

• Go to the Content tab.
• Click → “+ Create Entry” → Choose the data model from the list.
• Add a couple of entries and move to the next step.

3. Create a new page model and entry:

• Create a new page model or use an existing one. Below, I’ve created a new page entry for an existing “Page” model.

• We highly recommend integrating your application with Builder to live edit this page on your site (learn more here). If not, you can click “Use The Fallback Editor” to create your page in a preview experience.

  

  You should be able see the below add block within the editor.
  

  

4. Design the layout:

• Now, let’s create a section, box grid, etc., visually to hold the blog data.
• For reference, you can watch the recording below. Feel free to design the layout as per your preferences.

Video Tutorial on Design Layout

5. Connect blog data to visual elements:

• Our final step is to connect the blog data to the visual elements.
• Please refer to the following recording to understand element data binding and how to connect your Blog data.

Video Tutorial on Data Binding

You can add more elements to the visual editor, bind them to the data as needed, and experiment with various designs.

Good to know:

6. View your feed: Now, whenever you create a new blog entry, it will automatically appear on your new feed page. You can get a preview of what it might look like by visiting the Final Preview here."

Additional reference:

Connecting API Data

The “Connect data” feature offers some out-of-the-box options based on your plan, making it easy to pull in data from platforms like Contentful, Contentstack, etc.

[cedson]

This is great! Quick question, can you set a limit, ie 10, that will show for the repeating blog posts?

If yes, how would you then display a way to view older blog posts? ie- the 14th blog post since it no longer shows on the main page since it’s past 10. In other terms, how would you create an index page just using the visual editor?

[tess]

This is helpful! Could you also show how to add filters to the feed, to allow users to filter on the data model fields?

[OmPrakash]

Hello @cedson and welcome, @tess , to the forum community!

In regards to setting limits, you can manage this through the Query tab in the Connect Data settings. From there, you can easily specify a limit on the number of items displayed. Here’s a visual guide:

Furthermore, you have the flexibility to modify order types and prioritize items using the “Order by priority” option. What’s even more exciting is the ability to create your own customized queries based on Fields, Data, Target, and Custom Query.
Here are some screenshots to guide you through these features:

If you’re looking to manipulate data, you can leverage SDKs to insert your desired logic and send the manipulated data back to the builder render component. For instance, suppose you’ve transformed data and wish to incorporate it:

let blogs = [
  {
    "author_name": "John",
    "title": "The ways of life",
    "description": some content,
    "publish_date": new Date('2018-03-03'),
  },
  {
    "author_name": "Ken",
    "title": "The Mindset",
    "description": some content,
    "publish_date": new Date('2018-03-03'),
  }
];

<BuilderComponent model="page" content={page} data={{SummerTimeBlogs: blogs}}/>

Regarding the creation of a comprehensive index page, while out-of-the-box pagination capabilities are in development, you can currently utilize custom code. This example demonstrates how you can generate static paths for pagination:

export async function getStaticPaths() {
  const limit = 100;
  let offset = 0;
  const pages = await builder.getAll('page', {
    options: { noTargeting: true },
    fields: 'data.url',
  })

  while(pages.length === (limit + offset)) {
    offset += limit;
    pages.push(...(await builder.getAll('page', {
      options: { noTargeting: true },
      fields: 'data.url',
      offset, 
      limit
    })))
  }

  return {
    paths: pages.map((page) => `${page.data?.url}`),
    fallback: true,
  }
}

For more detailed information, you can refer to these resources:

• Using Custom Code: Custom Code Guide
• Querying: Querying Guide

Feel free to give these methods a try and let us know about your experience. If you have any questions, don’t hesitate to ask for assistance. We’re here to help!

[iletti]

Edit: Created invidual topic here: Builder io + qwik not showing dynamic data in published page

Any idea why following these steps works fine in builder

but when i publish changes and go to live preview it shows only broken links:

I’m using builder with qwik

Everything worked fine locally but this problem started when i deployed via vercel.