跳到主要内容

⭐ 关于 mNotebook

名字来源：masterLazy's Notebook。

谈谈关于 mNotebook 的想法。

初衷​

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

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

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

增强功能​

下面是一些笔者为 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)' />

效果：

<Highlight>​

类似荧光笔的高光效果，已适配深色模式。注意：这个组件不要独自成行（LaTeX\LaTeX 除外），否则可能会出现排版异常。

这段话中的一些<Highlight>词语</Highlight>被高亮了。

效果：这段话中的一些词语被高亮了。

<Img>​

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

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

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

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

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

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

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

效果：

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

细节修改​

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

文档中​

通过修改 custom.css：

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

通过 swizzling：

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

页面​

通过修改 custom.css：

  • 通过 fonts.googleapis.com 使用思源黑体。
  • 修改了导航栏下拉菜单的样式。
  • 修复了 所有标签页面 在深色模式下的表现。