前言
本文将教你如何在Typecho博客中实现一个带有打字机动画效果的文章摘要功能，并且支持展开收起。我们将使用Typecho的自定义字段功能来存储摘要内容，并通过JavaScript为其添加打字机效果。
1. 了解Typecho的自定义字段
Typecho允许我们为每篇文章添加自定义字段。在编辑文章页面的底部，有一个"自定义字段"区域，我们可以在这里添加名为"summary"的字段，用于存储文章摘要。
2. 基础版：在文章页面显示自定义字段内容
首先，我们需要修改文章模板，在适当位置添加代码来显示summary字段的内容。找到你的文章页面模板（通常是post.php），在文章内容区域的开始位置添加以下代码：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded">
<h5 class="fw-bold">文章摘要</h5>
<div class="summary-content">
<?php echo $this->fields->summary; ?>
</div>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>这段代码会检查文章是否有summary自定义字段，如果有则显示出来。
3. 添加蓝色主题样式
接下来，我们给摘要区域添加蓝色主题样式：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded" style="background-color: #e6f3ff; border-left: 4px solid #1e88e5;">
<h5 class="fw-bold text-primary">文章摘要</h5>
<div class="summary-content text-primary" style="color: #2171d3; font-weight: normal;">
<?php echo $this->fields->summary; ?>
</div>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>这样，摘要区域就有了蓝色背景和蓝色文字。
4. 添加打字机效果
现在，让我们添加打字机效果，使摘要内容逐字显示：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded" style="background-color: #e6f3ff; border-left: 4px solid #1e88e5;">
<h5 class="fw-bold text-primary">文章摘要</h5>
<div class="summary-content text-primary" id="typewriter-text" style="color: #2171d3; font-weight: normal;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 存储原始内容
const originalText = `<?php echo addslashes($this->fields->summary); ?>`;
const typewriterElement = document.getElementById('typewriter-text');
let i = 0;
const speed = 30; // 打字速度，数值越小越快
// 打字机效果函数
function typeWriter() {
if (i < originalText.length) {
typewriterElement.innerHTML += originalText.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
// 启动打字机效果
typeWriter();
});
</script>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>这段代码通过JavaScript实现了打字机效果，摘要内容会逐字显示。
5. 添加光标闪烁效果
为了增强打字机效果，我们添加一个闪烁的光标：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded" style="background-color: #e6f3ff; border-left: 4px solid #1e88e5;">
<h5 class="fw-bold text-primary">文章摘要</h5>
<div class="summary-content text-primary" id="typewriter-text" style="color: #2171d3; font-weight: normal;"></div>
<style>
.cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: #2171d3;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: text-bottom;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 存储原始内容
const originalText = `<?php echo addslashes($this->fields->summary); ?>`;
const typewriterElement = document.getElementById('typewriter-text');
let i = 0;
const speed = 30; // 打字速度，数值越小越快
// 创建光标元素
const cursor = document.createElement('span');
cursor.className = 'cursor';
typewriterElement.appendChild(cursor);
// 打字机效果函数
function typeWriter() {
if (i < originalText.length) {
// 在光标前插入文本
const textNode = document.createTextNode(originalText.charAt(i));
typewriterElement.insertBefore(textNode, cursor);
i++;
setTimeout(typeWriter, speed);
}
}
// 启动打字机效果
typeWriter();
});
</script>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>现在，摘要内容会逐字显示，每个字符后面都有一个闪烁的蓝色光标。
6. 解决打字机效果引起的页面跳动问题
为了防止打字机效果导致页面内容不断下移，我们需要预先设置容器高度：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded" style="background-color: #e6f3ff; border-left: 4px solid #1e88e5;">
<h5 class="fw-bold text-primary">文章摘要</h5>
<!-- 隐藏的div用于计算高度 -->
<div id="hidden-summary" style="visibility: hidden; position: absolute; width: calc(100% - 3rem); color: #2171d3; padding: 0.5rem 0;"><?php echo $this->fields->summary; ?></div>
<!-- 实际显示的div -->
<div class="summary-content text-primary" id="typewriter-text" style="color: #2171d3; font-weight: normal; min-height: 1.5em; padding: 0.5rem 0;"></div>
<style>
.cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: #2171d3;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: text-bottom;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 存储原始内容
const originalText = `<?php echo addslashes($this->fields->summary); ?>`;
const typewriterElement = document.getElementById('typewriter-text');
const hiddenElement = document.getElementById('hidden-summary');
// 根据隐藏元素设置打字机容器高度
setTimeout(() => {
const height = hiddenElement.offsetHeight;
typewriterElement.style.height = height + 'px';
// 高度设置完成后可以隐藏计算元素
hiddenElement.remove();
}, 0);
let i = 0;
const speed = 30; // 打字速度，数值越小越快
// 创建光标元素
const cursor = document.createElement('span');
cursor.className = 'cursor';
typewriterElement.appendChild(cursor);
// 打字机效果函数
function typeWriter() {
if (i < originalText.length) {
// 在光标前插入文本
const textNode = document.createTextNode(originalText.charAt(i));
typewriterElement.insertBefore(textNode, cursor);
i++;
setTimeout(typeWriter, speed);
}
}
// 启动打字机效果
typeWriter();
});
</script>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>通过创建一个隐藏的元素来预先计算高度，我们解决了打字机效果导致的页面跳动问题。
7. 添加展开/收起功能
现在，我们添加一个展开/收起按钮，让用户可以控制摘要的显示：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded" style="background-color: #e6f3ff; border-left: 4px solid #1e88e5;">
<div class="d-flex justify-content-between align-items-center mb-2">
<h5 class="fw-bold text-primary mb-0">文章摘要</h5>
<span id="toggle-summary" class="text-primary" style="cursor: pointer; font-size: 0.9rem;">收起</span>
</div>
<!-- 隐藏的div用于计算高度 -->
<div id="hidden-summary" style="visibility: hidden; position: absolute; width: calc(100% - 3rem); color: #2171d3; padding: 0.5rem 0;"><?php echo $this->fields->summary; ?></div>
<!-- 实际显示的div -->
<div class="summary-container" id="summary-container">
<div class="summary-content text-primary" id="typewriter-text" style="color: #2171d3; font-weight: normal; min-height: 1.5em; padding: 0.5rem 0;"></div>
</div>
<style>
.cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: #2171d3;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: text-bottom;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.summary-container.collapsed {
height: 2em; /* 增加高度确保显示完整一行 */
overflow: hidden;
margin: 0;
}
/* 当动画完成时隐藏光标 */
.cursor.hidden {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 存储原始内容
const originalText = `<?php echo addslashes($this->fields->summary); ?>`;
const typewriterElement = document.getElementById('typewriter-text');
const hiddenElement = document.getElementById('hidden-summary');
const summaryContainer = document.getElementById('summary-container');
const toggleButton = document.getElementById('toggle-summary');
// 展开/收起状态
let isExpanded = true;
// 根据隐藏元素设置打字机容器高度
setTimeout(() => {
const height = hiddenElement.offsetHeight;
// 增加额外高度容纳底部信息
typewriterElement.style.height = (height + 10) + 'px';
// 高度设置完成后可以隐藏计算元素
hiddenElement.remove();
}, 0);
// 展开/收起按钮事件
toggleButton.addEventListener('click', function() {
isExpanded = !isExpanded;
if (isExpanded) {
summaryContainer.classList.remove('collapsed');
toggleButton.textContent = '收起';
} else {
summaryContainer.classList.add('collapsed');
toggleButton.textContent = '展开';
}
});
let i = 0;
const speed = 30; // 打字速度，数值越小越快
// 创建光标元素
const cursor = document.createElement('span');
cursor.className = 'cursor';
typewriterElement.appendChild(cursor);
// 打字机效果函数
function typeWriter() {
if (i < originalText.length) {
// 在光标前插入文本
const textNode = document.createTextNode(originalText.charAt(i));
typewriterElement.insertBefore(textNode, cursor);
i++;
setTimeout(typeWriter, speed);
} else {
// 动画完成，隐藏光标
setTimeout(() => {
cursor.classList.add('hidden');
}, 1000); // 在最后一个字符后再等待1秒，然后隐藏光标
}
}
// 启动打字机效果
typeWriter();
});
</script>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>现在，摘要区域有了展开/收起功能，默认展开，点击"收起"按钮后会只显示第一行内容。
8. 添加Deepseek签名和链接
最后，我们在摘要底部添加Deepseek R1-Reasoner的署名和链接：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded" style="background-color: #e6f3ff; border-left: 4px solid #1e88e5; transition: all 0.3s ease;">
<div class="d-flex justify-content-between align-items-center mb-2">
<h5 class="fw-bold text-primary mb-0">文章摘要</h5>
<span id="toggle-summary" class="text-primary" style="cursor: pointer; font-size: 0.9rem;">收起</span>
</div>
<!-- 隐藏的div用于计算高度 -->
<div id="hidden-summary" style="visibility: hidden; position: absolute; width: calc(100% - 3rem); color: #2171d3; padding: 0.5rem 0;"><?php echo $this->fields->summary; ?></div>
<!-- 实际显示的div -->
<div class="summary-container" id="summary-container">
<div class="summary-content text-primary" id="typewriter-text" style="color: #2171d3; font-weight: normal; min-height: 1.5em; padding: 0.5rem 0;"></div>
<div class="text-end mt-2" style="font-size: 0.75rem;">
<span style="color: #1e88e5;">Powered by</span><span style="display: inline-block; width: 6px;"></span><a href="https://deepseek.com" target="_blank" style="color: #1e88e5; font-weight: bold; text-decoration: underline;">Deepseek R1-Reasoner</a>
</div>
</div>
<style>
.cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: #2171d3;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: text-bottom;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.summary-container.collapsed {
height: 2em; /* 增加高度确保显示完整一行 */
overflow: hidden;
margin: 0;
}
/* 当动画完成时隐藏光标 */
.cursor.hidden {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 存储原始内容
const originalText = `<?php echo addslashes($this->fields->summary); ?>`;
const typewriterElement = document.getElementById('typewriter-text');
const hiddenElement = document.getElementById('hidden-summary');
const summaryContainer = document.getElementById('summary-container');
const toggleButton = document.getElementById('toggle-summary');
// 展开/收起状态
let isExpanded = true;
// 根据隐藏元素设置打字机容器高度
setTimeout(() => {
const height = hiddenElement.offsetHeight;
// 增加额外高度容纳底部信息
typewriterElement.style.height = (height + 10) + 'px';
// 高度设置完成后可以隐藏计算元素
hiddenElement.remove();
}, 0);
// 展开/收起按钮事件
toggleButton.addEventListener('click', function() {
isExpanded = !isExpanded;
if (isExpanded) {
summaryContainer.classList.remove('collapsed');
toggleButton.textContent = '收起';
} else {
summaryContainer.classList.add('collapsed');
toggleButton.textContent = '展开';
}
});
let i = 0;
const speed = 30; // 打字速度，数值越小越快
// 创建光标元素
const cursor = document.createElement('span');
cursor.className = 'cursor';
typewriterElement.appendChild(cursor);
// 打字机效果函数
function typeWriter() {
if (i < originalText.length) {
// 在光标前插入文本
const textNode = document.createTextNode(originalText.charAt(i));
typewriterElement.insertBefore(textNode, cursor);
i++;
setTimeout(typeWriter, speed);
} else {
// 动画完成，隐藏光标
setTimeout(() => {
cursor.classList.add('hidden');
}, 1000); // 在最后一个字符后再等待1秒，然后隐藏光标
}
}
// 启动打字机效果
typeWriter();
});
</script>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>完整代码
以下是最终完整的代码实现：
phpCopy<?php else : ?>
<?php if (isset($this->fields->summary) && $this->fields->summary): ?>
<div class="article-summary mb-4 p-3 rounded" style="background-color: #e6f3ff; border-left: 4px solid #1e88e5; transition: all 0.3s ease;">
<div class="d-flex justify-content-between align-items-center mb-2">
<h5 class="fw-bold text-primary mb-0">文章摘要</h5>
<span id="toggle-summary" class="text-primary" style="cursor: pointer; font-size: 0.9rem;">收起</span>
</div>
<!-- 隐藏的div用于计算高度 -->
<div id="hidden-summary" style="visibility: hidden; position: absolute; width: calc(100% - 3rem); color: #2171d3; padding: 0.5rem 0;"><?php echo $this->fields->summary; ?></div>
<!-- 实际显示的div -->
<div class="summary-container" id="summary-container">
<div class="summary-content text-primary" id="typewriter-text" style="color: #2171d3; font-weight: normal; min-height: 1.5em; padding: 0.5rem 0;"></div>
<div class="text-end mt-2" style="font-size: 0.75rem;">
<span style="color: #1e88e5;">Powered by</span><span style="display: inline-block; width: 6px;"></span><a href="https://deepseek.com" target="_blank" style="color: #1e88e5; font-weight: bold; text-decoration: underline;">Deepseek R1-Reasoner</a>
</div>
</div>
<style>
.cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: #2171d3;
margin-left: 2px;
animation: blink 0.7s infinite;
vertical-align: text-bottom;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.summary-container.collapsed {
height: 2em; /* 增加高度确保显示完整一行 */
overflow: hidden;
margin: 0;
}
/* 当动画完成时隐藏光标 */
.cursor.hidden {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 存储原始内容
const originalText = `<?php echo addslashes($this->fields->summary); ?>`;
const typewriterElement = document.getElementById('typewriter-text');
const hiddenElement = document.getElementById('hidden-summary');
const summaryContainer = document.getElementById('summary-container');
const toggleButton = document.getElementById('toggle-summary');
// 展开/收起状态
let isExpanded = true;
// 根据隐藏元素设置打字机容器高度
setTimeout(() => {
const height = hiddenElement.offsetHeight;
// 增加额外高度容纳底部信息
typewriterElement.style.height = (height + 10) + 'px';
// 高度设置完成后可以隐藏计算元素
hiddenElement.remove();
}, 0);
// 展开/收起按钮事件
toggleButton.addEventListener('click', function() {
isExpanded = !isExpanded;
if (isExpanded) {
summaryContainer.classList.remove('collapsed');
toggleButton.textContent = '收起';
} else {
summaryContainer.classList.add('collapsed');
toggleButton.textContent = '展开';
}
});
let i = 0;
const speed = 30; // 打字速度，数值越小越快
// 创建光标元素
const cursor = document.createElement('span');
cursor.className = 'cursor';
typewriterElement.appendChild(cursor);
// 打字机效果函数
function typeWriter() {
if (i < originalText.length) {
// 在光标前插入文本
const textNode = document.createTextNode(originalText.charAt(i));
typewriterElement.insertBefore(textNode, cursor);
i++;
setTimeout(typeWriter, speed);
} else {
// 动画完成，隐藏光标
setTimeout(() => {
cursor.classList.add('hidden');
}, 1000); // 在最后一个字符后再等待1秒，然后隐藏光标
}
}
// 启动打字机效果
typeWriter();
});
</script>
</div>
<?php endif; ?>
<article class="typography" id="post">
<?= Context::CtxFilter($this) ?>
</article>功能特点总结
我们实现的AI打字机文章摘要功能具有以下特点：
- 美观的蓝色主题：蓝色背景和蓝色文字，视觉效果统一
- 打字机效果：摘要内容会逐字显示，模拟打字效果
- 光标闪烁：有一个闪烁的光标跟随文字输入
- 预设容器高度：避免打字过程中页面跳动
- 展开/收起功能：可以折叠摘要内容，只显示第一行
- Deepseek署名：底部有Deepseek R1-Reasoner的署名和链接
- 自适应布局：在各种屏幕尺寸上都能正常显示
使用方法
- 在Typecho后台文章编辑页面底部的自定义字段区域，添加名为"summary"的字段
- 在summary字段中填写文章摘要内容
- 将完整代码添加到你的文章页面模板中
- 发布文章，查看效果
这样，你的博客就拥有了一个带有打字机效果的AI文章摘要功能！