diff --git a/settings.yaml b/settings.yaml
index 0782d8b0..2150fc43 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -2605,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: 音乐
diff --git a/templates/assets/css/read-mode.css b/templates/assets/css/read-mode.css
new file mode 100644
index 00000000..a12d918a
--- /dev/null
+++ 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)
+}
\ No newline at end of file
diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js
index fd42b62e..2a2ba108 100644
--- a/templates/assets/js/main.js
+++ b/templates/assets/js/main.js
@@ -170,13 +170,93 @@ 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 = 'fas fa-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) {
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index ff785f12..e89e4a01 100644
--- 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 {
diff --git a/templates/modules/common/rightside.html b/templates/modules/common/rightside.html
new file mode 100644
index 00000000..01aa7e58
--- /dev/null
+++ b/templates/modules/common/rightside.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+