fix(comment): 评论区适配pjax

src/js/post.js

@@ -168,6 +168,20 @@ const postContext = {
         }
       }
     })
+  },
+  /* 初始化评论区 */
+  initComment() {
+    const $mainContent = $('.main-content')
+    window.CommentWidget && CommentWidget.init(
+      '#comment',
+      '/plugins/PluginCommentWidget/assets/static/style.css',
+      {
+        group: 'content.halo.run',
+        kind: $mainContent.attr('data-target'),
+        name: $mainContent.attr('data-id'),
+        colorScheme: window.dataTheme
+      }
+    )
   }
 }
 window.postPjax = function (serialNumber) {

templates/assets/js/post.min.js

@@ -1 +1 @@
-(()=>{let i=!1;const a={initEvent(){var e;i||((e=$("body")).on("click","figure>figcaption .fa-angle-down",function(){var e=$(this);e.is(".close")?($(e.attr("data-code")).parent().slideDown(200),e.removeClass("close")):($(e.attr("data-code")).parent().slideUp(200),e.addClass("close"))}),e.on("click","figure > pre > .expand-done",function(){Utils.foldBlock($(this).parent().parent())}),e.on("click",".gallery-item .expand-done",function(e){e.stopPropagation(),Utils.foldBlock($(this).parent())}),Utils.initLikeEvent(".admire .agree.like","posts",e=>e.find("span").find("span")),window.onCommentSuccessEvent=(e,i)=>{var t=encrypt("mew-hide-"+i),n=(n=localStorage.getItem(t))?JSON.parse(decrypt(n)):[],e=String(e.postId);n.includes(e)||(n.push(e),$(`.main-content[data-target='${i}'][data-id='${e}'] mew-hide[hide]`).each(function(){$(this).before(decrypt(this.getAttribute("hide"))),$(this).remove(),commonContext.initGallery(),a.initCodeBlock(),a.initLiterature(),a.initHighlighting(),"true"===this.getAttribute("toc")&&commonContext.initTocAndNotice()}),localStorage.setItem(t,encrypt(JSON.stringify(n))))},i=!0)},initCodeBlock(){var e=$("*:not(figure) > pre > code");0!==e.length&&e.each(function(e){var i=$(this).parent();let t=$(this).attr("class"),n="",a=!1;if(null!=t){let e=t.indexOf("|"),i=t.indexOf("<");n=-1!==e||-1!==i?((-1===e||-1!==i&&i<e)&&(a=!0,e=i),$(this).attr("class",t.substring(0,e)),e===t.length-1?t.substring(9,e):t.substring(e+1)):t.substring(9)}let o=$(this).text().split("\n").length-1||1,l=String(o).length,s=(1===l&&(l=2),"");for(var r=0;r<o;r++)s+=`<li>${String(r+1).padStart(l,0)}</li>`;let d=`codeBlock${e}-`+(new Date).getTime(),c="";a&&(c=" close",$(this).hide());e=`<div><i class="fa fa-angle-down${c}" data-code='#${d}'></i><i class="fa fa-clone btn-clipboard" title="复制代码" data-clipboard-target='#${d}'></i></div>`;$(this).attr("id",d),i.prepend(`<ul>${s}</ul>`),o>DreamConfig.code_fold_line?i.wrap('<figure class="fold hljs"></figure>').append('<div class="expand-done"><i class="fa fa-angle-double-up"></i></div>'):i.wrap('<figure class="hljs"></figure>'),i.parent().prepend(`<figcaption>${n}${e}</figcaption>`)})},initLiterature(){$(".literature-content>p:not([class]),.literature-content>mew-hide>p:not([class])").each(function(){0===$(this).children(":not(code,a,strong,em,ins,b,s,br,span.pwd)").length&&$(this).addClass("note")})},initLike(){Utils.initLikeButton(".admire .agree.like","posts")},initHighlighting(){hljs.initHighlightingOnLoad()},initShare(){if(window.DShare){let e=$(".cover-image").css("background-image");e=e&&e.substring(5,e.length-2),DShare.create(".dshare",{image:e,imageSelector:".main-content"})}},initClipboard(){window.clipboard||(window.clipboard=new ClipboardJS(".btn-clipboard"),clipboard.on("error",function(e){e.clearSelection(),Qmsg.error("您的浏览器不支持复制")}),clipboard.on("success",function(){Qmsg.success("复制成功")}))},foldImage(){var e;DreamConfig.img_fold_height&&((e=$(".article .gallery-item>[data-fancybox]>img")).parent().addClass("fold"),e.each(function(){const e=$(this).parent();this.complete?this.scrollHeight>=DreamConfig.img_fold_height?e.append('<div class="expand-done"><i class="fa fa-angle-double-up"></i></div>'):e.removeClass("fold"):this.onload=function(){this.scrollHeight>=DreamConfig.img_fold_height?e.append('<div class="expand-done"><i class="fa fa-angle-double-up"></i></div>'):e.removeClass("fold")}}))}};window.postPjax=function(i){0!==$(".main-content").length&&Object.keys(a).forEach(e=>window.pjaxSerialNumber===i&&a[e]())};{const t=["initEvent","initCodeBlock","initLiterature","initLike","foldImage"];Object.keys(a).forEach(e=>!window.pjaxSerialNumber&&t.includes(e)&&a[e]()),document.addEventListener("DOMContentLoaded",function(){Object.keys(a).forEach(e=>!window.pjaxSerialNumber&&!t.includes(e)&&a[e]())})}})();
+(()=>{let t=!1;const a={initEvent(){var e;t||((e=$("body")).on("click","figure>figcaption .fa-angle-down",function(){var e=$(this);e.is(".close")?($(e.attr("data-code")).parent().slideDown(200),e.removeClass("close")):($(e.attr("data-code")).parent().slideUp(200),e.addClass("close"))}),e.on("click","figure > pre > .expand-done",function(){Utils.foldBlock($(this).parent().parent())}),e.on("click",".gallery-item .expand-done",function(e){e.stopPropagation(),Utils.foldBlock($(this).parent())}),Utils.initLikeEvent(".admire .agree.like","posts",e=>e.find("span").find("span")),window.onCommentSuccessEvent=(e,t)=>{var i=encrypt("mew-hide-"+t),n=(n=localStorage.getItem(i))?JSON.parse(decrypt(n)):[],e=String(e.postId);n.includes(e)||(n.push(e),$(`.main-content[data-target='${t}'][data-id='${e}'] mew-hide[hide]`).each(function(){$(this).before(decrypt(this.getAttribute("hide"))),$(this).remove(),commonContext.initGallery(),a.initCodeBlock(),a.initLiterature(),a.initHighlighting(),"true"===this.getAttribute("toc")&&commonContext.initTocAndNotice()}),localStorage.setItem(i,encrypt(JSON.stringify(n))))},t=!0)},initCodeBlock(){var e=$("*:not(figure) > pre > code");0!==e.length&&e.each(function(e){var t=$(this).parent();let i=$(this).attr("class"),n="",a=!1;if(null!=i){let e=i.indexOf("|"),t=i.indexOf("<");n=-1!==e||-1!==t?((-1===e||-1!==t&&t<e)&&(a=!0,e=t),$(this).attr("class",i.substring(0,e)),e===i.length-1?i.substring(9,e):i.substring(e+1)):i.substring(9)}let o=$(this).text().split("\n").length-1||1,s=String(o).length,l=(1===s&&(s=2),"");for(var r=0;r<o;r++)l+=`<li>${String(r+1).padStart(s,0)}</li>`;let d=`codeBlock${e}-`+(new Date).getTime(),c="";a&&(c=" close",$(this).hide());e=`<div><i class="fa fa-angle-down${c}" data-code='#${d}'></i><i class="fa fa-clone btn-clipboard" title="复制代码" data-clipboard-target='#${d}'></i></div>`;$(this).attr("id",d),t.prepend(`<ul>${l}</ul>`),o>DreamConfig.code_fold_line?t.wrap('<figure class="fold hljs"></figure>').append('<div class="expand-done"><i class="fa fa-angle-double-up"></i></div>'):t.wrap('<figure class="hljs"></figure>'),t.parent().prepend(`<figcaption>${n}${e}</figcaption>`)})},initLiterature(){$(".literature-content>p:not([class]),.literature-content>mew-hide>p:not([class])").each(function(){0===$(this).children(":not(code,a,strong,em,ins,b,s,br,span.pwd)").length&&$(this).addClass("note")})},initLike(){Utils.initLikeButton(".admire .agree.like","posts")},initHighlighting(){hljs.initHighlightingOnLoad()},initShare(){if(window.DShare){let e=$(".cover-image").css("background-image");e=e&&e.substring(5,e.length-2),DShare.create(".dshare",{image:e,imageSelector:".main-content"})}},initClipboard(){window.clipboard||(window.clipboard=new ClipboardJS(".btn-clipboard"),clipboard.on("error",function(e){e.clearSelection(),Qmsg.error("您的浏览器不支持复制")}),clipboard.on("success",function(){Qmsg.success("复制成功")}))},foldImage(){var e;DreamConfig.img_fold_height&&((e=$(".article .gallery-item>[data-fancybox]>img")).parent().addClass("fold"),e.each(function(){const e=$(this).parent();this.complete?this.scrollHeight>=DreamConfig.img_fold_height?e.append('<div class="expand-done"><i class="fa fa-angle-double-up"></i></div>'):e.removeClass("fold"):this.onload=function(){this.scrollHeight>=DreamConfig.img_fold_height?e.append('<div class="expand-done"><i class="fa fa-angle-double-up"></i></div>'):e.removeClass("fold")}}))},initComment(){var e=$(".main-content");window.CommentWidget&&CommentWidget.init("#comment","/plugins/PluginCommentWidget/assets/static/style.css",{group:"content.halo.run",kind:e.attr("data-target"),name:e.attr("data-id"),colorScheme:window.dataTheme})}};window.postPjax=function(t){0!==$(".main-content").length&&Object.keys(a).forEach(e=>window.pjaxSerialNumber===t&&a[e]())};{const i=["initEvent","initCodeBlock","initLiterature","initLike","foldImage"];Object.keys(a).forEach(e=>!window.pjaxSerialNumber&&i.includes(e)&&a[e]()),document.addEventListener("DOMContentLoaded",function(){Object.keys(a).forEach(e=>!window.pjaxSerialNumber&&!i.includes(e)&&a[e]())})}})();

templates/common/scripts.html

@@ -6,11 +6,11 @@
     <script th:src="@{/assets/js/common.min.js(mew=${theme.spec.version})}"></script>
 
     <th:block th:if="${isPost}">
-
         <script th:if="${isPost}" data-pjax th:src="@{/assets/lib/highlightjs@11.5.1/highlight.min.js}"></script>
         <script th:if="${isPost}" data-pjax th:src="@{/assets/lib/clipboard@2.0.10/clipboard.min.js}"></script>
         <script th:if="${enableShare}" data-pjax th:src="@{/assets/js/dshare.min.js(mew=${theme.spec.version})}"></script>
         <script th:if="${isPost}" data-pjax th:src="@{/assets/js/post.min.js(mew=${theme.spec.version})}"></script>
+        <script th:if="${pluginFinder.available('PluginCommentWidget') && (post != null || singlePage != null)}" data-pjax src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js"></script>
     </th:block>
 
     <script th:src="@{/assets/js/mew-custom.min.js(mew=${theme.spec.version})}"></script>

templates/main/article.html

@@ -91,7 +91,6 @@
 
     <div class="card card-content" id="comment-wrapper" th:if="${pluginFinder.available('PluginCommentWidget')}">
         <h3 class="comment-title">评论</h3>
-        <halo:comment colorScheme="window.dataTheme" group="content.halo.run" th:kind="${type}"
+        <div id="comment"></div>
-                      th:attr="name=${post.metadata.name}"/>
     </div>
 </th:block>