# Blog Components
You can turn any collection of pages in Bootstrap Studio into a functional blog with the help of the built-in Blog components. This page documents the components, their functions and options.
You can see them in action in this lesson.
# Blog Options
A crucial piece of turning pages into blog posts is the Blog Options settings screen that is available in the Properties dialog of each page.
Here you can enter additional data like a blog post image, title, excerpt and publication date, which will be picked up by the blog components listed below.
# Components
You can see the available components in the Blog group, available in the Component panel:
# Blog Loop
The Blog Loop is a powerful component that dynamically generates a list of blog posts from a selected folder of pages in your design. You can place it on your index page to list all your posts, or beneath each post or in a sidebar as a way to construct a related posts section.
It has the following options:
- Source Folder: Specifies the folder containing the pages to display as blog posts.
- Type: Defines how the posts are displayed. It has the following options:
- Default lists each child as a div and gives you complete styling freedom.
- Row makes the loop behave like a Row and the children as Columns so you can make your layout responsive using the Bootstrap grid options.
- Order By: Determines the sorting order of posts. Options include:
- Date (Desc): Newest posts first.
- Date (Asc): Oldest posts first.
- Name (Desc): Alphabetical sorting, Z to A.
- Name (Asc): Alphabetical sorting, A to Z.
- Exclude Current Page: Excludes the current page from being listed in the loop (useful for related post sections).
- Show Pagination: Enables pagination to break posts into multiple pages.
- Per Page: Sets the number of posts displayed per page (e.g., 12).
- Add URL Parameter: Adds the current page number to the URL to support direct links and browser history navigation.
- URL Parameter: Allows you to specify the URL parameter name (default:
page).
Since Blog Loop embeds the contents of the list as regular HTML code in the page, the blog is lightning fast, works on any web host, and doesn't require a CMS like WordPress to function.
TIP
Blog Loop can be used for much more than just blog posts. Since you have full control of each item's HTML you can build any type of layout with it.
# Blog Post Title
When added to a page, Blog Post Title automatically displays the title set in the Blog Options. If it is added to a loop item within the Blog Loop, it will pull the title from the blog options of the relevant page.
It inherits all the standard Heading options:
# Blog Post Excerpt
When added to a page, Blog Post Excerpt automatically displays the title set in the Blog Options. If it is added to a loop item within the Blog Loop, it will pull the excerpt from the blog options of the relevant page.
It has the standard textual options for a paragraph, plus the Length Limit option, which shortens the excerpt to the specified number of characters.
# Blog Post Image
When added to a page, Blog Post Image automatically displays the cover image set in the Blog Options. If it is added to a loop item within the Blog Loop, it will pull the image from the blog options of the relevant page.
It has the same options as the Image component, with the notable exception of the src property. The source is set automatically.
# Blog Post Link
Blog Post Link is a standard hyperlink which always points to the blog post page's URL. This is useful in Blog Loop, where you can make each card, button or heading of a blog post to point to the relevant blog post page.
It has the same options as the Link component, with the notable exception of the href property. The href is set automatically.
