基于Typecho的AI摘要插件

文章	评论	标签
11	70	18

AI摘要

介绍了一款Typecho平台的AI摘要插件，包括安装步骤、配置方法（推荐使用DeepSeek-v3模型）、自定义样式代码（提供两种样式方案），并提醒用户需先配置API再使用生成功能。插件支持暗色模式适配和打字机动画效果。

根据李欲裕文章生成，仅用于文章内容的解释与总结

最近看各位大佬的文章，发现大家都用上AI，有的用AI来帮忙辅助写文章，有的用Ai来提取文章摘要，我又是一个小白，自然没有办法自己折腾出一个这样的AI功能，于是我去GitHub上找呀找，还真让我找到了一个可以满足摘要功能的插件。

项目下载

这个是插件的 Github 下载页面

如何安装

Clone GitHub 仓库或 下载 zip 到 {typecho 目录}/usr/plugins
记得要重命名为 AISummary （区分大小写）
然后再启用插件
点击设置配置 API 地址与 API KEY 等信息在管理-摘要中查看与生成文章摘要

插件配置

可以按照如下图 配置插件 ，我用的是DeepSeek-v3
这是深度求索的官方文档
当然你也可以用别的！具体模型，以及地址请参考厂商文档
Deepseek我之前还剩下来几十块钱，哎

自定义样式

这里给出一位厉害大佬 xuan 和插件作者的

<!-- AI摘要样式 - Handsome主题优化版 -->
<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>

插件作者的

<style> .aisummary{ 
background-color: #2C3E50; 
  color: white; 
  padding: 20px; border-radius: 10px;
  margin-bottom: 1rem;
} 
</style>

最后记得生成摘要

注意！！！！！！！！！

不要在还没有 配置好ai 的时候就点击生成，有可能会出现意想不到的后果

关于插件

这里是插件作者主页