Merge pull request #475 from chengzhongxue/main

简繁转换,优化最近评论
2023-09-07 23:42:06 +08:00 · 2023-09-07 23:42:06 +08:00 · 191eba17a7
parent 8ddad6e439 24013dd8e6
commit 191eba17a7
14 changed files with 321 additions and 147 deletions
--- a/settings.yaml
+++ b/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: 全局字体
--- a/templates/assets/js/tw_cn.js
+++ b/templates/assets/js/tw_cn.js
--- a/templates/assets/zhheo/blogex.js
+++ b/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(),
--- a/templates/assets/libs/twikoo/commentBarrage.css
+++ b/templates/assets/libs/twikoo/commentBarrage.css
--- a/templates/assets/libs/twikoo/commentBarrage.js
+++ b/templates/assets/libs/twikoo/commentBarrage.js
--- a/templates/assets/libs/twikoo/commentBarrage.min.css
+++ b/templates/assets/libs/twikoo/commentBarrage.min.css
--- a/templates/assets/zhheo/rightmenu.js
+++ b/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);
--- a/templates/modules/common/rightside.html
+++ b/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>
--- a/templates/modules/head.html
+++ b/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 }]],
--- a/templates/modules/layouts/layout.html
+++ b/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>
--- a/templates/modules/right-menu.html
+++ b/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}">
-    <script th:src="${assets_link + '/zhheo/rightmenu.js'}"></script>
+<div class="js-pjax" th:fragment="right-menu" th:if="${theme.config.tool.rightMenu.rightMenuEnable}">
    <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>
--- a/templates/modules/widgets/aside/comments.html
+++ b/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>
--- a/templates/modules/widgets/cardNewestComments.html
+++ b/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()
                    }
--- a/templates/modules/widgets/console.html
+++ b/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>