侧边栏壁纸
  • 累计撰写 11 篇文章
  • 累计创建 13 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

Halo博客的Sakura主题自定义

看书范
2021-08-03 / 0 评论 / 0 点赞 / 2020 阅读 / 20706 字

Halo博客的Sakura主题自定义

1. 增加菜单动态图标

主题本身已经引入这俩个css文件了。图标官方网址图标动画官方网址
请根据需要使用特定的图标以及动画

2. 取消第一屏的单引号,将博客设置的站点功能展示改为随机古诗词

LIlGG_Sakura/layouts/imgbox.ftl的第27行注释掉,添加以下代码

<p><span id="jinrishici-sentence">正在加载今日诗词....</span></p>

修改后的代码如下

主题自定义-1

LIlGG_Sakura/footer.ftl的第306行下添加以下代码

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

修改后的代码如下

主题自定义-2

最后页面展示的效果如下

主题自定义-3

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>

修改后的代码如下

主题自定义-4

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>
	&nbsp;&nbsp;<span class="i18n" data-iname="postlist.heat" data-ivalue="${post.visits?c}"></span>
</span>
<span>
	&nbsp;&nbsp;<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>
	&nbsp;&nbsp;<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>
	&nbsp;&nbsp;<a href="${post.categories[0].fullPath}">${post.categories[0].name!}</a>
</span>

修改后的代码如下

主题自定义-5

添加最近更新图标

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>
	&nbsp;&nbsp;<i class="fa fa-refresh" aria-hidden="true" title="最近七天有更新" style="color:#FF5722;font-size:11px"></i>
</#if>

修改后的代码如下

主题自定义-6

最后页面展示的效果如下

主题自定义-7

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>

修改后的代码如下

主题自定义-8

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>

修改后的代码如下

主题自定义-9

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>

修改后的代码如下

主题自定义-10

最后页面展示的效果如下

主题自定义-11

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>

修改后的代码如下

主题自定义-12

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>

修改后的代码如下

主题自定义-13

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'>请注意,本文编写于&nbsp; ${(((.now?long) - (post.createTime?long)) / 86400000)?int} &nbsp;天前,最后编辑于&nbsp; ${(((.now?long) - (post.editTime?long)) / 86400000)?int} &nbsp;天前,内容可能已经不具有时效性,请谨慎参考。</div><hr/>
</#if>

修改后的代码如下图

主题自定义-14

最后页面展示的效果如下

主题自定义-15

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>

最后页面展示的效果如下

主题自定义-16

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>

最后页面展示的效果如下

主题自定义-17

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+" 》"
	});
}

最后页面展示的效果如下

主题自定义-18

0

评论区