Halo博客的Sakura主题自定义
1. 增加菜单动态图标
主题本身已经引入这俩个css文件了。图标官方网址图标动画官方网址
请根据需要使用特定的图标以及动画
2. 取消第一屏的单引号，将博客设置的站点功能展示改为随机古诗词
将LIlGG_Sakura/layouts/imgbox.ftl的第27行注释掉，添加以下代码
<p><span id="jinrishici-sentence">正在加载今日诗词....</span></p>
修改后的代码如下
在LIlGG_Sakura/footer.ftl的第306行下添加以下代码
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
修改后的代码如下
最后页面展示的效果如下
3. 修改文章列表的文章展示效果
修改文章发布时间格式，修改LIlGG_Sakura/tpl/content-thumb.ftl的第28行改为以下代码
<i class="iconfont icon-time"></i><span class="i18n" data-iname="postlist.time" data-ivalue="${post.createTime?string('yyyy-MM-dd HH:mm')}"></span>
修改后的代码如下
将LIlGG_Sakura/tpl/content-thumb.ftl的第33行到第43行注释掉并在下方添加以下代码
<span>
<svg class="faa-tada animated" id="icon-huo" viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;"><path d="M14.656 512a497.344 497.344 0 1 0 994.688 0 497.344 497.344 0 1 0-994.688 0z" fill="#ff0000"></path><path d="M374.976 872.64c-48.299-100.032-22.592-157.44 14.421-211.37 40.448-58.966 51.115-117.611 51.115-117.611s31.659 41.386 19.115 106.005c56.149-62.72 66.816-162.133 58.325-200.405 127.317 88.746 181.59 281.002 108.181 423.381C1016 652.501 723.093 323.2 672.277 285.867c16.939 37.333 20.054 100.032-14.101 130.474-58.027-219.84-201.664-265.002-201.664-265.002 16.96 113.536-61.781 237.397-137.344 330.24-2.816-45.163-5.632-76.544-29.483-119.808-5.333 82.176-68.373 149.269-85.29 231.445-22.912 111.637 17.237 193.173 170.581 279.424z" fill="#FFFFFF"></path></svg>
<span class="i18n" data-iname="postlist.heat" data-ivalue="${post.visits?c}"></span>
</span>
<span>
<i class="fa fa-comments faa-flash animated" aria-hidden="true"></i>
<span class="i18n" data-iname="postlist.comments" data-ivalue="${post.commentCount!0}"></span>
</span>
<span>
<svg class="faa-vertical animated" t="1595123832012" viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;"><path d="M974.99592797 774.77400863H49.00407203V220.36641817h857.08789887c38.11120672 0 69.04204115 30.93083443 69.04204115 69.04204115v485.36554931h-0.13808408zM627.71446098 220.36641817c0-63.9329301-51.78153086-115.71446098-115.71446098-115.71446098H49.00407203v115.71446098h578.71038895" fill="#CE9F06" p-id="4639"></path><path d="M164.718533 620.25792053V273.11453762h694.562934v347.14338291h-694.562934z" fill="#FFFFFF" p-id="4640"></path><path d="M974.99592797 848.09665633V398.49488435c0-31.89742302-25.95980747-57.85723049-57.85723049-57.85723048H106.86130252c-31.89742302 0-57.85723049 25.95980747-57.85723049 57.85723048v449.4636879c0 39.35396347 31.89742302 71.38947055 71.38947055 71.38947056h783.35099891c39.35396347 0.13808409 71.25138647-31.89742302 71.25138648-71.25138648z" fill="#FFCD2C" p-id="4641"></path></svg>
<a href="${post.categories[0].fullPath}">${post.categories[0].name!}</a>
</span>
修改后的代码如下
添加最近更新图标
在LIlGG_Sakura/tpl/content-thumb.ftl的第29行下方添加以下代码
<#if (.now?long-86400000*7)?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:#FF5722;font-size:11px"></i>
</#if>
修改后的代码如下
最后页面展示的效果如下
4. 修改页面底部的版权标识
在LIlGG_Sakura/header.ftl的31行下方添加以下代码
<style>
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #ABBAC3;
margin-bottom: 5px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4D4D4D;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.github-badge .bg-brightgreen {
background-color: #4DC820 !important;
}
.github-badge .bg-orange {
background-color: #FFA500 !important;
}
.github-badge .bg-yellow {
background-color: #D8B024 !important;
}
.github-badge .bg-blueviolet {
background-color: #8833D7 !important;
}
.github-badge .bg-pink {
background-color: #F26BAE !important;
}
.github-badge .bg-red {
background-color: #e05d44 !important;
}
.github-badge .bg-blue {
background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
background-color: #9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
background-color: #9f9f9f !important;
}
body{
font-family: Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
}
</style>
修改后的代码如下
将LIlGG_Sakura/footer.ftl的第45到第57行注释掉，并在70行下方添加以下代码
<div class="github-badge">
<a style="color: #fff" rel="license" href="http://halo.run" target="_blank" title="由 Halo 驱动" data-pjax-state="">
<span class="badge-subject">Powered</span>
<span class="badge-value bg-brightgreen">Halo</span>
</a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://github.com/LIlGG/halo-theme-sakura" target="_blank" title="本站主题为 Sakura 主题" data-pjax-state="">
<span class="badge-subject">Theme</span>
<span class="badge-value bg-orange">Sakura</span>
</a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://www.aliyun.com/" target="_blank" title="搭建于阿里云服务器" data-pjax-state="">
<span class="badge-subject">Hosted</span>
<span class="badge-value bg-yellow">阿里云</span>
</a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" target="_blank" data-pjax-state="">
<span class="badge-subject">访问量</span>
<span class="badge-value bg-blueviolet" id="busuanzi_value_site_pv"></span>
</a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" target="_blank" data-pjax-state="">
<span class="badge-subject">访客数</span>
<span class="badge-value bg-pink" id="busuanzi_value_site_uv"></span>
</a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" target="_blank" id="title" title="本站已运行" data-pjax-state="">
<span class="badge-subject">本站已运行</span>
<span class="badge-value bg-red" id="time"></span>
</a>
</div>
修改后的代码如下
在LIlGG_Sakura/footer.ftl的第343行下方增加以下代码
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script>
function formatDuring(mss) {
var days = parseInt(mss / (1000 * 60 * 60 * 24));
var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
var seconds = ((mss % (1000 * 60)) / 1000).toFixed(0);
<#-- return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"; -->
return days + "天" + hours + "小时" + minutes + "分钟";
}
let time = document.getElementById("time");
let title = document.getElementById("title");
var reg = RegExp(",","g");
let bir = "${options.birthday}".replace(reg,"");
let now = "${.now?long}".replace(reg,"");
time.innerText = formatDuring(now - bir);
title.title = "本站已运行"+formatDuring(now - bir);
</script>
修改后的代码如下
最后页面展示的效果如下
5. 增加页面动态背景
在LIlGG_Sakura/footer.ftl的第344行下增加以下代码之一
<!-- 樱花飘落 -->
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>
<!-- 雪花飘落 -->
<script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/snow1.js"></script>
修改后的代码如下
6. 增加点击特效
在LIlGG_Sakura/footer.ftl的第345行下增加以下代码之一
//社会主义核心价值观
<script src="https://cdn.jsdelivr.net/gh/Sanarous/files@1.151/js/clicksocialvalue.js"></script>
//引入小心心特效
<script src="https://cdn.jsdelivr.net/gh/Sanarous/files@1.151/js/clicklove.js"></script>
//花花特效
<script src="https://cdn.jsdelivr.net/gh/Sanarous/files@1.151/js/click.min.js"></script>
修改后的代码如下
7. 修改文章查看的文章标题下方的文章信息展示
修改LIlGG_Sakura/post.ftl的第35行的日期格式
<span class="bull">·</span>${post.createTime?string('yyyy-MM-dd HH:mm')}
在LIlGG_Sakura/post.ftl的第35行下方增加以下代码
<span class="bull">·</span><span>${post.wordCount?c} 字</span>
8. 给文章增加内容过期提示信息
在LIlGG_Sakura/header.ftl的第32行下方增加以下代码
.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;
}
在LIlGG_Sakura/post.ftl的第51行下方增加以下代码
<#if (.now?long-86400000*30)?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>
修改后的代码如下图
最后页面展示的效果如下
9. 模仿知乎卡片样式的超链接
在LIlGG_Sakura/footer.ftl的第346行下方增加以下代码
<script src="https://cdn.jsdelivr.net/gh/Sanarous/files@master/js/linkcard.js"></script>
同时请禁用pjax功能，他会影响该js
写博客时，以如下 html 的方式写入超链接：
<a href="https://www.baidu.com" class="LinkCard" target="_blank">百度一下</a>
最后页面展示的效果如下
10. 修改文章的下一章显示效果
将LIlGG_Sakura/layouts/post-nextprev.ftl文件改为以下代码
<#--
NEXT / PREVIOUS POSTS (精华版)
-->
<#if settings.post_nepre!true>
<section class="post-squares nextprev">
<#if nextPost??>
<div class="post-nepre <#if prevPost??>half<#else>full</#if> previous">
<a href="${nextPost.fullPath!}" rel="prev">
<#if (settings.patternimg!true) && (nextPost.thumbnail?? && nextPost.thumbnail!='')>
<div class="background" style="background-image:url('${nextPost.thumbnail!}');"></div>
<#elseif ((metas.ri?boolean)!true && settings.rimage_cover_open!true && settings.rimage_url?? && settings.rimage_url!='')>
<div class="background" style="background-image:url(${settings.rimage_url!}?postid=${nextPost.id}&type=url&itype=${settings.rimage_cover_itype!}<#if settings.rimage_cover_itype != 'image'>&id=${(settings.rimage_cover_id)!''}</#if>"></div>
<#else>
<div class="background" style="background-image:url();"></div>
</#if>
<#-- <span class="label i18n" data-iname="post.next"></span> -->
<span class="label">上一篇</span>
<div class="info"><h3>${nextPost.title!}</h3><hr></div>
</a>
</div>
</#if>
<#if prevPost??>
<div class="post-nepre <#if nextPost??>half<#else>full</#if> next">
<a href="${prevPost.fullPath!}" rel="next">
<#if (settings.patternimg!true) && (prevPost.thumbnail?? && prevPost.thumbnail!='')>
<div class="background" style="background-image:url('${prevPost.thumbnail!}');"></div>
<#elseif ((metas.ri?boolean)!true && settings.rimage_cover_open!true && settings.rimage_url?? && settings.rimage_url!='')>
<div class="background" style="background-image:url(${settings.rimage_url!}?postid=${prevPost.id}&type=url&itype=${settings.rimage_cover_itype!}<#if settings.rimage_cover_itype != 'image'>&id=${(settings.rimage_cover_id)!''}</#if>"></div>
<#else>
<div class="background" style="background-image:url();"></div>
</#if>
<#-- <span class="label i18n" data-iname="post.prev"></span> -->
<span class="label">下一篇</span>
<div class="info"><h3>${prevPost.title!}</h3><hr></div>
</a>
</div>
</#if>
</section>
</#if>
最后页面展示的效果如下
11. 增加留言板
新建页面，代码如下
<div class="poem-wrap">
<div class="poem-border poem-left">
</div>
<div class="poem-border poem-right">
</div>
<h1>一言</h1>
<p id="poem"></p>
<p id="info"></p>
</div>
在LIlGG_Sakura/footer.ftl的第364行下方增加以下代码
if($('#poem')[0] != undefined){
jinrishici.load(function(result) {
$('#poem')[0].innerText = result.data.content
$('#info')[0].innerText = result.data.origin.author+" · 《 "+result.data.origin.title+" 》"
});
}
最后页面展示的效果如下
评论区