Merge pull request #473 from chengzhongxue/main

添加右下角悬浮操作按钮，文章页底部了解更多

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: 音乐

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)
+}

templates/assets/js/heo.js

@@ -46,7 +46,7 @@ var heo = {
     //是否在首页
     is_Post: function () {
         var url = window.location.href;  //获取url
-        if (url.indexOf("/p/") >= 0) { //判断url地址中是否包含code字符串
+        if (url.indexOf("/archives/") >= 0) { //判断url地址中是否包含code字符串
             return true;
         } else {
             return false;
@@ -161,13 +161,6 @@ var heo = {
         ), 500)
     },
 
-    // 即刻短文添加灯箱
-    addMediumInEssay: function () {
-        if (document.querySelector('#waterfall')) {
-            mediumZoom(document.querySelectorAll('[data-zoomable]'))
-        }
-    },
-
     // 下载图片
     downloadImage: function (imgsrc, name) { //下载图片地址和图片名
         rm.hideRightMenu();

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))
 
@@ -237,18 +317,6 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 
-
-    function setFixed(el) {
-        if (!el) return
-        const currentTop = window.scrollY || document.documentElement.scrollTop
-        if (currentTop > 0) {
-            el.classList.add('nav-fixed')
-        } else {
-            el.classList.remove('nav-fixed')
-        }
-    }
-
-
     /**
      * menu
      * 側邊欄sub-menu 展開/收縮
@@ -418,7 +486,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     const addPostOutdateNotice = function () {
         const data = GLOBAL_CONFIG.noticeOutdate
-        const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
+        const diffDay = btf.diffDate("2022-11-04 20:08:15")
         if (diffDay >= data.limitDay) {
             const ele = document.createElement('div')
             ele.className = 'post-outdate-notice'
@@ -443,15 +511,6 @@ document.addEventListener('DOMContentLoaded', function () {
         })
     }
 
-    const relativeDate = function (selector) {
-        selector.forEach(item => {
-            const $this = item
-            const timeVal = $this.getAttribute('datetime')
-            $this.innerText = btf.diffDate(timeVal, true)
-            $this.style.display = 'inline'
-        })
-    }
-
     const unRefreshFn = function () {
         window.addEventListener('resize', adjustMenu)
         window.addEventListener('orientationchange', () => {

templates/assets/js/utils.js

@@ -36,44 +36,6 @@ var btf = {
         return result;
     },
 
-    // loadLightbox: ele => {
-    //     const service = GLOBAL_CONFIG.lightbox;
-
-    //     if (service === "mediumZoom") {
-    //       const zoom = mediumZoom(ele);
-    //       zoom.on("open", e => {
-    //         const photoBg = document.documentElement.getAttribute("data-theme") === "dark" ? "#121212" : "#fff";
-    //         zoom.update({
-    //           background: photoBg,
-    //         });
-    //       });
-    //     }
-
-    //     if (service === "fancybox") {
-    //       ele.forEach(i => {
-    //         if (i.parentNode.tagName !== "A") {
-    //           const dataSrc = i.dataset.lazySrc || i.src;
-    //           const dataCaption = i.title || i.alt || "";
-    //           btf.wrap(i, "a", {
-    //             href: dataSrc,
-    //             "data-fancybox": "gallery",
-    //             "data-caption": dataCaption,
-    //             "data-thumb": dataSrc,
-    //           });
-    //         }
-    //       });
-
-    //       if (!window.fancyboxRun) {
-    //         Fancybox.bind("[data-fancybox]", {
-    //           Hash: false,
-    //           Thumbs: {
-    //             autoStart: false,
-    //           },
-    //         });
-    //         window.fancyboxRun = true;
-    //       }
-    //     }
-    // },
     loadLightbox: ele => {
 
         const jqLoadAndRun = () => {

templates/assets/zhheo/zhheoblog.css

@@ -1691,8 +1691,8 @@ blockquote footer cite::before {
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
-    color: rgb(133, 133, 133);
+    color: var(--heo-fontcolor);
-    font-size: 90%;
+    font-size: .7rem;
 }
 
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date {
@@ -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;
+    right: -48px;
-    bottom: 40px;
+    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,
+@media screen and (max-width: 768px) {
-#rightside > div > a {
+    #rightside #switch-commentBarrage {
-    margin-bottom: 8px;
+        display:none
-    transition: 0.3s;
+    }
 }
 
-#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%);
@@ -8348,7 +8380,7 @@ li {
     }
 
     .recent-post-item .recent-post-info .recent-post-info-top .article-title {
-        font-size: 22px;
+        font-size: 20px;
         -webkit-line-clamp: 2;
     }
 
@@ -9216,10 +9248,7 @@ span.recent-post-top-text {
         right: 0;
     }
 
-    /* 右下角设置按钮 */
+
-    #rightside {
-        display: none;
-    }
 
     /* 背景 */
     #web_bg {
@@ -9345,14 +9374,10 @@ a.article-meta__category:hover {
     }
 }
 
-/* 文章卡片标签边距 */
+
-.article-meta-wrap {
-    color: var(--heo-secondtext) !important;
-}
 
 /* 日期右侧显示 */
 #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date {
-    /* display: none; */
     right: 0px;
     text-align: right;
 }
@@ -9369,10 +9394,6 @@ a.article-meta__category:hover {
     display: none;
 }
 
-.post-meta-date {
-    margin-right: 0.8rem;
-}
-
 /* 文章目录 */
 #aside-content #card-toc .toc-content .toc-link.active {
     line-height: 1.2;
@@ -10218,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;
     }
@@ -10564,10 +10590,6 @@ span.post-meta-position {
     }
 }
 
-.post-meta-date {
-    opacity: 0.6;
-}
-
 .post-meta-pv-cv {
     opacity: 0.6;
 }
@@ -11601,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;
@@ -11693,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);
-    }
 }
 
 /* 翻页 */
@@ -12157,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;
     }
 }
 
@@ -13717,7 +13727,6 @@ figure.gallery-group:hover .gallery-group-name::after {
 #workboard {
     font-size: 12px;
 }
-/*页脚样式一*/
 
 /* 页脚底层背景 */
 #footer:before {
@@ -13728,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;

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>

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:with="img = @{${theme.config.footer.social_media.centerImg}}" th:src="${isLazyload ? '' : img}"
-             th:src="${isLazyload ? '' : img}"
+             th:data-lazy-src="${ isLazyload ? img : ''}" title="返回顶部" onclick="btf.scrollToDest(0, 500)">
-             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:href="@{${childMenu.status.href}}" th:target="${childMenu.spec.target?.value}"
-                       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"
+                    <h3 class="footer-title">友链</h3>
-                                                         href="javascript:heo.addFriendLinksInFooter();"
+                    <a class="random-friends-btn"
-                                                         rel="external nofollow" title="换一批友情链接"
+                       href="javascript:heo.addFriendLinksInFooter();" rel="external nofollow" title="换一批友情链接"
-                                                         data-pjax-state="external"><i
+                       data-pjax-state="external"><i class="haofont hao-icon-arrow-rotate-right"></i></a>
-                        class="haofont hao-icon-arrow-rotate-right"></i></a>
                 </div>
                 <div class="footer-links" id="friend-links-in-footer"></div>
             </div>
@@ -55,23 +57,23 @@
     <!-- 底部 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"
+    <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}">
+       th:with="bdageitem = ${theme.config.footer.footerContent.style_one.bdageitem}"
-        <a class="github-badge" th:each="data : ${bdageitem}" target="_blank"
+       id="ghbdages" >
-           th:href="@{${data.link}}" style="margin-inline:5px"
+        <a class="github-badge" th:each="data : ${bdageitem}" target="_blank" th:href="@{${data.link}}"
-           th:title="${data.message}">
+           style="margin-inline:5px" th:title="${data.message}">
-            <img th:with=" img = @{${data.shields}}"
+            <img th:with=" img = @{${data.shields}}" th:src="${isLazyload ? '' : img}"
-                 th:src="${isLazyload ? '' : img}"
+                 th:data-lazy-src="${ isLazyload ? img : ''}" th:alt="${data.message}" />
-                 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;">
@@ -79,13 +81,18 @@
     </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"
+            <a class="cookies-link" th:href="@{${theme.config.tool.snackbar.introductionUrl}}"
-               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>
 

templates/modules/head.html

@@ -178,22 +178,17 @@
             // 页面类型 index,page,post,tag,category
             htmlType: [[${ htmlType }]],
             postTitle: [[${ htmlType == 'post' ? post.spec.title : htmlType == 'page' ? singlePage.spec.title : ''}]],
-            isanchor: true,
             isPost: [[${htmlType == 'post'}]],
             isHome: [[${ htmlType == 'index'}]],
-            isHighlightShrink: false,
-            postUpdate: '2022-11-04 20:08:15',
             copyright: undefined,
             lightbox: 'fancybox',
             lazyload: {enable: [[${theme.config.other.vanillaLazyload.enable}]], error: [[@{${theme.config.other.vanillaLazyload.errorImg}}]] },
             isFriendLinksInFooter: [[${theme.config.footer.footer_group.enable_footer_group}]],
             loadingBox: [[${theme.config.other.loadingBoxs.loadingBoxEnable}]],
             loadProgressBar: [[${theme.config.other.loadingBoxs.loadProgressBar}]],
-            allPlaylist: [[${theme.config.tool.nav_music.all_playlist}]],
             navMusicEnable:[[${theme.config.tool.nav_music.nav_musicEnable}]],
             isMusic: [[${ htmlType == 'music'}]],
             helloText: [[${#strings.listSplit(theme.config.sidebar.profile.helloText, ',')}]],
-            assetsLink: [[${assets_link}]],
             profileStyle: [[${theme.config.sidebar.profile.profileStyle}]],
             rightMenuEnable: [[${theme.config.tool.rightMenu.rightMenuEnable}]],
             source: {

templates/modules/layouts/layout.html

@@ -38,18 +38,9 @@
 <!-- 内容 -->
 <th:block th:replace="${content}"></th:block>
 
-<!-- todo 暂时没显示，是右下角悬浮操作按钮 -->
+
-<div id="rightside">
+<!-- todo 右下角悬浮操作按钮 -->
-    <div id="rightside-config-hide">
+<th:block th:replace="~{modules/common/rightside :: rightside}"></th:block>
-        <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>
 
 
 <div th:replace="~{modules/right-menu :: right-menu}"></div>