AI摘要
本文详细介绍了如何使用AISummary插件为Typecho博客实现AI摘要功能。首先，安装并启用插件，然后配置AI平台（如Kimi）、API密钥、提示词及显示设置。文章提供了自定义样式（CSS）和打字机效果脚本（JavaScript），以及HTML模板，以优化摘要显示。最后，说明了如何手动或自动生成文章摘要，帮助Typecho博客轻松添加智能摘要。
实现方案
插件选择
AISummary插件是Typecho博客实现AI摘要的理想选择，它具有以下优势：
- 支持多种AI平台对接（包括免费平台如阿里千问、Gemini等）
- 可一键为所有文章生成摘要，也可单独更新
- 提供自定义样式和显示方式，适配性强
实现步骤
1. 安装AISummary插件
- Github下载AISummary插件
- 将插件文件夹上传至Typecho的
/usr/plugins/目录 - 进入Typecho后台 → 插件 → 启用AISummary插件
2. 配置插件和API接口
打开AISummary插件设置页面，填写以下配置：
基础设置
- 模型名：
gemini-2.5-flash（Google免费模型） - API KEY：你的Gemini API密钥
- API 地址：详见下一篇文章论gemini国内访问代理搭建（国内代理gemini访问）
提示词：
你的任务是生成文章的摘要。请你根据以下文章内容生成150字内的摘要，除了你生成的的摘要内容，请不要输出其他任何无关内容。摘要最大长度：
150（建议比提示词中要求的字数大一些）
显示设置
- 是否替换默认摘要：根据需要选择（建议选"替换"）
- 文章修改时更新摘要：根据需要选择（如果想自动更新选"启用"）
- 正文摘要显示样式：选择"使用自定义样式"
- 存储字段名称：保持默认
summary即可
3. 自定义样式设置
插件提供了样式自定义功能，完美适配绝大部分主题，在"自定义样式"文本框中填入以下代码：
此处内容需要评论回复后（审核通过）方可阅读。
4. 设置HTML模板
在"正文摘要前后固定文字"文本框中填入以下HTML代码：
此处内容需要评论回复后（审核通过）方可阅读。
5. 生成摘要
配置完成后，可以在管理中统一手动生成摘要：
也可以在发布页面添加summary字符，发布即可自动生成。
handsome加载不出解决方案
使用样式
<!-- 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');
}
});
}
},
detectAndSyncTheme: function() {
// 检查常见的夜间模式标识
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) {
this.setAiSummaryTheme('dark');
} else {
this.setAiSummaryTheme('light');
}
},
executeAiSummaryTyping: function() {
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(() => {
window.aiSummaryUser.executeAiSummaryTyping();
window.aiSummaryUser.detectAndSyncTheme();
}, 300);
});
// 监听主题切换
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class' || mutation.attributeName === 'data-night') {
window.aiSummaryUser.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(window.aiSummaryUser.detectAndSyncTheme, 100);
});
});
}
});
// 如果存在全局主题切换函数，拦截它们以同步状态
if (typeof window.switchNightMode === 'function') {
const originalSwitchNightMode = window.switchNightMode;
window.switchNightMode = function() {
originalSwitchNightMode.apply(this, arguments);
setTimeout(window.aiSummaryUser.detectAndSyncTheme, 100);
};
}
</script>前台Vditor解析文章页面不出现AI摘要
解决方法
1、打开文件：usr/themes/handsome/libs/content/PostContent.php
2、找到第382行（大约在第380-385行之间）
3、将$content = $obj->text;改为$content = $obj->content;
4、保存文件
$obj->text是vditor原始的Markdown文本，没有经过任何插件处理
$obj->content是经过Typecho插件系统处理后的HTML内容，包括AISummary插件的customContent方法添加的摘要
通过使用$obj->content，确保所有插件的钩子都能正常工作
总结
通过AISummary插件，你可以轻松为Typecho博客文章添加智能生成的摘要。
如有任何问题或建议，欢迎在评论区留言。
