花园配置办法

选择理由

忽略初始设置，不必接触 Git。发布一些笔记更容易，而不是将整个内容库发布到您的数字花园。

通过插件与 Obsidian 集成。同时可以利用来自 Obsidian 社区的令人难以置信的插件和主题，支持如 Dataview、Excalidraw 和 Obisidian 主题等特定功能。

SEO 友好，Lighthouse 评分优秀
Lighthouse评分

快速配置

建议参考项目源码，自行按照文档进行配置

下载并安装 Obsidian 中的社区插件 Obsidian-Digital-Garden。
创建一个 GitHub 帐户。
还需要一个 Vercel 或者 Netlify 帐户。
打开此仓库，然后单击 “Deploy to Vercel” 按钮。

这应该会打开 Vercel 并在您的 GitHub accont 中创建此存储库的副本。给它起一个合适的名字，比如 'my-digital-garden'。按照 Vercel 中的步骤将您的网站发布到 Internet。

接下来，您需要为您的 GitHub 帐户创建访问令牌。这充当一种密码，以便插件可以代表您向 GitHub 存储库添加新笔记。登录到 GitHub 后转到此页面。应该已经应用了正确的设置。（如果您不想每隔几个月生成一次，请选择 “No expiration” 选项。单击“Generate token（生成令牌）”按钮，然后复制您在下一页上显示的令牌。

更安全的选择

GitHub 最近推出了一项新的 beta 功能，您可以在其中定位令牌有权访问的存储库。这是目前使用插件最安全的方式。有关如何生成此令牌的详细信息，请参阅精细访问令牌。

打开 Obsidian 和 Digital Garden 插件的设置，填写您的 GitHub 用户名、仓库名以及您在第 3 步中创建的注释，最后粘贴您的令牌。

现在，让我们发布您的第一篇笔记吧！

在 Obsidian 中创建新笔记，向笔记添加两个新属性：

dg-home 设置告诉插件这应该是您的主页或进入您的数字花园的入口。（它只需要添加到一个注释中，而不是您将发布的每个注释中）。

dg-publish 设置告诉插件应该将此注释发布到您的数字花园。没有此设置的注释将不会发布。（换句话说：您发布的每个注释都需要此属性。）

在 Windows/Linux 上按 CTRL+P（在 Mac 上按 CMD+P）打开命令面板，然后找到“Digital Garden：发布单个笔记”命令。按 Enter 发布即可。

转到您应该在 Vercel 上找到的站点 URL。如果尚未显示任何内容，请等待片刻，然后刷新。您的注释现在应该显示出来。

主题配置

Appearance → Manage appearance → theme

添加自定义组件

模板的 1.39.0 版本引入了一种向您的网站添加自定义组件的新方法。以前，在模板中进行的任何定制都会在您更新模板时被覆盖，如果您想要最新的更新，这将很难维护。

现在，模板具有插槽的概念，您可以在其中添加任何您想要的内容。无论是 JavaScript、HTML 还是 CSS。

可用插槽
注释
命名空间
这些是目前支持笔记的命名空间：

common
将在主页和所有笔记页面上添加
index
将在主页上添加
notes
将添加到所有笔记页面上
slot
这些是支持的插槽：

head
将被放置在 html 的 <head> 标签内部
header
将放置在页面顶部，在 <header> 标签中，如果启用了标签和注释标题，则放置在它们之后
beforeContent
将放置在页面内容之前
afterContent
将放置在页面内容之后
footer
将放置在页面底部
文件树
命名空间
文件树
插槽
标题前
标题后
Sidebar
命名空间
文件树
插槽
顶部
底部
它是如何工作的？
文件应按照以下格式放置：

src/site/_includes/components/user/<namespace>/<slot>/<filename>.njk

这些组件是用 Nunjuck 编写的，这是一种用于 HTML 和 Javascript 的模板语言。如果你不知道它也没关系。你不需要使用任何特性。简单地写一些原味 HTML 就可以了。如果你想添加一个脚本，请确保把它放在 script 标签里面：

<script>
	console.log("hello")
</script>

重要的是所使用的文件扩展名是"njk"。

如果你不想将脚本内联，而是放在单独的 js 文件中，你可以将它们放在 src/site/scripts 文件夹。然后，你可以在你的 njk 文件中这样引用它们：

<script src="/scripts/your-script.js" />
示例
例如，要在每个页面的标题和标签之后添加常见内容，文件应放置在以下目录中：

src/site/_includes/components/user/common/header/

假设你在某个文件（例如 comment.njk）中实现了一个评论系统，并且只想在笔记页面中使用它，请将其放置在以下路径：

src/site/_includes/components/user/notes/footer/comment.njk

自定义用户数据
如果你想在你的任何自定义 .njk 文件中计算一些数据，你可以修改 src/helpers/userUtils.js 文件。如果你有最新版本的模板，它应该看起来像这样：

// Put your computations here.

function userComputed(data) {
  return {};
}

exports.userComputed = userComputed;

添加到 userComputed 函数返回的对象中的任何属性，都可以在你的 .njk 文件中使用。例如，以下 userUtils.js 文件：

// Put your computations here.

function userComputed(data) {
return {
city: 'Bergen',
weather: ["rain", "rain", "rain"]
};
}

exports.userComputed = userComputed;
..应该让你的模板中提供城市和天气属性，如下所示：
CleanShot 2023-02-17 at 17.19.14.png

动态 CSS/SCSS
动态 CSS/SCSS
将任何 css/scss 文件放置在 src/site/styles/user 下，都会自动链接到头部，且在所有其他样式之后。这意味着在此处添加的样式将优先于其他所有样式。

文件顺序
请记住，给定插槽的路径始终按文件名排序。因此，如果顺序很重要，你应该命名文件以保持字母顺序。

实际案例
要开始并查看一个实时示例，请查看 GitHub 用户 uroybd 的花园 topobon。他使用组件添加了一个主题切换器和 Disqus 评论部分等。您可以查看他是如何实现的这里。

问题与缺陷

未能成功渲染 Dataview 内联数据查询，Issue Discussion
未支持 Dataview 的 Calendar 渲染
未支持 Excalidraw 的双链等其他功能，Issue Discussion #132

其他解决方案：
Obsidian Publish
Obsidian-webpage-export
Welcome to Quartz 4
11 Open-source Free Tools to build your own Digital Garden