mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4
1139 字
3 分钟
123网盘集成演示
2026-04-23

123网盘集成功能演示#

本文档演示如何在Mizuki博客中集成和使用123网盘功能。通过本集成,您可以在文章中直接引用123网盘中的文件,并生成可点击的下载链接。

基本文件卡片#

使用 ::pan123::pan123-file 指令可以创建美观的文件卡片,自动显示文件信息和下载按钮。

示例1:下载根目录的”电脑.zip”文件#

电脑.zip
/电脑.zip
大小:加载中...
修改时间:加载中...

示例2:自定义显示名称#

::pan123-file{ path=“/电脑.zip”, name=“我的电脑配置文件”, icon=“material-symbols” }

代码示例:

::pan123{path="/电脑.zip"}
::pan123-file{
path="/电脑.zip",
name="我的电脑配置文件",
icon="material-symbols:computer"
}

内联链接组件#

使用 ::pan123-link 指令可以创建简洁的内联下载链接,适合在段落中引用文件。

示例3:内联下载链接#

点击此处下载 [::pan123-link{path=“/电脑.zip”}] 文件,该文件包含了我的电脑配置备份。

或者使用自定义链接文本:[::pan123-link{path=“/电脑.zip” name=“电脑配置备份文件”}]。

代码示例:

点击此处下载 [::pan123-link{path="/电脑.zip"}] 文件。
或者使用自定义链接文本:[::pan123-link{path="/电脑.zip" name="电脑配置备份文件"}]。

文件信息显示#

123网盘组件会自动从API获取并显示以下文件信息:

  1. 文件大小:自动格式化显示(B、KB、MB、GB)
  2. 修改时间:显示文件的最后修改时间
  3. 下载链接:生成可点击的下载按钮
  4. 文件图标:根据文件类型显示相应图标(可自定义)

使用说明#

文件路径格式#

文件路径必须使用123网盘中的完整路径,以 / 开头:

  • /电脑.zip - 根目录下的文件
  • /文档/报告.pdf - 子目录中的文件
  • /备份/2024/系统镜像.iso - 多级目录中的文件

环境配置#

要使用123网盘功能,需要在环境变量中配置以下信息:

PAN123_USERNAME=您的123网盘账号
PAN123_PASSWORD=您的123网盘密码
PAN123_WEBDAV_URL=https://webdav.123pan.cn/webdav

可选功能:Cloudflare KV缓存#

如需提高性能,可以启用Cloudflare KV缓存:

PAN123_USE_KV=true

启用后,文件信息将被缓存1小时,减少对123网盘API的直接调用。

故障排除#

如果文件无法加载,请检查:

  1. 环境变量是否正确配置
  2. 文件路径是否存在
  3. 网络连接是否正常
  4. 浏览器控制台是否有错误信息
  5. 混合请求机制:系统会自动尝试POST、GET查询参数、路径参数三种方式,确保最大兼容性

技术实现说明#

本集成采用混合方案C,解决了Astro框架中查询参数可能丢失的问题:

  1. 三重请求机制

    • 首先尝试POST请求(JSON请求体)
    • 其次尝试GET请求(查询参数)
    • 最后尝试路径参数方式
  2. API端点优化

    • 添加 export const prerender = false 避免静态构建问题
    • 支持多种URL格式,确保兼容性
  3. 前端智能重试

    • 组件会自动尝试所有可用方式
    • 提供详细的调试日志
    • 优雅降级处理

更多示例#

不同文件类型#

报告.pdf
/文档/报告.pdf
大小:加载中...
修改时间:加载中...
照片.jpg
/图片/照片.jpg
大小:加载中...
修改时间:加载中...
教程.mp4
/视频/教程.mp4
大小:加载中...
修改时间:加载中...
安装程序.exe
/软件/安装程序.exe
大小:加载中...
修改时间:加载中...

目录列表(通过API)#

您还可以通过API获取目录列表,支持多种请求方式:

方式一:GET请求(查询参数) - 推荐#

GET /api/pan123/info?path=/文档&list=true

方式二:POST请求(JSON请求体)#

POST /api/pan123/info
Content-Type: application/json
{
"path": "/文档",
"list": true
}

方式三:路径参数方式#

GET /api/pan123/info/文档?list=true

总结#

123网盘集成功能为Mizuki博客提供了强大的文件管理能力,让您可以在文章中直接引用和下载存储在123网盘中的文件。无论是配置文件、文档、图片还是视频,都可以方便地分享给读者。

核心优势#

  1. 多重兼容性:采用混合方案C,支持POST、GET查询参数、路径参数三种请求方式
  2. 智能重试:前端组件自动尝试所有可用方式,确保最大兼容性
  3. 优雅降级:即使某种方式失败,系统会自动尝试其他方式
  4. 详细日志:提供完整的调试信息,便于问题排查

已解决的问题#

  • Astro查询参数丢失:通过混合方案C解决
  • 静态构建问题:添加 export const prerender = false
  • URL构建错误:规范化基础URL和文件路径
  • 认证失败:完善的错误处理和重试机制

立即尝试:在您的文章中使用 ::pan123{path="/您的文件路径"} 语法,体验便捷的文件分享功能!

技术支持#

如需技术支持或报告问题,请参考完整的使用手册:docs/PAN123_INTEGRATION.md

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

123网盘集成演示
https://www.xn--7ov1ng90a.top/posts/pan123-demo/
作者
月狐兔&三玖
发布于
2026-04-23
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录