界面预览

image

在 Hexo Butterfly 主题中实现文章顶部插入智能摘要模块的功能，您需要修改主题的相关模板文件和配置文件。以下是具体步骤：

1. 创建 CSS 文件

在 Butterfly 主题的 source/css/ 目录下创建一个新的 CSS 文件，例如 article-summary.css，并添加以下样式：

1
2
3
4
5
6
7
8
9
/* themes/butterfly/source/css/article-summary.css */
#article-summary {
    background-color: #f9f9f9;
    border-left: 4px solid #007bff;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
}

2. 引入 CSS 文件

在 Butterfly 主题中，可以通过修改主题配置文件 _config.butterfly.yml 来引入自定义的 CSS 文件。

找到 inject 部分，添加以下代码：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/article-summary.css">

3. 修改 layout.pug 文件

在 layout.pug 文件中，确保摘要模块的 HTML 结构已经添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
extends includes/layout.pug

block content
  #post
    if top_img === false
      include includes/header/post-info.pug

    // 插入摘要模块
    div#article-summary
        p 正在生成摘要，请稍候...

    // 文章内容
    article#article-container.post-content!=page.content

    include includes/post/post-copyright.pug
    .tag_share
      if (theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
      include includes/third-party/share/index.pug
        
    if theme.reward.enable && theme.reward.QR_code
      !=partial('includes/post/reward', {}, {cache: true})

    //- ad
    if theme.ad && theme.ad.post
      .ads-wrap!=theme.ad.post

    if theme.post_pagination
      include includes/pagination.pug
    if theme.related_post && theme.related_post.enable
      != related_posts(page,site.posts)

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

4. 添加 JavaScript 调用 API

在 themes/butterfly/source/js/ 目录下创建一个新文件，例如 summary.js，将以下代码粘贴进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
async function generateSummary() {
    const articleContent = document.querySelector('.post-content').innerText; // 获取文章内容
    const summaryElement = document.getElementById('article-summary');

    try {
        const response = await fetch('https://api.deepseek.com/summarize', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer YOUR_API_KEY' // 替换为您的 API Key
            },
            body: JSON.stringify({
                text: articleContent,
                max_length: 150 // 摘要的最大长度
            })
        });

        if (!response.ok) {
            throw new Error(`API 调用失败，状态码: ${response.status}`);
        }

        const data = await response.json();
        console.log('API 响应:', data); // 打印 API 响应
        summaryElement.innerHTML = `<p>${data.summary}</p>`;
    } catch (error) {
        console.error('错误详情:', error); // 打印错误详情
        summaryElement.innerHTML = `<p>摘要生成失败，请稍后重试。</p>`;
    }
}

// 页面加载完成后调用
window.addEventListener('load', generateSummary);

在主题配置文件 _config.butterfly.yml 中，找到 inject 部分，添加以下代码：

1
2
3
inject:
  head:
    - <script src="/js/summary.js"></script>

5. 部署和测试

  1. 保存所有修改的文件。

  2. 在终端运行以下命令重新生成 Hexo 静态文件：

    1
    hexo clean && hexo generate

启动本地服务器测试：

1
hexo server

打开文章页面，检查摘要模块是否正常显示，并确保 API 调用成功。