侧边栏壁纸
博主头像
晓果冻博主等级

一个热爱生活的95后精神小伙

  • 累计撰写 131 篇文章
  • 累计创建 15 个标签
  • 累计收到 67 条评论

目 录CONTENT

文章目录

halo博客主题美化

晓果冻
2021-05-07 / 28 评论 / 20 点赞 / 4,814 阅读 / 4,435 字
温馨提示:
本文最后更新于 2021-07-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

该主题在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>
    

    感谢大佬SanarousTakagi

剪刀样式

  • 代码如下,在需要的页面加入或者统一放在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%;
        }
    

    image-20210705145944674

友情链接部分:

  • 放在tpl\content-links.ftl路径下,自行更改名称和url即可

友情链接样式

  • 友情链接留言区,由于不会使用<#macro 标签,只能曲线救国,先写一篇文章,保存到草稿箱,然后点击这里,进入image-20210507213913979image-20210507214027839记住这里的id,然后替换这个位置的idimage-20210507214142350友情链接留言区

顶部图标部分

  • 会动的图标:主题本身已经引入这俩个css文件了。图标官方网址,图标动画官方网址
    image-20210507214304944

  • 底部运行状态,访客数等:

    • 需在主题中配置站点成立时间和是否开启访客数统计,代码路径:根目录的footer.ftl

      <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://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>
      

      image-20210507215120663

又拍云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;">&nbsp;&nbsp;&nbsp;休闲之际,来放松下吧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">&nbsp;mikutap</a>
                </li>
                <li role="presentation" class="dropdown">
                    <a href="https://yun.chenmx.net/battlecity/index.html" target="_blank">&nbsp;坦克大战</a>
                </li>
                <li  role="presentation" class="disabled"><a href="#">&nbsp;虚位以待</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博客的各位大佬弄辣么好看的主题供鄙人参考(其实就是抄抄抄~~~)

20

评论区