跳到主要内容

关于 mNotebook

名字来源：masterLazy's Notebook。

谈谈关于 mNotebook 的想法。

初衷​

手写笔记，笔者认为最大的缺点就是修改困难，无论是涂改带还是铅笔都不方便。用数字方式组织笔记就好得多。很久以前笔者用 Word 整理笔记，但是 Word 的格式之类的调起来很麻烦，如果要嵌入数学公式那更麻烦。后来笔者决定用 Markdown 记笔记，这样可以专注于内容，显示效果也不赖。

笔者之前一直用 Typora 打笔记，存在本地，问题就是要在不同设备上看笔记有点麻烦。而且 Typora 更多是编辑内容，没有一些高级的组织功能。Docusaurus 的文档组织功能就很强大，而且它还支持自定义 React 组件，可玩性很高。

总之，这就是一份 “最精致” 的笔记了。毕竟笔记肯定是要常看的，做得精致一点才有想看的欲望。mNotebook 中笔者“塞了很多小细节”——一些笔者认为可以提升（主要是笔者自己）阅读体验的东西，见下面。

格式约定​

为了保证文章的效果和质量，有必要对格式做一些约定。

Markdown/MDX​

  1. 不在 h2 标题中使用行内代码块。
  2. 不同时使用超链接和加粗，比如 这样。
  3. 使用行内代码块的场合：代码片段、类型/字段名、枚举值、文件名/扩展名、有特殊意义的字面量。
  4. 非必要不使用 Docusaurus 提供的告示特性，可以使用引用块替代。鉴于 note 和 info 的语义可能存在混淆，下作区分：
    1. quote：引用的文字、相对不重要的信息、扩展信息、碎碎念；
    2. note：相对不重要的信息，但比 quote 更需要引起注意；
    3. info：重要补充说明，注意力等级最高（低于 warn、danger）；
    4. footnote：最不重要的信息，不应影响正文展开。

打印配置​

按下 Ctrl+P 即可打印页面。得益于 Docusaurus 超棒的支持，打印的效果还是很赞的。

  • 纸张大小：A4
  • 缩放：75%
  • 边距：
    • 顶部：20mm
    • 底部：25mm
    • 左右：15mm

增强功能​

下面是一些笔者为 mNotebook 编写的增强功能。一些功能以 React 组件提供，已经预导入，无需在文档中 import。

.group​

推荐用此 class 修饰 <div>，使之成为一个“卡片组”，可以自动根据显示宽度排布子项目（从左往右排，空间不足则换行）。一个典型的应用是排版图片。

<div className='group'>
    <div className='card'>1</div>
    <div className='card card-big' >2</div>
    <div className='card'>3</div>
    <div className='card'>4</div>
    <div className='card card-big'>5</div>
    <div className='card card-big'>6</div>
    <div className='card card-big'>7</div>
    <div className='card'>8</div>
</div>

效果：

1
2
3
4
5
6
7
8

<ColorDot>​

一个带有颜色的小圆点，用于颜色编码。默认的大小是 1rem，其带有轻微的阴影。

<ColorDot color='var(--ifm-color-primary-darkest)' />
<ColorDot color='var(--ifm-color-primary-darker)' />
<ColorDot color='var(--ifm-color-primary-dark)' />
<ColorDot color='var(--ifm-color-primary)' />
<ColorDot color='var(--ifm-color-primary-light)' />
<ColorDot color='var(--ifm-color-primary-lighter)' size='1.5rem' />
<ColorDot color='var(--ifm-color-primary-lightest)' />

效果：

<Img>​

强烈推荐的图片插入方式。<img> 的第一个子元素将作为图片，第二个子元素将作为图片注释。（两个子元素之间需要空一行）

  • 添加属性 invertable，以在深色模式下反转图片颜色。
  • 添加属性 noBorder，以取消圆角和边框。
  • 在其子元素中指定图片的描述，此描述将居中显示于图片下方。
  • 指定 height（其实是最大高度），默认是 23rem。

另外，这样插入的图片还将拥有边框。

快速复制
<div className='group'>
    <Img invertable>
    ![](./assets/)
    </Img>
</div>

实际使用中，图片一般放在 ./assets 下（向上面那样）。下面的例子使用了静态资源。

<div className='group'>
    <Img>
    ![](/img/favicon.webp)

    这是**图片注释**\
    注释里面可以自由使用 Markdown 语法\
    文字是左对齐的，别有一番韵味。
    </Img>
</div>

效果：

这是图片注释
注释里面可以自由使用 Markdown 语法
文字是左对齐的，别有一番韵味。

细节修改​

Docusaurus 的主题我并不是很喜欢，所以我通过各种方式自定义了其显示效果。

文档中​

通过修改 custom.css：

  • 使“告示”的标题字号和普通的文字一致，并改变了边框样式。
  • 优化行内代码块显示效果。
  • 给选项卡的切换添加动画。
  • 在 h1 标题上下插入额外空间。
  • 给 h2 标题添加了下边框。

通过 swizzling：

  • 把 <details> 改成颜色更淡的样式（蓝色 →\rightarrow 灰色），减小了视觉冲击。

页面​

通过修改 custom.css：

  • 通过 fonts.googleapis.com 使用自定义字体。When display words in <em>, use italic font.
  • 修改了导航栏下拉菜单的样式。
  • 修复了所有标签页面在深色模式下的表现。

通过 swizzling：

  • 让文档底部的“标签”和“最后于…更新”处于同一行。
  • 增加了博客页面宽度。
  • 改变了博客下方原“阅读更多”的样式。
  • 优化博文归档页样式。
标签：
最后于 更新