如何配置 Obsidian Digital Garden：从基础设置到高级定制

如何配置 Obsidian Digital Garden：从基础设置到高级定制

【免费下载链接】obsidian-digital-garden 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-digital-garden

Obsidian Digital Garden 是一款能将你的 Obsidian 笔记库转变为精美网站的免费开源插件。它让你可以选择性地分享自己的想法，同时保持私人笔记的私密性，无需支付月费，完全由你掌控。

准备工作：快速了解 Obsidian Digital Garden

Obsidian Digital Garden 不同于传统博客，它是一个不断生长和连接的想法集合。只有你明确标记为 dg-publish: true 的笔记才会被发布，确保私人笔记不会泄露。

该插件支持多种内容格式，包括基本 Markdown 语法、链接、Obsidian Bases、Dataview 查询、Canvas、嵌入笔记、Excalidraw 绘图、图片、PDF、Callouts、代码块、MathJax、高亮文本、脚注、Mermaid 图表和 PlantUML 图表等。

在导航与发现方面，它提供了快速搜索、文件树导航、反向链接、本地图、全局图、目录和悬停链接预览等功能。

基础配置：10 分钟搭建个人数字花园

所需账号准备

1. 你需要一个 GitHub 账号，如果没有，可以在 GitHub 注册页面 创建。
2. 还需要一个 Vercel 账号，可使用 GitHub 账号在 Vercel 注册页面 注册。

部署网站仓库

打开 digitalgarden 仓库，点击蓝色的“Deploy to Vercel”按钮。这将在 Vercel 中打开，并在你的 GitHub 账户中创建该仓库的副本。给它一个合适的名称，如“my-digital-garden”，按照步骤将你的网站发布到互联网。

创建访问令牌

为了让插件能够代表你向仓库添加新笔记，需要创建访问令牌。使用 Fine grained personal access token，设置如下：

• 令牌名称：YYYY-Digital Garden
• 过期时间：自定义/一年/任意你想要的时间
• 描述：Publishing content to the digital garden.
• 资源所有者：你自己
• 仅选择仓库：选择你的花园仓库
• 权限（仅需两个）：
  • 内容：Access: Read and write
  • 拉取请求：Access: Read and write

点击“Generate token”按钮，复制生成的令牌。

配置 Obsidian 插件

在 Obsidian 中打开设置菜单，找到“Digital Garden”的设置。前三个设置是插件工作所必需的：

• 填写你的 GitHub 用户名
• 填写步骤 3 中创建的笔记仓库名称
• 粘贴步骤 4 中创建的令牌

其他选项是可选的，可以保持默认。

发布第一篇笔记

创建一个新笔记，在文件顶部添加以下内容：

---
dg-home: true
dg-publish: true
---

dg-home 设置告诉插件这应该是你的数字花园的主页或入口（只需添加到一个笔记中）。dg-publish 设置告诉插件此笔记应发布到你的数字花园（每个要发布的笔记都需要此设置）。

打开命令面板（Windows/Linux 按 CTRL+P，Mac 按 CMD+P），找到“Digital Garden: Publish Single Note”命令并按回车。

前往 Vercel 仪表板 找到你的网站 URL，稍等片刻刷新，你的笔记就会出现。

替代方案：无需 GitHub 的 Forestry.md setup

如果你更喜欢无需管理 GitHub 仓库的简单设置，可以使用 Forestry.md 托管服务：

1. 在 forestry.md 创建账户
2. 从 Forestry.md 仪表板获取花园密钥
3. 在 Obsidian 中，打开 Digital Garden 设置，在 Forestry.md 部分输入花园密钥
4. 直接开始发布笔记，无需 GitHub 或 Vercel 设置

高级定制：打造个性化数字花园

CSS 定制

任何放置在 src/site/styles/user 下的 CSS/SCSS 文件都会自动链接到头部，且样式会优先于其他样式。模板公开了许多可覆盖的 CSS 变量，包括颜色、排版、间距和布局以及组件特定样式。

自定义组件

通过在 src/site/_includes/components/user/ 中创建 Nunjucks 模板，可以向花园添加自定义组件。这些组件可包含在笔记或布局中，以添加交互元素、自定义小部件或专门的内容显示。

本地导出

你可以将花园导出到本地文件夹，而不是发布到 GitHub。这对于自托管、本地预览花园或在没有 Vercel/Netlify 的情况下运行网站很有用：

1. 在插件设置中，滚动到“Local Export”并设置本地 digitalgarden 文件夹的路径
2. 打开命令面板并运行“Export Garden to Local Folder”
3. 在 digitalgarden 文件夹中运行 npm run dev 以在本地预览网站

模板更新：保持花园最新

在插件的设置菜单中，有一个名为“Site Template”的设置，带有一个“Manage site template”按钮。点击此按钮会打开一个弹出窗口，其中有“Update site to latest template”设置和“Create PR”按钮。每当数字花园模板有更新时，此按钮可用于更新你的网站。它将在你的仓库中创建一个带有更改的新分支，并向你的主分支创建一个拉取请求。

如果使用了“Deploy to Vercel”按钮，Vercel 机器人将构建网站的预览版本，你可以访问该版本以查看更改是否包含任何破坏性更改。准备好后，可以使用拉取请求页面上的“Merge pull request”按钮将更改合并到主分支并使更改生效。

本地开发：深入定制花园

该插件在 src/dg-testVault 包含一个测试库，建议用于本地开发：

1. 克隆此仓库：git clone https://gitcode.com/gh_mirrors/ob/obsidian-digital-garden
2. （为获得最佳兼容性，使用 node 版本管理器并运行 nvm install && nvm use）
3. 使用 npm install 安装依赖
4. 使用 npm run dev 运行
5. 将 src/dg-testVault 中的库打开到 Obsidian 中

要将测试库与 github 一起使用，将测试仓库值添加到 .env 文件中，包含 GitHub 仓库、令牌、用户名等信息。

本地开发工作流如下：

1. 在本仓库中运行 npm run dev（构建插件，复制到测试库）
2. 在 Obsidian 中打开测试库，运行“Export Garden to Local Folder”
3. 在 digitalgarden/ 文件夹中运行 npm run dev（热重载服务花园）

请注意，此存储库使用 prettier 和 eslint 来强制执行代码格式和样式，建议将这些安装到你的 IDE 中以进行自动格式化和错误突出显示。

【免费下载链接】obsidian-digital-garden 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-digital-garden