参考资料

https://zhuanlan.zhihu.com/p/677556713

搭建后的优化

前面我们已经实现了一个简易版的数字花园，但看着有些不够美观。我期望的页面是如下图所示的样子，该如何实现呢？

首先分析一下，主要包括一下这些部分：

然后怎么实现呢，很简单，在Obsidian的Digital Garden插件里进行对应的设置就行。

数字花园标题和主题的设置

打开Digital Garden插件的设置页面，找到Appearance—>Manage appearance ，参考如下设置

最后点击Apply settings to site，等待一会儿，刷新你的网页即可。

笔记的创建和最近更新信息显示

同样在Manage appearance打开的页面，往下拉，找到Timestamps Settings并作如下配置:

数字花园布局设置

同样在Digital Garden插件的设置页面，找到Global Note Settings —> Manage note settings ，打开笔记设置页面，建议将这个页面的所有设置都打开。

其中Show filetree sidebar是显示左边的文件树；Show local graph for notes是表示开启右侧笔记间的关系图；Show backlins for notes表示开启连接到当前笔记的所有笔记；Enable search表示开启搜索框。

笔记置顶的设置

随着我们笔记的增加，我们希望非常重要的笔记总是在文件树的第一条显示，只需要在我们要置顶的笔记的元数据中新增dg-pinned = true 即可实现该笔记的置顶。

非英文笔记要注意的配置

对于非英文笔记要注意关掉以下配置，不然会出现同一个目录下的多篇笔记，你只能发布一篇到你的数字花园，因为非英文字符无法处理导致路径的冲突，这也是我踩过的一个坑。

自定义配置

这里，我想阐述一下关于笔记成熟度的自定义配置方法。涉及到修改源代码，入门用户可以跳过。在Digital Garden插件里默认提供了四种成熟度的图标来标记每篇笔记，可以通过在笔记中设置dg-note-icon的值0，1，2，3来指定标记的图标(详细可查看这部分的文档说明)。但如果成熟度等级不够，或者想自定义图标该怎么办呢。可遵循如下步骤：

下载前面创建github私有仓库到本地

方法简单，先安装Github Desktop(方便之处在于不需要敲git命令)，然后克隆你的数字花园所在的私有仓库到本地。采用vscode打开该仓库进行后续修改。

找到你所需的图标文件

如果不满意插件所提供的图标，从网上找到合适的svg格式的图标。这里推荐一个我用的网站：https://www.svgrepo.com/。找到喜欢的图标进行下载，大小建议使用205x205px这样效果显示会好很多。把下载好的svg格式的图片复制到仓库源码的：site/img/ 路径下。

修改源码

找到仓库源码site/styles/custom-style.css，在文件中添加如下代码（以成熟度等级为5为例，如果你的不是5，可以适当的增加和删除对应的源码）：

body {
  /***
    ADD YOUR CUSTOM STYLIING HERE. (INSIDE THE body {...} section.)
    IT WILL TAKE PRECEDENCE OVER THE STYLING IN THE STYLE.CSS FILE.
 ***/
  //  background-color: white;
  //  .content {
  //   font-size: 14px;
  //  }
  //  h1 {
  //   color: black;
  //  }

  overflow-x: hidden;
  --note-icon-1: url(/img/你的图标文件.svg);
  --note-icon-2: url(/img/你的图标文件.svg);
  --note-icon-3: url(/img/你的图标文件.svg);
  --note-icon-4: url(/img/你的图标文件.svg);
  --note-icon-fallback: url(/img/你的图标文件.svg); // 默认的图标
  --graph-main: var(--text-accent);
  --graph-muted: var(--text-muted);

}

body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon]::before,
body.filetree-note-icon .filename[data-note-icon]::before,
body.links-note-icon .internal-link[data-note-icon]::before,
body.backlinks-note-icon .backlink[data-note-icon]::before {
  content: " ";
  display: inline-block;
  width: 0.9em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: var(--note-icon-fallback);
}

body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="1"]::before,
body.filetree-note-icon .filename[data-note-icon="1"]::before,
body.links-note-icon .internal-link[data-note-icon="1"]::before,
body.backlinks-note-icon .backlink[data-note-icon="1"]::before {
  background-image: var(--note-icon-1);
}

body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="2"]::before,
body.filetree-note-icon .filename[data-note-icon="2"]::before,
body.links-note-icon .internal-link[data-note-icon="2"]::before,
body.backlinks-note-icon .backlink[data-note-icon="2"]::before {
  background-image: var(--note-icon-2);
}

body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="3"]::before,
body.filetree-note-icon .filename[data-note-icon="3"]::before,
body.links-note-icon .internal-link[data-note-icon="3"]::before,
body.backlinks-note-icon .backlink[data-note-icon="3"]::before {
  background-image: var(--note-icon-3);
}

body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="4"]::before,
body.filetree-note-icon .filename[data-note-icon="4"]::before,
body.links-note-icon .internal-link[data-note-icon="4"]::before,
body.backlinks-note-icon .backlink[data-note-icon="4"]::before {
  background-image: var(--note-icon-4);
}

提交你的代码到github仓库

直接打开Github Desktop，定位到数字花园的仓库，按照如下操作即可。

设置笔记成熟度

然后在每篇笔记中通过给dg-note-icon设置不同的值，实现每篇笔记的成熟度标记。

最后，欢迎您参观我的数字花园，如果你搭建成功，也可以在评论中分享你的喜悦.

参考文章

更多的配置信息，请查看Digital Garden的说明文档：https://dg-docs.ole.dev/。

⚠️ 注意：如果你的数字花园部署在vercel平台上，并且是免费用户，切忌短时间内频繁修改数字花园配置，或短时间内频繁发布笔记。因为vercel对免费用户有部署次数上限，会被平台限制，导致部署失败，让你的数字花园崩溃。