关于本博客的一些样式

下面来讲一下本博客的一些样式以及实现代码

首先是博客的下拉挂绳图片

其实这个挂绳图片是在Halo的作者博客中见到的，感觉好看就将其download了，
Halo的作者博客在本博客的友人链中有，感兴趣的可以看看。

我这边上传到了图床

这个是钢铁侠挂绳图片的地址
https://ryanc.cc/upload/2020/12/92991ec7ca0c31c011319ddb3ebbc882-5d90f325712c452e854490cc28e58938.png
你可以选择拷贝的方式进行替换原有的，也可以选择下载进行上传到自己的图床引用。

底部统计样式代码

将以下代码copy替换到你主题的footer.ftl文件

<#--
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Akina
 */
-->
<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-blue {
		background-color: #007ec6!important;
	}
	.github-badge .bg-red {
		background-color: #e05d44!important;
	}
	.github-badge .bg-brightgreen {
		background-color: #4dc820!important;
	}
	.github-badge .bg-orange {
		background-color: orange!important;
	}
	.github-badge .bg-blueviolet {
		background-color: #8833d7!important;
	}
</style>
<#global res_base_url = settings.cdn?then("//cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1", theme_base)/>
<#macro footer>
</div><!-- #content -->
<#include "comments.ftl">
<#if is_post??>
	<@comment post,"post" />
<#elseif is_sheet??>
	<@comment sheet,"sheet" />
</#if>
<!-- 定义可变属性，会根据页面的改变而变化 -->
<script type='text/javascript'>
	/* <![CDATA[ */
    var PageAttr = {
        "metas": {
			<#if metas??>
				<#list metas?keys as key>
					"${key}": "${metas['${key}']}",
				</#list>
			</#if>
        },
    }
	/* ]]> */

</script>
</div><!-- #page Pjax container-->
<footer id="colophon" class="site-footer" role="contentinfo">
	<div class="site-info">
		<div class="footertext">
			<p class="foo-logo"
			   style="background-image: url('${settings.footer_logo?default('${res_base_url!}/source/images/sakura.svg')}');"></p>
			<@global.footer />
		</div>
		<div class="footer-device">
			<p>
				© ${.now?string("yyyy")}&nbsp;
				<i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i>
				&nbsp;${(user.nickname)!}
				<#if settings.footer_case_number??  && settings.footer_case_number != "">
					&nbsp;
					<a href="https://beian.miit.gov.cn/" target="_blank">${settings.footer_case_number}</a>
				</#if>
				<#if settings.footer_ga_case_number??  && settings.footer_ga_case_number != "">
					&nbsp;
					<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${settings.footer_ga_select_number!}" target="_blank">
						<img src="${res_base_url!}/source/images/other/gongan.png">${settings.footer_ga_case_number}
					</a>
				</#if>
			</p>
			<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-blue">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-red">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-brightgreen">阿里云</span>
				</a>
			</div>
			<div class="github-badge">
				<span class="badge-subject">访客数</span><span class="badge-value bg-orange" id="busuanzi_value_site_uv" target="_blank" title="本站访客量"></span>
			</div>
			<div class="github-badge">
				<span class="badge-subject">访问量</span><span class="badge-value bg-orange" id="busuanzi_value_site_pv" target="_blank" title="本站浏览量"></span>
			</div>
			<div class="github-badge">
				<span class="badge-subject">运行</span><span class="badge-value bg-blueviolet" target="_blank" title="本站已运行"><span id="span_dt_dt"></span></span>
			</div>
		</div>
	</div><!-- .site-info -->
</footer><!-- #colophon -->
<div class="openNav">
	<div class="iconflat">
		<div class="icon"></div>
	</div>
	<div class="site-branding">
		<#if blog_logo?? && blog_logo!=''>
			<div class="site-title">
				<a href="${blog_url!}">
					<img src="${blog_logo!}">
				</a>
			</div>
		<#else>
			<h1 class="site-title"><a href="${blog_url!}">${blog_title!}</a></h1>
		</#if>
	</div>
</div><!-- m-nav-bar -->
</section><!-- #section -->
<!-- m-nav-center -->
<div id="mo-nav">
	<div class="m-avatar">
		<img src="${(user.avatar)!'${res_base_url!}/source/images/avatar.jpg'}">
	</div>

	<#if settings.glitch_text??>
		<p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">${settings.glitch_text}</p>
	</#if>

	<#if settings.focus_infos!true>
		<p style="text-align: center; word-spacing: 20px;">
			<#if settings.twitter??>
				<a href="${settings.twitter!}" class="social-twitter" target="_blank" style="color: #00aced"><img src="${res_base_url!}/source/images/sns/twitter.png" width="18"/></a>
			</#if>
			<#if settings.sina??>
				<a href="${settings.sina!}" class="social-sina" target="_blank" style="color: #dd4b39"><img src="${res_base_url!}/source/images/sns/sina.png" width="18"/></a>
			</#if>
			<#if settings.github??>
				<a href="${settings.github!}" class="social-github" target="_blank" style="color: #333"><img src="${res_base_url!}/source/images/sns/github.png" width="18"/></a>
			</#if>
			<#if settings.wechat??>
				<a href="${settings.wechat!}" class="social-wechat" target="_blank" style="color: #333"><img src="${res_base_url!}/source/images/sns/wechat.png" width="18"/></a>
			</#if>
			<#if settings.qq??>
				<a href="//wpa.qq.com/msgrd?v=3&uin=${settings.qq!}&site=qq&menu=yes" class="social-wangyiyun" target="_blank" style="color: #333"><img src="${res_base_url!}/source/images/sns/qq.png" width="18"/></a>
			</#if>
			<#if settings.bili??>
				<a href="${settings.bili!}" class="social-bili" target="_blank" style="color: #333"><img src="${res_base_url!}/source/images/sns/bilibili.png" width="18"/></a>
			</#if>
			<#if settings.wangyiyun??>
				<a href="${settings.wangyiyun!}" class="social-wangyiyun" target="_blank" style="color: #333"><img src="${res_base_url!}/source/images/sns/wangyiyun.png" width="18"/></a>
			</#if>
		</p>
	</#if>

	<div class="m-search">
		<form class="m-search-form" method="get" action="/search" role="search">
			<input class="m-search-input" type="search" name="keyword" placeholder="搜索..." required>
		</form>
	</div>
	<#include "layouts/nav.ftl">
	<p class="m-footer">© ${.now?string("yyyy")} ${(user.nickname)!}</p>
</div><!-- m-nav-center end -->
<a href="#" class="cd-top"></a>
<!-- m-cd-top start -->
<button class="m-cd-top" title="Go to top">
	<i class="fa fa-chevron-up" aria-hidden="true"></i>
</button>
<!-- m-cd-top end -->
<!-- search start -->
<form class="js-search search-form search-form--modal" method="get" action="/search" role="search">
	<div class="search-form__inner">
		<div>
			<p class="micro mb-">输入后按回车搜索 ...</p>
			<i class="iconfont icon-search"></i>
			<input class="text-input" type="search" name="keyword" placeholder="Search" required>
		</div>
	</div>
	<div class="search_close"></div>
</form>
<!-- search end -->
<!-- aplayer start -->
<#if settings.is_aplayer!false || settings.aplayer_float!false>
<div id="aplayer-float" style="z-index: 100;" class="aplayer" data-global="true" data-id="${settings.aplayer_id!'2345868969'}" data-server="${settings.aplayer_server!'netease'}" data-type="${settings.aplayer_type!'playlist'}" data-fixed="true" data-preload="${settings.aplayer_preload!'none'}" data-order="${settings.aplayer_order!'list'}" data-theme="${settings.aplayer_theme!'orange'}" data-autoplay="${(settings.aplayer_autoplay!false)?string('true', 'false')}"></div>
</#if>
<!-- aplayer end -->
<!-- theme-change start -->
<#if settings.theme_change!true>
<div class="changeSkin-gear no-select">
	<div class="keys">
        <span id="open-skinMenu">切换主题 | SCHEME TOOL &nbsp;<i class="iconfont icon-gear inline-block rotating"></i></span>
    </div>
</div>
<div class="skin-menu no-select">
	<div class="theme-controls row-container">
		<ul class="menu-list">
			<#list 0..7 as i>
			<#assign iconStr="settings.bg_icon_${i}" icon = (iconStr?eval)?default("fa fa-television") />
			<#assign descStr="settings.bg_desc_${i}" desc = (descStr?eval)?default("") />
			<li id="bg_${i}" data-text="${desc}">
            	<i class="${icon}" aria-hidden="true" ></i>
          	</li>
			</#list>
		</ul>
	</div>
</div>
</#if>
<!-- theme-change end -->
<!-- 定义全局属性 -->
<script type='text/javascript'>
	/* <![CDATA[ */
	var Poi = {
		"pjax":"${(settings.poi_pjax!true)?string('true','')}",
		"windowheight":"${(!(settings.focus_height!true))?string('fixed','auto')}",
		"ajaxurl":"${blog_url!}",
		"resBaseUrl": "${res_base_url!}",
		"formpostion":"bottom",
		"toc": "${(settings.post_toc!true)?string('true','')}",
		"codeLine": "${(settings.code_line!true)?string('true','')}",
		"themeChange": "${(settings.code_line!true)?string('true','')}",
		"headFocus": "${(settings.head_focus!true)?string('true','')}",
		"bgvideo": "${(settings.bgvideo!true)?string('true','')}",
		"tagRandomColorMin": "${settings.tag_randomColorMin!0.965}",
		"tagRandomColorMax": "${settings.tag_randomColorMax!0.969}",
		"nickname": "${user.nickname!}",
		"sitename": "${blog_title!}",
		"themeBase": "${theme_base!}",
		"openToast": "${(settings.open_toast!true)?string('true','')}",
		"toastWidth": ${settings.toast_width!},
		"toastHeight": ${settings.toast_height!},
		"toastTop": "${settings.toast_top!}",
		"toastBackground": "${settings.theme_skin!}",
		"toastColor": "${settings.toast_color!}",
		"toastFontSize": ${settings.toast_font_size!},
		"copyMonitor": "${(settings.copy_monitor!true)?string('true','')}",
		"copyrightNotice": "${(settings.copyright_notice!true)?string('true','')}",
		"photosStyle": "${(settings.photos_style)!'justify'}",
		"photosGutter": ${(settings.photos_gutter)!10},
		"tocDepth": ${(settings.toc_depth)!0},
		"i18n": "${settings.i18n!'auto'}",
		"mathjax": "${(settings.mathjax!false)?string('true','')}",
		"coverNum": "${(settings.rimage_cover_back_num)!'0'}",
		"rimageUrl": "${(settings.rimage_url)!''}",
		"coverOpen": "${(settings.rimage_cover_back_open!false)?string('true','')}",
		"meEmail": "${(settings.email)!''}",
		"defaultTheme": "${(settings.default_theme)!'bg_0'}",
		"defaultGroup": "${(settings.default_group)?replace(' ', '-')}"
	};
	var bgConfig = {
	<#list 0..7 as i>
		<#assign name = (("settings.bg_name_" + i)?eval)?default(""), 
				desc = (("settings.bg_desc_" + i)?eval)?default(""),
				url = (("settings.bg_url_" + i)?eval)?default(""),
				strategy = (("settings.bg_img_strategy_" + i)?eval)?default(""),
				isNight = (("settings.bg_night_" + i)?eval)?default("") />
		
		"bg_${i}": {
			"id": "${i}",
			"name": "${name}",
			"desc": "${desc}",
			"url": "${url}",
			"strategy": "${strategy}",
			"isNight": "${(isNight!true)?string('true', '')}"
		},
	</#list>
	};
	/* ]]> */
</script>
<script type='text/javascript' src='${res_base_url!}/script/utils.min.js?ver=1.3.1'></script>
<script type="text/javascript" src="${res_base_url!}/source/lib/lazysizes/lazysizes.min.js"></script>
<script type="text/javascript" src="${res_base_url!}/source/js/lib.js"></script>
<!-- 相册 -->
<#if settings.photos_style == "justify">
<script src="${res_base_url!}/source/lib/justifiedGallery/jquery.justifiedGallery.min.js"></script>
<#elseif settings.photos_style == "masonry" || settings.photos_style == "packery">
<script src="${res_base_url!}/source/lib/isotope.pkgd.min/index.js"></script>
<script src="${res_base_url!}/source/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<#if settings.photos_style == "packery">
<script type='text/javascript' src='${res_base_url!}/source/lib/packery-mode.pkgd.min/index.js'></script>
</#if>
</#if>
<#if settings.visit_statistics!false>
	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</#if>
<script type="text/javascript">
	// 建站时间统计
	function show_date_time() {
		if ($("#span_dt_dt").length > 0) {
            window.setTimeout("show_date_time()", 1000);
			var seconds = 1000;
			var minutes = seconds * 60;
			var hours = minutes * 60;
			var days = hours * 24;
			var years = days * 365;
			var today = new Date();
			var todayYear = today.getFullYear();
			var todayMonth = today.getMonth()+1;
			var todayDate = today.getDate();
			var todayHour = today.getHours();
			var todayMinute = today.getMinutes();
			var todaySecond = today.getSeconds();
			BirthDay = new Date("${settings.TimeStatistics!}");
			diff = (today.getTime() - BirthDay.getTime());
			<#--sectimeold = timeold / 1000;-->
			<#--secondsold = Math.floor(sectimeold);-->
			<#--msPerDay = 24 * 60 * 60 * 1000;-->
			<#--e_daysold = timeold / msPerDay;-->
			<#--daysold = Math.floor(e_daysold);-->



			var diffYears = Math.floor(diff/years);
			var diffDays = Math.floor((diff/days)-diffYears*365);
			var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
			var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
			var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
			// span_dt_dt.innerHTML = daysold + "天";
			span_dt_dt.innerHTML = " 已运行"+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
		}
	}

	show_date_time();
</script>
<script type="text/javascript" src="${res_base_url!}/source/js/highlight/highlight.pack.js"></script>
<#if settings.code_line!true>
	<script type="text/javascript" src="${res_base_url!}/source/js/highlight/highlightjs-line-numbers.min.js"></script>
</#if>
<#if settings.is_aplayer!false>
	<script src="${res_base_url!}/source/lib/APlayer/APlayer.min.js" defer></script>
	<script src="${res_base_url!}/plugins/aplayer/js/index.js" defer></script>
</#if>
<#if settings.post_toc!true>
	<script src="${res_base_url!}/source/lib/tocbot/dist/tocbot.min.js" defer></script>
</#if>
<script src="${settings.comment_mode!'//cdn.jsdelivr.net/gh/LIlGG/halo-comment-sakura@v1.3.1/dist/halo-comment.min.js'}" defer></script>
<#if settings.tag_cloud!true>
<script src="${res_base_url!}/source/lib/jqcloud2/jqcloud.min.js" defer></script>
<script type='text/javascript'>
	var wordcloud = [
		<@tagTag method="list">
		<#list tags as tag>
		{'text': '${tag.name!}', 'weight': '${tag.postCount!}', 'link': '${tag.fullPath!}'},
		</#list>
		</@tagTag>
	]
</script>
</#if>
<#if settings.category_radar!true>
<script src="${res_base_url!}/source/js/echarts/echarts.min.js" defer></script>
<script type='text/javascript'>
	var categoryRadar = {
		<@categoryTag method="list">
		<#list categories as category>
		'${category.name!}': '${category.postCount!}',
		</#list>
		</@categoryTag>
	}
</script>
</#if>
<script type='text/javascript' src='${res_base_url!}/source/js/qrcode.min.js' defer></script>
<script type='text/javascript' src='${res_base_url!}/source/lib/flv.min/index.js' defer></script>
<script type='text/javascript' src='${res_base_url!}/script/i18n.min.js?ver=1.3.1' defer></script>
<script type='text/javascript' src='${theme_base!}/script/app.min.js?ver=1.3.1'></script>
<#nested />
<#if settings.live2d_switch!true>
<script src="${res_base_url!}/source/lib/jquery-ui/jquery-ui.min.js" async defer></script>
<#include "plugins/live2d/ftl/live2d.ftl">
<@live2d/>
</#if>
<div class="site-statistics">
	<@global.statistics />
</div>
</body>
</html>
</#macro>

给你的主题添加设置统计代码
找到settings.yaml配置文件

拷贝下面代码放到上图相应的位置

    TimeStatistics:
      name: TimeStatistics
      label: '站点运行时间统计'
      type: text
      description: '填入起始时间，格式：月/日/年 时:分:秒，如08/20/2018 12:00:00'
    visit_statistics:
      name: visit_statistics
      label: 用户访问统计
      type: radio
      data-type: bool
      default: false
      options:
        - value: true
          label: 开启
        - value: false
          label: 关闭

在主题设置处进行设置

目录CONTENT

关于本博客的一些样式

下面来讲一下本博客的一些样式以及实现代码

首先是博客的下拉挂绳图片

底部统计样式代码

评论区