更新

assets/css/joe.global.min.scss

@@ -1952,6 +1952,20 @@
 				color: var(--routine);
 			}
 		}
+		&-hide {
+			background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
+			padding: 15px 0;
+			text-align: center;
+			position: relative;
+			user-select: none;
+			line-height: normal;
+			i {
+				position: relative;
+				font-style: normal;
+				cursor: pointer;
+				color: var(--theme);
+			}
+		}
 		&-message {
 			position: relative;
 			border-left-width: 4px;

assets/js/joe.short.js

@@ -119,6 +119,24 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-dotted', JoeDotted);
+	class JoeHide extends HTMLElement {
+		constructor() {
+			super();
+			this.render();
+		}
+		render() {
+			this.innerHTML = '<div class="joe_detail__article-hide">此处内容作者设置了 <i>回复</i> 可见</div>';
+			this.$button = this.querySelector('i');
+			const $comment = document.querySelector('.joe_comment');
+			const $header = document.querySelector('.joe_header');
+			if (!$comment || !$header) return;
+			this.$button.addEventListener('click', () => {
+				const top = $comment.offsetTop - $header.offsetHeight - 15;
+				window.scrollTo({ top, behavior: 'smooth' });
+			});
+		}
+	}
+	window.customElements.define('joe-hide', JoeHide);
 
 	/* 
 	------------------------以下未测试------------------------------------------
@@ -194,62 +212,4 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-card', JoeCard);
-    /* 回复可见 - 显示状态 */
-    class JoeShow extends HTMLElement {
-        constructor() {
-            super();
-            this.options = {
-                content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '默认隐藏的内容'
-            };
-            this.render();
-        }
-        render() {
-            this.innerHTML = this.options.content;
-        }
-    }
-    window.customElements.define('joe-show', JoeShow);
-    /* 回复可见 - 隐藏状态 */
-    class JoeHide extends HTMLElement {
-        constructor() {
-            super();
-            this.render();
-        }
-        get template() {
-            return `
-                <style>
-                    .container {
-                        background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
-                        padding: 15px 0;
-                        text-align: center;
-                        position: relative;
-                        user-select: none;
-                        line-height: normal;
-                    }
-                    .container i {
-                        position: relative;
-                        font-style: normal;
-                        cursor: pointer;
-                        color: var(--theme);
-                    }
-                </style>
-                <div class="container">
-                    此处内容作者设置了 <i>回复</i> 可见
-                </div>
-            `;
-        }
-        render() {
-            this.innerHTML = '';
-            this._shadowRoot = this.attachShadow({ mode: 'closed' });
-            this._shadowRoot.innerHTML = this.template;
-            this.event();
-        }
-        event() {
-            this.$button = this._shadowRoot.querySelector('i');
-            this.$button.addEventListener('click', () => {
-                const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15;
-                window.scrollTo({ top, behavior: 'smooth' });
-            });
-        }
-    }
-    window.customElements.define('joe-hide', JoeHide);
 });

core/function.php

@@ -2,7 +2,7 @@
 /* 获取主题当前版本号 */
 function _getVersion()
 {
-	return "6.4.4";
+	return "6.4.5";
 };
 
 /* 判断是否是手机 */

core/short.php

@@ -34,6 +34,15 @@ function _parseContent($post, $login)
     if (strpos($content, '{dotted') !== false) {
         $content = preg_replace('/{dotted([^}]*)\/}/SU', '<joe-dotted $1></joe-dotted>', $content);
     }
+    if (strpos($content, '{hide') !== false) {
+        $db = Typecho_Db::get();
+        $hasComment = $db->fetchAll($db->select()->from('table.comments')->where('cid = ?', $post->cid)->where('mail = ?', $post->remember('mail', true))->limit(1));
+        if ($hasComment || $login) {
+            $content = strtr($content, array("{hide}" => "", "{/hide}" => ""));
+        } else {
+            $content = preg_replace('/{hide[^}]*}(.*?){\/hide}/', '<joe-hide></joe-hide>', $content);
+        }
+    }
 
 
 
@@ -43,16 +52,7 @@ function _parseContent($post, $login)
         $content = preg_replace('/{card-default(.*)}/SU', '<joe-card $1>', $content);
         $content = preg_replace('/{\/card-default}/SU', '</joe-card>', $content);
     }
-    /* 过滤回复可见 */
+    
-    if (strpos($content, '{hide') !== false) {
-        $db = Typecho_Db::get();
-        $hasComment = $db->fetchAll($db->select()->from('table.comments')->where('cid = ?', $post->cid)->where('mail = ?', $post->remember('mail', true))->limit(1));
-        if ($hasComment || $login) {
-            $content = strtr($content, array("{hide}" => "<joe-show>", "{/hide}" => "</joe-show>"));
-        } else {
-            $content = strtr($content, array("{hide}" => "<joe-hide>", "{/hide}" => "</joe-hide>"));
-        }
-    }
     /* 过滤复制粘贴功能 */
     if (strpos($content, '{copy') !== false) {
         $content = preg_replace('/{copy(.*)}/SU', '<joe-copy $1>', $content);

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "typecho-joe-next",
-	"version": "6.4.4",
+	"version": "6.4.5",
 	"description": "A Theme Of Typecho",
 	"main": "index.php",
 	"keywords": [

typecho/write/css/joe.write.min.scss

@@ -770,6 +770,21 @@ body.fullscreen {
 	background-size: 80px;
 }
 
+.joe_detail__article-hide {
+	background: repeating-linear-gradient(145deg, #f2f6fc, #f2f6fc 15px, #fff 0, #fff 25px);
+	padding: 15px 0;
+	text-align: center;
+	position: relative;
+	user-select: none;
+	line-height: normal;
+    i {
+        position: relative;
+        font-style: normal;
+        cursor: pointer;
+        color: #409eff;
+    }
+}
+
 @media (max-width: 768px) {
 	.cm-modal__wrapper {
 		width: 90%;

typecho/write/js/_actions.js

@@ -475,6 +475,11 @@ export default class JoeAction {
 		const str = `${this._getLineCh(cm) ? '\n' : ''}!!!\n<p align="center">居中</p>\n<p align="right">居右</p>\n<font size="5" color="red">颜色大小</font>\n!!!\n`;
 		this._replaceSelection(cm, str);
 		cm.focus();
+	}
+	handleHide(cm) {
+        const str = `${this._getLineCh(cm) ? '\n' : ''}{hide}\n需要隐藏的内容\n{/hide}\n`;
+		this._replaceSelection(cm, str);
+		cm.focus();
     }
 	handleAbtn(cm) {
 		this._openModal({

typecho/write/js/_create.js

@@ -24,6 +24,7 @@ export default function createPreviewHtml(str) {
 	str = str.replace(/{abtn([^}]*)\/}/g, '<joe-abtn $1></joe-abtn>');
 	str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>');
 	str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>');
+	str = str.replace(/{hide[^}]*}(.*?){\/hide}/g, '<joe-hide></joe-hide>');
 
 	$('.cm-preview-content').html(str);
 	$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));

typecho/write/js/_tools.js

@@ -155,6 +155,11 @@ export default [
 		title: '彩色虚线',
 		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M111.09 562.26a42.6 42.6 0 1 1 0-85.19h127.78a42.6 42.6 0 0 1 0 85.19zm340.75-3a42.59 42.59 0 1 1 0-85.18h127.78a42.59 42.59 0 1 1 0 85.18zm340.75 0a42.59 42.59 0 0 1 0-85.18h127.79a42.59 42.59 0 1 1 0 85.18zm0 0"/></svg>'
 	},
+	{
+		type: 'hide',
+		title: '回复可见',
+		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M342.016 640.512a483.328 483.328 0 0 1-126.976-63.488l-104.96 102.4a51.2 51.2 0 0 1-71.168-74.24l102.4-96.256a419.328 419.328 0 0 1-84.48-133.12 51.2 51.2 0 1 1 95.744-34.816 278.016 278.016 0 0 0 15.872 32.256 378.88 378.88 0 0 0 55.808 77.312A381.952 381.952 0 0 0 512 563.2a382.464 382.464 0 0 0 286.208-112.64 378.88 378.88 0 0 0 58.368-77.312 278.016 278.016 0 0 0 13.824-32.256 51.2 51.2 0 1 1 95.744 34.816 419.328 419.328 0 0 1-84.48 133.12l102.4 96.256a51.2 51.2 0 0 1-71.168 73.216L807.936 576a460.8 460.8 0 0 1-125.952 62.976l58.368 102.4a51.2 51.2 0 0 1-88.576 51.2l-74.752-130.048A521.728 521.728 0 0 1 512 665.6q-32.256 0-62.976-3.072l-76.8 129.536a51.2 51.2 0 0 1-88.576-51.2z"/></svg>'
+	},
 	/* --------------------------- 短代码结束 --------------------------- */
 	{
 		type: 'clean',

typecho/write/js/joe.write.js

@@ -289,6 +289,9 @@ class Joe extends JoeAction {
 						case 'dotted':
 							super.handleDotted(this.cm);
 							break;
+						case 'hide':
+							super.handleHide(this.cm);
+							break;
 					}
 				});
 				$('.cm-tools').append(el);