文章添加AI摘要功能

博主：凌远江
发布时间：2025 年 10 月 27 日
25 次浏览
暂无评论
11191字数
分类：博客美化

AI摘要

文章介绍了如何在Typecho博客中安装和配置AISummary插件，实现文章自动生成摘要功能。

准备工作

首先先弄一个大模型的api Key，这边选的是Kimi，因为它送了15块的余额...，平台地址：Moonshot AI 开放平台
Github下载AISummary插件，仓库地址：AISummary插件
如果仓库打不开，就下载这个：
此处内容需要评论回复后（审核通过）方可阅读。

实现步骤

安装

把下载好AISummary插件解压，改名为AISummary，将插件文件夹上传至Typecho的/usr/plugins/目录
进入Typecho后台 → 插件 → 启用AISummary插件

配置

模型名：moonshot-v1-auto（Kimi平台的自动选择模型）
API KEY：你的Kimi API密钥（形如sk-xxxxxx）
API 地址：https://api.moonshot.cn（注意不需要添加/v1）

提示词的话有两种，看自己选择
提示词1（详细版，耗钱一点）：

你的任务是生成文章的摘要。请你根据以下文章内容生成150字内的摘要，除了你生成的的摘要内容，请不要输出其他任何无关内容。

摘要最大长度：160（建议留点空间）

提示词2 （简略版，省钱一点）：

你的任务是根据以下文章内容生成一句不超过50个字的简短摘要，只需概括文章主题或核心内容，不要包含具体步骤、教程过程、示例、链接或多余说明。除了摘要外，不要输出任何其他内容。

摘要最大长度：60（建议留点空间）

是否替换默认摘要：替换
文章修改时更新摘要：启用
正文摘要显示样式：使用自定义样式

自定义样式

<!-- AI摘要样式 -->
<style>
/* 摘要容器样式 */
.aisummary {
    background: #f7f7f9;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 16px -4px rgba(44, 45, 48, 0.047);
    border: 1px solid #e3e8f7;
    margin: 25px 0 30px;
    color: #333;
    position: relative;
    overflow: hidden;
}

/* 标题样式 */
.ai-header {
    margin-bottom: 10px !important;
    color: #465CEB !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    text-indent: 0 !important;
    font-weight: bold !important;
    font-size: 17px !important;
}

.ai-header svg {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* 文本容器样式 */
.ai-text-container {
    background: #fff;
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #e3e8f7;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

.ai-hidden-text {
    display: none;
}

.ai-typewriter-text {
    display: inline;
    text-indent: 2em;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* 光标样式及动画 */
.ai-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: #465CEB;
    margin-left: 3px;
    animation: ai-blink 0.7s infinite;
    vertical-align: middle;
}

@keyframes ai-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 页脚样式 */
.ai-footer {
    font-size: 13px !important;
    color: rgba(60, 60, 67, 0.65) !important;
    font-style: italic !important;
    margin-bottom: 0 !important;
    padding: 0 5px !important;
    text-align: left !important;
    text-indent: 0 !important;
    margin-top: 10px !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .aisummary {
        padding: 10px;
        margin: 20px 0 25px;
    }
    .ai-header {
        font-size: 16px !important;
    }
    .ai-header svg {
        width: 22px;
        height: 22px;
        margin-right: 6px;
    }
    .ai-text-container {
        font-size: 14px;
        padding: 10px 12px;
        line-height: 1.65;
    }
    .ai-footer {
        font-size: 12px !important;
        margin-top: 8px !important;
    }
}

/* 暗色模式适配 */
[data-night="night"] .aisummary,
.dark-mode .aisummary,
body.dark .aisummary,
body.night .aisummary,
.night .aisummary,
.night-mode .aisummary,
html.night .aisummary,
.theme-dark .aisummary {
    background: #2c2c2e;
    border-color: #38383a;
    color: #d1d1d1;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
}

[data-night="night"] .ai-text-container,
.dark-mode .ai-text-container,
body.dark .ai-text-container,
body.night .ai-text-container,
.night .ai-text-container,
.night-mode .ai-text-container,
html.night .ai-text-container,
.theme-dark .ai-text-container {
    background: #333333;
    border-color: #4a4a4a;
    color: #c8c8c8;
}

[data-night="night"] .ai-header,
.dark-mode .ai-header,
body.dark .ai-header,
body.night .ai-header,
.night .ai-header,
.night-mode .ai-header,
html.night .ai-header,
.theme-dark .ai-header {
    color: #7c89f1 !important;
}

[data-night="night"] .ai-cursor,
.dark-mode .ai-cursor,
body.dark .ai-cursor,
body.night .ai-cursor,
.night .ai-cursor,
.night-mode .ai-cursor,
html.night .ai-cursor,
.theme-dark .ai-cursor {
    background-color: #7c89f1;
}

[data-night="night"] .ai-footer,
.dark-mode .ai-footer,
body.dark .ai-footer,
body.night .ai-footer,
.night .ai-footer,
.night-mode .ai-footer,
html.night .ai-footer,
.theme-dark .ai-footer {
    color: rgba(200, 200, 200, 0.6) !important;
}

/* 手动添加的暗色模式类 */
.aisummary.ai-dark-theme {
    background: #2c2c2e;
    border-color: #38383a;
    color: #d1d1d1;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
}

.ai-dark-theme .ai-text-container {
    background: #333333;
    border-color: #4a4a4a;
    color: #c8c8c8;
}

.ai-dark-theme .ai-header {
    color: #7c89f1 !important;
}

.ai-dark-theme .ai-cursor {
    background-color: #7c89f1;
}

.ai-dark-theme .ai-footer {
    color: rgba(200, 200, 200, 0.6) !important;
}
</style>

<!-- AI摘要打字机效果脚本 -->
<script>
    // 全局变量
    let aiSummaryTypingTimeoutId = null;
    let aiSummaryLastProcessedUrl = window.location.href;

    // AI摘要主题设置函数
    window.aiSummaryUser = {
        setAiSummaryTheme: function(theme) {
            const summaryElements = document.querySelectorAll('.aisummary');
            if (summaryElements.length > 0) {
                summaryElements.forEach(element => {
                    if (theme === 'dark') {
                        element.classList.add('ai-dark-theme');
                    } else {
                        element.classList.remove('ai-dark-theme');
                    }
                });
            }
        }
    };

    // 检测并同步Handsome主题的夜间模式
    function detectAndSyncTheme() {
        // 检查常见的夜间模式标识
        const isDarkMode = 
            document.body.classList.contains('night') || 
            document.body.classList.contains('dark') || 
            document.documentElement.classList.contains('night') ||
            document.documentElement.getAttribute('data-night') === 'night' ||
            document.querySelector('html').classList.contains('dark-mode') ||
            document.querySelector('[data-theme="dark"]') !== null;

        // 应用对应的主题
        if (isDarkMode) {
            window.aiSummaryUser.setAiSummaryTheme('dark');
        } else {
            window.aiSummaryUser.setAiSummaryTheme('light');
        }
    }

    // 打字机效果核心逻辑
    function executeAiSummaryTyping() {
        const typewriterElement = document.querySelector('.ai-typewriter-text');
        const sourceTextElement = document.querySelector('.ai-hidden-text');
        const typingSpeed = 50; // 打字速度，数值越小越快

        if (!typewriterElement || !sourceTextElement) return;

        if (aiSummaryTypingTimeoutId) {
            clearTimeout(aiSummaryTypingTimeoutId);
        }

        let textToType = sourceTextElement.textContent.trim();

        if (textToType.length > 0) {
            textToType = '  ' + textToType; // 首行缩进
        }

        typewriterElement.textContent = '';
        let charIndex = 0;

        function typeNextCharacter() {
            if (charIndex < textToType.length) {
                typewriterElement.textContent += textToType.charAt(charIndex);
                charIndex++;
                aiSummaryTypingTimeoutId = setTimeout(typeNextCharacter, typingSpeed);
            } else {
                aiSummaryTypingTimeoutId = null;
            }
        }
        typeNextCharacter();
    }

    // 页面加载后执行
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(() => {
            executeAiSummaryTyping();
            detectAndSyncTheme();
        }, 300);
    });

    // PJAX/SPA兼容处理
    setInterval(function() {
        if (window.location.href !== aiSummaryLastProcessedUrl) {
            aiSummaryLastProcessedUrl = window.location.href;
            setTimeout(() => {
                executeAiSummaryTyping();
                detectAndSyncTheme();
            }, 1000);
        }
    }, 100);

    // 监听主题切换
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'class' || mutation.attributeName === 'data-night') {
                detectAndSyncTheme();
            }
        });
    });

    // 开始观察文档和body元素上的class变化
    document.addEventListener('DOMContentLoaded', function() {
        observer.observe(document.documentElement, { attributes: true });
        observer.observe(document.body, { attributes: true });
    });

    // 兼容Handsome主题的夜间模式切换事件
    document.addEventListener('DOMContentLoaded', function() {
        // 尝试找到夜间模式切换按钮并监听点击事件
        const nightModeButtons = document.querySelectorAll('[data-toggle-theme], .theme-toggle, #nightmode, .night-mode-btn');
        if (nightModeButtons.length > 0) {
            nightModeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 延迟检测，确保主题切换完成
                    setTimeout(detectAndSyncTheme, 100);
                });
            });
        }
    });

    // 如果存在全局主题切换函数，拦截它们以同步状态
    if (typeof window.switchNightMode === 'function') {
        const originalSwitchNightMode = window.switchNightMode;
        window.switchNightMode = function() {
            originalSwitchNightMode.apply(this, arguments);
            setTimeout(detectAndSyncTheme, 100);
        };
    }
</script>

正文摘要前后固定文字

<p class="ai-header">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M3 10a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v6a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4v-6z" ></path>
        <path d="M8 3l2 3" ></path>
        <path d="M16 3l-2 3" ></path>
        <path d="M9 13v-2" ></path>
        <path d="M15 11v2" ></path>
    </svg>AI摘要
</p>
<div class="ai-text-container">
    <div class="ai-hidden-text">{{text}}</div>
    <div class="ai-typewriter-text"></div>
    <span class="ai-cursor"></span>
</div>
<p class="ai-footer">
此内容根据文章生成，仅用于文章内容的解释与总结
</p>

存储字段名称：summary

使用

配置完成后，就可以使用了

首先进入管理-摘要-管理Ai摘要

使用要点：

在插件配置好启用后，以前的文章是不会自动生成摘要的，需要在摘要管理里面手动生成，或者进入编辑文章后发布文章自动生成
新文章只要发布就会自动生成摘要
在摘要管理里面不要一下子手动生成太多的摘要，会导致后台卡死
在配置里面的文章修改时更新摘要选择启用时，文章每次修改提交都会刷新摘要

生成摘要后，刷新一下网站进入对应文章就可以看到了~，示例图如下：

END

本文作者：凌远江文章标题：文章添加AI摘要功能
本文地址：https://lyj15.cn/812.html
版权说明：若无注明，本文皆羡逍遥原创，转载请保留文章出处。

最后修改：2025 年 10 月 28 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

私密评论

名称 *

🎲

邮箱 *

地址

骄傲的大黄
现在不好使了，，要指定版本才行
开发中经常要用的软件 - 羡逍遥
[...]引言在开发中，我们经常要用到一些工具来便于开发，但是...
开发中经常要用的软件 - 羡逍遥
[...]引言在开发中，我们经常要用到一些工具来便于开发，但是...
如何安装vuepress - 羡逍遥
[...]引言最近想弄一个静态配置的线上文档，直接打开那种，对...
php 依据wechatpay-php接入微信支付 - 羡逍遥
[...]}平台证书客户端如果还没有生成平台证书和获取平台证书...

67文章数目
28.07 万全站字数
14评论数目
3 在线人数
1年202天运行天数
20 小时前最后活动
36,471访客总数
104 ms响应耗时

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

文章添加AI摘要功能

准备工作

实现步骤

安装

配置

使用

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

typecho主题推荐

CentOS源码编译安装php

普通用户使用不了sudo

在JavaScript中查找数据的各种方法

CentOS源码编译安装MySQL

如何让其他服务器连接本服务器的mysql及redis

nginx配置wss的两种方式

怎么把Windows家庭版转成专业版

如何搭建typecho博客

git常用

文章添加AI摘要功能

准备工作

实现步骤

安装

配置

使用

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

文章添加AI摘要功能

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款