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.
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.
By setting the Article markup, the detected structured data is shown on the Search Console of the Google.
It is very useful to know which pages are analysed by the Google.
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.
The Html code of Article Component is below.
This code includes structured data markup of the "sheme.org". This component supports following attribute of the Article markup.
The articleBody attribute is embedded in this Html, otherwise the name attribute is added by the 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 "scheme.org" 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.
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