博客实现AI文章摘要模块教程
本文将详细介绍如何在Hexo博客中实现一个美观且智能的AI文章摘要模块，包括模板、样式、JS动画和front-matter配置，帮助你的博客内容更突出、体验更佳。
1. 在文章模板插入摘要模块
以主题 cactus 为例，编辑 themes/cactus/layout/_partial/article.ejs（或对应主题的文章模板），在合适位置插入如下HTML结构：
1
2
3
4
5
6
| <% if (page.summary) { %>
<div class="ai-summary">
<span class="ai-summary-label">AI摘要：</span>
<span class="ai-summary-content" id="ai-summary-<%= page._id %>"><%= page.summary %></span>
</div>
<% } %>
|
2. 配置 front-matter 摘要字段
在你的Markdown文章头部添加 summary 字段，例如：
1
2
3
4
5
| ---
title: 示例文章
date: 2025-03-07 10:00:00
summary: 这是一段由AI生成的文章摘要，简明扼要地介绍了本文的主要内容。
---
|
3. 实现打字机动画效果
在主题的 source/js/ 目录下新建或编辑 ai-summary.js，添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.ai-summary-content').forEach(function(el) {
const text = el.textContent;
el.textContent = '';
el.style.visibility = 'hidden';
let i = 0;
function type() {
if (i < text.length) {
el.textContent += text.charAt(i);
i++;
setTimeout(type, 40);
} else {
el.style.visibility = 'visible';
}
}
type();
});
});
|
并在主题的 layout/_partial/head.ejs 或 layout/_partial/scripts.ejs 中引入：
1
| <script src="/js/ai-summary.js"></script>
|
4. 摘要模块样式美化
在主题的样式文件（如 source/css/_custom.styl 或 source/css/custom.css）中添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .ai-summary {
background: linear-gradient(90deg, #f8fafc 60%, #e0e7ef 100%);
border-left: 4px solid #4f8cff;
padding: 1em 1.2em;
margin: 1.5em 0;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(79,140,255,0.07);
font-size: 1.08em;
color: #222;
position: relative;
}
.ai-summary-label {
font-weight: bold;
color: #4f8cff;
margin-right: 0.5em;
}
.ai-summary-content {
letter-spacing: 0.02em;
}
|
5. 效果展示
实际 front-matter 示例：
1
2
3
4
5
| ---
title: AI摘要演示
date: 2025-03-07 10:00:00
summary: 本文介绍了如何在Hexo博客中集成AI文章摘要模块，包括模板、样式和动画实现。
---
|
6. 总结
通过上述步骤，你可以为Hexo博客文章添加AI摘要模块，提升内容可读性和页面美观度。欢迎根据自己主题风格调整样式和动画参数。