在 Hexo 中使用 AI（Gemini Pro）生成文章摘要

我先来总结一下提要：

首先部署Gemini服务

进入 https://ai.google.dev/ 跟随官网描述即可。

然后，可选配置中转服务

然后，安装 hexo-ai-summaries 插件 & 配置

root/_config.yml

hexo-ai-summaries:
  enable: true
  aiSummaryApi: https://article-zhaiyao.youruilin.workers.dev/v1/chat/completions
  # 只在该日期后的文章上生成 摘要 按钮
  generateAfterDate: 2024/05
  # 文字数量限制 => String.length 
  maxToken: 300
  prompt:
    You are a highly skilled AI trained in language comprehension and summarization. I would like you to read the text delimited by triple quotes and summarize it into a concise abstract paragraph. Aim to retain the most important points, providing a coherent and readable summary that could help a person understand the main points of the discussion without needing to read the entire text. Please avoid unnecessary details or tangential points.
    Only give me the output and nothing else. Do not wrap responses in quotes. Respond in the Japanese language.
  geminiConfig:
    model: gpt-4o
    temperature: 0.7
    headers: true
  tagConfig:
    title: .post-title
    content: .post-content
    toc: .toc-content
  customHtml:
    htmlFile: source/Gemini/gemini.html
    styleFile: source/Gemini/gemini.css
    jsFile: source/Gemini/gemini.js

其中，原始文件生成在 public/hexo-ai-summaries 中，复制出来，其中 html 需要到插件文件夹中找到 html.tpl 文件，将其转换为 html 结构后复制出来，如上配置。

接下来就可以任意修改理想的样式，进行很大程度的自由定制啦！

关于自动执行

// 使用 requestAnimationFrame 确保在 DOM 渲染后执行
document.addEventListener('DOMContentLoaded', () => {
  requestAnimationFrame(async () => {
    // 延迟执行 geminiAI，确保 DOM 元素已渲染完成
    await geminiAI();
  });
});

requestAnimationFrame 是一种浏览器提供的 API，它允许你将一个回调函数放入浏览器的下一次重绘周期中执行。它的主要目的是用于优化动画，使得动画的帧率和页面的渲染同步，从而提高性能和流畅度。

为什么使用 requestAnimationFrame？

当你希望延迟执行某个操作，尤其是在渲染相关的操作时，requestAnimationFrame 是比 setTimeout 更合适的选择，特别是在你需要确保操作在页面渲染的下一帧时执行。

requestAnimationFrame 的好处包括：

性能优化：它会在浏览器的渲染周期中执行，不会导致不必要的页面重排和重绘，因此比 setTimeout 更高效。
同步渲染：通过 requestAnimationFrame，操作可以与浏览器的渲染周期同步，从而避免卡顿或者不流畅的效果。
避免意外的延迟：setTimeout 可以出现不准确的延迟时间，尤其是当页面忙于渲染或者其他操作时，而 requestAnimationFrame 是与页面渲染同步的。

接下来需要优化的点：

为 worker.js 中的apikey 添加环境变量，确保安全
继续解决前端页面加载后自动执行 Gemini 函数的问题，目前使用延时器暂时凑活（为fake流设置延时）
将 ai 摘要缓存到 cf