Tagged Pages Component for Smartphone

This template part is used in the content pages, top page, and blog article pages to show what tag is assigned to the page.

The desktop browser version is Tagged Pages.

Appearance

The appearance of tagged pages are below.

smart phone tagged page part

This part shows the list of pages which has the tag. In addition to listing the pages, it show other tags with link on the list. By adding those links, user can easily find relevant tags, and search engine also can find relevant tag pages.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The Html of Tagged Pages for smart phone is below.

This Html has 2 sections.

  1. The part to show list of pages which has keyword tag of current page
  2. The pagination part

The pagination part appears when the number of pages is greater than limit of one page.

The limit number of pages to show in a page is defined by parameter written in the server side program.

Edit Style Sheet

The style sheet for the Html is below.

This Style Sheet is for div tags whose id is "#tagged-pages" and "#pagetags", and inner Html elements.

The style definition starts with "#tagged-pages" is for the list of pages, and one starts with "#pagetags" is for pagination part.

Server Side Program

The server side program to get the list of document node having current keyword tag is below.

This server side program does following operations.

  1. Initialize page parameter by initParams() function.
  2. Get keyword tag object of current page by getTagFromPage() function.
  3. Get pages having current keyword tag and set url and other key word tags property.
  4. Get total records of pages having this tag.
  5. Get pagination part's base object by Paging.getNavi() function
  6. Set url for the pagination object

Pagination Program

This part implements pagination. Therefore this part have to implement program to return max page number.



Go to Top