halo博客主题美化
该主题在halo博客Sakura的基础上进行了更改
友情链接部分
好友分组
image-20210507212828910
大佬分组样式：<div class="note warning" style="width:100%;font-size:19px;font-family: cursive,Noto Serif SC,sans-serif;margin: 30px 0 10px 0;">? 大佬 —— 没有不劳而获的工作，更没有坐享其成的收获</div>
朋友分组样式：<div class="note primary" style="width:100%;font-size:19px;font-family: cursive,Noto Serif SC,sans-serif;margin: 30px 0 10px 0;">?️ 朋友 —— 你的春日好运正在派件，请保持心情舒畅</div>
邻居分组样式：<div class="note info" style="width:100%;font-size:19px;font-family: cursive,Noto Serif SC,sans-serif;margin: 30px 0 10px 0;">? 邻居 —— 相逢一醉是前缘，风雨散、飘然何处</div>剪刀样式
代码如下，在需要的页面加入或者统一放在header.ftl中，应为大部分页面都会用到header.ftl
/* 美化 hr 样式 */
hr {
position: relative;
margin: 2rem auto;
width: calc(100% - 4px);
border: 2px dashed #a4d8fa;
background: #fff;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
hr:before {
position: absolute;
top: -10px;
left: 5%;
z-index: 1;
color: #49b1f5;
content: '\f0c4';
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
hr:hover::before{
left: 95%;
}友情链接部分：
- 放在
tpl\content-links.ftl路径下，自行更改名称和url即可
友情链接样式
- 友情链接留言区，由于不会使用<#macro 标签，只能曲线救国，先写一篇文章，保存到草稿箱，然后点击这里，进入
image-20210507213913979
image-20210507214027839
记住这里的id，然后替换这个位置的id
image-20210507214142350
友情链接留言区
顶部图标部分
会动的图标：主题本身已经引入这俩个css文件了。图标官方网址,图标动画官方网址
image-20210507214304944
底部运行状态，访客数等：
需在主题中配置站点成立时间和是否开启访客数统计，代码路径：根目录的footer.ftl
<div class="footer-device">
<p>
© ${.now?string("yyyy")}
<i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i>
${(user.nickname)!}
<#if settings.footer_case_number?? && settings.footer_case_number != "">
<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 != "">
<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://cloud.tencent.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>又拍云css代码
调整样式，文字和图片可以对其
<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" style="display:flex;justify-content: center;align-content: center;"><span style="line-height:30px;">本站由</span>
<img src="https://images.chenmx.net/youpaiyun5.png" align="absmiddle" width="59px" height="30px">
<span style="line-height:30px;">提供加速服务</span>
</a>文章状态等
- 无须额外配置，已写死在代码中
image-20210507215431136
统计页面部分
- 需要配合我的另一个项目使用，项目地址：
https://gitee.com/cgd0526/xxl-job-executor,前端文件放在根目录下的sheet_tongji.ftl - 新建一个页面
image-20210705151441759
- 选择正确的模板
image-20210705151524856
- 添加到菜单中即可
image-20210705151628739
休闲页面
代码在根目录的sheet_lie.ftl,主要代码
<div class="note info">
<a style="display:flex;justify-content: left;align-content: center;"><span style="line-height:30px;"></span>
<i class="fa fa-gamepad fa-2x fa-fw" aria-hidden="false" align="absmiddle" width="59px" height="30px"></i>
<span style="line-height:35px;"> 休闲之际，来放松下吧OωO</span>
</a>
</div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="dropdown">
<a href="https://yun.chenmx.net/mikutap/index.html" target="_blank"> mikutap</a>
</li>
<li role="presentation" class="dropdown">
<a href="https://yun.chenmx.net/battlecity/index.html" target="_blank"> 坦克大战</a>
</li>
<li role="presentation" class="disabled"><a href="#"> 虚位以待</a></li>
</ul>
<hr />
</div>配置方式同统计页面
空调房
代码在根目录的sheet_air-conditioning.ftl,主要代码
<div class="note info">
我在此处安装了空调，您可以在此自由休憩。
</div>
<div class="sheet-content">
<iframe width="100%" height="785px" frameborder="0" scrolling="no" src="https://yun.chenmx.net/build/index.html"></iframe>
</div>配置方式同统计页面
点击特效
引入小心心
//引入小心心特效
<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/clicksocialvalue.js"></script>引入小花花
//花花特效
<script src="https://cdn.jsdelivr.net/gh/Sanarous/files@1.151/js/click.min.js"></script>后续
- 代码Gitee仓库地址前端我是真的不会，在征得各位大佬的意见后就都抄过来了，后续有新的样式，也会在此仓库提交
- 如果有加互加友链的友友们，欢迎留言，看到了就会加上~~~~
最后再次感谢halo博客的各位大佬弄辣么好看的主题供鄙人参考（其实就是抄抄抄~~~）
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
轻量应用服务器
轻量应用服务器（TencentCloud Lighthouse）是新一代开箱即用、面向轻量应用场景的云服务器产品，助力中小企业和开发者便捷高效的在云端构建网站、Web应用、小程序/小游戏、游戏服、电商应用、云盘/图床和开发测试环境，相比普通云服务器更加简单易用且更贴近应用，以套餐形式整体售卖云资源并提供高带宽流量包，将热门开源软件打包实现一键构建应用，提供极简上云体验。