はじめに#
Halo ブログは Hexo ブログと比較して新参ですが、簡単なド素人向けのウェブサイト構築とは異なり、Hexo ブログシステムは登場してからの時間と利用者数の面で優位性があり、多くのチュートリアルもありますが、Halo ブログ向けのチュートリアルはあまりありません。そのため、Halo ブログ向けのテクニックやチュートリアルを共有する人が必要です。この記事は、Sanarousさんの記事halo ブログのカスタマイズと美化チュートリアル（HanShan テーマを例に）から多くのコードを引用しています。本当にすごいです！また、テーマSakuraを提供してくれたTakagiさんにも感謝します。
準備作業#
私は Intelli IDEA を使用しています：公式サイトへ移動。
他のリモート接続サーバーをサポートする開発ソフトウェアを使用することもおすすめです。
または、Halo のバックエンドで提供されているテーマの編集機能【外観 - テーマの編集】を直接使用することもできます。
リモート設定#
- 空のプロジェクトを作成します。ここでは halo-demo という名前を使用します。
- リモート接続サーバーをデプロイします。タイプはSFTPで、ポートは通常22です。ここでは halo-online という名前を使用します。
- マッピングパスをテーマフォルダにデプロイします。
- テーマ内のファイルをローカルにクローンします。プロジェクト内でプロジェクトファイルを表示すると、クローンが成功していることが表示されます。
- その後、ローカルでファイルを同期させると、サーバー上で変更することができます。
美化の開始#
タグのスタイル#
スタイルは以下の通りです：
このコードを/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'>この記事は作成から ${(((.now?long) - (post.createTime?long)) / 86400000)?int} 日が経ち、最終編集から ${(((.now?long) - (post.editTime?long)) / 86400000)?int} 日が経ちました。内容が時代遅れになっている可能性があるため、参考にする際は注意してください。</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.ftlの 29 行目に配置します。
<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> <i class="iconfont icon-hot hotpost"></i></#if>
</div>
.now?long-86400000*7の 7 は、記事が直近 7 日間以内に更新された場合に表示されます。
結論#
コードを適切な位置に追加する必要があります。また、この記事は新しい美化の方法を常に更新していきます。再度、解決策を提供してくれた方々に感謝します。