网上冲浪时看到很多博主的博客的文章都有一个ai摘要功能，秉着别人有的，我也想要的原则。于是特意去了解给博客增加ai摘要的方法。

通过对接一个第三方ai平台，将文章内容发送给ai让其生成摘要，然后作为文章的附属字段。有的为了更加灵活，提供了实时生成摘要，但是本质都是对接第三方ai平台。

经过查询和对比，最后选择的插件是：AISummary

从插件提供的配置来看，使用方式是很简单的只需要确定对接的ai平台。填入模型名称，sk-密钥基本就可以了。
这里博主尝试了两个平台，都提供免费使用sk的，亲测是可用的。一个是阿里千问，一个Kimi。经过对比后，博主选择的是Kimi。
最后，插件提供的生成的默认样式不太好看，所以这里针对主题样式写了一个自定义ai摘要的样式效果。最终的效果如下：

自定义样式（打印机效果）：

<style>
.aisummary{
    background: #f7f7f9;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    border: 1px solid #e3e8f7;
    margin-bottom: 16px;
    color: black;
}
</style>



<style>
.ai-text-container {
    background: #fff;
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #e3e8f7;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.6;
}

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

.ai-typewriter-text {
    display: inline;
    text-indent: 2em;
}

.ai-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: #465CEB;
    margin-left: 2px;
    animation: ai-blink 0.7s infinite;
    vertical-align: middle;
}

@keyframes ai-blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
</style>



<script>
    // 打字机效果的核心逻辑
    function startTyping() {
        const typewriterElement = document.querySelector('.ai-typewriter-text');
        const typingSpeed = 100;
        let charIndex = 0;
        const sourceTextElement = document.querySelector('.ai-hidden-text');

        if (!sourceTextElement) return;

        let text = sourceTextElement.textContent;
        if (text.length > 0) {
            text = '  ' + text;
        }

        typewriterElement.textContent = '';

        function typeNextChar() {
            if (charIndex < text.length) {
                typewriterElement.textContent += text.charAt(charIndex);
                charIndex++;
                setTimeout(typeNextChar, typingSpeed);
            }
        }

        charIndex = 0;
        typeNextChar();
    }

    let typingTimeout;

    // 页面加载后启动打字机效果
    window.addEventListener('DOMContentLoaded', function() {
        startTyping();

        let lastUrl = window.location.href;

        setInterval(function() {
            if (window.location.href !== lastUrl) {
                lastUrl = window.location.href;
                clearTimeout(typingTimeout);  // 清除上次的定时器
                typingTimeout = setTimeout(startTyping, 1000);  // 延时触发
            }
        }, 100);
    });
</script>

正文摘要前后固定文字：

<p class="ai-header" style="margin-bottom: 8px; color: #465CEB; text-align: left; display: flex; align-items: center;text-indent: 0;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
        <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 d="M8 3l2 3" />
        <path d="M16 3l-2 3" />
        <path d="M9 13v-2" />
        <path d="M15 11v2" />
    </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" style="font-size: 14px; color: rgba(60, 60, 67, 0.8); margin-bottom: 0; padding: 0 12px; text-align: left;text-indent: 0;">
此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结
</p>