本着要干活装备一定要最好的原则，我也不知道是过了多长时间，姑且算是花了两个月吧， 一有时间停下来，我想的最多就是有什么笔记工具可以使用。

而今天，我打算为这个思考画上一个句号了。 因为这个选择的过程太花时间了，所以我想先通过这篇文章来给出我的答案，说不定可以为你节省时间。

关键点​

其实临近2024，市面上已经有非常充足的笔记工具可以选择了，但很多“其中之一”总是让我感觉并不“完美”，你很难说它的问题到底在哪。总的来说我选择笔记工具主要考虑的有这几点：

• 多端互通，可复制/可低成本迁移
  • 我希望在有灵感的时候随时能访问到我的笔记，以便我快速地编辑它们
  • 同时我也会担心服务故障带来的不确定因素，所以备份也是需要考虑的
• 链接体系，数据组织
  • Tag在某些情况下还是非常重要的
  • 丰富的数据织在某种程度上是和可迁移性冲突的，所以我会偏向使用一些开源的工具，比如用Mermaid来画脑图

推荐​

Notion​

高度集成的知识库工具，在成品当中接近无敌的存在， 同时支持多人协同 / 页面发布管理，又有丰富的内容块和模板可以使用，Wiki支持Tag。

缺点是不能完美导出到其它地方，不过可以后续借助文本处理工具进行转换。

Cubox​

小记、灵感收集器，有API/ 有网页转换 / 有标注 / 有AI接口 / 有浏览器插件，虽然有的功能相对玩具，并且需要氪金，但胜在没有同类竞品。

当你有很多想要阅读，但又散布在各种不同地方的网页时，Cubox能带来更加统一的阅读体验

Day One​

日记，有Mac和手机App和网页端，分类标签等功能比较齐全（比苹果那个手记要强多了，暂时），再专业的软件也不能完美地消化生活中的点点滴滴，Day One更多是为了我的那些闲言碎语。

Obsidian​

笔记界的VSCode，也是我最后确定下来的一款工具，用来配合我进行Git知识库的编辑。 主要的出发点是解决Git知识库没法在手机/Pad端快速编辑的问题，毕竟有相当一段使时间里，你只需要关注要写什么，而不是怎么管理你的Git仓库。

需要iCloud来实现较好的跨端编辑体验，我个人的用法是配合Git插件（复杂情况还是会用纯Git处理），最终把内容更新到配有Action自动化部署的仓库里。遗憾是是没有网页端，起码需要带一个Pad来当主力设备。

总的来说，未来可期吧，但对于非程序来说，Obsidian还是有些太不友好了，尤其是社区的各种同步插件任然还是没法保证稳定性的，并且很多插件对于Vault来说都是有入侵性的，中途变更插件会非常麻烦。

OneNote​

功能齐全的老派选手，不是非常适合Markdown，但排版比较灵活对Apple Pencil的智能手写支持是最好的，偏手写的同志依然需要选择OneNote。

结语&碎碎念​

受前公司的影响，我在之前一直都是一名忠实的语雀用户，语雀在各方面其实也算是能用的， 但今年的P0级事故着实有些伤人了，而且语雀的产品形态也不是特别明朗，不支持Tag搜索等问题，对于想重度构建并且时不时回顾内容的人来说是存在短板的。

总的来说，对于刚接触笔记工具的人，我还是首先推荐Notion和OneNote，它们的上手成本较低，功能又非常齐全。进阶选手可以尝试折腾下Obsidian，但它和Notion实际上是个互补的关系，Obsidian更偏向于离线撰写。

在此之前，我也使用过很多其他的静态网站生成器， 比如 Hugo、Hexo 以及 mdBook 等等。 这些都是非常优秀的工具，但 Docuasurus 自由度和功能的完善程度都是我所见过的最好的，它让我感觉到内容能被更好的组织和展示。

不过强大的自由度带来的是配置的复杂性，虽然 Docusaurus 官方提供了完善的文档，但是我还是花了很多时间来熟悉它的工作方式。 我认为从 Docusaurus 的启动项目开始，到最终真正的工作流的建立，依旧有很多内容值得记录。

这就是这篇博客存在的原因。

关于 i18n​

我对于项目的国际化是有执念的，尽管我在这个仓库中基本只使用中文，但是我还是希望能够为未来的合作者提供更多的可能性。

随着 i18n 的引入，创建和编辑文档的动作变得更加的复杂。 你可能会发现 “编辑此页” 按钮只会定向到英文版本的源码，那是因为你忽略了一项配置导致的。 editLocalizedFiles 配置项默认是 false，你需要将它设置为 true 才能够在其他语言的文档中使用 “编辑此页” 按钮。

关于 Algolia​

Docuasurus 官方提供了 Algolia 的集成，这是一个非常好的功能，并且一开始是免费的。 但配置起来需要一些时间，尽管 Docuasurus 和 Algolia 都彼此提供了完善的文档，但是我还是花了很多时间来熟悉它们的工作方式。

前言​

我在学生时代时常常被类似的问题困扰：不清楚该如何利用编程来解决遇到的问题、实现想要的功能。 学习的基础知识很多，但是在实际的应用中，却不知道如何使用。

我总是希望能够了解事物的全貌，而不是只知道其中的一部分。 也因此，在几年前开始寻找工作时，就已经考虑过是否可以成为一名全栈开发者。

如你所见，我现在建立了这个知识库，说明我已经有了一定的信心和能力。 “全栈”是一个无限宽广的领域，不过幸运的是，我们进入了一个崭新的时代，在AI和现代化的工具链中，我们可以更快的学习和实践。 我希望这个知识库可以帮助到你，我们一起从最通用的部分开始，最终学会如何在自己喜欢的领域中前进。

指南​

“全栈开发知识库”主要有三个分区：开发、算法、博客（Docusaurus是框架提供的建站指引，我只是还想暂时留着它）。

• 开发和算法分区是我对基础知识进行梳理的分区，这些内容应当是通用的，你会在考试、面试或者实际开发中遇到它们。
• 博客更多地会是一些我个人探索和想法，它们会更加有趣。

搜索功能是完全可用的，它基于algolia，可以帮助你快速找到想要的内容。 这是一个我日常也会使用的功能，所以请放心，我会尽可能的保证它的可用性。

贡献​

这个知识库是开源的，你可以在GitHub找到源码。

我非常欢迎合作者的到来，或许我们可以在未来有活跃的issue和discussion来帮助我们产出更加优秀的内容。

经过了这次的尝试，我觉得 MDX 非常酷，它近乎无所不能的。 你可以在 MDX 中使用任何你想要的东西，让我有了更多使用它的想法~

先来看看效果：

为了实现在 MDX 中使用思维导图，我们需要引入一个叫做Markmap的库。 并且将其封装成一个 React 组件，以便于在 MDX 中使用。

import React, { useEffect } from "react";
import { Transformer } from "markmap-lib";
const { Markmap } = require("markmap-view");

const transformer = new Transformer();

const MarkmapRender: React.FC<{
  value?: string;
  style?: React.CSSProperties;
}> = (props) => {
  const svg = React.useRef<SVGSVGElement>();

  useEffect(() => {
    const mm = Markmap.create(svg.current);
    const { root } = transformer.transform(props.value || "");
    mm.setData(root);
    mm.fit();
  }, [props.value]);

  return (
    <React.Fragment>
      <svg className="flex-1" ref={svg} style={props.style} />
    </React.Fragment>
  );
};

export default MarkmapRender;

这是一个相对初级但有较为现代的示例，较为完整的 React 使用案例可以参考 👉 这里。

在我的例子中，优点是我避免使用了老式的 React 组件声明方式

由于文档的不完善和组件模块导出的一些问题，你可能会遇到一些编辑器报错，但它们并不是致命的，你可以忽略它们。