页脚样式添加

settings.yaml

@@ -771,6 +771,95 @@ spec:
               label: 页脚友链地址
               placeholder: 请输入页脚友链地址
               help: 注意格式 (`友链地址`)
+        - $formkit: group
+          name: footerContent
+          label: 页脚内容
+          value:
+            runtime:
+            footeStyle:
+          children:
+            - $formkit: select
+              name: footerStyle
+              id: footeStyle
+              key: footeStyle
+              label: 样式
+              value: default
+              options:
+                - value: default
+                  label: 默认
+                - value: one
+                  label: 样式一
+            - $formkit: group
+              if: $get(footeStyle).value == 'one'
+              name: style_one
+              label: 样式一
+              value:
+                runtime_enable:
+                work_img:
+                work_description:
+                offduty_img:
+                offduty_description:
+                bdageitem:
+              children:
+                - $formkit: radio
+                  name: runtime_enable
+                  id: runtime_enable
+                  key: runtime_enable
+                  value: true
+                  label: 运行时间
+                  options:
+                    - label: 显示
+                      value: true
+                    - label: 隐藏
+                      value: false
+                - $formkit: attachment
+                  if: $get(runtime_enable).value
+                  name: work_img
+                  label: 上班时间的徽标
+                  placeholder: 请输入内容
+                  value: "https://0206.ink/upload/%E5%9B%B0%E5%9B%B0%E9%B1%BC-%E4%B8%8B%E7%8F%AD%E5%95%A6-yellowgreen.svg"
+                - $formkit: text
+                  if: $get(runtime_enable).value
+                  name: work_description
+                  label: 上班时间的 title 描述
+                  placeholder: 请输入内容
+                  value: "距离月入25k也就还差一个大佬带我~"
+                - $formkit: attachment
+                  if: $get(runtime_enable).value
+                  name: offduty_img
+                  label: 下班时间的徽标
+                  placeholder: 请输入内容
+                  value: "https://0206.ink/upload/%E5%9B%B0%E5%9B%B0%E9%B1%BC-%E4%B8%8B%E7%8F%AD%E5%95%A6-yellowgreen.svg"
+                - $formkit: text
+                  if: $get(runtime_enable).value
+                  name: offduty_description
+                  label: 下班时间的 title 描述
+                  placeholder: 请输入内容
+                  value: "下班了就该开开心心的玩耍，嘿嘿~"
+                - $formkit: repeater
+                  name: bdageitem
+                  label: 徽标配置项
+                  value: []
+                  children:
+                    - $formkit: url
+                      name: link
+                      label: 链接
+                      placeholder: 请输入内容
+                      value: "https://hexo.io/"
+                      validation: required
+                    - $formkit: attachment
+                      name: shields
+                      label: 徽标
+                      placeholder: 请输入内容
+                      validation: required
+                      value: "https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg"
+                    - $formkit: text
+                      name: message
+                      label: 徽标 title
+                      placeholder: 请输入内容
+                      validation: required
+                      value: "博客框架为Hexo_v5.4.0"
+
 
     - group: post
       label: 文章
@@ -995,7 +1084,7 @@ spec:
     - group: fcircle
       label: 友链鱼塘
       formSchema:
-        - $formkit: url
+        - $formkit: attachment
           name: backgroundImg
           validation: url
           label: 图片
@@ -1680,7 +1769,7 @@ spec:
               if: "$get(use).value == 'custom'"
               label: cdn地址，外链地址
               validation: required
-              value: '(https://npm.elemecdn.com/hao-theme-static@1.1.5/templates/assets'
+              value: 'https://npm.elemecdn.com/hao-theme-static@1.1.5/templates/assets'
               help: '默认为npmJs的elemecdn加速地址，如果你有自己的cdn地址（请确保链接下assets文件夹下主题静态资源文件），可以填写，否则请勿修改！ '
         - $formkit: group
           name: diytitle

templates/assets/zhheo/zhheoblog.css

@@ -14844,6 +14844,64 @@ figure.gallery-group:hover .gallery-group-name::after {
     letter-spacing: -10px;
 }
 
+
+/*页脚样式一*/
+[data-theme="light"] .copyright,#ghbdages,#workboard{
+    color: var(--font-color);
+}
+.copyright,#ghbdages,#workboard {
+    position: relative;
+    padding: 0px 20px;
+    text-align: center;
+}
+.haofont.hao-icon-heartbeat {
+    transition: 0.3s;
+    animation: heartbeat-bounce 2s ease-in-out infinite;
+    -webkit-font-smoothing: antialiased;
+    display: var(--fa-display, inline-block);
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-rendering: auto;
+}
+#ghbdages .github-badge img {
+    height: 20px;
+    max-width: 150px;
+    border-radius: 4px;
+    pointer-events: none
+}
+
+#workboard img.boardsign {
+    width: 100%;
+    max-width: 130px;
+    border-radius: 0
+}
+@keyframes heartbeat-bounce {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    10%,
+    30% {
+        transform: scale(0.9);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: scale(1.1);
+    }
+    50%,
+    70% {
+        transform: scale(1.1);
+    }
+}
+#workboard {
+    font-size: 12px;
+}
+/*页脚样式一*/
+
 /* 页脚底层背景 */
 #footer:before {
     position: absolute !important;

templates/modules/footer.html

@@ -49,7 +49,7 @@
     </th:block>
     <!-- 底部 banner -->
 
-    <div id="footer-banner">
+    <div th:if="${theme.config.footer.footerContent.footerStyle == 'default'}" id="footer-banner">
         <div class="footer-banner-links">
             <div class="footer-banner-left">
                 <div id="footer-banner-tips">
@@ -91,6 +91,95 @@
         </div>
     </div>
 
+    <th:block  th:if="${theme.config.footer.footerContent.footerStyle == 'one'}">
+        <div class="copyright" th:if="${not #strings.isEmpty(theme.config.basics.siteStartTime)}">
+            ©[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] - [[${#dates.format(new
+            java.util.Date(), 'yyyy')}]] By [[${site.title}]]
+        </div>
+        <div class="copyright" th:if="${#strings.isEmpty(theme.config.basics.siteStartTime)}">
+            ©[[${#dates.format(new java.util.Date(), 'yyyy')}]] By [[${site.title}]]
+        </div>
+        <div th:if="${theme.config.footer.footerContent.style_one.runtime_enable}" id="workboard">
+            <img class="workSituationImg boardsign"
+                 th:src="${theme.config.footer.footerContent.style_one.work_img}"
+                 th:alt="${theme.config.footer.footerContent.style_one.work_description}"
+                 th:title="${theme.config.footer.footerContent.style_one.work_description}" />
+            <div id="runtimeTextTip"></div>
+        </div>
+        <p id="ghbdages"
+           th:with="bdageitem = ${theme.config.footer.footerContent.style_one.bdageitem}">
+            <a class="github-badge" th:each="data : ${bdageitem}" target="_blank"
+               th:href="@{${data.link}}" style="margin-inline:5px"
+               th:title="${data.message}">
+                <img th:src="@{${data.shields}}"
+                     th:alt="${data.message}" />
+            </a>
+        </p>
+        <span style="padding: 20px 20px;">
+
+        </span>
+
+        <script async="async">(function () {
+            var grt = new Date("[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[1]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[2]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] 00:00:00"); //设置网站上线时间
+            var now = new Date();
+            var dnum;
+            var hnum;
+            var mnum;
+            var snum;
+            var nowHour;
+
+            // 计算并更新天数、小时数、分钟数和秒数
+            function updateTime() {
+                now = new Date(); // 更新 now 的值
+                nowHour = now.getHours(); // 更新 nowHour 的值
+                var days = (now - grt) / 1000 / 60 / 60 / 24;
+                dnum = Math.floor(days);
+                var hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
+                hnum = Math.floor(hours);
+                if (String(hnum).length == 1) {
+                    hnum = "0" + hnum;
+                }
+                var minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
+                mnum = Math.floor(minutes);
+                if (String(mnum).length == 1) {
+                    mnum = "0" + mnum;
+                }
+                var seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
+                snum = Math.round(seconds);
+                if (String(snum).length == 1) {
+                    snum = "0" + snum;
+                }
+            }
+
+            // 更新网页中显示的网站运行时间
+            function updateHtml() {
+                const footer = document.getElementById("footer");
+                if (!footer) return
+                let currentTimeHtml = "";
+                if (nowHour < 18 && nowHour >= 9) {
+                    // 如果是上班时间，默认就是"困困鱼-上班摸鱼中.svg"图片，不需要更改
+                    currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i>`;
+                } else {
+                    // 如果是下班时间，插入"困困鱼-下班啦.svg"图片
+                    let img = document.querySelector("#workboard .workSituationImg");
+                    img.src = "[[${theme.config.footer.footerContent.style_one.work_img}]]";
+                    img.title = "[[${theme.config.footer.footerContent.style_one.work_description}]]";
+                    img.alt = "[[${theme.config.footer.footerContent.style_one.work_description}]]";
+
+                    currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i>`;
+                }
+
+                if (document.getElementById("runtimeTextTip")) {
+                    document.getElementById("runtimeTextTip").innerHTML = currentTimeHtml;
+                }
+            }
+
+            setInterval(() => {
+                updateTime();
+                updateHtml();
+            }, 1000);
+        })();</script>
+    </th:block>
 
     <!-- 右下角 snackbar 弹窗 -->
     <div th:if="${theme.config.tool.snackbar.switch}" class="needEndHide" id="cookies-window">