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.
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.
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.
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.
The source code is Blog Article Component consists of Html code, server side program, and Style Sheet.
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.
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.
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.