优化文章 AI 摘要代码

templates/assets/libs/gpt/post-ai.js

@@ -1,15 +1,59 @@
-(function () {
+function HaoPostAI(AI_option) {
 
-    let ai =  GLOBAL_CONFIG.source.postAi.ai;
+    // 获取挂载元素，即文章内容所在的容器元素
-    let randomNum = GLOBAL_CONFIG.source.postAi.randomNum; //按钮最大的随机次数，也就是一篇文章最大随机出来几种
+    let targetElement = document.querySelector('#post #article-container');
-    let basicWordCount = GLOBAL_CONFIG.source.postAi.basicWordCount; // 最低获取字符数, 最小1000, 最大1999
+    // 若el配置不存在则自动获取，如果auto_mount配置为真也自动获取
-    let btnLink = GLOBAL_CONFIG.source.postAi.btnLink;
+    if (!targetElement) {
-    let gptName = GLOBAL_CONFIG.source.postAi.gptName;
+        return;
-    let modeName = GLOBAL_CONFIG.source.postAi.modeName;
+    };
-    let switchBtn = GLOBAL_CONFIG.source.postAi.switchBtn //# 可以配置是否显示切换按钮 以切换tianli/local
-    let keys = GLOBAL_CONFIG.source.postAi.keys;
-    let Referers = GLOBAL_CONFIG.source.postAi.Referers;
 
+    let ai = AI_option.ai;
+    let randomNum = AI_option.randomNum; //按钮最大的随机次数，也就是一篇文章最大随机出来几种
+    let basicWordCount = AI_option.basicWordCount; // 最低获取字符数, 最小1000, 最大1999
+    let btnLink = AI_option.btnLink;
+    let gptName = AI_option.gptName;
+    let modeName = AI_option.modeName;
+    let switchBtn = AI_option.switchBtn //# 可以配置是否显示切换按钮 以切换tianli/local
+    let keys = AI_option.keys;
+    let Referers = AI_option.Referers;
+
+    let post = document.querySelector('#post')
+    const interface = {
+        name: "AI-摘要",
+        aiToggle: "切换",
+        version: "Tianli GPT",
+        button: ["介绍自己", "生成本文简介", "推荐相关文章", "前往主页"],
+    }
+    // 插入html结构
+    const post_ai_box = document.createElement('div');
+    post_ai_box.className = 'post-ai';
+    post.insertBefore(post_ai_box, post.firstChild);
+
+    var PostAI =   `
+    <div class="ai-title">
+    <i class="haofont hao-icon-bilibili"></i>
+    <div class="ai-title-text">${interface.name}</div>`
+    if(switchBtn){
+        PostAI =  PostAI+  `<div  id="ai-Toggle">${interface.aiToggle}</div> `;
+    }
+    PostAI =  PostAI+  `<i class="haofont hao-icon-arrow-rotate-right"></i> `;
+    if(modeName == 'local'){
+        PostAI =  PostAI+  `<div class="ai-tag" id="ai-tag">${gptName} GPT</div>`;
+    }else{
+        PostAI =  PostAI+  `<div class="ai-tag" id="ai-tag">${interface.version}</div>     `;
+    }
+    PostAI =  PostAI+  ` 
+    </div>
+    <div class="ai-explanation" style="display: block;">AI初始化中...</div>
+    <div class="ai-btn-box">
+      <div class="ai-btn-item">${interface.button[0]}</div>
+      <div class="ai-btn-item">${interface.button[1]}</div>
+      <div class="ai-btn-item">${interface.button[2]}</div>
+      <div class="ai-btn-item">${interface.button[3]}</div>
+      <div class="ai-btn-item" id="go-tianli-blog">前往tianli博客</div>
+    </div>`;
+
+    post_ai_box.innerHTML =PostAI;
     // 当前随机到的ai摘要到index
     let lastAiRandomIndex = -1;
     let animationRunning = true; // 标志变量，控制动画函数的运行
@@ -119,8 +163,10 @@
                 Referer: Referers
             };
 
+            var url = window.location.href;
+            const title = document.title;
             const truncateDescription = getTitleAndContent(num);
-            const queryParams = `key=${options.key}&content=${truncateDescription}`;
+            const queryParams = `key=${options.key}&content=${truncateDescription}&url=${url}&title=${title}`;
             const requestOptions = {
                 method: "GET",
                 headers: {
@@ -371,4 +417,4 @@
 
     aiAbstract();
     showAiBtn()
-})()
+}

templates/modules/head.html

@@ -177,6 +177,10 @@
                 th:src="${assets_link + '/libs/welcome/welcome.js' + theme_version}"></script>
     </th:block>
 
+    <!-- 文章ai摘要 -->
+    <script data-pjax th:if="${theme.config.post.aiDescription.aiDescriptionEnable}"
+            th:src="${assets_link + '/libs/gpt/post-ai.js'}"></script>
+
     <!-- icon图标 -->
     <link rel="stylesheet" th:href="'https://npm.onmicrosoft.cn/hao-theme-static@'+${theme.spec.version}+'/icon/iconfont.css'">
 
@@ -233,17 +237,6 @@
                     locationLng: [[${theme.config.sidebar.welcome.locationLng}]],
                     locationLat: [[${theme.config.sidebar.welcome.locationLat}]],
                 },
-                postAi:{
-                    ai : '[(${post.status.excerpt})]',
-                    randomNum : [[${theme.config.post.aiDescription.randomNum}]], //按钮最大的随机次数，也就是一篇文章最大随机出来几种
-                    basicWordCount : [[${theme.config.post.aiDescription.basicWordCount}]], // 最低获取字符数, 最小1000, 最大1999
-                    btnLink : "[(${theme.config.post.aiDescription.btnLink})]",
-                    gptName : "[(${theme.config.post.aiDescription.gptName})]",
-                    modeName : [[${theme.config.post.aiDescription.mode}]],
-                    switchBtn : [[${theme.config.post.aiDescription.switchBtn}]],  //# 可以配置是否显示切换按钮 以切换tianli/local
-                    keys : "[(${theme.config.post.aiDescription.key})]",
-                    Referers : "[(${theme.config.post.aiDescription.Referer})]",
-                }
             },
             date_suffix: {
                 just: '刚刚',

templates/post.html

@@ -97,34 +97,24 @@
         <main class="layout" id="content-inner" th:classappend="${theme.config.sidebar.location}">
             <div id="post">
 
-
-                <!-- 文章ai摘要 -->
-                <div class="post-ai" th:if="${theme.config.post.aiDescription.aiDescriptionEnable}">
-                    <div class="ai-title"><i class="haofont hao-icon-bilibili"></i>
-                        <div class="ai-title-text">AI-摘要</div>
-                        <div th:if="${theme.config.post.aiDescription.switchBtn}" id="ai-Toggle">切换</div>
-                        <i class="haofont hao-icon-arrow-rotate-right"></i>
-
-                        <div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'local')}" class="ai-tag" id="ai-tag">[[${theme.config.post.aiDescription.gptName}]] GPT</div>
-                        <div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'tianli')}" class="ai-tag" id="ai-tag">Tianli GPT</div>
-                    </div>
-                    <div class="ai-explanation" style="display: block;">AI初始化中...</div>
-                    <div class="ai-btn-box">
-                        <div class="ai-btn-item">介绍自己</div>
-                        <div class="ai-btn-item">生成本文简介</div>
-                        <div class="ai-btn-item">推荐相关文章</div>
-                        <div class="ai-btn-item">前往主页</div>
-                        <div class="ai-btn-item" id="go-tianli-blog">前往tianli博客</div>
-                    </div>
-                </div>
-
                 <!-- 文章内容 -->
                 <article th:class="'post-content  '+${ theme.config.code.enable_line || pluginFinder.available('PluginPrismJS') ? 'line-numbers' : ''}" id="article-container" th:utext="${post.content.content}">
                 </article>
 
                 <!-- 文章ai摘要 -->
-                <script  data-pjax th:if="${theme.config.post.aiDescription.aiDescriptionEnable}"
+                <script th:if="${theme.config.post.aiDescription.aiDescriptionEnable}" data-pjax defer>
-                         th:src="${assets_link + '/libs/gpt/post-ai.js'}"></script>
+                    new HaoPostAI({
+                        ai: '[(${post.status.excerpt})]',
+                        randomNum: [[${ theme.config.post.aiDescription.randomNum }]], //按钮最大的随机次数，也就是一篇文章最大随机出来几种
+                        basicWordCount: [[${ theme.config.post.aiDescription.basicWordCount }]], // 最低获取字符数, 最小1000, 最大1999
+                        btnLink: "[(${theme.config.post.aiDescription.btnLink})]",
+                        gptName: "[(${theme.config.post.aiDescription.gptName})]",
+                        modeName: "[[${ theme.config.post.aiDescription.mode }]]",
+                        switchBtn: [[${ theme.config.post.aiDescription.switchBtn }]],  //# 可以配置是否显示切换按钮 以切换tianli/local
+                        keys: "[(${theme.config.post.aiDescription.key})]",
+                        Referers: "[(${theme.config.post.aiDescription.Referer})]"
+                    })
+                </script>
 
                 <!-- 版权声明 -->
                 <th:block th:replace="~{modules/post/copyright :: copyright}"></th:block>