Blog Article component

The Primitive Template to show the blog article.

Appearance
Design Setting

Html
Style Sheet

Server side program

Appearance

In order to preview the blog article part, open it with Primitive Template editor page, and select the page to preview in the parameter setting dialog.

The appearance of the blog article part is below.

Blog Article part preview

This part is used in following Container Templates and Top Templates.

Blog Article Container

Design Setting

The design of the footer blog article consists of Html and Style Sheet.

Html

The html code of blog article is below.


<div id="blog-post" alns:if="{BOOL($IN.page == 0)}">
  <article itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
    Created time: {$created_time} Last updated time:<data value="{$updated_time}" itemprop="datePublished">{$updated_time}</data><br />
    <div itemprop="articleBody">{$content}</div>
  </article>
</div>

This part use microdata which is "http://schema.org/BlogPosting". This means the blog posting article.

The div tag with ' itemprop="articleBody"' attribute is marked as the body of the blog post. In the body, there is a h1 tag with 'itemprop="name"' attribute. This attribute is added by the server side program automatically.

And for the blog posting microdata, the posted data is necessary.

Style Sheet

The style sheet for the html above is below.


#blog-post {
  width: 100%;
  font-family: "Open Sans",Helvetica,Arial,"Liberation Sans",sans-serif;
}

#blog-post h1 {
  color: #666;
  font-size: 26px;
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 32px;
  margin-top: 0;
  padding-bottom: 2px;
  border-bottom: 2px solid #ddd;
  font-family: Georgia,"Times New Roman",Times,serif;
}

#blog-post h2 {
  font-family: Georgia,"Times New Roman",Times,serif;
  font-weight: normal;
  font-size: 26px;
  border-bottom: 1px solid #ddd;
}

#blog-post h3 {
  font-family: Georgia,"Times New Roman",Times,serif;
  font-weight: bold;
  font-size: 17px;
  padding: 0 0 0 5px;
  border-bottom: 1px solid #ddd;
}

#blog-post a {
  color: #21759b;
}

#blog-post p {
  font-family: "Open Sans",Helvetica,Arial,"Liberation Sans",sans-serif;
  color: #333;
}

#ar-name {
  width: 100%;
  text-align: right;
}

Server side program

The server side program of the blog article part is below.


SELECT * INTO cms_page
FROM
	cms_page
WHERE
	cms_page_id = $IN.cms_page_id;

if($IN.publish != "publish-meta"){
	$cms_page[0].page_body = $cms_page[0].draft_page_body;
}

$updated_time = Timestamp.format($cms_page[0].updated_time, "yyyy-MM-dd");
$created_time = Timestamp.format($cms_page[0].created_time, "yyyy-MM-dd");

if($cms_page[0].page_sub_title != null && $cms_page[0].page_sub_title != ""){
	$title = $cms_page[0].page_title + " - " + $cms_page[0].page_sub_title; 
}else{
	$title = $cms_page[0].page_title;
}

$content = Microdata.addItemProp($cms_page[0].page_body, "h1", "name");

return 0;

The "Microdata.addItemProp()" function inserts 'itemprop="name"' attribute into the h1 tag.