Latest Blog Articles Component for Smartphone

This template part shows the list of blog articles and the headline. The blog category and top page uses this template part.

The desktop browser version is Latest blog articles.


The appearance of Latest Blog Articles is below.

Latest blog part template

This template part shows the list of blog articles which is in the blog category or blog top page. This page is used for the blog category pages and blog top page.

This part implements pagination function.


Therefore, the top templates which has this template become page with pagination.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The Html for Latest Blog Article list is below.

The html extracts "@cms_page" variable that the server side program got before render the html. It contains the list of blog articles in current blog category or top page.

The "@navi" variable is list of pagination pages. It is an array of pagination element, and the element has "url" and "disp" property.

Edit Style Sheet

The Style Sheet for the html is below.

The html element in the div tag whose id is "#latest"is the style for list of blog pages. And ones whose is "#pagetags" is pagination part's style.  

Server Side Program

This template part has 2 part of server program. The main part and pagination part.

Following program is main program to get data for Html.

This program do following operations.

  • Initialize current page by initParams() function
  • Get blog articles to show by getLatest() function
  • Get total number of records by getTotalRecords() function
  • Get variables for  pagination by Paging.getNavi() function
  • Set the url for each pagination variable by for loop.
  • Set tags each blog articles have by for loop

This program is for all pages, therefore it has to generate blog article list for current page, which is specified by the "$" variable. This variable is given by the publishing engine on publish.

Pagination Program

This template part implements pagination. In order to implement pagination, it has to return the total number of pages on the paging script.

The following code is the program.

Go to Top