一、插件介绍
名称：Banners
作者：Danny Hernandez
功能：
#### 在笔记顶部显示横幅图#### 支持叠加 `title` 和 `description`#### 支持本地图片或网络链接#### 可拖拽调整位置（可锁定）#### 兼容 Templater 自动化二、下载安装插件
1、下载：
https://gitcode.com/gh_mirrors/ob/obsidian-banners.git
2、解压：
3、社区插件直接安装使用的目录如下：
（可直接下载1,3,4文件）最新发布页面下载main.js, styles.css, 和 manifest.json文件
（可直接社区安装）
4、banner-master(如果下载开元压缩包，则需要自己构建）
1）用到：node.js软件，pnpm
2）终端切换插件目录:
并确认该目录下 有 package.json 文件。
cd 命令或者定位文件夹右键
3）安装依赖：
pnpm install
4）构建插件
pnpm run build
5）6文件夹重命名→以ID为准：
6）重启obsidian并启用插件
三、基础使用
1. 在笔记中添加 Banner
在笔记最顶部写入 Frontmatter：
---
banner: https://picsum.photos/800/200
title: 今日心情
description: 阳光明媚的一天
---💡
banner支持：
- 网络图片：
https://...- 本地图片：
attachments/banner.jpg
2. 切换到阅读视图
- 点击右上角 眼睛图标（Preview Mode）
- 你会看到顶部出现横幅图 + 文字
3.CSS调整
创建snippets文件夹，创建CSS文件，写入下面代码：
/* 1. 缩小 Banner 容器的底部外边距 */
.obsidian-banner-wrapper {
margin-bottom: -0px !important; /* 保留与属性面板的紧凑感 */
margin-top: 0px !important; /* 正文与笔记属性之间距离，数值可调整 */
}
/* 2. 缩小笔记属性面板的上下间距（块内调整） */
.metadata-container {
margin-top: 0 !important;
margin-bottom:0!important;
padding-top: 30px !important;
padding-bottom: 0px !important;
}
/* 阅读模式下的文件名 */
.markdown-preview-view .inline-title {
position: relative !important;
color: white;
z-index: 999 !important; /* 高优先级，确保不被任何元素覆盖 */
margin-bottom: 10px !important; /* 文件名与 Banner 保持少量间距，不拥挤 */
}
/* 隐藏 Banner 下的属性 */
.markdown-preview-view:has(.obsidian-banner-wrapper) .metadata-container {
display: none;
}
