Merge remote-tracking branch 'origin/main'

2023-09-06 23:45:17 +08:00 · 2023-09-06 23:45:17 +08:00 · 2f7d7faccc
parent 2d231723e8 6e7bb9c51a
commit 2f7d7faccc
7 changed files with 569 additions and 122 deletions
--- a/settings.yaml
+++ b/settings.yaml
@ -875,6 +875,33 @@ spec:
    - group: footer
      label: 页脚
      formSchema:
+        - $formkit: group
+          name: footer_bar
+          label: 了解更多
+          value:
+            footer_bar_enable: false
+            logo: "困困鱼"
+            description: "来自 困困鱼 最新设计与科技的文章"
+          children:
+            - $formkit: radio
+              name: footer_bar_enable
+              id: footer_bar_enable
+              options:
+                - label: 显示
+                  value: true
+                - label: 隐藏
+                  value: false
+            - $formkit: textarea
+              if: $get(footer_bar_enable).value
+              name: logo
+              label: logo
+              placeholder:
+              help: 支持 HTML 语法
+            - $formkit: textarea
+              if: $get(footer_bar_enable).value
+              name: description
+              label: 描述
+              placeholder: 请填写描述内容
        - $formkit: group
          name: social_media
          label: 社交媒体
@ -1079,6 +1106,7 @@ spec:
          name: footerContent
          label: 页脚内容
          value:
+            default_enable: true
            style_one:
              owner_enable: false
              runtime_enable: true
@ -1086,11 +1114,11 @@ spec:
              work_description: "距离月入25k也就还差一个大佬带我~"
              offduty_img: "https://0206.ink/upload/%E5%9B%B0%E5%9B%B0%E9%B1%BC-%E4%B8%8B%E7%8F%AD%E5%95%A6-yellowgreen.svg"
              offduty_description: "下班了就该开开心心的玩耍，嘿嘿~"
+              bdageitem_enable: false
              bdageitem:
                - link: "https://halo.run/"
                  shields: "https://npm.elemecdn.com/hao-theme-static@1.2.0/templates/images/Frame-Halo-blue.svg"
                  message: "博客框架为halo2.x"
-            default_enable: true
          children:
            - $formkit: radio
              name: default_enable
@ -1124,27 +1152,41 @@ spec:
                      value: false
                - $formkit: attachment
                  if: $get(runtime_enable).value
+                  key: work_img
                  name: work_img
                  label: 上班时间的徽标
                  placeholder: 请输入内容
                - $formkit: text
                  if: $get(runtime_enable).value
+                  key: work_description
                  name: work_description
                  label: 上班时间的 title 描述
                  placeholder: 请输入内容
                - $formkit: attachment
                  if: $get(runtime_enable).value
+                  key: offduty_img
                  name: offduty_img
                  label: 下班时间的徽标
                  placeholder: 请输入内容
                - $formkit: text
                  if: $get(runtime_enable).value
+                  key: offduty_description
                  name: offduty_description
                  label: 下班时间的 title 描述
                  placeholder: 请输入内容
+                - $formkit: radio
+                  name: bdageitem_enable
+                  id: bdageitem_enable
+                  label: 徽标配置项
+                  options:
+                    - label: 显示
+                      value: true
+                    - label: 隐藏
+                      value: false
                - $formkit: repeater
                  name: bdageitem
                  label: 徽标配置项
+                  if: $get(bdageitem_enable).value
                  value:
                  children:
                    - $formkit: url
@ -2563,6 +2605,30 @@ spec:
                  value: true
                - label: 关闭
                  value: false
+        - $formkit: group
+          name: rightside
+          label: 右下角悬浮操作按钮
+          value:
+            rightsideEnable: false
+            readmode: false
+          children:
+            - $formkit: radio
+              name: rightsideEnable
+              id: rightsideEnable
+              options:
+                - label: 打开
+                  value: true
+                - label: 关闭
+                  value: false
+            - $formkit: radio
+              name: readmode
+              if: $get(rightsideEnable).value
+              label: 阅读模式
+              options:
+                - label: 打开
+                  value: true
+                - label: 关闭
+                  value: false
        - $formkit: group
          name: nav_music
          label: 音乐
--- a/templates/assets/css/read-mode.css
+++ b/templates/assets/css/read-mode.css
@ -0,0 +1,218 @@
+.read-mode {
+    --font-color: #4c4948;
+    --readmode-light-color: #fff;
+    --white: #4c4948;
+    --light-grey: #4c4948;
+    --gray: #d6dbdf;
+    --hr-border: #d6dbdf;
+    --hr-before-color: #b9c2c9;
+    --highlight-bg: #f7f7f7;
+    --exit-btn-bg: #c0c0c0;
+    --exit-btn-color: #fff;
+    --exit-btn-hover: #8d8d8d;
+    --pseudo-hover: none
+}
+
+[data-theme=dark] .read-mode {
+    --font-color: rgba(255,255,255,0.7);
+    --readmode-light-color: #0d0d0d;
+    --white: rgba(255,255,255,0.9);
+    --light-grey: rgba(255,255,255,0.7);
+    --gray: rgba(255,255,255,0.7);
+    --hr-border: rgba(255,255,255,0.5);
+    --hr-before-color: rgba(255,255,255,0.7);
+    --highlight-bg: #171717;
+    --exit-btn-bg: #1f1f1f;
+    --exit-btn-color: rgba(255,255,255,0.9);
+    --exit-btn-hover: #525252
+}
+
+.read-mode {
+    background: var(--readmode-light-color)
+}
+
+.read-mode .exit-readmode {
+    position: fixed;
+    top: 30px;
+    right: 30px;
+    z-index: 100;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: var(--exit-btn-bg);
+    color: var(--exit-btn-color);
+    font-size: 16px;
+    -webkit-transition: background .3s;
+    -moz-transition: background .3s;
+    -o-transition: background .3s;
+    -ms-transition: background .3s;
+    transition: background .3s
+}
+
+@media screen and (max-width: 768px) {
+    .read-mode .exit-readmode {
+        top:initial;
+        bottom: 30px
+    }
+}
+
+.read-mode .exit-readmode:hover {
+    background: var(--exit-btn-hover)
+}
+
+.read-mode #aside-content {
+    display: none
+}
+
+.read-mode #page-header.post-bg {
+    background-color: transparent;
+    background-image: none!important
+}
+
+.read-mode #page-header.post-bg:before {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0)
+}
+
+.read-mode #page-header.post-bg>#post-info {
+    text-align: center
+}
+
+.read-mode #post {
+    margin: 0 auto;
+    background: 0 0;
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.read-mode #post:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.read-mode>canvas {
+    display: none!important
+}
+
+.read-mode #footer,.read-mode #nav,.read-mode #post>:not(#post-info):not(.post-content),.read-mode #rightside,.read-mode #web_bg,.read-mode .highlight-tools,.read-mode .not-top-img,.read-mode .post-outdate-notice {
+    display: none!important
+}
+
+.read-mode #article-container a {
+    color: #99a9bf
+}
+
+.read-mode #article-container .highlight:not(.js-file-line-container),.read-mode #article-container pre {
+    background: var(--highlight-bg)!important
+}
+
+.read-mode #article-container .highlight:not(.js-file-line-container) *,.read-mode #article-container pre * {
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container figure.highlight {
+    border-radius: 0!important;
+    -webkit-box-shadow: none!important;
+    box-shadow: none!important
+}
+
+.read-mode #article-container figure.highlight>:not(.highlight-tools) {
+    display: block!important
+}
+
+.read-mode #article-container figure.highlight .line:before {
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container figure.highlight .hljs {
+    background: var(-highlight-bg)!important
+}
+
+.read-mode #article-container h1,.read-mode #article-container h2,.read-mode #article-container h3,.read-mode #article-container h4,.read-mode #article-container h5,.read-mode #article-container h6 {
+    padding: 0
+}
+
+.read-mode #article-container h1:before,.read-mode #article-container h2:before,.read-mode #article-container h3:before,.read-mode #article-container h4:before,.read-mode #article-container h5:before,.read-mode #article-container h6:before {
+    content: ''
+}
+
+.read-mode #article-container h1:hover,.read-mode #article-container h2:hover,.read-mode #article-container h3:hover,.read-mode #article-container h4:hover,.read-mode #article-container h5:hover,.read-mode #article-container h6:hover {
+    padding: 0
+}
+
+.read-mode #article-container li:hover:before,.read-mode #article-container ol:hover:before,.read-mode #article-container ul:hover:before {
+    -webkit-transform: none!important;
+    -moz-transform: none!important;
+    -o-transform: none!important;
+    -ms-transform: none!important;
+    transform: none!important
+}
+
+.read-mode #article-container li:before,.read-mode #article-container ol:before {
+    background: 0 0!important;
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container ul>li:before {
+    border-color: var(--gray)!important
+}
+
+.read-mode #article-container .tabs {
+    border: 2px solid var(--tab-border-color)
+}
+
+.read-mode #article-container .tabs>.nav-tabs {
+    background: 0 0
+}
+
+.read-mode #article-container .tabs>.nav-tabs>.tab {
+    border-top: none!important
+}
+
+.read-mode #article-container .tabs>.tab-contents .tab-item-content.active {
+    -webkit-animation: none;
+    -moz-animation: none;
+    -o-animation: none;
+    -ms-animation: none;
+    animation: none
+}
+
+.read-mode #article-container code {
+    color: var(--font-color)
+}
+
+.read-mode #article-container blockquote {
+    border-color: var(--gray);
+    background-color: var(--readmode-light-color)
+}
+
+.read-mode #article-container kbd {
+    border: 1px solid var(--gray);
+    background-color: transparent;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: var(--font-color)
+}
+
+.read-mode #article-container .hide-toggle {
+    border: 1px solid var(--gray)!important
+}
+
+.read-mode #article-container .btn-anzhiyu,.read-mode #article-container .hide-button,.read-mode #article-container .hl-label {
+    border: 1px solid var(--gray)!important;
+    background: var(--readmode-light-color)!important;
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container .note {
+    border: 2px solid var(--gray);
+    border-left-color: var(--gray)!important;
+    filter: none;
+    background-color: var(--readmode-light-color)!important;
+    color: var(--font-color)
+}
+
+.read-mode #article-container .note .note-icon,.read-mode #article-container .note:before {
+    color: var(--font-color)
+}
--- a/templates/assets/js/main.js
+++ b/templates/assets/js/main.js
@ -170,17 +170,97 @@ document.addEventListener('DOMContentLoaded', function () {
        }
    }

+    /**
+     * Rightside
+     */
+    const rightSideFn = {
+        switchReadMode: () => { // read-mode
+            const $body = document.body
+            $body.classList.add('read-mode')
+            const newEle = document.createElement('button')
+            newEle.type = 'button'
+            newEle.className = 'haofont hao-icon-sign-out-alt exit-readmode'
+            $body.appendChild(newEle)
+
+            function clickFn () {
+                $body.classList.remove('read-mode')
+                newEle.remove()
+                newEle.removeEventListener('click', clickFn)
+            }
+
+            newEle.addEventListener('click', clickFn)
+        },
+        switchDarkMode: () => { // Switch Between Light And Dark Mode
+            const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+            if (nowMode === 'light') {
+                activateDarkMode()
+                saveToLocal.set('theme', 'dark', 2);
+                GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night,false,2000);
+            } else {
+                activateLightMode();
+                saveToLocal.set('theme', 'light', 2);
+                GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day,false,2000);
+            }
+            // handle some cases
+            typeof utterancesTheme === 'function' && utterancesTheme()
+            typeof FB === 'object' && window.loadFBComment()
+            window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
+        },
+        showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
+            document.getElementById('rightside-config-hide').classList.toggle('show')
+        },
+        scrollToTop: () => { // Back to top
+            btf.scrollToDest(0, 500)
+        },
+        hideAsideBtn: () => { // Hide aside
+            const $htmlDom = document.documentElement.classList
+            $htmlDom.contains('hide-aside')
+                ? saveToLocal.set('aside-status', 'show', 2)
+                : saveToLocal.set('aside-status', 'hide', 2)
+            $htmlDom.toggle('hide-aside')
+        }
+    }
+
+    document.getElementById('rightside').addEventListener('click', function (e) {
+        const $target = e.target.id || e.target.parentNode.id
+        switch ($target) {
+            case 'go-up':
+                rightSideFn.scrollToTop()
+                break
+            case 'rightside-config':
+                rightSideFn.showOrHideBtn()
+                break
+            case 'readmode':
+                rightSideFn.switchReadMode()
+                break
+            case 'darkmode':
+                rightSideFn.switchDarkMode()
+                break
+            case 'hide-aside-btn':
+                rightSideFn.hideAsideBtn()
+                break
+            default:
+                break
+        }
+    })
+
    /**
     * 滾動處理
     */
    const scrollFn = function () {
+        const $postComment = document.getElementById('post-comment')
        const $rightside = document.getElementById('rightside')
        const innerHeight = window.innerHeight + 0
-        // console.log("滚动处理运行");
+
+        if ($postComment) {
+            $('#to_comment').attr('style', 'display: block');
+        } else {
+            $('#to_comment').attr('style', 'display: none');
+        }

        // 當滾動條小于 0 的時候
        if (document.body.scrollHeight <= innerHeight) {
-            $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+            $rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
            return
        }

@ -215,7 +295,7 @@ document.addEventListener('DOMContentLoaded', function () {
                    $cookies_window.classList.add('cw-hide')
                }
                if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
-                    $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+                    $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
                }
            } else {
                if (currentTop === 0) {
@ -225,7 +305,7 @@ document.addEventListener('DOMContentLoaded', function () {
            }

            if (document.body.scrollHeight <= innerHeight) {
-                $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
+                $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
            }
        }, 200))

--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@ -3672,48 +3672,6 @@ ul {
    color: rgb(133, 133, 133);
 }

-#rightside #rightside-config-hide {
-    transition: transform 0.4s ease 0s;
-    transform: translate(35px, 0px);
-}
-
-#rightside #rightside-config-hide.show {
-    transform: translate(0px, 0px) !important;
-}
-
-#rightside > div > a,
-#rightside > div > button {
-    display: block;
-    margin-bottom: 2px;
-    width: 30px;
-    height: 30px;
-    background-color: var(--btn-bg);
-    color: var(--btn-color);
-    text-align: center;
-    font-size: 16px;
-}
-
-#rightside > div > a:hover,
-#rightside > div > button:hover {
-    background-color: var(--btn-hover-color);
-}
-
-#rightside #mobile-toc-button {
-    display: none;
-}
-
-@media screen and (max-width: 900px) {
-    #rightside #mobile-toc-button {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 900px) {
-    #rightside #hide-aside-btn {
-        display: none;
-    }
-}
-
 #sidebar #menu-mask {
    position: fixed;
    z-index: 1001;
@ -6481,31 +6439,105 @@ a.console_switchbutton {

 /* 右下角设置按钮间距 */
 #rightside {
-    display: none;
-    padding-right: 8px;
    position: fixed;
-    right: -38px;
-    bottom: 40px;
+    right: -48px;
+    bottom: 100px;
    z-index: 100;
    opacity: 0;
-    transition: all 0.5s ease 0s;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transition: all .5s;
+    -moz-transition: all .5s;
+    -o-transition: all .5s;
+    -ms-transition: all .5s;
+    transition: all .5s
 }

-#rightside > div > button,
-#rightside > div > a {
-    margin-bottom: 8px;
-    transition: 0.3s;
+@media screen and (max-width: 768px) {
+    #rightside #switch-commentBarrage {
+        display:none
+    }
 }

-#rightside > div > button,
-#rightside > div > a:hover {
-    transition: 0.3s;
-}

 #rightside #rightside-config-hide {
-    transform: translate(42px, 0);
+    height: 0;
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transition: -webkit-transform .4s;
+    -moz-transition: -moz-transform .4s;
+    -o-transition: -o-transform .4s;
+    -ms-transition: -ms-transform .4s;
+    transition: transform .4s;
+    -webkit-transform: translate(45px,0);
+    -moz-transform: translate(45px,0);
+    -o-transform: translate(45px,0);
+    -ms-transform: translate(45px,0);
+    transform: translate(45px,0)
 }

+#rightside #rightside-config-hide.show {
+    height: auto;
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+    -webkit-transform: translate(0,0);
+    -moz-transform: translate(0,0);
+    -o-transform: translate(0,0);
+    -ms-transform: translate(0,0);
+    transform: translate(0,0)
+}
+
+#rightside #rightside-config-hide.status {
+    height: auto;
+    opacity: 1;
+    -ms-filter: none;
+    filter: none
+}
+
+#rightside>div>a,#rightside>div>button {
+    display: block;
+    margin-bottom: 5px;
+    width: 35px;
+    height: 35px;
+    border-radius: 5px;
+    background-color: var(--btn-bg);
+    color: var(--btn-color);
+    text-align: center;
+    font-size: 16px;
+    line-height: 35px
+}
+
+#rightside>div>a:hover,#rightside>div>button:hover {
+    background-color: var(--btn-hover-color)
+}
+
+#rightside #mobile-toc-button {
+    display: none
+}
+
+@media screen and (max-width: 900px) {
+    #rightside #mobile-toc-button {
+        display:block
+    }
+}
+
+@media screen and (max-width: 900px) {
+    #rightside #hide-aside-btn {
+        display:none
+    }
+}
+
+.read-mode #rightside{
+    display: none!important
+}
+
+#rightside>div>button {
+    border-radius: 5px
+}
+
+
 /* footer背景色 */
 #footer {
    background: linear-gradient(180deg, var(--heo-card-bg-none) 0%, var(--heo-card-bg) 25%);
@ -9216,10 +9248,7 @@ span.recent-post-top-text {
        right: 0;
    }

-    /* 右下角设置按钮 */
-    #rightside {
-        display: none;
-    }
+

    /* 背景 */
    #web_bg {
@ -10210,6 +10239,11 @@ a.extend.prev {
        z-index: 10;
    }

+    #post {
+        background:var(--heo-background)!important;
+        border: none;
+    }
+
    .post .layout > div:first-child:not(.recent-posts) {
        border-radius: 12px 12px 0 0;
    }
@ -11589,12 +11623,6 @@ a.reward-main-btn:hover {
        margin: auto;
        height: 100%;
    }
-
-    #pagination .prev-post a:hover,
-    #pagination .next-post a:hover {
-        background: var(--heo-main);
-    }
-
    #pagination .prev-post a:hover div,
    #pagination .next-post a:hover div {
        color: var(--heo-white) !important;
@ -11681,13 +11709,6 @@ a.reward-main-btn:hover {
    #pagination .next_info {
        text-align: left;
    }
-
-    .next-post.pull-right,
-    .prev-post.pull-left,
-    #pagination .prev-post,
-    #pagination .next-post {
-        background: var(--heo-card-bg);
-    }
 }

 /* 翻页 */
@ -12145,8 +12166,9 @@ img.tk-avatar-img {

@media screen and (max-width: 768px) {
    .el-textarea__inner {
-        border-radius: 4px !important;
        background: var(--card-bg) !important;
+        overflow: hidden;
+        resize: none!important;
    }
 }

@ -13705,7 +13727,6 @@ figure.gallery-group:hover .gallery-group-name::after {
 #workboard {
    font-size: 12px;
 }
-/*页脚样式一*/

 /* 页脚底层背景 */
 #footer:before {
@ -13716,8 +13737,45 @@ figure.gallery-group:hover .gallery-group-name::after {
    z-index: -1;
 }

-/* 404页面 */

+div#heo-footer-bar {
+    display: none
+}
+
+.post div#heo-footer-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 16px
+}
+
+div#heo-footer-bar a.footer-bar-link {
+    padding: 4px 16px;
+    background: var(--heo-secondbg);
+    border-radius: 20px;
+    margin-top: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    border: var(--style-border-always)
+}
+
+div#heo-footer-bar a.footer-bar-link:hover {
+    background: var(--heo-main);
+    color: var(--heo-white);
+    transform: scale(1.1);
+    border-color: var(--heo-main)
+}
+
+div#heo-footer-bar .footer-logo {
+    font-size: 24px
+}
+
+div#heo-footer-bar .footer-bar-description {
+    color: var(--heo-secondtext);
+    font-weight: 700
+}
+
+/* 404页面 */
 #error-wrap .error-content {
    box-shadow: none !important;
    border-radius: 12px;
--- a/templates/modules/common/rightside.html
+++ b/templates/modules/common/rightside.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="rightside">
+    <div id="rightside">
+        <div id="rightside-config-hide">
+            <button th:if="${htmlType == 'post' && theme.config.tool.rightside.readmode}" id="readmode" type="button" title="阅读模式"><i class="haofont hao-icon-book-open"></i></button>
+            <!-- <button id="translateLink" type="button" title="简繁转换">繁</button> -->
+            <button id="darkmode" type="button" title="浅色和深色模式转换"><i class="haofont hao-icon-circle-half-stroke"></i></button>
+            <button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="haofont hao-icon-arrows-left-right"></i></button>
+        </div>
+        <div id="rightside-config-show">
+            <button id="rightside-config" type="button" title="设置"><i class="haofont hao-icon-gear"></i></button>
+            <a id="to_comment" href="javascript:heo.scrollTo('post-comment')" title="直达评论" ><i class="haofont hao-icon-comments"></i></a>
+            <a id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
+            <button id="go-up" type="button" title="回到顶部"><i class="haofont hao-icon-arrow-up"></i></button>
+        </div>
+    </div>
+    <style th:if="${!theme.config.tool.rightside.rightsideEnable}">
+        #rightside {
+            display: none;
+        }
+    </style>
+
+    <link th:if="${theme.config.tool.rightside.readmode && theme.config.tool.rightside.rightsideEnable}"
+          rel="stylesheet" th:href="${assets_link + '/css/read-mode.css' + theme_version}">
+</th:block>
+</html>
--- a/templates/modules/footer.html
+++ b/templates/modules/footer.html
@ -3,6 +3,12 @@
 <!-- 页脚模块 -->
 <footer id="footer" th:fragment="footer">

+    <div id="heo-footer-bar" th:if="${theme.config.footer.footer_bar.footer_bar_enable}">
+        <div class="footer-logo">[[${theme.config.footer.footer_bar.logo}]]</div>
+        <div class="footer-bar-description">[[${theme.config.footer.footer_bar.description}]]</div>
+        <a class="footer-bar-link" href="/" data-pjax-state="">了解更多</a>
+    </div>
+
    <!-- 社交链接，需要填入 href class title -->
    <div id="footer_deal">
        <th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaLeft}">
@ -13,10 +19,8 @@
        </th:block>

        <img th:if="${not #strings.isEmpty(theme.config.footer.social_media.centerImg)}" class="footer_mini_logo"
-             th:with="img = @{${theme.config.footer.social_media.centerImg}}"
-             th:src="${isLazyload ? '' : img}"
-             th:data-lazy-src="${ isLazyload ? img : ''}"
-             title="返回顶部" onclick="btf.scrollToDest(0, 500)">
+             th:with="img = @{${theme.config.footer.social_media.centerImg}}" th:src="${isLazyload ? '' : img}"
+             th:data-lazy-src="${ isLazyload ? img : ''}" title="返回顶部" onclick="btf.scrollToDest(0, 500)">
        <th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaRight}">
            <a class="deal_link" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
               th:href="${socialMedia.url}" th:title="${socialMedia.name}">
@ -33,19 +37,17 @@
                <h3 class="footer-title" th:text="${menuItem.status.displayName}"></h3>
                <div class="footer-links">
                    <a class="footer-item" th:each="childMenu : ${menuItem.children}"
-                       th:href="@{${childMenu.status.href}}"
-                       th:target="${childMenu.spec.target?.value}"
+                       th:href="@{${childMenu.status.href}}" th:target="${childMenu.spec.target?.value}"
                       th:text="${childMenu.status.displayName}">
                    </a>
                </div>
            </div>
            <div th:if="${theme.config.footer.footer_group.enable_footer_group}" class="footer-group">
                <div class="footer-title-group">
-                    <h3 class="footer-title">友链</h3><a class="random-friends-btn"
-                                                         href="javascript:heo.addFriendLinksInFooter();"
-                                                         rel="external nofollow" title="换一批友情链接"
-                                                         data-pjax-state="external"><i
-                        class="haofont hao-icon-arrow-rotate-right"></i></a>
+                    <h3 class="footer-title">友链</h3>
+                    <a class="random-friends-btn"
+                       href="javascript:heo.addFriendLinksInFooter();" rel="external nofollow" title="换一批友情链接"
+                       data-pjax-state="external"><i class="haofont hao-icon-arrow-rotate-right"></i></a>
                </div>
                <div class="footer-links" id="friend-links-in-footer"></div>
            </div>
@ -55,37 +57,42 @@
    <!-- 底部 banner -->
    <halo:footer />

-    <div class="copyright" th:if="${not #strings.isEmpty(theme.config.basics.siteStartTime) && theme.config.footer.footerContent.style_one.owner_enable}">
+    <div class="copyright"
+         th:if="${not #strings.isEmpty(theme.config.basics.siteStartTime) && theme.config.footer.footerContent.style_one.owner_enable}">
        ©[[${#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) && theme.config.footer.footerContent.style_one.owner_enable}">
+    <div class="copyright"
+         th:if="${#strings.isEmpty(theme.config.basics.siteStartTime) && theme.config.footer.footerContent.style_one.owner_enable}">
        ©[[${#dates.format(new java.util.Date(), 'yyyy')}]] By [[${site.title}]]
    </div>
    <div th:if="${theme.config.footer.footerContent.style_one.runtime_enable}" id="workboard"></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:with=" img = @{${data.shields}}"
-                 th:src="${isLazyload ? '' : img}"
-                 th:data-lazy-src="${ isLazyload ? img : ''}"
-                 th:alt="${data.message}" />
+    <p th:if="${theme.config.footer.footerContent.style_one.bdageitem_enable && not #lists.isEmpty(theme.config.footer.footerContent.style_one.bdageitem)}"
+       th:with="bdageitem = ${theme.config.footer.footerContent.style_one.bdageitem}"
+       id="ghbdages" >
+        <a class="github-badge" th:each="data : ${bdageitem}" target="_blank" th:href="@{${data.link}}"
+           style="margin-inline:5px" th:title="${data.message}">
+            <img th:with=" img = @{${data.shields}}" th:src="${isLazyload ? '' : img}"
+                 th:data-lazy-src="${ isLazyload ? img : ''}" th:alt="${data.message}" />
        </a>
    </p>
-    <span th:if="${!theme.config.footer.footerContent.default_enable}"  style="padding: 20px 20px;">
+    <span th:if="${!theme.config.footer.footerContent.default_enable}" style="padding: 20px 20px;">

    </span>

    <style>
-        .copyright,#ghbdages,#workboard {
+        .copyright,
+        #ghbdages,
+        #workboard {
            text-align: center;
        }
-
    </style>

-    <style th:if="${(theme.config.footer.footerContent.style_one.owner_enable || not #lists.isEmpty(theme.config.footer.footerContent.style_one.bdageitem)) && theme.config.footer.footerContent.default_enable}">
+    <style
+            th:if="${(theme.config.footer.footerContent.style_one.owner_enable
+            || (not #lists.isEmpty(theme.config.footer.footerContent.style_one.bdageitem) && theme.config.footer.footerContent.style_one.bdageitem_enable )
+            || theme.config.footer.footerContent.style_one.runtime_enable)
+        && theme.config.footer.footerContent.default_enable}">
        #heo-footer {
            margin-bottom: 1rem;
        }
@ -139,10 +146,10 @@
        <div class="cookies-window-title" th:text="${theme.config.tool.snackbar.introductionTitle}"></div>
        <div class="cookies-window-content"><span class="cookies-tip"
                                                  th:text="${theme.config.tool.snackbar.introductionTip}"></span>
-            <a class="cookies-link"
-               th:href="@{${theme.config.tool.snackbar.introductionUrl}}"
+            <a class="cookies-link" th:href="@{${theme.config.tool.snackbar.introductionUrl}}"
               th:title="${theme.config.tool.snackbar.introductionName}" data-pjax-state=""><i
-                    class="bber-gotobb haofont hao-icon-circle-arrow-right"></i></a></div>
+                    class="bber-gotobb haofont hao-icon-circle-arrow-right"></i></a>
+        </div>
    </div>
    <div id="quit-box" onclick="RemoveRewardMask()"></div>

--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@ -38,18 +38,9 @@
 <!-- 内容 -->
 <th:block th:replace="${content}"></th:block>

-<!-- todo 暂时没显示，是右下角悬浮操作按钮 -->
-<div id="rightside">
-    <div id="rightside-config-hide">
-        <button id="translateLink" title="简繁转换" type="button">简</button>
-        <button id="darkmode" title="浅色和深色模式转换" type="button"><i class="fas fa-adjust"></i></button>
-        <button id="hide-aside-btn" title="单栏和双栏切换" type="button"><i class="fas fa-arrows-alt-h"></i></button>
-    </div>
-    <div id="rightside-config-show">
-        <button id="rightside_config" title="设置" type="button"><i class="fas fa-cog fa-spin"></i></button>
-        <button id="go-up" title="回到顶部" type="button"><i class="fas fa-arrow-up"></i></button>
-    </div>
-</div>
+
+<!-- todo 右下角悬浮操作按钮 -->
+<th:block th:replace="~{modules/common/rightside :: rightside}"></th:block>


 <div th:replace="~{modules/right-menu :: right-menu}"></div>