Merge pull request #218 from xyhcode/main

修复最新评论,优化上下页,首页摘要错位

settings.yaml

@@ -661,6 +661,16 @@ spec:
             - label: 关闭
               value: false
           help: "文章主色匹配图片颜色"
+        - $formkit: radio
+          name: summarize
+          label: 文章摘要
+          value: false
+          options:
+            - label: 打开
+              value: true
+            - label: 关闭
+              value: false
+          help: "是否显示文章摘要"
         - $formkit: number
           name: recommendQuantity
           label: 阅读建议
@@ -800,8 +810,8 @@ spec:
           label: 你的博客地址
           help: 注意保留最后的斜杠
           value: https://xx.xx/
-        
+
-          
+
     - group: about
       label: 个人
       formSchema:
@@ -1119,7 +1129,7 @@ spec:
           name: content
           label: 内容
           placeholder: 请输入内容
-          value: 感谢赞赏的人，因为你们，让我感受到写博客这件事情能够给你们创造了价值。这会让我在这条路上走得更远。        
+          value: 感谢赞赏的人，因为你们，让我感受到写博客这件事情能够给你们创造了价值。这会让我在这条路上走得更远。
         - $formkit: group
           name: reward
           label: 打赏按钮
@@ -1388,6 +1398,11 @@ spec:
           label: Twikoo评论-mailMd5
           placeholder: 请输入mailMd5
           help: 注意格式 (`mailMd5`)
+        - $formkit: number
+          name: newcommentnumber
+          label: 评论数量
+          value: 5
+          help: "最新评论数量"
     - group: other
       label: 其他设置
       formSchema:

templates/assets/zhheo/zhheoblog.css

@@ -1953,7 +1953,7 @@ blockquote footer cite::before {
     width: 100%;
     position: relative;
 }
-  
+
 #error-wrap .error-content {
     display: flex;
     -webkit-box-orient: horizontal;
@@ -1973,11 +1973,11 @@ blockquote footer cite::before {
     position: relative;
     width: 100%;
 }
-  
+
 #error-wrap .error-content:hover {
     box-shadow: var(--card-hover-box-shadow);
 }
-  
+
 @media screen and (max-width: 768px) {
     #error-wrap .error-content {
       -webkit-box-orient: vertical;
@@ -1987,7 +1987,7 @@ blockquote footer cite::before {
       width: 100%;
     }
 }
-  
+
 #error-wrap .error-content .error-img {
     -webkit-box-flex: 1;
     flex: 1 1 0%;
@@ -1999,7 +1999,7 @@ blockquote footer cite::before {
     background-position: center center;
     background-size: cover;
 }
-  
+
 @media screen and (max-width: 768px) {
     #error-wrap .error-content .error-img {
       -webkit-box-flex: 1;
@@ -2008,7 +2008,7 @@ blockquote footer cite::before {
       border-radius: 12px;
     }
 }
-  
+
 #error-wrap .error-content .error-info {
     -webkit-box-flex: 1;
     flex: 1 1 0%;
@@ -2017,13 +2017,13 @@ blockquote footer cite::before {
     font-size: 14px;
     font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 }
-  
+
-  
+
 #error-wrap .error-content .error-info .error_title {
     font-size: 9em;
     line-height: 1;
 }
-  
+
 @media screen and (max-width: 768px) {
     #error-wrap .error-content .error-info {
       -webkit-box-flex: 1.1;
@@ -2031,19 +2031,19 @@ blockquote footer cite::before {
       width: 100%;
       padding-bottom: 2rem;
     }
-  
+
  #error-wrap .error-content .error-info .error_title {
     font-size: 4rem;
   }
 }
-  
+
-  
+
 #error-wrap .error-content .error-info .error_subtitle {
     word-break: break-word;
     font-size: 1.6em;
     -webkit-line-clamp: 2;
 }
-  
+
 #error-wrap .error-content .error-info a {
     display: inline-block;
     margin-top: 0.5rem;
@@ -2051,7 +2051,7 @@ blockquote footer cite::before {
     background: var(--btn-bg);
     color: var(--btn-color);
 }
-  
+
 #error-wrap .error-content .error-info a i {
     padding-right: 0.3rem;
 }
@@ -3215,6 +3215,14 @@ ul {
     height: 150px;
 }
 
+#pagination .next-post2 a,
+#pagination .prev-post2 a {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    height: 150px;
+}
+
 #pagination .next-post:hover img.next-cover,
 #pagination .next-post:hover img.prev-cover,
 #pagination .prev-post:hover img.next-cover,
@@ -7994,37 +8002,37 @@ span.fund_name {
     border: var(--style-border);
     animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
 }
-  
+
 #cookies-window.cw-hide {
     opacity: 0;
     animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
     z-index: -1;
 }
-  
+
 #cookies-window .cookies-window-title {
     padding-bottom: 4px;
     border-bottom: var(--style-border);
     font-size: 12px;
     font-weight: bold;
 }
-  
+
 #cookies-window .cookies-window-content {
     font-size: 14px;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }
-  
+
 .cookie-to {
     margin-right: 4px;
     font-weight: bold;
 }
-  
+
 .cookies-link {
     margin-left: auto;
     font-size: 16px;
 }
-  
+
 .cookies-link i.heofont {
     font-size: 16px;
 }
@@ -8997,10 +9005,10 @@ li {
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     line-height: 1.4;
     color: var(--heo-secondtext);
-    margin-top: 0.5rem;
+    margin-top: 0.4rem;
 }
 
 @media screen and (max-width: 1300px) {
@@ -9175,13 +9183,13 @@ li {
     border: var(--style-border-always);
     margin-top: 16px;
   }
-  
+
   @media screen and (max-width: 768px) {
     .post-ai {
       margin-top: 22px;
     }
   }
-  
+
   .ai-title {
     display: flex;
     color: var(--font-color);
@@ -9191,13 +9199,13 @@ li {
     cursor: default;
     user-select: none;
   }
-  
+
   .ai-title-text {
     font-weight: bold;
     margin-left: 8px;
     line-height: 1;
   }
-  
+
   .ai-explanation {
     margin-top: 12px;
     padding: 8px 12px;
@@ -9208,12 +9216,12 @@ li {
     line-height: 1.4;
     display: none;
   }
-  
+
   .ai-suggestions {
     display: flex;
     flex-wrap: wrap;
   }
-  
+
   .ai-suggestions .ai-suggestions-item {
     margin-top: 12px;
     padding: 8px 12px;
@@ -9228,12 +9236,12 @@ li {
     cursor: pointer;
     transition: 0.3s;
   }
-  
+
   .ai-suggestions .ai-suggestions-item:hover {
     background: var(--heo-main);
     color: var(--heo-white);
   }
-  
+
   .blinking-cursor {
     background-color: var(--heo-main);
     width: 10px;
@@ -9245,7 +9253,7 @@ li {
     margin-left: 4px;
     margin-bottom: 3px;
   }
-  
+
   @keyframes blinking-cursor {
     0% {
       opacity: 1;
@@ -9263,7 +9271,7 @@ li {
       opacity: 1;
     }
   }
-  
+
   .ai-tag {
     font-size: 12px;
     background-color: var(--heo-lighttext);
@@ -9279,12 +9287,12 @@ li {
     cursor: pointer;
     transition: 0.3s;
   }
-  
+
   .ai-tag:hover {
     background: var(--heo-fontcolor);
     color: var(--heo-card-bg);
   }
-  
+
   ins.adsbygoogle {
     margin: 16px 0;
     background: var(--heo-card-bg);
@@ -9292,7 +9300,7 @@ li {
     overflow: hidden;
     border: var(--style-border-always);
   }
-  
+
   #ai-Toggle {
     font-size: 12px;
     background: var(--heo-lighttext);
@@ -9305,7 +9313,7 @@ li {
     transition: 0.3s;
     font-weight: bold;
   }
-  
+
   #ai-Toggle:hover {
     background: var(--heo-fontcolor);
     color: var(--heo-card-bg);
@@ -10654,11 +10662,11 @@ a.extend.prev {
       height: 30rem !important;
       margin-bottom: -12px;
     }
-  
+
     #page-header.post-bg:before {
       height: 15rem;
     }
-  
+
     .post-bg #post-cover {
       min-height: 15rem !important;
       height: 70% !important;
@@ -10670,18 +10678,18 @@ a.extend.prev {
     #page-header.post-bg {
       height: 25rem;
     }
-  
+
     #page-header {
       height: 25rem;
     }
-  
+
     #page-header.post-bg:before {
       height: 25rem;
       /* opacity: 0; */
       background-color: var(--heo-main);
       animation: slide-in-op 0.6s 0s forwards;
     }
-  
+
     #post-info .post-title {
       width: 1100px;
       font-size: 2.6rem !important;
@@ -10758,14 +10766,14 @@ a.extend.prev {
       filter: blur(10px);
       opacity: 0;
     }
-    
+
     .coverdiv.loaded {
       display: block;
       opacity: 0.5;
       animation: showCover 1s 0.3s backwards;
       transform: rotate(10deg) translateY(-10%) scale(2);
     }
-  
+
 }
 
 
@@ -10782,15 +10790,15 @@ a.extend.prev {
         filter: blur(10px);
         opacity: 0;
     }
-  
+
-  
+
     .coverdiv.loaded {
       display: block;
       opacity: 0.5;
       animation: showCover 1s 0.3s backwards;
       transform: rotate(10deg) translateY(-10%) scale(2);
     }
-  
+
     @keyframes showCover {
       from {
         opacity: 0;
@@ -11453,11 +11461,11 @@ details:not(.tk-admin-config-group) {
     border: var(--style-border);
     transition: border 0.3s;
 }
-  
+
 details:not(.tk-admin-config-group):hover {
     border: var(--style-border-hover-always);
 }
-  
+
 details:not(.tk-admin-config-group) summary {
     position: absolute;
     padding: 0.5rem 1rem;
@@ -11473,21 +11481,21 @@ details:not(.tk-admin-config-group) summary {
     overflow: hidden; /* 超出部分隐藏 */
     text-overflow: ellipsis; /* 超出部分用省略号表示 */
 }
-  
+
 details:not(.tk-admin-config-group) > *:nth-child(2) {
     margin-top: calc(54px + 1rem) !important;
 }
-  
+
 details[open]:not(.tk-admin-config-group) summary {
     background: var(--heo-main);
     color: var(--heo-white);
 }
-  
+
 details:not(.tk-admin-config-group) summary::before {
     content: '';
     padding: 4px;
 }
-  
+
 details:not(.tk-admin-config-group) summary:hover {
     cursor: pointer;
     background: var(--heo-main);
@@ -11495,31 +11503,31 @@ details:not(.tk-admin-config-group) summary:hover {
     transition: 0.3s;
     box-shadow: var(--heo-shadow-main);
 }
-  
+
 details:not(.tk-admin-config-group) summary:focus {
     outline: none;
 }
-  
+
 details:not(.tk-admin-config-group) summary::marker {
     color: var(--heo-main);
     transition: 0.3s;
 }
-  
+
 details[open]:not(.tk-admin-config-group) summary::marker {
     color: var(--heo-white);
 }
-  
+
 details:not(.tk-admin-config-group) summary:hover::marker {
     color: var(--heo-white);
 }
-  
+
 details[open]:not(.tk-admin-config-group) {
     border-radius: 12px;
     border: var(--style-border-hover-always);
     padding: 0 1.5rem;
     background: var(--heo-card-bg);
 }
-  
+
 details:not(.tk-admin-config-group) summary:hover:after {
     position: absolute;
     content: '+';
@@ -11529,11 +11537,11 @@ details:not(.tk-admin-config-group) summary:hover:after {
     right: 16px;
     line-height: 1;
 }
-  
+
 details[open]:not(.tk-admin-config-group) > summary:hover:after {
     content: '-';
 }
-  
+
 @media screen and (max-width: 768px) {
     details[open]:not(.tk-admin-config-group) {
       padding: 0 16px;
@@ -12423,12 +12431,52 @@ a.reward-main-btn:hover {
 }
 
 
+/* 接下来下一篇 */
 /* 接下来下一篇 */
 .next-post.pull-right,
 .prev-post.pull-left,
 #pagination .prev-post,
 #pagination .next-post {
-    background: var(--heo-secondbg);
+    background: #363636;
+}
+
+.next-post2.pull-right,
+.prev-post2.pull-left,
+#pagination .prev-post2,
+#pagination .next-post2 {
+    background: #363636;
+}
+
+#preimg{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: .4;
+    -webkit-transition: all .6s,filter 375ms ease-in .2s;
+    -moz-transition: all .6s,filter 375ms ease-in .2s;
+    -o-transition: all .6s,filter 375ms ease-in .2s;
+    -ms-transition: all .6s,filter 375ms ease-in .2s;
+    transition: all .6s,filter 375ms ease-in .2s;
+    object-fit: cover;
+    border-radius: 0;
+}
+.prev-post2.pull-left:hover #preimg {
+    opacity: 1;
+    transform: scale(1.1);
+}
+.prev-post.pull-left:hover #preimg {
+    opacity: 1;
+    transform: scale(1.1);
+}
+
+.next-post.pull-right:hover #preimg {
+    opacity: 1;
+    transform: scale(1.1);
+}
+
+.next-post2.pull-right:hover #preimg {
+    opacity: 1;
+    transform: scale(1.1);
 }
 
 @media screen and (min-width: 768px) {
@@ -12505,12 +12553,17 @@ a.reward-main-btn:hover {
 
 #post #pagination .prev-post .label,
 #pagination .next-post .label {
-    color: var(--heo-fontcolor);
+    color: white;
+}
+
+#post #pagination .prev-post2 .label,
+#pagination .next-post2 .label {
+    color: white;
 }
 
 #post #pagination .prev_info,
 #pagination .next_info {
-    color: var(--heo-fontcolor);
+    color: white;
     font-weight: bold;
     -webkit-line-clamp: 2;
     white-space: normal;
@@ -12818,14 +12871,15 @@ a.reward-main-btn:hover {
 }
 
 .relatedPosts > .relatedPosts-list > div {
-    background: var(--heo-background);
+    background: #363636;
     transition: 0.3s;
     cursor: pointer;
     overflow: hidden;
 }
 
-.relatedPosts > .relatedPosts-list > div:hover {
+.relatedPosts > .relatedPosts-list > div:hover #preimg{
-    background: var(--heo-main);
+    opacity: 1;
+    transform: scale(1.1);
 }
 
 @media screen and (max-width: 768px) {
@@ -12854,12 +12908,11 @@ a.reward-main-btn:hover {
     line-height: 1.5;
     -webkit-line-clamp: 4;
     font-size: 0.9rem;
-    text-align: left;
+    text-align: center;
 }
 
 .relatedPosts > .relatedPosts-list .content .date {
     color: var(--heo-fontcolor);
-    display: none;
 }
 
 /* 分割线 */
@@ -12900,7 +12953,7 @@ a.reward-main-btn:hover {
 div#post-comment {
     margin-top: 2rem;
 }
-  
+
 #post-comment>div.comment-head>div.comment-privacy {
     display: block;
     justify-content: space-between;
@@ -12908,7 +12961,7 @@ div#post-comment {
     font-size: 13px;
     margin-left: auto;
 }
-  
+
 #post-comment>div.comment-head>div.comment-privacy a:hover {
     color: var(--heo-theme);
 }
@@ -14670,7 +14723,7 @@ figure.gallery-group:hover .gallery-group-name::after {
     border-radius: 12px;
     background: var(--heo-card-bg) !important;
 }
-  
+
 #body-wrap.page .errors {
     display: flex;
     flex-direction: column;
@@ -14680,7 +14733,7 @@ figure.gallery-group:hover .gallery-group-name::after {
     padding-top: 50px;
     position: relative;
 }
-  
+
 #body-wrap.page .errors .aside-list {
     display: flex;
     flex-direction: row;
@@ -14688,7 +14741,7 @@ figure.gallery-group:hover .gallery-group-name::after {
     margin: 1rem;
     max-width: 100%;
 }
-  
+
 #body-wrap.page .errors .aside-list .aside-list-group {
     display: flex;
     flex-direction: row;
@@ -14697,18 +14750,18 @@ figure.gallery-group:hover .gallery-group-name::after {
     margin: 0 auto;
     justify-content: space-between;
 }
-  
+
 #body-wrap.page .errors .aside-list .aside-list-item {
     padding: 0.5rem 0;
     width: 49%;
 }
-  
+
 #body-wrap.page .errors .aside-list .aside-list-item img {
     width: 100%;
     object-fit: cover;
     border-radius: 12px;
 }
-  
+
 #body-wrap.page .errors .aside-list .aside-list-item .thumbnail {
     overflow: hidden;
     width: 100%;
@@ -14716,7 +14769,7 @@ figure.gallery-group:hover .gallery-group-name::after {
     background: var(--heo-card-bg);
     display: flex;
 }
-  
+
 #body-wrap.page .errors .aside-list .aside-list-item .content .title {
     -webkit-line-clamp: 2;
     overflow: hidden;
@@ -14730,21 +14783,21 @@ figure.gallery-group:hover .gallery-group-name::after {
     font-size: 16px;
     font-weight: bold;
 }
-  
+
 #body-wrap.page .errors .aside-list .aside-list-item .content time {
     display: none;
 }
-  
+
-  
+
 @media screen and (max-width: 768px) {
     #body-wrap.page .errors {
       padding-top: 0;
     }
-  
+
     #body-wrap.page .errors .aside-list {
       margin: 0;
     }
-  
+
     #body-wrap.page .errors .aside-list .aside-list-item .thumbnail {
       height: 100px;
     }
@@ -15623,7 +15676,7 @@ span.hexo-douban-pagenum {
 @keyframes floating {
     0% { transform: translate(0,  -4px); }
     50%  { transform: translate(0, 4px); }
-    100%   { transform: translate(0, -4px); }   
+    100%   { transform: translate(0, -4px); }
 }
 
 #about-page .author-info {
@@ -15631,33 +15684,33 @@ span.hexo-douban-pagenum {
     align-items: center;
     margin: 0 0 16px 0;
   }
-  
+
   #about-page .author-tag-left {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
   }
-  
+
   #about-page .author-tag-right {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
   }
-  
+
   @media screen and (max-width: 768px) {
     #about-page .author-tag-left,#about-page .author-tag-right {
       display: none;
     }
   }
-  
+
   #about-page .author-tag-left .author-tag:first-child, #about-page .author-tag-left .author-tag:last-child {
     margin-right: -16px;
   }
-  
+
   #about-page .author-tag-right .author-tag:first-child, #about-page .author-tag-right .author-tag:last-child {
     margin-left: -16px;
   }
-  
+
   #about-page .author-tag {
     transform: translate(0,  -4px);
     padding: 1px 8px;
@@ -15670,19 +15723,19 @@ span.hexo-douban-pagenum {
     box-shadow: var(--heo-shadow-lightblack);
     animation: 6s ease-in-out 0s infinite normal none running floating;
   }
-  
+
   #about-page .author-tag:nth-child(1) {
     animation-delay: 0s;
   }
-  
+
   #about-page .author-tag:nth-child(2) {
     animation-delay: 0.6s;
   }
-  
+
   #about-page .author-tag:nth-child(3) {
     animation-delay: 1.2s;
   }
-  
+
   #about-page .author-tag:nth-child(4) {
     animation-delay: 1.8s;
   }
@@ -17178,7 +17231,7 @@ span.hexo-douban-pagenum {
     #consoleHideAside {
         display: none;
     }
-    
+
 }
 
 
@@ -17213,7 +17266,7 @@ span.hexo-douban-pagenum {
     .console-card-group-reward .reward-all .reward-item img {
         width: 130px;
         height: 130px
-    }   
+    }
 
     #console #consoleKeyboard {
         display: none
@@ -17265,8 +17318,8 @@ span.hexo-douban-pagenum {
     margin-right: 8px;
     border-radius: 20px;
 }
-  
+
-  
+
 #card-newest-comments .aside-list-item {
     background: var(--heo-card-bg);
     border-radius: 12px;
@@ -17279,22 +17332,22 @@ span.hexo-douban-pagenum {
     transition: 0.3s;
     position: relative;
 }
-  
+
 #card-newest-comments .aside-list-item:hover {
     background: var(--heo-main);
     color: var(--heo-white);
-}  
+}
-  
+
 #card-newest-comments .aside-list-item:not(:last-child) {
     margin-bottom: 0.5rem;
-} 
+}
-  
+
 #card-newest-comments .aside-list-item .name {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     font-weight: bold;
-}  
+}
 
 #console .author-content-item-tips {
     opacity: .8;
@@ -17333,7 +17386,7 @@ span.hexo-douban-pagenum {
     line-height: 24px;
     font-size: 14px;
 }
-  
+
 #console .aside-list-item .content .comment::before {
     content: '';
     width: 100%;
@@ -17588,17 +17641,17 @@ span.hexo-douban-pagenum {
     height: 24px;
 }
 
-/*   文章目录样式 */ 
+/*   文章目录样式 */
 a.toc-link {
     color: currentColor;
     height:0%;
 }
-/*   文章目录样式 */  
+/*   文章目录样式 */
 #aside-content #card-toc .toc-content .is-active-link {
     font-weight: 700;
     font-size: 20px;
     color: var(--heo-lighttext);
-} 
+}
 /*   code样式 */
  code:not([class]) {
     color: var(--heo-white);
@@ -17610,22 +17663,22 @@ a.toc-link {
     box-shadow: var(--heo-shadow-border);
     font-size: 17.5px;
     font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important;
-} 
+}
-  
+
-  
+
 /*   导航栏中间返回顶部样式 */
 #page-header.nav-fixed #nav #page-name-text {
         display: inline;
         opacity: 1;
         transition: 0.3s;
         line-height: 1.6;
-} 
+}
 .nav-fixed #nav #page-name-text:hover {
         background: var(--heo-main);
         transition: 0.3s;
         border-radius: 50px;
         padding: 4px 8px;
-        
+
     }
 
     @media screen and (min-width: 900px) {
@@ -17663,8 +17716,8 @@ a.toc-link {
 
 
 
-  
+
- /* 导航栏中间样式 */ 
+ /* 导航栏中间样式 */
 #menus>div.menus_items a {
     font-size: 16.8px;
     font-weight: 700;
@@ -17672,7 +17725,10 @@ a.toc-link {
 #nav .menus_items .menus_item .menus_item_child {
     padding: 2px 2px 4px 2px;
     border-radius: 55px;
-}   
+}
 #nav .menus_items .menus_item .menus_item_child li a:hover {
     padding: 0.2rem 0.5rem;
-}  
+}
+.postcarnepre{
+    width: 100%;
+}

templates/modules/post-list.html

@@ -39,7 +39,7 @@
                    th:href="@{${post.status.permalink}}"
                    th:text="${post.spec.title}">
                 </a>
-                <!-- <div class="content" th:text="${post.status.excerpt}"></div> -->
+                 <div class="content" th:if="${theme.config.post.summarize}" th:text="${post.status.excerpt}"></div>
             </div>
 
 
@@ -87,4 +87,4 @@
 
 </th:block>
 
-</html>
+</html>

templates/modules/widgets/aside/comments.html

@@ -3,23 +3,39 @@
 <!-- 归档 -->
 <div class="card-widget card-recent-post"  th:fragment="comments">
     <div class="item-headline"><i class="iconfont icon-comment-dots"></i><span>最新评论</span></div>
-    <div class="aside-list">
+    <div class="aside-list" id="newcomm">
 
-    <div class="aside-list-item">
-            <a class="thumbnail" href="/404.html">
-                <img loading="lazy" alt="dasda" src="https://seccdn.libravatar.org/avatar/7d88658473effdd6b068e181b9636878?d=robohash">
-            </a>
-            <div class="content">
-                <a class="comment" href="/messageboard/#635ba6370ccf12000f30a175" title="test">
-                    评论模块未完成
-                </a>
-                <div class="name">
-                    <span>liuzhihang / </span>
-                    <time datetime="2022-10-28T09:51:51.581Z">20 小時前</time>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
-
+<script th:src="@{/assets/libs/twikoo/twikoo.all.min.js}"></script>
-</html>
+<script th:if="${theme.config.comments.twikoo && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.envId)}">
+    twikoo.getRecentComments({
+        envId: [[${ theme.config.comments.envId }]], // 环境 ID
+        // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
+        pageSize: [[${theme.config.comments.newcommentnumber}]], // 获取多少条，默认：10，最大：100
+        includeReply: false // 是否包括最新回复，默认：false
+    }).then(function (res) {
+        let commenthtml = '';
+        res.forEach((items)=>{
+            commenthtml += `<div class="aside-list-item">
+            <a class="thumbnail" href="${items.url}">
+                <img loading="lazy" alt="dasda" src="${items.avatar}">
+            </a>
+            <div class="content">
+                <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;" href="${items.url}" title="test">
+                ${items.commentText}
+                </a>
+                <div class="name">
+                    <span>${items.nick} / </span>
+                    <time datetime="${items.created}">${items.relativeTime}</time>
+                </div>
+            </div>
+        </div>`
+        });
+        document.querySelector('#newcomm').innerHTML = commenthtml;
+    }).catch(function (err) {
+        // 发生错误
+        console.error(err);
+    });
+</script>
+</html>

templates/post.html

@@ -97,7 +97,7 @@
         <main class="layout" id="content-inner" th:classappend="${theme.config.sidebar.location}">
             <div id="post">
 
-     
+
 
                 <!-- 文章ai摘要 -->
                 <div class="post-ai" th:if="${theme.config.aiDescription.enable}">
@@ -144,7 +144,7 @@
                                                 <img alt="微信" class="post-qr-code-img"
                                                     th:src="${theme.config.aboutReward.reward.wxPay}"></a>
                                             <div class="post-qr-code-desc">微信</div>
-                                        </li> 
+                                        </li>
                                         <li class="reward-item"><a th:href="@{${theme.config.aboutReward.reward.alipay}}"
                                         target="_blank"><img alt="支付宝" class="post-qr-code-img"
                                                     th:src="${theme.config.aboutReward.reward.alipay}"></a>
@@ -196,7 +196,7 @@
                                 <a class="post-meta__tags" th:each="tag : ${post.tags}"
                                     th:href="@{${tag.status.permalink}}">
                                     <span class="tags-punctuation">[[${tag.spec.displayName}]]</span>
-                                    
+
                                     <span class="tagsPageCount" th:text="${tag.status.visiblePostCount}"></span>
                                 </a>
                             </div>
@@ -225,17 +225,21 @@
                     </div>
                 </div>
                 <nav class="pagination-post" id="pagination"
-                    th:with="postCursor = ${postFinder.cursor(post.metadata.name)}">
+                     th:with="postCursor = ${postFinder.cursor(post.metadata.name)}">
-                    <div class="prev-post pull-left">
+                    <div th:class="${postCursor.hasPrevious()==true && postCursor.hasNext()==false} ? 'prev-post2 pull-left postcarnepre' : 'prev-post pull-left'">
                         <a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
+                            <img alt="cover" id="preimg" class="nolazyload"
+                                 th:src="${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}">
                             <div class="pagination-info">
                                 <div class="label">上一篇</div>
                                 <div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
                             </div>
                         </a>
                     </div>
-                    <div class="next-post pull-right">
+                    <div th:class="${postCursor.hasPrevious()==false && postCursor.hasNext()==true} ? 'next-post2 pull-right postcarnepre':'next-post pull-right'">
                         <a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
+                            <img alt="cover" id="preimg" class="nolazyload"
+                                 th:src="${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}">
                             <div class="pagination-info">
                                 <div class="label">下一篇</div>
                                 <div class="next_info" th:text="${postCursor.next.spec.title}"></div>
@@ -254,13 +258,13 @@
                         <!-- 建议阅读，这里可以自定义文章数量，然后遍历展示 -->
                         <div th:each="recommandPost :${recommandPosts}">
                             <a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
-                                <img alt="cover" class="cover" loading="lazy"
+                                <img alt="cover" class="cover" loading="lazy" id="preimg"
-                                    th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
+                                     th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
-                                <div class="content is-center">
+                                <div class="content is-center" >
-                                    <div class="date"><i class="far fa-calendar-alt fa-fw"></i>
+                                    <div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
                                         [[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}]]
                                     </div>
-                                    <div class="title" th:text="${recommandPost.spec.title}"></div>
+                                    <div class="title" style="color: white" th:text="${recommandPost.spec.title}"></div>
                                 </div>
                             </a>
                         </div>
@@ -284,7 +288,7 @@
                     <halo:comment group="content.halo.run" kind="SinglePage" th:attr="name='links'"
                         colorScheme="document.documentElement.getAttribute('data-theme')" />
                 </div>
-            
+
             </div>
 
             <!-- 侧栏 -->
@@ -298,4 +302,4 @@
 
 </th:block>
 
-</html>
+</html>