Halo Blog Theme Simple Beautification Tutorial - Using Sakura Theme as an Example

Introduction#

Compared to Hexo blogs, Halo blogs are considered to be newcomers. Unlike the simple and straightforward website building process of Hexo blogs, Halo blog system has advantages in terms of usage and has many tutorials. However, there are not many tutorials specifically for Halo blogs. Therefore, there is a need for people to come forward and share techniques or tutorials specifically for Halo blogs. This article directly quotes a lot of code from the article "Halo Blog Deep Customization and Beautification Tutorial (Using HanShan Theme as an Example)" by Sanarous, which is really impressive! I would also like to thank the theme provider Takagi for providing the Sakura theme.

Preparation#

I am using IntelliJ IDEA: Go to official website.
I also recommend using other development software that supports remote server connections.
Alternatively, you can directly use the theme editing feature provided by Halo's backend [Appearance - Theme Editor].

Remote Configuration#

Create an empty project, named halo-demo in this case.
Deploy a remote connection server. Note the type is SFTP and the port is usually 22. In this case, the name is halo-online.
Deploy the mapping path to the theme folder.
Clone the files in the theme to the local machine. If the project files are displayed in the project, it means the cloning is successful.
After that, you can modify the files locally and synchronize them to the server for modification.

Beautification Begins#

Tag 🏷️ Style#

The styles are as follows:

This is the info tag style

This is the info tag style without an icon

This is the primary tag style

This is the primary tag style without an icon

This is the warning tag style

This is the warning tag style without an icon

This is the danger tag style

This is the danger tag style without an icon

Add this code to /source/css/lib.css.

/* Common styles for notes */
.note {
    position: relative;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: initial;
    border-left: 3px solid #eee;
    background-color: #f9f9f9;
	border-radius: 3px;
	font-size: var(--content-font-size);
}

.note:not(.no-icon):before {
    position: absolute;
    font-family: FontAwesome;
    font-size: larger;
    top: 11px;
    left: 15px;
}

.note:not(.no-icon) {
    padding-left: 45px;
}

.note.info {
    background-color: #eef7fa;
	border-left-color: #428bca;
}

.note.info:not(.no-icon):before {
    content: "\f05a";
    color: #428bca;
}

.note.warning {
    background-color: #fdf8ea;
    border-left-color: #f0ad4e;
}

.note.warning:not(.no-icon):before {
    content: "\f06a";
    color: #f0ad4e;
}

.note.primary {
    background-color: #f5f0fa;
    border-left-color: #6f42c1;
}

.note.primary:not(.no-icon):before {
    content: "\f055";
    color: #6f42c1;
}

.note.danger {
    background-color: #fcf1f2;
    border-left-color: #d9534f;
}

.note.danger:not(.no-icon):before {
    content: "\f056";
    color: #d9534f;
}

When editing an article, please use the following HTML code:

<div class="note info">This is the info tag style</div>

<div class="note info no-icon">This is the info tag style without an icon</div>

<div class="note primary">This is the primary tag style</div>

<div class="note primary no-icon">This is the primary tag style without an icon</div>

<div class="note warning">This is the warning tag style</div>

<div class="note warning no-icon">This is the warning tag style without an icon</div>

<div class="note danger">This is the danger tag style</div>

<div class="note danger no-icon">This is the danger tag style without an icon</div>

Add Last Edit Time to Prevent Content Expiration Reminder#

In the path /tpl/content-single.ftl, insert the code at line 19.

<div class="entry-content">
    <#if (.now?long-86400000*3)?number_to_datetime gte post.editTime?datetime>
        <div class='note warning'>Please note that this article was written&nbsp; ${(((.now?long) - (post.createTime?long)) / 86400000)?int} &nbsp;days ago and last edited&nbsp; ${(((.now?long) - (post.editTime?long)) / 86400000)?int} &nbsp;days ago. The content may no longer be up-to-date, so please use it with caution.</div><hr/>
    </#if>
    ${post.formatContent!}
    <p>Q.E.D. <i class="fa fa-meetup" aria-hidden="true" style="color:#d34836"></i></p>
</div><!-- .entry-content -->

The number 3 in .now?long-86400000*3 represents the number of days. The reminder will only be displayed if the modification date is more than 3 days ago.

Add Recent Update Icon to Article Card#

Like this:

Located at line 29 in /tpl/content-thumb.ftl.

<div class="post-date">
	<i class="iconfont icon-time"></i>
	<span>
		<i class="i18n" data-iname="postlist.time" data-ivalue="${post.createTime?string('yyyy-MM-dd')}"></i>
		<#if (.now?long-86400000*1)?number_to_datetime lte post.editTime?datetime && post.editTime?datetime gt post.createTime?datetime>
			<i class="fa fa-refresh" aria-hidden="true" title="Recently Updated" style="color: var(--code-toolbar-color);font-size:11px"></i>
		</#if>
	</span>
	<#if post.topPriority?? && post.topPriority!=0>&nbsp;<i class="iconfont icon-hot hotpost"></i></#if>
</div>

The number 7 in .now?long-86400000*7 represents the number of days. The icon will be displayed if the article has been updated within the last 7 days.

Conclusion#

You need to find the right place to update the code. This article will also be continuously updated with new beautification solutions. Once again, thank you to the experts who provided the solutions.