 |
| Summary of Blogger condition tags |
Summary of Blogger condition tags
In this article, I would like to summarize the Blogger conditional tags commonly used in Blogspot interface design.
During the process of designing and using Blogger , I often use some tags for programming. Now, please allow me to summarize them in this article for you to refer to when necessary.
Basic types of Blogger tags
IF/ELSE tag
<b:if>The / tag <b:else/>is the most common basic condition tag in Bloger interface design. This tag is used to set execution conditions.
An example of the structure of an IF/ELSE tag is below:
<!-- structure of an IF/ELSE -->
<b:if cond='data:view.isPost'>
<b:elseif cond='data:view.isPage'/>
<b:else/>
</b:if>
Loop tag
Tags <b:loop>in Blogger are used to perform loops. This tag is often used to extract data in an array.
<!-- Blogger are used to perform LOOP -->
<b:loop index='i' values='data:links' var='link'>
<a expr:title='data:link.name'/>
<data:link.target/>
</a>
</b:loop>
In the example above, the function is <b:loop>used to extract data from the array data:links, the element variable is declared var='link'.
To extract the value in the function <b:loop>above, we use the structure: data:"phần tử"."thuộc tính". In the example above, the link element has two attributes targetand name.
Tag Tag
The tag <b:tag>is used to declare an HTML element in Blogger. The type of HTML element is specified by the name.
<!-- here is code sample <b:tag/> -->
<b:tag expr:href="data:blog.homepageUrl.canonical" name="a">
SAMPLE TEXT
</b:tag>
In the example above, we use a tag <b:tag>to declare an element <a>. Results below:
<!-- here is example <b:tag/> -->
<a href="https://omegakd.blogspot.com">
SAMPLE TEXT
</a>
Class Card
The <b:class> tag is used to add the class name to the parent element containing this tag. The class name is specified by the name.
<!-- code example <b:class/> -->
<div class="class1">
<b:class cond='data:view.isMultipleItems' name='index-post'/>
SAMPLE TEXT
</div>
In the example above, the result below will be given if the cond='data:view.isMultipleItems'return condition is matched true.
<!-- example code <b:class/> -->
<div class="class1 index-post">
SAMPLE TEXT
</div>
Thẻ Includable
Tag <b:includable>used to call a previously declared function. The called function is specified by the attribute name, and declared by the attribute id.
<!--Example of tag syntax <b:includable/> -->
<!--Declare content for the card <b:includable/> -->
<b:includable id='postMeta' var='post'>
SAMPLE CONTENT
</b:includable>
<!-- Ví dụ về cách sử dụng thẻ <b:includable/>-->
<b:include data='post' name='postMeta'/>
Types of Blogger conditional tags
This section will describe the types of conditional tags that can be used in attributes cond. This condition attribute is used by tags: <b:if>, <b:tag>, <b:class>, <b:loop>, <b:includable>,…
Below is a summary of commonly used conditions in attributes cond:
Data structure data:view
data:view.isError : true if page not found. Used to design Error 404 page.
data:view.isHomepage : true if it is the homepage.
data:view.isLabelSearch : true if viewing the Label page.
data:view.isMobile : true if viewing in mobile mode.
data:view.isPage : true if viewing a Page.
data:view.isPost : true if viewing Post.
data:view.isSearch : true if viewing search results.
data:view.isSingleItem : true if viewing a single page: Page/Post
data:view.isMultipleItems : true if viewing multiple pages: HomePage/Search/Archive
data:view.isLayoutMode : true if viewing in Layout setting in Blogger dashboard.
See more:
Apply Lazy loading to Blogger
Instructions for changing Favicon for Blogger
Some examples of conditional tags
Extract data from attached link (enclosure link)
We can get data from the attached link using tags <b:loop>like the following example:
<!-- Example of data extraction from attached link-->
<b:loop index='i' values='data:post.enclosures' var='enclosure'>
<data:enclosure.url/>
<data:enclosure.mimeType/>
</b:loop>
In addition, we can also combine the <b:if> condition tag to pre-check the content of the attached link. In the example below, use the <b:if> tag to check that the attachment type exists audiobefore creating the download link.
<!-- Example of data extraction from attached link -->
<b:if cond="data:post.enclosures any (l => l.mimeType in {"audio"})">
<b:loop index="i" values="data:post.enclosures" var="enclosure">
<b:if cond="data:enclosure.mimeType == "audio"">
<a expr:href="data:enclosure.url">Download</a>
</b:if>
</b:loop>
</b:if>
Extract article content
To extract a short paragraph of an article, we can use the <b:eval> tag to extract content from data:post.snippets.
<!-- Example of extracting content from an article-->
<p class='entry-excerpt excerpt'>
<b:eval expr='data:post.snippets.long snippet { length: 125 }'/>
</p>
In the sample snippet above, the article content is limited to 125 characters.
Hopefully this article brings some useful knowledge for you to refer to in the blogspot design process.