posted time Created time: 2015-07-01 posted time Last updated time:

Articles Component for CMS

The article part is most used component to show the body contents of the page. This component is for main contents, not for blog posts.

Usage of the Article Component

The Article component is used in following templates.

  • Default Page
  • Top Page
  • Keyword Tag Page
  • Search Page
  • Blog Top Page
  • Blog Category Page

All of the pages but Blog Article Page uses this component.

This CMS manages the page structure by content editor. Then you can write content with the WYSIWYG editor. The edited content is styled by this component, and it is shown as published Html page.

Article Structured Data

By setting the Article markup, the detected structured data is shown on the Search Console of the Google.

Detected structured data

It is very useful to know which pages are analysed by the Google.

Source code of the Article Component

The source code of Article component consists of Html, server program, and Style Sheet. When you customise the basic design of the article's body on the main content page, please customise the Style Sheet.

Html code

The Html code of Article Component is below.

This code includes structured data markup of the "". This component supports following attribute of the Article markup.

  • articleBody
  • name

The articleBody attribute is embedded in this Html, otherwise the name attribute is added by the server side program.

Server side program

The server side program's code of Article component is below.

This program does following operations.

Get page content from the database

At first, query the database by the parameter which is the id of the page to get record of current article. The data is in the "cms_page" table.

Calculate the base path and replace large images

Calculate current path, replace the large images into small ones.

The "HtmlImage.replaceImage()" function generate small images from the images in the contents, and replace the Html code.

Add name attribute to the h1 tag

The Article markup of the "" needs the name attribute.

The "Microdata.addItemProp()" function find the h1 tag, and add name attribute to it.

Add the subtitle if subtitle is defined

If the subtitle is defined, it is added to the "$title" variable. But the default template does not use the "$title" variable.

Style Sheet

The Style Sheet defines the design of the body article. The code is below.

The Style Sheet defines following Html tag's design.

  • h1, h2, h3 ,h4 tag
  • anchor tag
  • list tag
  • These of the smartphone version

Go to Top