Halo部落格主題簡單美化教程-以Sakura主題為例

開篇吐槽#

Halo 博客相比與 Hexo 博客算是晚輩啦，同樣區別於簡單的傻瓜式建站，Hexo 博客系統在面世時間，使用人數上有優勢，同時有著許多教程，但面向 Halo 博客的教程並不多。所以需要有些人站出來分享面向 Halo 博客的技巧或教程。本篇直接引用了許多代碼來自Sanarous大佬的文章halo 博客深度定制與美化教程（以 HanShan 主題為例），真的超級佩服！同時感謝主題Takagi大佬提供的主題Sakura。

準備工作#

我用的是 Intelli IDEA：前往官網。
也推薦使用其他支持遠程連接伺服器的開發軟件。
或者直接用 Halo 後台提供的主題修改功能【外觀 - 主題編輯】。

遠程配置#

創建一個空項目，此處名稱以 halo-demo 為例。
部署遠程連接伺服器。注意類型SFTP，端口一般為22。這裡名稱以 halo-online 為例。
部署映射路徑至主題文件夾。
將主題內文件克隆至本地。項目內瀏覽項目文件如顯示全則克隆成功。
之後本地修改文件同步至伺服器可由此修改。

美化開始#

標籤🏷️樣式#

樣式如下：

這裡是 info 標籤樣式

這裡是不帶符號的 info 標籤樣式

這裡是 primary 標籤樣式

這裡是不帶符號的 primary 標籤樣式

這裡是 warning 標籤樣式

這裡是不帶符號的 warning 標籤樣式

這裡是 danger 標籤樣式

這裡是不帶符號的 danger 標籤樣式

這段代碼加入/source/css/lib.css即可。

/* note 公共樣式 */
.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;
}

在編輯文章時請使用以下 html 代碼

<div class="note info">這裡是 info 標籤樣式</div>

<div class="note info no-icon">這裡是不帶符號的 info 標籤樣式</div>

<div class="note primary">這裡是 primary 標籤樣式</div>

<div class="note primary no-icon">這裡是不帶符號的 primary 標籤樣式</div>

<div class="note warning">這裡是 warning 標籤樣式</div>

<div class="note warning no-icon">這裡是不帶符號的 warning 標籤樣式</div>

<div class="note danger">這裡是 danger 標籤樣式</div>

<div class="note danger no-icon">這裡是不帶符號的 danger 標籤樣式</div>

添加最後編輯時間防內容過期提醒#

路徑/tpl/content-single.ftl，在 19 行插入代碼。

<div class="entry-content">
    <#if (.now?long-86400000*3)?number_to_datetime gte post.editTime?datetime>
        <div class='note warning'>請注意，本文編寫於&nbsp; ${(((.now?long) - (post.createTime?long)) / 86400000)?int} &nbsp;天前，最後編輯於&nbsp; ${(((.now?long) - (post.editTime?long)) / 86400000)?int} &nbsp;天前，內容可能已經不具有時效性，請謹慎參考。</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 -->

.now?long-86400000*3中 3 為天數，即修改距今天數大於 3 才會顯示此提示。

文章卡片添加最近更新小圖標#

如圖：

位於/tpl/content-thumb.ftl29 行

<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="最近有更新" 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>

.now?long-86400000*7裡 7 代表文章在最近 7 天內有更新。

結尾#

需要找準位置更新代碼，之後本篇文章也會不斷更新新的美化方案。再次感謝提供解決方案的大佬們。