Blog List

Documentation: Blog List Component

The Blog List Component is a Vue.js component designed to display a paginated list of blog posts. It includes features for displaying blog content, navigating between pages, and showing a sidebar with categories.

Overview

This component manages the display of a list of blog posts and includes a sidebar for filtering posts by category. It handles loading states and paginates the content.

Model Documentation

The model object should include configuration details used by the component:

Model Structure

id: String
A unique identifier for the component, used as the id attribute in the HTML.

cssClass: String
Optional CSS class(es) for additional styling of the container element.

Example Model

{
  "id": "blog-list-1",
  "cssClass": "custom-blog-list"
}

Component Structure

The component is structured into a main content area and a sidebar, with dynamic rendering based on the data fetched from an API or other data source.

HTML Template

The HTML template for the component handles the display of blog posts, pagination controls, and a sidebar for categories:

Data Properties

blogList: Array
Array of blog post objects to be displayed.

currentPage: Number
Current page number for pagination.

isLoading: Boolean
Indicates if data is still being loaded.

isBlogsLoaded: Boolean
Indicates if blog data has been loaded.

isCategoriesLoaded: Boolean
Indicates if category data has been loaded.

pageCount: Number
Total number of pages available for pagination.

totalCount: Number
Total number of blog posts available.

categoryId: Number
ID of the current selected category.

categoryTitle: String
Title of the current selected category.

currentDate: String
Current date in ISO format.

categoryList: Array
Array of category objects for the sidebar.

categoryPageSize: Number
Number of categories to show before providing an option to view more.

Methods

getBlogList(): Fetches and sets the list of blogs based on the current page and category.

getCategoryList(): Fetches and sets the list of categories for the sidebar.

nextPage(): Advances to the next page in the pagination.

prevPage(): Moves to the previous page in the pagination.

pagination(page): Navigates to the specified page number and fetches the blog list.

calculateAuthorData(blog): Returns the author’s full name or email if no name is provided.

getDate(date): Formats and returns the date in a readable format.

getTagText(tag, index, length): Formats tags for display.

getDescription(blog): Returns a truncated version of the blog’s description.

shouldShowMore(blog): Determines if the "Read More" link should be shown based on the length of the summary.

setIsLoading(): Updates the loading state based on whether categories and blogs have been loaded.

Computed Properties

FirstPage: Returns the first page number (always 1).

NextPage: Returns the next page number based on the current page.

PreviousPage: Returns the previous page number based on the current page.

LastPage: Returns the last page number available.

ShowFirstPage: Determines if the "First Page" link should be shown.

ShowLastPage: Determines if the "Last Page" link should be shown.

ShowNextPage: Determines if the "Next Page" link should be shown.

ShowPreviousPage: Determines if the "Previous Page" link should be shown.

ShowNext: Returns whether the "Next" link should be shown based on the current page.

ShowPrevious: Returns whether the "Previous" link should be shown based on the current page.

Usage

This component can be used in any Vue.js application that requires a blog list with pagination and category filtering. Ensure that the model prop is properly passed and that the _getBlogList and _getCategoryList methods are defined in the parent component or provided by a mixin or plugin.

Documentation: Blog List Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

Data Properties#

Methods#

Computed Properties#

Usage#