如何设置兼容Gitbook部署的Obsidian笔记横幅？

问题根源 #

Gitbook不识别Obsidian的[[内部图片链接]]语法，也不会自动解析frontmatter里的banner字段；普通Markdown图片受Gitbook默认容器限制，无法延伸至页面边缘。

解决方案 #

1. 替换图片链接格式 + 自定义CSS实现全屏横幅 #

步骤1：修改Markdown中的图片代码

把Obsidian格式的横幅图片，改成带自定义类的普通Markdown图片：

---
banner: "./img/banner.jpg"
---

![笔记横幅](./img/banner.jpg){: .banner}

步骤2：添加Gitbook自定义CSS

在Gitbook项目根目录创建styles/website.css文件，写入以下样式：

/* 全屏横幅样式 */
img.banner {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  display: block;
  object-fit: cover; /* 保持图片比例，自动裁剪多余部分 */
  height: 220px; /* 可根据需求调整横幅高度 */
}

/* 移除内容容器顶部内边距，让横幅顶到页面顶部 */
.book .book-body .page-inner {
  padding-top: 0;
}

步骤3：配置Gitbook加载自定义CSS

在项目根目录的book.json中添加配置（如果没有book.json就新建一个）：

{
  "styles": {
    "website": "./styles/website.css"
  }
}

2. 批量处理笔记（可选，避免手动修改每个文件） #

如果笔记数量多，可以写个Node.js脚本自动将Obsidian的frontmatter banner转换成带样式的图片：

步骤1：安装依赖

npm install gray-matter

步骤2：编写处理脚本（process-banners.js）

const fs = require('fs');
const path = require('path');
const matter = require('gray-matter');

// 替换成你的笔记存放目录
const NOTES_DIR = './your-notes-folder';

fs.readdirSync(NOTES_DIR).forEach(file => {
  if (path.extname(file) !== '.md') return;
  
  const filePath = path.join(NOTES_DIR, file);
  const fileContent = fs.readFileSync(filePath, 'utf8');
  const { data, content: mdContent } = matter(fileContent);

  if (!data.banner) return;

  // 移除Obsidian的[[ ]]语法，提取图片路径
  const bannerPath = data.banner.replace(/^\[\[|\]\]$/g, '');
  // 生成带类的横幅图片代码
  const bannerImg = `![笔记横幅](${bannerPath}){: .banner}\n\n`;
  // 重新组合frontmatter和内容，插入横幅
  const newContent = matter.stringify(mdContent, data).replace(/^---\n---\n/, `---\n---\n${bannerImg}`);
  
  fs.writeFileSync(filePath, newContent, 'utf8');
});

步骤3：运行脚本

node process-banners.js

注意事项 #

• 确保图片路径在Gitbook中可访问：比如img文件夹和笔记文件处于同一层级，或路径配置正确。
• 可根据需求调整CSS中的height、object-fit属性，适配不同横幅图片的显示效果。

内容的提问来源于stack exchange，提问作者gitblanc_