Merge pull request #475 from chengzhongxue/main

简繁转换,优化最近评论

settings.yaml

@@ -2339,6 +2339,29 @@ spec:
               value: true
             - label: 关闭
               value: false
+        - $formkit: group
+          name: translate
+          label: 简繁转换
+          value:
+            defaultEncoding: 2
+            translateEnable: true
+          children:
+            - $formkit: radio
+              name: defaultEncoding
+              label: 默认语言
+              options:
+                - label: 简体中文
+                  value: 2
+                - label: 繁體中文
+                  value: 1
+            - $formkit: radio
+              name: translateEnable
+              label: 允许切换语言
+              options:
+                - label: 打开
+                  value: true
+                - label: 关闭
+                  value: false
         - $formkit: textarea
           name: fontFamily
           label: 全局字体

templates/assets/zhheo/blogex.js

@@ -617,6 +617,7 @@ function listenToPageInputPress() {
 function initBlog() {
     // 图片主色
     GLOBAL_CONFIG.source.post.dynamicBackground && coverColor(),
+    GLOBAL_CONFIG.rightMenuEnable && addRightMenuClickEvent(),
     percent(),
     heo.topCategoriesBarScroll(),
     heo.initIndexEssay(),

templates/assets/zhheo/rightmenu.js

@@ -389,7 +389,6 @@ function addRightMenuClickEvent() {
     });
     $('#menu-translate').on('click', function () {
         rm.hideRightMenu();
-        translateInitialization();
     });
     $('#menu-copy').on('click', rm.copyPageUrl);
     $('#menu-pastetext').on('click', rm.pasteText);

templates/modules/common/rightside.html

@@ -4,7 +4,7 @@
     <div id="rightside">
         <div id="rightside-config-hide">
             <button th:if="${htmlType == 'post' && theme.config.tool.rightside.readmode}" id="readmode" type="button" title="阅读模式"><i class="haofont hao-icon-book-open"></i></button>
-            <!-- <button id="translateLink" type="button" title="简繁转换">繁</button> -->
+            <button th:if="${theme.config.style.translate.translateEnable}" id="translateLink" type="button" title="简繁转换">繁</button>
             <button id="darkmode" type="button" title="浅色和深色模式转换"><i class="haofont hao-icon-circle-half-stroke"></i></button>
             <button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="haofont hao-icon-arrows-left-right"></i></button>
         </div>

templates/modules/head.html

@@ -20,7 +20,7 @@
 
     <link rel="stylesheet" th:href="${assets_link + '/zhheo/custom.css' + theme_version}">
 
-    <link rel="stylesheet" th:href="${assets_link + '/libs/twikoo/commentBarrage.css'}">
+    <link rel="stylesheet" th:href="${assets_link + '/zhheo/commentBarrage.css'}">
 
     <style th:if="${theme.config.other.scrollbarLinearGradientEnable}">
         *::-webkit-scrollbar-thumb {
@@ -259,6 +259,14 @@
                 bgDark: "[(${theme.config.style.themeDarkSkin})]",
                 position: "top-center",
             },
+            translate: {
+                defaultEncoding:[[${theme.config.style.translate.defaultEncoding}]],
+                translateDelay:0,
+                msgToTraditionalChinese:"繁",
+                msgToSimplifiedChinese:"简",
+                rightMenuMsgToTraditionalChinese:"轉為繁體",
+                rightMenuMsgToSimplifiedChinese:"转为简体"
+            },
             prism: {
                 enable: [[${ theme.config.code.enable }]],
                 enable_title: [[${ theme.config.code.enable_title }]],

templates/modules/layouts/layout.html

@@ -49,7 +49,7 @@
     <script th:src="${assets_link + '/js/utils.js' + theme_version}"></script>
     <script th:src="${assets_link + '/js/main.js' + theme_version}"></script>
     <script charset="utf-8" data-pjax th:src="${assets_link + '/zhheo/blogex.js' + theme_version}"></script>
-
+    <script th:src="${assets_link + '/js/tw_cn.js' + theme_version}"></script>
     <!-- https://instant.page/ 网站预加载， 放在 </body> 之前 -->
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js" type="module"></script>
 
@@ -67,6 +67,9 @@
     <!-- 应该是文章页分享使用 -->
     <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
 
+    <!-- 最近评论 -->
+    <th:block th:replace="~{modules/widgets/cardNewestComments :: cardNewestComments}"></th:block>
+
     <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
     <script th:src="${assets_link + '/libs/waterfall/waterfall.min.js'}"></script>
 
@@ -90,11 +93,14 @@
     <!-- swiper 在瞬间滚动时会使用 -->
     <script data-pjax  src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
 
+    <!-- 右键菜单 -->
+    <script th:if="${theme.config.tool.rightMenu.rightMenuEnable}" th:src="${assets_link + '/zhheo/rightmenu.js'}"></script>
+
     <!-- 评论弹幕 -->
     <script  th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') &&
         not #strings.isEmpty(theme.config.comments.twikoos.envId) &&
         not #strings.isEmpty(theme.config.comments.twikoos.accessToken)}"  data-pjax=""
-             th:src="${assets_link + '/libs/twikoo/commentBarrage.js'}"></script>
+             th:src="${assets_link + '/zhheo/commentBarrage.js'}"></script>
 
     <!-- Tocbot 目录生成 start -->
     <th:block th:replace="~{modules/common/toc-bot :: toc-bot}"></th:block>

templates/modules/right-menu.html

@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <!-- 右键菜单 -->
-<div th:fragment="right-menu" th:if="${theme.config.tool.rightMenu.rightMenuEnable}">
+<div class="js-pjax" th:fragment="right-menu" th:if="${theme.config.tool.rightMenu.rightMenuEnable}">
-    <script th:src="${assets_link + '/zhheo/rightmenu.js'}"></script>
     <div id="rightMenu">
         <div class="rightMenu-group rightMenu-small">
             <div class="rightMenu-item" id="menu-backward"><i class="haofont hao-icon-arrow-left"></i></div>
@@ -110,14 +109,15 @@
             </div>
             <div class="rightMenu-item" id="menu-darkmode">
                 <i class="haofont hao-icon-circle-half-stroke"></i>
-                <span class="menu-darkmode-text">显示模式</span>
+                <span class="menu-darkmode-text">深色模式</span>
+            </div>
+            <div th:if="${theme.config.style.translate.translateEnable}" class="rightMenu-item" id="menu-translate">
+                <i class="haofont hao-icon-language"></i>
+                <span>轉為繁體</span>
             </div>
         </div>
     </div>
     <div id="rightmenu-mask"></div>
-    <script>
-        addRightMenuClickEvent();
-    </script>
 </div>
 
 </html>

templates/modules/widgets/aside/comments.html

@@ -29,56 +29,6 @@
                 </div>
             </div>
         </th:block>
-
-        <script th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
-            (()=>{
-                const runTwikoo = () => {
-                    const pagesize = [[${theme.config.sidebar.newcommentnumber}]];
-                    const defaultpagesize = 5;
-                    const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
-                    twikoo.getRecentComments({
-                        envId: "[(${theme.config.comments.twikoos.envId})]", // 环境 ID
-                        // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
-                        pageSize: finalpagesize, // 获取多少条，默认：10，最大：100
-                        includeReply: false // 是否包括最新回复，默认：false
-                    }).then(function (res) {
-                        let commenthtml = '';
-                        let name = 'src'
-                        if([[${isLazyload}]]){
-                            name = 'data-lazy-src'
-                        }
-                        res.forEach((items)=>{
-                            commenthtml += `<div class="aside-list-item">
-            <a class="thumbnail" href="${items.url + '#' + items.id}">
-                <img alt="dasda" ${name}="${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 + '#' + items.id}" title="${items.commentText}">
-                ${items.commentText}
-                </a>
-                <div class="name">
-                    <span>${items.nick} / </span>
-                    <time datetime="${items.created}">${items.relativeTime}</time>
-                </div>
-            </div>
-        </div>`
-                        });
-                        let necomm = document.querySelector('#newcomm')
-                        necomm.innerHTML = commenthtml;
-                        window.lazyLoadInstance && window.lazyLoadInstance.update()
-                        window.pjax && window.pjax.refresh(necomm)
-                    }).catch(function (err) {
-                        // 发生错误
-                        console.error(err);
-                    });
-                }
-                if (typeof twikoo === 'object') {
-                    runTwikoo()
-                } else {
-                    getScript(GLOBAL_CONFIG.source.twikoo.js).then(runTwikoo)
-                }
-            })();
-        </script>
     </div>
 </div>
 </html>

templates/modules/widgets/cardNewestComments.html

@@ -2,7 +2,7 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
 <th:block th:fragment="cardNewestComments">
-<!-- 最近评论 -->
+    <!-- 最近评论 -->
     <script
             th:if="${theme.config.comments.twikooEnable
         && #strings.equals(theme.config.comments.use, 'Twikoo')
@@ -27,7 +27,7 @@
                     twikoo.getRecentComments({
                         envId: "[(${theme.config.comments.twikoos.envId})]",
                         region: '',
-                    pageSize: 6,
+                        pageSize: 20,
                         includeReply: true
                     }).then(function (res) {
                         const twikooArray = res.map(e => {
@@ -42,9 +42,15 @@
 
                         saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
                         generateHtml(twikooArray)
+                        document.querySelector('#newcomm') && necommHtml(twikooArray)
                     }).catch(function (err) {
                         const $dom = document.querySelector('#card-newest-comments .aside-list')
+                        const $newcomm = document.querySelector('#newcomm')
                         $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
+                        if($newcomm){
+                            $newcomm.innerHTML = "无法获取评论，请确认相关配置是否正确"
+                        }
+
                     })
                 }
 
@@ -60,6 +66,9 @@
 
                 if (array.length) {
                     for (let i = 0; i < array.length; i++) {
+                        if (i == 6) {
+                            break;
+                        }
                         result += '<div class=\'aside-list-item\'>'
 
                         if (true) {
@@ -85,11 +94,64 @@
                 window.pjax && window.pjax.refresh($dom)
             }
 
+            const necommHtml = array => {
+                let result = ''
+
+                const pagesize = [[${theme.config.sidebar.newcommentnumber}]];
+                const defaultpagesize = 5;
+                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
+
+                if (array.length) {
+                    for (let i = 0; i < array.length; i++) {
+
+                        if (i == finalpagesize) {
+                            break;
+                        }
+                        result += '<div class="aside-list-item">'
+
+                        if (true) {
+                            let name = 'src'
+                            if([[${isLazyload}]]){
+                                name = 'data-lazy-src'
+                            }
+                            result += `
+                            <a class="thumbnail" href="${array[i].url}">
+                                <img alt="dasda" ${name}="${array[i].avatar}">
+                            </a>
+                        `
+                        }
+
+                        result += `
+                        <div class="content">
+                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
+                            href="${array[i].url}" title="${array[i].content}">
+                            ${array[i].content}
+                            </a>
+                            <div class="name">
+                                <span>${array[i].nick} / </span>
+                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
+                            </div>
+                        </div>
+                    </div>
+                  `
+
+                    }
+                } else {
+                    result += '没有评论'
+                }
+
+                let $dom = document.querySelector('#newcomm')
+                $dom.innerHTML = result
+                window.lazyLoadInstance && window.lazyLoadInstance.update()
+                window.pjax && window.pjax.refresh($dom)
+            }
+
             const newestCommentInit = () => {
                 if (document.querySelector('#card-newest-comments .aside-list')) {
                     const data = saveToLocal.get('twikoo-newest-comments')
                     if (data) {
                         generateHtml(JSON.parse(data))
+                        document.querySelector('#newcomm') &&  necommHtml(JSON.parse(data))
                     } else {
                         getComment()
                     }

templates/modules/widgets/console.html

@@ -114,7 +114,6 @@
   </div>
   <div class="button-group">
     <div class="console-btn-item">
-      <!-- 用到了 rightmenu.js 的功能，还需要调整 -->
       <a class="darkmode_switchbutton" href="javascript:void(0);" onclick="navFn.switchDarkMode();" rel="external nofollow"
          title="显示模式切换"><i class="haofont hao-icon-moon" style="font-size:1rem"></i>
       </a>
@@ -143,9 +142,6 @@
   </div>
   <div class="console-mask" href="javascript:void(0);" onclick="heo.hideConsole()" rel="external nofollow">
   </div>
-
-  <!-- 最近评论 -->
-  <th:block th:replace="~{modules/widgets/cardNewestComments :: cardNewestComments}"></th:block>
 </div>
 
 </html>