给hugo文章增加AI摘要

前言

紧跟AI大语言模型潮流，给我的文章摘要添加"AI模式"实时输出。

正文

主要参考Hi，AI 摘要，只不过我不喜欢把摘要单独放在data/目录下，所以简单修改了下 aisummary.html，让它直接显示Front Matter中summary的内容。
完整配置如下：

<div class="post-ai">
    <div class="ai-title">
        <div class="ai-title-text">AI 摘要</div>
    </div>

    <!-- Typeit 打字机效果，不需要则注释掉下面这行代码 -->
    <div id="ai-explanation" class="ai-explanation"></div>

    <div class="ai-explanation ai-explanation-content">
        {{ if .Summary }}
            {{ .Summary }}
        {{ else }}
            AI 摘要接口暂时失联……
        {{ end }}
    </div>
</div>

<!-- 打字机效果的 JS 不需要则注释掉 -->
<script src="https://npm.elemecdn.com/typeit@8.7.1/dist/index.umd.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // 从 .ai-explanation-content 取值
    const matchingSummary = document.querySelector(".ai-explanation-content").textContent;

    new TypeIt("#ai-explanation", {
        strings: matchingSummary,
        speed: 6,
        lifeLike: true,
        waitUntilVisible: true,
    }).go();
});
</script>

总结

下次得找时间好好整理下文章摘要。

参考

博客 AI 摘要及优化
 Hi，AI 摘要