Vuepress博客文章如何接入Deepseek生成摘要

文
章
目
录

• 一、注册Deepseek并获取API密钥
• 二、借助Serverless函数代理API请求
• 三、前端集成
• 四、访问页面及遇到的问题

最近在研究网页开发的时候，发现把Deepseek接入网页还挺有意思的，今天就来给大伙分享一下具体的操作流程。我以Vuepress文档接入Deepseek实现文章总结功能为例，一步一步带着大家完成接入。

一、注册Deepseek并获取API密钥

这个大家应该都会，不会的可以参考文章：如何获取 DeepSeek API？

二、借助Serverless函数代理API请求

要是你的网页是静态网站，没有后端服务器，这种情况下可以借助Vercel这个免费平台来部署一个“无服务器函数”，这么做的主要目的是把API Key隐藏起来，保障安全。具体步骤如下：

1. 注册Vercel：访问Vercel官网，用GitHub账号登录就行。要是还没有GitHub账号，得先去注册一个。
2. 新建项目：登录Vercel后，选择“Create a New Project”。然后把你的VuePress博客仓库导入进来，接着修改部署配置，添加一个环境变量DEEPSEEK_API_KEY ，把之前获取到的Deepseek的API Key填进去。
3. 创建Serverless函数：在项目根目录新建一个api/summarize.js文件，Vercel会自动识别并把它部署为Serverless函数。下面来详细看看这个文件里的代码：

// 导出默认的异步函数，处理请求和响应
export default async (req, res) => {
  // --------------- CORS 配置 ---------------
  // 允许访问的源列表，这里添加了本地开发地址和博客线上地址
  const allowedOrigins = [\"http://localhost:8080\", \"https://mmmying.github.io\"];
  // 获取请求头中的origin字段，它表示请求的来源
  const origin = req.headers.origin;
  // 判断请求来源是否在允许列表中
  const isOriginAllowed = allowedOrigins.includes(origin);

  // 设置CORS头的辅助函数，减少重复代码
  const setCorsHeaders = () => {
    // 根据请求来源是否允许，设置Access-Control-Allow-Origin头
    res.setHeader(\"Access-Control-Allow-Origin\", isOriginAllowed ? origin : \"\");
    // 设置允许的请求方法
    res.setHeader(\"Access-Control-Allow-Methods\", \"POST, OPTIONS\");
    // 设置允许的请求头
    res.setHeader(\"Access-Control-Allow-Headers\", \"Content-Type\");
  };

  // --------------- 处理OPTIONS预检请求 ---------------
  // 如果是OPTIONS请求，直接设置CORS头并返回200状态码
  if (req.method === \"OPTIONS\") {
    setCorsHeaders();
    return res.status(200).end();
  }

  // --------------- 处理POST请求 ---------------
  // 如果是POST请求
  if (req.method === \"POST\") {
    try {
      // 验证来源，如果来源不允许，设置CORS头并返回403状态码
      if (!isOriginAllowed) {
        setCorsHeaders();
        return res.status(403).json({ error: \"非法来源\" });
      }

      // 解析请求体，获取content字段
      const { content } = req.body;
      // 检查content是否存在且长度是否超过限制
      if (!content || content.length > 30000) {
        setCorsHeaders();
        return res.status(400).json({ error: \"无效内容\" });
      }

      // 调用DeepSeek API
      const apiResponse = await fetch(\"https://api.deepseek.com/v1/chat/completions\", {
        method: \"POST\",
        headers: {
          // 设置Authorization头，包含API Key
          Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
          // 设置请求体类型
          \"Content-Type\": \"application/json\"
        },
        body: JSON.stringify({
          model: \"deepseek-chat\",
          messages: [
            {
              role: \"user\",
              // 让Deepseek用中文总结内容，限制长度为3000
              content: `用中文总结以下技术内容：\\n\\n${content.slice(0, 3000)}`
            }
          ]
        })
      });
      // 打印API响应，方便调试
      console.log(\"deepseek apiResponse: \", apiResponse)
      // 如果API响应不成功，抛出错误
      if (!apiResponse.ok) throw new Error(\"API调用失败\");
      // 解析API响应，获取摘要内容
      const { choices } = await apiResponse.json();
      const summary = choices[0].message.content.replace(/\\n/g, \"<br>\");

      // 成功响应，设置CORS头并返回摘要
      setCorsHeaders();
      return res.status(200).json({ summary });
    } catch (error) {
      // 错误响应，打印错误信息，设置CORS头并返回错误提示
      console.error(\"Error:\", error);
      setCorsHeaders();
      return res.status(500).json({ error: \"摘要生成失败\" });
    }
  }

  // --------------- 其他请求方法处理 ---------------
  // 对于其他请求方法，设置CORS头并返回405状态码
  setCorsHeaders();
  return res.status(405).json({ error: \"不允许的请求方法\" });
};

代码写好后，把代码提交到远程仓库，Vercel就会自动识别并部署这个Serverless函数。

三、前端集成

接下来就是在前端集成相关功能，让网页能展示Deepseek生成的文章摘要。

1. 安装依赖：在VuePress项目里，需要安装@vuepress/plugin-register-components插件，在命令行里执行：

pnpm add @vuepress/plugin-register-components

2. 配置插件：在.vuepress/config.js文件里配置这个插件，指定组件目录。具体代码如下：

// 引入path工具
import { path } from \"@vuepress/utils\";

module.exports = {
  plugins: [
    [
      \'@vuepress/plugin-register-components\',
      {
        // 让插件自动注册components目录下的所有Vue组件
        componentsDir: path.resolve(__dirname, \'./components\')
      }
    ]
  ]
};

3. 创建组件：在docs/.vuepress/components/目录下创建Post.vue组件，在这个组件里异步调用后端接口来获取文章摘要。代码如下：

<template>
  <div class=\"article\">
    <!-- 添加摘要容器，如果有摘要则显示，否则显示加载提示 -->
    <div v-if=\"summary\" class=\"summary\">
      <h3>AI摘要</h3>
      <!-- 渲染摘要内容，将换行符替换为<br>标签 -->
      <div v-html=\"summary\"></div>
    </div>
    <div v-else class=\"loading\">生成摘要中...</div>
    <!-- 文章内容，这里注释掉了，实际使用时可根据需求添加 -->
    <!-- <Content /> -->
  </div>
</template>

<script setup>
// 引入Vue的响应式和生命周期函数
import { ref, onMounted } from \'vue\';

// 定义一个响应式变量，用于存储文章摘要
const summary = ref(null);

// 生成摘要的方法
async function generateSummary() {
  try {
    // 获取文章纯文本内容，这里根据实际结构调整了选择器
    const content = document.querySelector(\'.vp-page\').innerText;
    // 向后端接口发送POST请求，传递文章内容
    const response = await fetch(\'https://how-browsers-work.vercel.app/api/summarize\', {
      method: \'POST\',
      headers: { \'Content-Type\': \'application/json\' },
      body: JSON.stringify({ content })
    });
    // 解析响应数据
    const data = await response.json();
    // 打印响应数据，方便调试
    console.log(\'response data\', data);
    
    // 处理摘要内容，将换行符替换为<br>标签
    summary.value = data.summary.replace(/\\n/g, \'<br>\'); 
  } catch (error) {
    // 如果出现错误，打印错误信息
    console.error(\'摘要生成失败:\', error);
  }
}

// 组件挂载后，调用生成摘要的方法
onMounted(() => {
  generateSummary();
})
</script>

<style>
// 摘要容器的样式
.summary { background: #f8f9fa; padding: 1rem; border-radius: 8px; }
// 加载提示的样式
.loading { color: #666; font-style: italic; }
</style>

4. 使用组件：在页面中使用这个组件，要把组件放在Frontmatter之后，像这样：

---
lang: zh-CN
title: 01 | Chrome架构：仅仅打开了1个页面，为什么有4个进程？
---
<Post></Post>

四、访问页面及遇到的问题

当你访问页面时，可能会发现显示摘要的地方提示摘要生成，到这一步其实就相当于成功接入Deepseek啦。希望这篇文章能帮助大家顺利把Deepseek接入到自己的网页里！