feat(links): 适配友链插件

settings.yaml

@@ -786,6 +786,39 @@ spec:
     - group: page_config
       label: '页面设置'
       formSchema:
+        - $formkit: attachment
+          name: links_thumbnail
+          label: 友链页面-缩略图
+          placeholder: '请输入/选择图片路径'
+        - $formkit: attachment
+          name: links_default_avatar
+          label: '友链页面-默认 Logo'
+          placeholder: '请输入/选择 Logo 路径'
+          help: "在加载用户 Logo 时、友链未设置 Logo 时、友链 Logo 加载失败时显示。"
+        - $formkit: radio
+          name: show_exchange_info
+          label: 友链页面-显示友链交换信息
+          value: true
+          options:
+            - value: true
+              label: 显示
+            - value: false
+              label: 关闭
+        - $formkit: attachment
+          name: links_blogger_avatar
+          label: '友链页面-交换信息自定义 Logo 链接'
+          placeholder: '请输入/选择 Logo 路径'
+          help: '用于交换友链的 Logo 链接。'
+        - $formkit: code
+          name: links_info
+          label: "友链页面-补充信息"
+          placeholder: '请输入补充信息'
+          help: '友链页面最低部的补充说明信息，支持 HTML 格式。'
+        - $formkit: text
+          name: link_comment_id
+          label:  友链页面-评论区ID
+          placeholder: '请输入 ID'
+          help: '友链页面没有 ID，需要指定一个自定义页面的 ID 用于评论，被指定的文章评论区将作为友链的评论区， 放空则不显示评论区。'
         - $formkit: radio
           name: enable_tags_tag_color
           label:  标签页面-开启标签颜色

src/js/common.js

@@ -403,6 +403,20 @@ const commonContext = {
       websiteDate.innerHTML = `建站<span class="stand">${days}</span>天<span class="stand">${hours}</span>时<span class="stand">${minutes}</span>分<span class="stand">${seconds}</span>秒`
     }, 1000)
   },
+  /* 初始化评论区 */
+  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
+      }
+    )
+  },
   /* 初始化特效，只需要初始化一次，移动端设备不初始化 */
   initEffects() {
     if (Utils.isMobile()) return
@@ -428,7 +442,7 @@ const commonContext = {
 window.commonContext = commonContext
 
 !(function () {
-  const loads = ['initCarousel', 'sparkInput', 'websiteTime']
+  const loads = ['initCarousel', 'sparkInput', 'websiteTime', 'initComment']
   const omits = ['initEffects', 'loadMaintain', 'showThemeVersion']
 
   Object.keys(commonContext).forEach(

src/js/pjax.js

@@ -167,6 +167,8 @@ $(document).on('pjax:success', async function (event, data, status, xhr, options
   if (window.pjaxSerialNumber !== serialNumber) return
   /* 初始化文章界面 */
   window.postPjax && window.postPjax(serialNumber)
+  /* 初始化评论 */
+  commonContext.initComment()
   /* 初始化轮播 */
   commonContext.initCarousel()
   /* 加载主动推送或统计脚本 */

src/js/post.js

@@ -188,20 +188,6 @@ const postContext = {
       localStorage.setItem(name, encrypt(JSON.stringify(commentIds)))
     }
     postContextInitial = true
-  },
-  /* 初始化评论区 */
-  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/pjax.min.js

@@ -1 +1 @@
-(()=>{const l=new Set($('link[href*=".css"]').map((o,e)=>$(e).attr("href")).get()),c=new Set($('script[src*=".js"]').map((o,e)=>$(e).attr("src")).get()),e=()=>{var o=(new Date).getTime();return window.pjaxSerialNumber=o,console.log("sn = "+o),o},i=(e,n,t)=>{if(n>=e.length)t&&t();else{let o=$(e[n]).attr("src");c.has(o)?i(e,n+1,t):(console.log((t?"同步":"异步")+"顺序加载js "+o),Utils.cachedScript(o).done(function(){console.log((t?"同步":"异步")+"顺序加载js完成 "+o),c.add(o),window.DProgress&&DProgress.inc(),i(e,n+1,t)}).fail(function(){console.log((t?"同步":"异步")+"顺序加载js失败 "+o),i(e,n+1,t)}))}};$(document).on("click","a[target!=_blank][href]:not(data-not-pjax)",o=>{$.pjax.click(o,".column-main",{scrollTo:"/"!==o.currentTarget.pathname&&0!==$(".banner").length?window.innerHeight/4:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("submit","form[data-pjax]",function(o){$.pjax.submit(o,".column-main",{scrollTo:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("pjax:click",function(o,e){console.log("------------------------"),console.log("pjax:click sn = "+e.serialNumber)}),$(document).on("pjax:beforeSend",function(o,e,n){console.log("pjax:beforeSend sn = "+n.serialNumber),$("html").addClass("pjax-loading")}),$(document).on("pjax:start",function(o,e,n){console.log("pjax:start sn = "+n.serialNumber),window.DProgress&&DProgress.start(),$(".pjax-close").remove()}),$(document).on("pjax:send",function(o,e,n){console.log("pjax:send sn = "+n.serialNumber)}),$(document).on("pjax:clicked",function(o,e){console.log("pjax:clicked sn = "+e.serialNumber)}),$(document).on("pjax:beforeReplace",function(o,e,n){console.log("pjax:beforeReplace sn = "+n.serialNumber),$(".navbar-nav .current,.panel-side-menu .current").removeClass("current"),commonContext.initNavbar(),0<$("html.disable-scroll").length&&$(".navbar-mask").trigger("click")}),$(document).on("pjax:success",async function(o,e,n,t,s){s=s.serialNumber;if(console.log("pjax:success sn = "+s),window.pjaxSerialNumber===s){commonContext.initGallery(),commonContext.initTocAndNotice(),$("html").removeClass("pjax-loading");const a=$($.parseHTML(e,document,!0)),r=$("head");r.find("meta").remove(),r.append(a.filter("meta")),a.filter("link[data-pjax]").each(function(){let o=$(this).attr("href");l.has(o)||(r.append($(this)),console.log("加载css "+$(this).attr("href")),this.onload=function(){l.add(o),window.DProgress&&DProgress.inc(),console.log("加载css完成 "+$(this).attr("href"))})});let o=a.filter("script[data-pjax]");if(0<o.length){o.filter("[async]").each(function(){let o=$(this).attr("src");c.has(o)||(console.log("异步无序加载js "+o),Utils.cachedScript(o).done(function(){console.log("异步无序js完成 "+o),window.DProgress&&DProgress.inc(),c.add(o)}).fail(function(){console.log("异步无序js失败 "+o)}))}),new Promise(()=>{i(o.filter("[defer]"),0)});let e=o.filter(":not([async]):not([defer])");0<e.length&&await new Promise(o=>{i(e,0,o)})}console.log("全部处理完成"),window.pjaxSerialNumber===s&&(window.postPjax&&window.postPjax(s),commonContext.initCarousel(),commonContext.loadMaintain(),window.DProgress)&&DProgress.done()}}),$(document).on("pjax:timeout",function(o,e,n){console.log("pjax:timeout sn = "+n.serialNumber)}),$(document).on("pjax:error",function(o,e,n,t,s){console.log(`pjax:error sn = ${s.serialNumber} error `+t)}),$(document).on("pjax:complete",function(o,e,n,t){console.log("pjax:complete sn = "+t.serialNumber)}),$(document).on("pjax:end",function(o,e,n){console.log("pjax:end sn = "+n.serialNumber),null==e&&(commonContext.initTocAndNotice(),commonContext.initCarousel(),window.DProgress&&DProgress.done(),$("html").removeClass("pjax-loading"))}),$(document).on("pjax:popstate",function(){console.log("pjax:popstate")})})();
+(()=>{const c=new Set($('link[href*=".css"]').map((o,e)=>$(e).attr("href")).get()),l=new Set($('script[src*=".js"]').map((o,e)=>$(e).attr("src")).get()),e=()=>{var o=(new Date).getTime();return window.pjaxSerialNumber=o,console.log("sn = "+o),o},i=(e,n,t)=>{if(n>=e.length)t&&t();else{let o=$(e[n]).attr("src");l.has(o)?i(e,n+1,t):(console.log((t?"同步":"异步")+"顺序加载js "+o),Utils.cachedScript(o).done(function(){console.log((t?"同步":"异步")+"顺序加载js完成 "+o),l.add(o),window.DProgress&&DProgress.inc(),i(e,n+1,t)}).fail(function(){console.log((t?"同步":"异步")+"顺序加载js失败 "+o),i(e,n+1,t)}))}};$(document).on("click","a[target!=_blank][href]:not(data-not-pjax)",o=>{$.pjax.click(o,".column-main",{scrollTo:"/"!==o.currentTarget.pathname&&0!==$(".banner").length?window.innerHeight/4:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("submit","form[data-pjax]",function(o){$.pjax.submit(o,".column-main",{scrollTo:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("pjax:click",function(o,e){console.log("------------------------"),console.log("pjax:click sn = "+e.serialNumber)}),$(document).on("pjax:beforeSend",function(o,e,n){console.log("pjax:beforeSend sn = "+n.serialNumber),$("html").addClass("pjax-loading")}),$(document).on("pjax:start",function(o,e,n){console.log("pjax:start sn = "+n.serialNumber),window.DProgress&&DProgress.start(),$(".pjax-close").remove()}),$(document).on("pjax:send",function(o,e,n){console.log("pjax:send sn = "+n.serialNumber)}),$(document).on("pjax:clicked",function(o,e){console.log("pjax:clicked sn = "+e.serialNumber)}),$(document).on("pjax:beforeReplace",function(o,e,n){console.log("pjax:beforeReplace sn = "+n.serialNumber),$(".navbar-nav .current,.panel-side-menu .current").removeClass("current"),commonContext.initNavbar(),0<$("html.disable-scroll").length&&$(".navbar-mask").trigger("click")}),$(document).on("pjax:success",async function(o,e,n,t,s){s=s.serialNumber;if(console.log("pjax:success sn = "+s),window.pjaxSerialNumber===s){commonContext.initGallery(),commonContext.initTocAndNotice(),$("html").removeClass("pjax-loading");const a=$($.parseHTML(e,document,!0)),r=$("head");r.find("meta").remove(),r.append(a.filter("meta")),a.filter("link[data-pjax]").each(function(){let o=$(this).attr("href");c.has(o)||(r.append($(this)),console.log("加载css "+$(this).attr("href")),this.onload=function(){c.add(o),window.DProgress&&DProgress.inc(),console.log("加载css完成 "+$(this).attr("href"))})});let o=a.filter("script[data-pjax]");if(0<o.length){o.filter("[async]").each(function(){let o=$(this).attr("src");l.has(o)||(console.log("异步无序加载js "+o),Utils.cachedScript(o).done(function(){console.log("异步无序js完成 "+o),window.DProgress&&DProgress.inc(),l.add(o)}).fail(function(){console.log("异步无序js失败 "+o)}))}),new Promise(()=>{i(o.filter("[defer]"),0)});let e=o.filter(":not([async]):not([defer])");0<e.length&&await new Promise(o=>{i(e,0,o)})}console.log("全部处理完成"),window.pjaxSerialNumber===s&&(window.postPjax&&window.postPjax(s),commonContext.initComment(),commonContext.initCarousel(),commonContext.loadMaintain(),window.DProgress)&&DProgress.done()}}),$(document).on("pjax:timeout",function(o,e,n){console.log("pjax:timeout sn = "+n.serialNumber)}),$(document).on("pjax:error",function(o,e,n,t,s){console.log(`pjax:error sn = ${s.serialNumber} error `+t)}),$(document).on("pjax:complete",function(o,e,n,t){console.log("pjax:complete sn = "+t.serialNumber)}),$(document).on("pjax:end",function(o,e,n){console.log("pjax:end sn = "+n.serialNumber),null==e&&(commonContext.initTocAndNotice(),commonContext.initCarousel(),window.DProgress&&DProgress.done(),$("html").removeClass("pjax-loading"))}),$(document).on("pjax:popstate",function(){console.log("pjax:popstate")})})();

templates/assets/js/post.min.js

@@ -1 +1 @@
-(()=>{let t=!1;const a={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,o=!1;if(null!=i){var s=i.match(/[|<](.*)$/),l=i.match(/:select/);if(s||l){let e=0;l&&(e=l.index,s?s[1].endsWith(l[0])&&(s[1]=s[1].substring(0,s[1].length-l[0].length)):n=i.substring(9,l.index),a=!0),s&&(e=s.index<e?s.index:e,"<"===s[0][0]&&(o=!0),n=s[1]),$(this).attr("class",i.substring(0,e)),n=n||i.substring(9,e)}else n=i.substring(9)}let r=$(this).text().split("\n")||[],d=r.length-1,c=String(d).length,g=(1===c&&(c=2),"");for(var h=0;h<d;h++)g+=`<li ${a&&/^\s*\|\+\s+/.test(r[h])?'class="code-select"':""}>${String(h+1).padStart(c,0)}</li>`;a&&$(this).text($(this).text().replace(/(^\s*)\|\+\s/gm,"$1"));let p=`codeBlock${e}-`+(new Date).getTime(),m="";o&&(m=" close",$(this).parent().hide());l=`<div><i class="fa fa-angle-down${m}" data-code='#${p}'></i><i class="fa fa-clone btn-clipboard" title="复制代码" data-clipboard-target='#${p}'></i></div>`;$(this).attr("id",p),t.prepend(`<ul>${g}</ul>`),d>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}${l}</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")}}))},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)},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]())})}})();
+(()=>{let t=!1;const a={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,o=!1;if(null!=i){var s=i.match(/[|<](.*)$/),l=i.match(/:select/);if(s||l){let e=0;l&&(e=l.index,s?s[1].endsWith(l[0])&&(s[1]=s[1].substring(0,s[1].length-l[0].length)):n=i.substring(9,l.index),a=!0),s&&(e=s.index<e?s.index:e,"<"===s[0][0]&&(o=!0),n=s[1]),$(this).attr("class",i.substring(0,e)),n=n||i.substring(9,e)}else n=i.substring(9)}let r=$(this).text().split("\n")||[],d=r.length-1,c=String(d).length,g=(1===c&&(c=2),"");for(var p=0;p<d;p++)g+=`<li ${a&&/^\s*\|\+\s+/.test(r[p])?'class="code-select"':""}>${String(p+1).padStart(c,0)}</li>`;a&&$(this).text($(this).text().replace(/(^\s*)\|\+\s/gm,"$1"));let h=`codeBlock${e}-`+(new Date).getTime(),f="";o&&(f=" close",$(this).parent().hide());l=`<div><i class="fa fa-angle-down${f}" data-code='#${h}'></i><i class="fa fa-clone btn-clipboard" title="复制代码" data-clipboard-target='#${h}'></i></div>`;$(this).attr("id",h),t.prepend(`<ul>${g}</ul>`),d>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}${l}</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")}}))},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)}};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

@@ -10,7 +10,9 @@
         <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>
+    <th:block th:if="${isPost || enableComment != null}">
+        <script th:if="${pluginFinder.available('PluginCommentWidget') && (post != null || singlePage != null || enableComment != 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/links.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<th:block xmlns:th="https://www.thymeleaf.org"
+          th:insert="~{common/layout :: layout (title = '友链 - ' + ${site.title}, canonical = @{/links}, content = ~{::content}, isPost = false)}"
+          th:with="enableComment = ${!#strings.isEmpty(theme.config.page_config.link_comment_id)}">
+    <th:block th:fragment="content"
+              th:with="defaultAvatar = ${#strings.defaultString(theme.config.page_config.links_default_avatar, #theme.assets('/img/avatar.svg'))}">
+        <div class="card">
+            <div th:if="${!#strings.isEmpty(theme.config.page_config.links_thumbnail)}" class="card-image cover-image" th:style="'background-image: url(' + ${theme.config.page_config.links_thumbnail} + ')'">
+            </div>
+            <div class="card-content main">
+                <h1 class="title" th:text="'友情链接 - ' + ${contributor.displayName} + '的小伙伴们'"></h1>
+                <div class="main-content"
+                     th:data-id="${theme.config.page_config.link_comment_id}"
+                     data-target="SinglePage">
+                    <th:block th:each="group : ${groups}">
+                        <div th:if="${!#lists.isEmpty(group.links)}" class="links">
+                            <h3 class="link-title" th:text="${#strings.defaultString(group.spec.displayName, '小伙伴们')}" th:id="'toc' + ${groupStat.index}"></h3>
+                            <ul class="link-items">
+                                <li th:each="link : ${group.links}">
+                                    <a class="links-item" th:href="${link.spec.url}" rel="noopener noreferrer" target="_blank"
+                                       th:title="${link.spec.description}">
+                                        <img th:if="${#strings.isEmpty(link.spec.logo)}" class="not-gallery" th:title="${link.spec.displayName}" th:src="${defaultAvatar}" th:alt="${link.spec.displayName}">
+                                        <img th:unless="${#strings.isEmpty(link.spec.logo)}" class="not-gallery" th:title="${link.spec.displayName}" th:src="${defaultAvatar}"
+                                             th:data-url="${link.spec.logo}"
+                                             th:data-default="${defaultAvatar}"
+                                             onload="if(!this.finish){this.finish=true;this.src=this.getAttribute('data-url')}"
+                                             onerror="this.onerror='';if (this.finish) {this.src=this.getAttribute('data-default')} else {this.finish=true;this.src=this.getAttribute('data-url')}"
+                                             th:alt="${link.spec.displayName}">
+                                        <span class="link-name" th:text="${link.spec.displayName}"></span>
+                                        <div class="link-desc" th:text="${#strings.defaultString(link.spec.description, '他还没有自我介绍呢')}"></div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </th:block>
+                    <hr th:if="${theme.config.page_config.show_exchange_info || !#strings.isEmpty(theme.config.page_config.links_info)}"/>
+                    <th:block th:if="${theme.config.page_config.show_exchange_info}"
+                              th:with="bloggerAvatar= ${#strings.defaultString(theme.config.page_config.links_blogger_avatar, contributor.avatar)}">
+                        申请友链的方法：
+                        <ul>
+                            <li>名称：[[${site.title}]]</li>
+                            <li>地址：<a th:href="${site.url}" th:text="${site.url}"></a></li>
+                            <li>图标：<a th:href="${bloggerAvatar}" th:text="${bloggerAvatar}"></a></li>
+                            <li>描述：[[${contributor.bio}]]</li>
+                        </ul>
+                    </th:block>
+                    <div th:if="${!#strings.isEmpty(theme.config.page_config.links_info)}" th:html="${theme.config.page_config.links_info"></div>
+                </div>
+            </div>
+        </div>
+        <div class="card card-content" id="comment-wrapper" th:if="${pluginFinder.available('PluginCommentWidget') && !#strings.isEmpty(theme.config.page_config.link_comment_id)}">
+            <h3 class="comment-title">评论</h3>
+            <div id="comment"></div>
+        </div>
+    </th:block>
+</th:block>