自定义theme-sakura-2.*页脚

下载

Github下载https://github.com/LIlGG/halo-theme-sakura

修改

注意：这里修改的是2.*版本的sakura主题。

从Github下载zip压缩包后，解压压缩包修改halo-theme-sakura-2.4.3\templates\module\footer.html

将这个文件内容全部替换成如下代码：

<!--/* 页脚设置 */-->
<th:block th:fragment="footer">
  <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>
  <div class="footer-logo">
    <p
      th:style="'background-image: url(' + ${theme.config.others.footer_logo ?: #theme.assets('/images/footer/sakura.svg')} + ');'"
    ></p>
  </div>
  <div class="footer-halo">
    <halo:footer />
  </div>

  <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" 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>

  <div class="footer-device">
    <p class="footer-site-time">
      ©
      <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
      <th:block th:text="${site.title}"></th:block>
    </p>
    <p class="footer-beian">
      <th:block th:if="${not #strings.isEmpty(theme.config.others.footer_case_number)}">
        <a
          href="https://beian.miit.gov.cn/"
          target="_blank"
          th:text="${theme.config.others.footer_case_number}"
          aria-label="gongan filing address"
        ></a>
      </th:block>
      <th:block th:if="${not #strings.isEmpty(theme.config.others.footer_ga_case_number)}">
        <a
          th:href="@{|https://beian.mps.gov.cn/#/query/webSearch?code=${theme.config.others.footer_ga_select_number}|}"
          style="margin-left: 8px"
          target="_blank"
          aria-label="gongan filing address"
        >
          <img
            th:src="${#theme.assets('/images/footer/gongan.png')}"
            alt="badge for gongan"
            width="16"
            height="16"
            style="margin-right: 4px"
          />
          <span th:text="${theme.config.others.footer_ga_case_number}"></span>
        </a>
      </th:block>
    </p>
  </div>

  <!-- 插入 Busuanzi 访问统计脚本 -->
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <script>
    // 直接在 JavaScript 中定义 options.birthday
    var options = {
      birthday: "2023-10-17T00:00:00" // 使用 ISO 8601 格式的日期字符串
    };
  
    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 + "分钟";
    }
  
    let time = document.getElementById("time");
    let title = document.getElementById("title");
    var reg = RegExp(",", "g");
    let bir = options.birthday.replace(reg, "");
    let now = new Date().getTime();
    time.innerText = formatDuring(now - new Date(bir).getTime());
    title.title = "本站已运行" + formatDuring(now - new Date(bir).getTime());
  
    // 每分钟更新一次
    setInterval(function() {
      let now = new Date().getTime();
      time.innerText = formatDuring(now - new Date(bir).getTime());
      title.title = "本站已运行" + formatDuring(now - new Date(bir).getTime());
    }, 60000);
  </script>

修改完之后，再重新压缩至zip，再导入halo后台主题管理

修改后的样式：

修改运行时间

如果你要修改运行时间，直接修改上述代码中的options.birthday这个值即可,具体如下：

    var options = {
      birthday: "2023-10-17T00:00:00" // 使用 ISO 8601 格式的日期字符串
    };

参考连接

https://kanshufan.cn/archives/halo博客的sakura主题自定义

https://github.com/LIlGG/halo-theme-sakura