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.Modified at 2024-08-27 07:57:32
