quartz/content/Notes/工具/笔记/使用Quartz部署obsidian.md
wangzipai 7e21c9b514
[PUBLISHER] Merge #56
* PUSH NOTE : 使用Quartz部署obsidian.md

* DELETE FILE : content/Obsidian/OCPP/Everest/EVerest-core.md

* DELETE FILE : content/Obsidian/OCPP/Everest/EVerest-framework.md

* DELETE FILE : content/Obsidian/OCPP/Everest/EVerest-timer.md

* DELETE FILE : content/Obsidian/后端/spring.md

* DELETE FILE : content/Obsidian/后端/动态代理.md

* DELETE FILE : content/Obsidian/后端/反射机制.md

* DELETE FILE : content/Obsidian/工具/AI/使用chatpdf辅助翻译.md

* DELETE FILE : content/Obsidian/工具/flac批量转换成mp3.md

* DELETE FILE : content/Obsidian/工具/笔记/Obsidian配置.md

* DELETE FILE : content/Obsidian/工具/笔记/dataview的简单使用.md

* DELETE FILE : content/Obsidian/工具/笔记/使用Quartz部署obsidian.md

* DELETE FILE : content/Obsidian/工具/笔记/卢曼的卡片盒笔记法:Zettelkasten Method.md

* DELETE FILE : content/Obsidian/环境搭建/wsl/CitrineOS安装.md

* DELETE FILE : content/Obsidian/环境搭建/调试/MPU版本烧写.md

* DELETE FILE : content/Obsidian/编程模型及方法/DAO.md

* DELETE FILE : content/Obsidian/编程模型及方法/MVC.md

* DELETE FILE : content/Obsidian/编程模型及方法/ORM.md

* DELETE FILE : content/Obsidian/编程模型及方法/依赖注入.md

* DELETE FILE : content/Obsidian/编程语言/Java/JDBC.md

* DELETE FILE : content/Obsidian/踩过的坑/以太网BUG解决过程记录.md

* DELETE FILE : content/Obsidian/踩过的坑/客户平台无法连接问题.md

* DELETE FILE : content/_index.md
2025-04-02 11:36:26 +08:00

260 lines
20 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
date: 2024-10-29 12:11
updated: 2024-12-05 17:23
tags:
- 笔记
- 分享
share: "true"
link: "false"
publish: true
---
最近想整一个obsidian的笔记分享[参考](https://lazyjoy.12123123.xyz/%E5%85%B6%E5%AE%83%E8%B5%84%E6%BA%90/Obsidian/Quartz%E4%B8%8EEnveloppe%E6%8F%92%E4%BB%B6%E7%BB%93%E5%90%88%E5%8A%A9%E5%8A%9BObsidian%E6%90%AD%E5%BB%BA%E6%95%B0%E5%AD%97%E8%8A%B1%E5%9B%AD/)
## Quartz部署
Quartz是一款快速静态站点生成器可将Markdown内容转换为功能齐全的网站。Quartz 4现在使用基于节点的静态站点生成过程这应该会带来更有用的错误消息和更流畅的用户体验。Quartz 4使用名为JSX的JavaScript语法扩展它允许您在JavaScript中编写看起来像HTML的布局代码这更容易理解和维护。Quartz最大的特点是与Obsidian结合良好原生支持Obsidian的双链特性在Obsidian中编辑的笔记几乎可以无改动直接发布到Quartz中。
### Quartz相关信息
Quartz相关信息
- 项目地址:[GitHub - jackyzha0/quartz: a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites](https://link.zhihu.com/?target=https%3A//github.com/jackyzha0/quartz)
- 官方文档:[Welcome to Quartz 4](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/)
### 创建项目分支
在Github中fork[原项目](https://link.zhihu.com/?target=https%3A//github.com/jackyzha0/quartz)在自己的Github中创建原项目的分支。也可以使用模板生成新的存储库fork可以直接在github上同步原项目的更新
### 部署上线
[官方文档](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/hosting)很贴心地介绍了在各种免费提供静态网站托管服务的服务商上部署Quartz页面的流程。这里以[Cloudflare Pages](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/hosting%23cloudflare-pages)为例介绍下配置流程:
1. 登录[Cloudflare仪表板](https://link.zhihu.com/?target=https%3A//dash.cloudflare.com/)。
2. 在左侧帐户主页中,选择**Workers 和 Pages** > **创建** > **Pages**> **连接到Git**
3. 选择刚才在自己Github账户中创建的分支存储库点击**开始设置**,根据提示配置以下信息(以官方文档为准):
| 配置选项 | 值 |
| ------ | ---------------- |
| 生产分支 | v4即存储库中的主分支 |
| 框架预设 | 无 |
| 构建命令 | npx quartz build |
| 构建输出目录 | public |
其它参数保持默认即可。点击**保持并部署**。
![image.png](https://raw.githubusercontent.com/wangzipai/my_ob_pic/main/20241029121413.png)
Cloudflare应该会在大约一分钟内为我们的网站部署一个版本。然后每次将Quartz更改同步到GitHub时我们的网站都应该更新。
- Cloudflare Pages默认执行浅层克隆因此如果您依赖 `git` 作为时间戳,建议您在构建命令的开头添加 `git fetch --unshallow &&` (例如 `git fetch --unshallow && npx quartz build` )。
- 这里的时间戳主要用于表示笔记的**发布/修改**时间。在**不修改构建命令**并且**笔记中不含指示笔记日期的元数据**时,由于构建过程中拉取的文件的时间戳会被置为构建时的时间,这个时间会被拿来作为笔记的发布日期,导致文章的发布时间变为最后一次部署的时间,违背了使用者的本意。因此在不使用元数据表示发布日期的情况下,可以通过这个操作临时回避这个问题。
- 可以通过指定额外的元数据来表示笔记的发布时间等不同的属性,具体参考[官方文档](https://link.zhihu.com/?target=https%3A//developers.cloudflare.com/pages/platform/custom-domains/)。
可选的,如有有自己的域名,可以为部署的网站绑定自己的域名,在项目页面下**自定义域**标签中进行添加,具体操作请查看[Cloudflare的文档](https://link.zhihu.com/?target=https%3A//developers.cloudflare.com/pages/platform/custom-domains/)。
### 部署后说明
部署完毕后,直接访问生成的网站,会发现`404 not found`因为我们还没有向网站中放入笔记内容。这里有必要介绍一下Quartz预设的使用方式和工作流。
打开存储仓库,在根目录中,存在一个名为`content`的文件夹,这个文件夹便是==存放个人笔记的目录==,是笔记的**根目录**。官方预设的工作流是,我们将存储仓库拉取到本地后,将`content`的文件夹作为Obsidian的仓库根目录并在软件中新建或修改笔记Quartz将所有笔记按照此目录下的结构进行发布当然可以通过设置元数据指定笔记在网站上的标题或要求特定笔记不在网站上显示。
Obsidian充当了Quartz的功能强大的内容编辑器。 在Quartz存储库的`.gitignore`文件中,可以发现其中有`.obsidian`和`private`前者是忽略Obsidian配置及插件相关的文件后者大概是暗示我们可以将一些私密的笔记放在`private`目录下避免在上传到Github上时不小心把隐私相关的笔记也传上去了防止在存储库具有公开访问权限时引起不必要的麻烦。 此种工作流要求我们把笔记空间当作Quartz项目的一部分并且笔记的结构和网站上保持一致。
此外,该项目在本地[安装](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/upgrading)、[编译](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/build)、[部署](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/hosting%23self-hosting)以及本地与远程存储库之间进行[同步](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/setting-up-your-GitHub-repository)以及从官方存储库[获取代码更新](https://link.zhihu.com/?target=https%3A//quartz.jzhao.xyz/upgrading)方面做的比较完善,感兴趣的可以参考官方文档在本地进行尝试,本文工作流涉及不到本地处理,如果不需要对项目代码进行较大修改,可以暂时略过这方面的操作。 借助Obsidian插件Enveloppe可以实现笔记库与网站的分离。
> [!NOTE|+aside-r] Enveloppe插件
> 使用[quartz-syncer](https://github.com/saberzero1/quartz-syncer)发布也可以
## Enveloppe配置
### 说明
插件相关信息:
- 插件名Enveloppe
- - 项目地址:[GitHub - Enveloppe/obsidian-enveloppe: Enveloppe helps you to publish your notes on a GitHub repository from your Obsidian Vault, for free!](https://link.zhihu.com/?target=https%3A//github.com/Enveloppe/obsidian-enveloppe) 
- - 官方文档:[Home](https://link.zhihu.com/?target=https%3A//enveloppe.github.io/)
Enveloppe是一款Obsidian的第三方插件原名Github Publisher貌似是原作者为了避免被误解为是由Obsidian或者Github团队制作的不过只是改了下名字功能没有发生变化。
该插件的主要用途是==将本地的笔记进行处理发送到静态网站托管在GitHub上的存储库中实现对分享内容的“投递”==。配合Github> Action在存储库内容发送变化时自动触发编译操作生成对应的静态页面从而实现一键分享笔记的效果。不过Envelope只负责将笔记进行一定处理后上传到Github中的指定目录下不关心用户以什么样的方式组织网站网站的源码及所支持的功能由用户完全把控。理论上只要能把笔记能转换成纯markdown文件就可以通过Enveloppe将笔记一键发送到任意一种支持markdown语法的静态网站中去。 前文我们已经搭建了Quartz数字花园下面就通过对Enveloppe进行配置实现将笔记完美发布到Quartz中去。
> 注意不要直接在网站的存储库中使用vault此插件不适用于此类工作流。
下文或者官方文档中所提的文档属性、元数据、frontmatter等均为同一概念请提前在**设置**-**核心插件**中,开启**文档属性视图**。
![image.png](https://raw.githubusercontent.com/wangzipai/my_ob_pic/main/20241029123501.png)
### Github Configuration
此部分的详细说明参考[官方文档](https://link.zhihu.com/?target=https%3A//enveloppe.github.io/Settings/Github)。
- API TypeFree/Pro/Team (default)。
- - GitHub usernameGithub登录的账户名。
- Repository name静态网站的存储库名字。
- GitHub token具有操作存储库权限的token[点此生成](https://link.zhihu.com/?target=https%3A//github.com/settings/tokens/new%3Fscopes%3Drepo%2Cworkflow)。其中,**scopes**保持链接默认选中的即可,**Expiration**设置过期时间,如果不想定期更换,可以选择**No expiration**。
- Main branch上传笔记的分支默认为main目前Quartz的主分支是**v4**。
- GitHub Workflow此标题下的选项保持默认即可。
![image.png](https://raw.githubusercontent.com/wangzipai/my_ob_pic/main/20241029124233.png)
### File paths
此部分的详细说明参考[官方文档](https://link.zhihu.com/?target=https%3A//enveloppe.github.io/Settings/Upload)。
- File tree in repository推荐选**Obsidian Path**,保持本地笔记路径结构。如果想全部手动指定路径,可以选择 property key。
- Root folder远程存储库中存放笔记的根目录这里填**content**。
- Set the key where to get the value of the filename可以通过设置自定义元数据指定上传后文件的名字默认使用title为键。**_可开可不开_**。
- Apply edit on the folder path or the filename (automatically):通用的路径和文件名替换规则,有的时候本地目录结构较复杂,而分享到远程存储库时没必要保持原有结构,可以使用此功能将复杂的路径映射到简单的路径上。注意此处一般是设置通用替换规则的,如果仅要特别指定某个文件的路径,可以使用其它方式实现,参考下文。**_可根据实际需求添加规则_**。
- Folder note可以为目录指定笔记。在Quartz中每个目录下的`index.md`文件会被当作目录笔记。开启该选项后,在上传笔记时把与目录同名的笔记自动更名为`index.md`(也可以指定修改后的文件名)。**_可开启也可以通过其它方式手动指定_**,参考下文。
- Automatically add the "title" key with the file name开启Folder note选项后由于上传的文件名被改为`index.md`笔记的默认标题也会变为index开启此选项可以将原本的文件名添加到元数据中让笔记在网站上可以正确显示。
- Auto clean up自动从远程存储库中删除未发布的笔记在笔记改名或者取消分享后很方便。如果远程存储库中的所有笔记只通过本地的Enveloppe插件进行分享**没有其它途径上传的笔记时****_可以推荐开启_**。
- Excluded files and folder排除的文件或文件夹在清理时不会删除远程存储库中对应的目录或文件。我暂时没有特别排除的目录或文件所以没填。
- Self-cleaning of attachments删除笔记时自动删除对应的附件。**_可以开启_**,但是要注意多个笔记共享同一附件时可能会引发问题,使用时特别注意一下即可。
### Content
此部分的详细说明参考[官方文档](https://link.zhihu.com/?target=https%3A//enveloppe.github.io/Settings/Content)。这些选项不会更改Obsidian Vault中文件的内容但会更改GitHub中文件的属性。
#### Links
把 `links: false` 放在笔记的元数据中可以防止链接被转换并保留alt文本(或文件名)。
- Internals links开启后会将内链的路径转换为相对路径。使用dataview插件生成链接的话必须开启此选项。**_推荐开启_**但是开启后需要修改Quartz中相关配置确保笔记之间跳转行为正常。
- Convert internal links pointing to unpublished notes对于指向的没有发布的文件是否进行链接转换关闭后只以链接的形式显示未分享文件的文件名。_**保持关闭即可**_开启的话也只会跳转到404页面。如果链接指向的未发布文件也是有计划发布的对于这种场景建议开启。
- UnlinkConvert internal links pointing to unpublished notes选项保持关闭时才能设置开启后会把未发布的文件链接形式显示的文件名的链接格式去掉以纯文本的形式显示文件名。
- `[[Wikilinks]]` to `[MDlinks](links)`开启后将双链格式的链接转换为传统markdown格式的链接。由于Quartz支持双链格式**_保持关闭即可_**。对于不支持双链的网站来说,开启此选项非常有用。
- Sluglify anchor in markdown linksmarkdown格式链接内容转换可以选择将空格和非英文字符转换为兼容的格式。obsidian中不太会用到markdown链接可以不用管。
#### Main text
- Markdown hard line break严格换行模式在标准markdown格式中必须两个换行才能实现分段。obsidian默认是不开启此模式的开启后自动帮你转换在使用严格换行模式的网站中兼容性会更好。Quartz可以通过配置关闭严格换行模式参考下文。为了与obsidian中的渲染效果保持统一_**我选择关闭此选项并且在Quartz配置中关闭严格换行模式**_。
- Dataview装了Dataview插件后才会显示此选项。将Dataview查询转换为markdown。_**强烈建议开启**_。
- Text replacer可以添加自定义的文本替换规则比如通过正则将一些隐私文本替换掉不过我没有此类需求没有配置。
#### Tags
Quartz对Obsidian的tag支持较好此部分内容保持默认即可。
### Attachment & embeds
此部分的详细说明参考[官方文档](https://link.zhihu.com/?target=https%3A//enveloppe.github.io/Settings/Embed)。
Send linked files发送被链接的文件**_保持开启_**,发布笔记时会自动上传链接的笔记和媒体文件。
> 注意:被链接的文件如果是笔记的话,只有符合设置的分享条件(标记为分享的笔记)才会被上传。
#### Attachments
- Transfer attachments发送附件**_开启_**。
- Structure使用本地Obsidian的附件目录结构**_开启_**。关闭的话需要手动设定上传存储库中媒体文件的路径,对于一些将静态资源和博客内容分离的网站系统来说比较有用。
后面的一些选项可以不用管,有需求参考官方文档配置即可。
#### Embed notes
- Transfer embedded notes发送内嵌笔记只有被设置为可分享的笔记才会被发送**_开启_**。
- Change embed markup更改嵌入笔记的行为因为Quartz完全支持Obsidian的嵌入语法这里保持**_No change_**即可。
### Plugin settings
此部分的详细说明参考[官方文档](https://link.zhihu.com/?target=https%3A//enveloppe.github.io/Settings/Plugin)。
#### Sharing config
- Share all files允许在不使用共享标记的情况下自动发送每个文件除非它们被排除在外。启用后即为黑名单模式可以排除名称以DRAFT开头的所有文件。**_建议关闭_**如有黑名单模式需求个人建议用Quartz官方推荐的工作流。
- Share key分享标记为要发布的笔记设置元数据信息**_默认的键为share_**,即在文档属性中设置键值对`share: true`的笔记才会被发送到远程存储库。
- Excluded folders排除文件夹列表即使在排除文件夹内的笔记中将分享属性设置为 `true` ,它们也不会被共享。按需配置,适合排除特别隐私的文件夹。
- Set of options我暂时没有搞清楚应该用不到。
#### Menu
该模块是在界面中添加分享笔记选项菜单的按需设置不设置可以通过命令执行或者使用cmdr插件自定义按钮执行。
#### Link building & copy
这一部分主要负责为发布的笔记生成分享链接并复制到剪切板中。注意此处的生成链接是指按照一定规则计算出所分享的笔记链接计算规则需要和你所部署的网站在发布笔记时生成链接的规则一致才有使用意义。Quartz默认是按照分享的路径并对特殊字符进行处理产生链接的此处可以稍微设置下便可与Quartz的笔记链接保持一致。
- Copy link开启后分享单个链接后会自动将链接复制到剪切板中_**建议开启**_。
- Base link笔记网站的域名填写服务商为你分配的域名或者你自己绑定的域名地址。
- Deleting part of the link删除生成的链接中多余的部分使用Quartz的话填写**_content,index.md_**。
- Encode to URI_**可开可不开**_开启的话网址中的中文和空格都会被编码。
- Link slugify**_Disiable_**。
- Add a text transformation to the URL添加自定义的转换规则我添加的如下
| 匹配规则 | 替换内容 |
| -------- | ---- |
| /.\w+/$/ | |
| | - |
解释:第一个规则是去掉文件末尾的拓展名和斜杠,(替换内容为空);第二个规则是将路径中的空格替换为`-`。 注意如果开启了URI编码则空格应该改为`%20`。
- Add a command to copy the link of the note (need reloading the plugin to take effect):增加复制链接命令,**_建议开启_**,需要重启生效。
#### Others
- Show what files are edited, added, or deleted after uploaded上传完毕后显示详细面板**_可以开启_**,显示内容更详细。
- Save tab开启后下次打开插件会处在上传关闭时的页面**_可开可不开_**。
#### Logs
调试或反馈问题用,不用管。
### 简易使用说明
- 写好笔记后,在想要分享的笔记的文档属性区,添加键值对`share: true`,然后`ctrl+P`打开命令面板,执行`Upload single current active note`命令即可发布。
- 笔记发生修改后,执行`Refresh all published note`检查发生修改的笔记并上传。
- 启用Auto clean up功能后执行`Purge depublished and deleted files`可删除撤销发布的笔记。有的时候可能删不了,就需要手动去远程仓库中删除。
- 对于已经发布的笔记,想要复制链接分享给他人,打开文件后执行`Create a link to this note`,粘贴发送给他人即可。
其它命令的用法可参考[官方文档](https://link.zhihu.com/?target=https%3A//enveloppe.github.io/Commands)。
## 上传首页
此时访问会发现还是提示404这是因为还没有上传首页的原因。
在任意目录下新建如下文档命名为index.md。输入一下内容
```text
---
share: true
path: content
en-filename: index
title: 首页
created: 2024-09-13T14:36:50.000+08:00
updated: 2024-09-23T15:56:30.292+08:00
---
这是首页内容。
```
## quartz配置修改
### 修改链接处理
此时点击文章中的双链会发现跳转到404页面。通过url可以看到这是因为链接多了一个文件夹。可以通过在`quartz.config.ts`修改链接处理来解决这个问题。
此插件解析链接并处理它们以指向正确的位置,详细说明参考[官方文档](https://quartz.jzhao.xyz/plugins/CrawlLinks)。这里应改成相对路径,不然在不同文件夹下点击笔记跳转时会出现问题。此外,可以开启懒加载选项,优化浏览体验。
```ts
Plugin.CrawlLinks({ markdownLinkResolution: "relative", lazyLoad: true }),
```
### 其余修改
均参照[lazyjoy的笔记](https://lazyjoy.12123123.xyz/%E5%85%B6%E5%AE%83%E8%B5%84%E6%BA%90/Obsidian/Quartz%E4%B8%AA%E4%BA%BA%E9%85%8D%E7%BD%AE%E4%BF%AE%E6%94%B9%E8%AE%B0%E5%BD%95/)
#### 移动端导航目录
在`quartz.layout.ts`中修改,不是在`quartz.config.ts`中,原文写错了。
![image.png](https://raw.githubusercontent.com/wangzipai/my_ob_pic/main/20241030151132.png)