Next and Prev Article Component for Smartphone

This template part is used in the smartphone's blog article page to show the next and previous articles.

The desktop browser version is Prev and next articles.


The appearance of Nexr and previous article is below.

next and previous template part

This part shows the next and previous blog articles sorted by the updated time. This part is very important for the smart phone page to show other articles. That is because the screen of the mobile device is narrow, so listing many blog articles in a page navigation is not available.

You can customize the number of listing next and previous articles by editing server code's parameter.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The html for next and previous blog article list is below.

This Html uses mainly "@next" and "@prev" variable. In addition to them, it uses the variable which means each size of array.

Default number of blog articles in each list is 3. By changing the parameter of the number in the server side program, you can change it.

Edit Style Sheet

The Style Sheet for the Html is below.

This style sheet specify the surrounding div tag's style and the h3 tag in it.

Server Side Program

The server side program to get variable shown in the Html is below.

This program does following operations.

  1. Get current page's information by getCurrentPage() function.
  2. Get list of next blog articles by getNext() function
  3. Get list of previous blog articles by getPrev() function

The size of the list is specified by the "$limit" variable.

Go to Top