7. 文章封面图与随机封面配置
535 字
3 分钟
7. 文章封面图与随机封面配置
随机封面图配置指南
配置文件位置
src/config/coverImageConfig.ts
基本配置
export const coverImageConfig: CoverImageConfig = { // 是否在文章详情页显示封面图 enableInPost: true,
randomCoverImage: { // 随机封面图功能开关 enable: false, // 封面图API列表 apis: [ "https://t.alcy.cc/pc", "https://www.dmoe.cc/random.php", "https://uapis.cn/api/v1/random/image?category=acg&type=pc", ], // API失败时的回退图片路径 fallback: "assets/images/cover.avif", // 是否显示加载动画 showLoading: false, },}启用随机封面图
1. 开启随机封面图功能
将 randomCoverImage.enable 设置为 true：
randomCoverImage: { enable: true, // 开启随机封面图 // ...},2. 在文章中启用
在需要使用随机封面图的文章 frontmatter 中设置：
---title: 我的文章image: "api"---设置 image: "api" 后，系统会使用配置的 API 随机获取封面图。
API 配置
内置免费 API
博客已内置几个免费图床 API：
apis: [ "https://t.alcy.cc/pc", "https://www.dmoe.cc/random.php", "https://uapis.cn/api/v1/random/image?category=acg&type=pc",],添加自定义 API
如果想使用自己的图床，可以添加自定义 API：
apis: [ "https://你的API1.com/random", "https://你的API2.com/random",],系统会按顺序尝试每个 API，第一个失败则切换下一个。
API 要求
- 返回图片 URL
- 或返回图片二进制数据
- 支持 HTTPS
回退图片配置
当所有 API 都失败时，使用回退图片：
fallback: "assets/images/cover.avif",确保这个图片文件存在于 src/assets/images/ 目录下。
文章详情页封面图开关
控制是否在文章详情页显示封面图：
// 显示封面图enableInPost: true,
// 不显示封面图enableInPost: false,显示加载动画
showLoading: true, // 显示加载动画showLoading: false, // 不显示加载动画常见问题
Q: 随机封面图不显示？
- 检查
randomCoverImage.enable是否为true - 检查文章 frontmatter 是否设置
image: "api" - 检查 API 是否可访问
- 检查控制台错误信息
Q: 图片加载很慢？
- 使用加载速度更快的图床 API
- 将常用图片上传到自己的图床
- 开启 CDN 加速
Q: 部分 API 失效？
系统会自动切换到下一个 API，确保至少有一个可用即可。
Q: 如何禁用单篇文章的封面图？
---title: 我的文章image: "" # 不使用封面图---或者设置 image: false
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
相关文章 智能推荐
1
26. SEO 与 RSS 订阅配置指南
博客搭建 博客 SEO 与 RSS 配置教程，包含 RSS 订阅、robots、sitemap、OG 信息和基础搜索引擎收录相关说明。
2
8. 关于页、留言板与赞助页配置指南
博客搭建 博客关于页、留言板和赞助页配置教程，包含页面开关、内容修改、评论显示和赞助方式设置等步骤。
3
24. 文章加密、版权协议与分享海报指南
博客搭建 博客文章高级功能配置教程，包含密码文章、版权协议、文章分享海报和相关文章底部信息等实用功能。
4
10. 导航栏、公告与页脚配置指南
博客搭建 博客导航栏、公告栏和页脚配置教程，包含菜单链接、Logo、公告内容和页脚自定义等常用修改方法。
5
2. 博客首页横幅图片与轮播配置
博客搭建 博客首页横幅图片与轮播配置教程，包含桌面端和移动端图片替换、轮播开关及首页视觉设置。
随机文章 随机推荐
评论区
Hi，欢迎来到 Coldairboy学习笔记。
音乐
暂未播放
0:00 0:00
31
3
5
36,702
0 天
0 天前