维基百科风格logo

经验分享
1

来自于Reddit https://www.reddit.com/r/ObsidianMD/comments/1h05p2s/add_a_logo_or_avatar_to_your_obsidian_vault/

/* 
Last updated 2024-11-18
This solution is provided by TfT Hacker. Learn more at https://tfthacker.com
*/

/* Embed an image to the right of the div */
div[data-path="0-Vault-Logo"] * {
  display: none;
}

div[data-path="0-Vault-Logo"] {
  order: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 15px;
  width: 100%;
  min-height: 200px;
  border-radius: 15px;
  border: 2px solid rgb(199, 106, 40);

  background-image: url('https://patchwiki.biligame.com/images/cassell/9/93/c70gnextqjrucata4trxfhg1aou6lqp.png');
}

用ai适配了一下notebook（obsidian美化折腾期的产物 :joy:）

/* 
适配Notebook Navigator - 边框颜色与图中圆形边框一致
宽度与下方文件夹对齐，保留所有功能
*/

/* 通用基础样式：所有目标文件夹共享配置 */
.nn-navitem[data-path="词典术语"],
.nn-navitem[data-path="书"],
.nn-navitem[data-path="项目文档"],
.nn-navitem[data-path="灵感收集"],
.nn-navitem[data-path="模板示例"] {
  position: relative;
  overflow: hidden;
  width: 100%; /* 与下方文件夹宽度一致 */
  margin: 0 0 8px;
}

/* 文字样式优化 */
.nn-navitem[data-path="词典术语"] .nn-navitem-content,
.nn-navitem[data-path="书"] .nn-navitem-content,
.nn-navitem[data-path="项目文档"] .nn-navitem-content,
.nn-navitem[data-path="灵感收集"] .nn-navitem-content,
.nn-navitem[data-path="模板示例"] .nn-navitem-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-weight: 500;
  width: 100%;
  padding: 8px 16px;
}

/* 背景图通用样式：椭圆形边框 */
.nn-navitem[data-path="book"]::before,
.nn-navitem[data-path="书"]::before,
.nn-navitem[data-path="音乐"]::before,
.nn-navitem[data-path="随笔"]::before,
.nn-navitem[data-path="模板示例"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 500px; /* 椭圆形边框 */
  z-index: 1;
  box-sizing: border-box;
}

/* 1. 词典术语 文件夹配置（边框颜色与图中圆形一致） */
.nn-navitem[data-path="book"]::before {
  border: 2px solid rgb(230, 126, 34); /* 橙色边框，与图中圆形边框颜色匹配 */
  background-image: url('https://patchwiki.biligame.com/images/cassell/9/93/c70gnextqjrucata4trxfhg1aou6lqp.png');
}

/* 2. 笔记教程 文件夹配置（如需统一风格可同步修改） */
.nn-navitem[data-path="书"]::before {
  border: 2px solid rgb(230, 126, 34); /* 统一为图中圆形边框色 */
  background-image: url('https://patchwiki.biligame.com/images/lzkp/2/2a/jv44r5c8i5njnfuk5tkv3wf7jl2rl58.png');
}

/* 3. 项目文档 文件夹配置（如需统一风格可同步修改） */
.nn-navitem[data-path="音乐"]::before {
  border: 2px solid rgb(230, 126, 34); /* 统一为图中圆形边框色 */
  background-image: url('https://patchwiki.biligame.com/images/lzkp/6/61/kt32ykksg8077ki6k3dsnr5qe1tcnw6.png');
}

/* 4. 灵感收集 文件夹配置（如需统一风格可同步修改） */
.nn-navitem[data-path="随笔"]::before {
  border: 2px solid rgb(230, 126, 34); /* 统一为图中圆形边框色 */
  background-image: url('https://patchwiki.biligame.com/images/lzkp/7/7b/7e7ycawsyuxqh3o76sgmsv48yhw05bp.png');
}

/* 【新增文件夹模板】（默认使用图中圆形边框色） */
.nn-navitem[data-path="模板示例"]::before {
  border: 2px solid rgb(230, 126, 34); /* 与图中圆形边框颜色一致 */
  background-image: url('https://example.com/your-image-url.png');
}

/* 响应式调整 */
@media (max-width: 600px) {
  .nn-navitem[data-path="词典术语"]::before,
  .nn-navitem[data-path="书"]::before,
  .nn-navitem[data-path="音乐"]::before,
  .nn-navitem[data-path="随笔"]::before,
  .nn-navitem[data-path="模板示例"]::before {
    border-radius: 300px;
  }
}

@media (min-width: 800px) {
  .nn-navitem[data-path="词典术语"]::before,
  .nn-navitem[data-path="书"]::before,
  .nn-navitem[data-path="音乐"]::before,
  .nn-navitem[data-path="随笔"]::before,
  .nn-navitem[data-path="模板示例"]::before {
    border-radius: 600px;
  }
}