Creating Blog Feed Page using Visual editor

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

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:

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!

1 Like