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

Blog Article Component

The Blog Article Component is to show the body content of the blog which is written with CMS. This part supports structured data of the "scheme.org", and it is shown in the Search Console of the Google.

Appearance of the Blog Article Component

The Blog Article Component is used on the Blog Article Page of the CMS template. It shows the body of the content which is edited with WYSIWYG editor.

Blog Article Body Component

This component has Style Sheet of the body content. Therefore, if you want to change the design style of it, please customize the Style Sheet of this component.

Structured Data

This component supports structured data, which is the BlogPosting. This data is shown on the Google's Search Console, and it is useful to check which pages are analysed after indexed.

BlogPosting data

Source code of the Blog Article Component

The source code is Blog Article Component consists of Html code, server side program, and Style Sheet.

Html code

The Html code of Blog Article Component is below.

This Html code has structured data, which is the "http://schema.org/BlogPosting". By setting this markup, it is shown on the Search Console of the Google.

The body of the content is the "$content" variable. This variable is created by the server side program.

Server side program

The server side program of Blog Article Component is below.

The main goal of the server side program is to make the "$content" variable by following operations.

Get article contents from database

At first, get the content from the database. The "cms_page" table has information about the content data which is edited with the CMS.

When the component is shown in the preview mode, the "$IN.publish" is "publish-meta". Then it uses the draft content.

Set updated time and created time

The content data has updated time and created time. This code formats the timestamp value to display string.

Set title of the article

The content data has title and sub title. By this code, it concatenate them/

Add name attribute to h1 tag

The BlogPosting markup requures the tag with name attribute. The "Microdata.addItemProp()" function find the first h1 tag, and add name attribute to it.

Style Sheet

The Style Sheet of Blog Article Component is below.

This Style Sheet contains the design of the body content. Therefore, if you want to change the format of the body content, please change this Style Sheet.


Go to Top