经验分享 | Notion排版指南
| 2022-10-27
0  |  阅读时长 0 分钟
Tags
工具
排版
时间
Oct 24, 2022 04:32 AM
页面施工中

使用[ ℕ𝕠𝕥𝕚𝕠𝕟 ],我是被它简约的页面设计吸引的,通过Block块构成页面,Icon图标的使用符合用户直觉,最重要的是所见即所得。因此在了解到[ ℕ𝕠𝕥𝕚𝕠𝕟 ]还支持MarkDown、Latex和代码高亮,以及最重要的database功能之后不久,我决定将[ ℕ𝕠𝕥𝕚𝕠𝕟 ]作为自己主要的笔记工具,并通过自己的摸索和学习,开始使用[ ℕ𝕠𝕥𝕚𝕠𝕟 ]进行个人事务管理,到现在Dec 6, 2021也已经一年了 。
在使用[ ℕ𝕠𝕥𝕚𝕠𝕟 ]的过程中,虽然Block的自由拖动在一定程度上满足了我的轻排版需求,但偶尔还是会觉得受到束缚,无法完成一些想要的效果或功能。由此驱动,过去一年我一直在整理可以使[ ℕ𝕠𝕥𝕚𝕠𝕟 ]更加好用的工具,现在我把它们记录在这里。如果你想让你的[ ℕ𝕠𝕥𝕚𝕠𝕟 ]变得更美观更强大,那么可以耐心阅读本页内容,相信你可以从中找到你想要的。本页内容会有一些长,包括了Notion美化功能拓展模板等内容,推荐选择性取用,你可以随意组合设计你的[ ℕ𝕠𝕥𝕚𝕠𝕟 ]页面,发动你的巧思,拓展更多好玩有趣的[ ℕ𝕠𝕥𝕚𝕠𝕟 ]使用方法,希望我的分享,对你有所帮助。
如图是我之前使用notion-enhancer自定义的notion主题
如图是我之前使用notion-enhancer自定义的notion主题

Notion美化

Icon

1. 复制或下载图标网站的Icon

[ ℕ𝕠𝕥𝕚𝕠𝕟 ]自带的Icon图标其实已经很丰富了,但如果你想要更多的个性化设计,就可以通过[ Upload an image ]或者提交[ link ]的方式设置个性化的Icon,步骤都很简单。我自己常用的几个Icon网站,flaticon、icons8、iconfinder上都有大量免费的Icon可以使用,Icon样式丰富且有统一的风格可供选择,已经能完全满足日常使用。
以flaticon为例的使用方法介绍:
  1. 打开flaticon界面后,选择一组想要使用的Icon点击进入详情页面,点击想要使用的Icon
    1. 点击想要使用的Icon图标,这里选择了菜篮子
      点击想要使用的Icon图标,这里选择了菜篮子
  1. 出现如下界面后,右键图标选择复制图片地址
    1. 右键图标图片选择复制图片地址
      右键图标图片选择复制图片地址
  1. 进入Notion界面,点击[ Add icon ],并粘贴前面复制Icon链接
    1. 在Notion页面添加图标
      在Notion页面添加图标
      在Link栏输入复制好的链接并提交
      在Link栏输入复制好的链接并提交
  1. 点击提交后,就可以看到页面的图标变成了想要的Icon。复制的方式主要的有点是方便,但网络不稳定的时候可能在页面重新加载时需要较长的时间才能显示,不怕麻烦的可以使用下载图标再上传的方式,进行图标的设置
    1. 设置完成
      设置完成
 
常用的Icon网站地址:
  • flaticon
  • icons8
  • iconfinder
  • medialoot
 
我自己比较喜欢的icon风格是线性的涂鸦风格,比较简洁美观:
  1. Detailed Rounded Lineal color
notion image
 

2. notion-enhancer插件

如果你习惯使用notion的桌面版,那么notion-enhancer插件可以让你的notion变得更加个性化。
notion-enhancer支持定制的主题配色
notion-enhancer支持定制的主题配色
notion-enhancer插件()是一个关于notion的开源项目,截止目前它在github上已经获得了3.8K的star。 notion-enhancer支持很多拓展功能,比如自定义热键、增加侧边栏、多窗口、主题配色、icon扩展等。 【 需要说明的是,截止目前由于notion的UI和安全更新,notion-enhancer的一些功能被禁用了】
想了解notion-enhancer中Icon拓展功能的详细介绍可以阅读如下链接:
 

FontStyle

关于[ ℕ𝕠𝕥𝕚𝕠𝕟 ]中的字体美化,下面提供几个我有使用过的方法。

1. 英文花体字

𐓣ⱺ𝗍𝗂ⱺ𐓣
🄽🄾🅃🄸🄾🄽
𝖓𝖔𝖙𝖎𝖔𝖓
𝓃ℴ𝓉𝒾ℴ𝓃
𝕟𝕠𝕥𝕚𝕠𝕟
𝓷𝓸𝓽𝓲𝓸𝓷

2. Latex排版

LaTex是一种基于TEX的排版系统,,可以通过代码控制排版,是论文、出版物常用的一种排版方法
notion目前的字体样式比较单一,但notion有一个很好的特性就是支持Latex,通过使用Latex就可以实现字体样式和颜色的自定义。
下面举个简单的例子,我有一个标题Title,我想要使用notion中没有的颜色时,使用Latex可以很轻松的解决这一点。
通过使用/inline equation, 在下拉框输入如下code,就可以得到玫红色的
当然Latex也支持,我只是举了一个很简单的例子,除了颜色以外,Latex还可以对字体、大小进行修改,更多复杂的用法还是得继续探索,这里推荐一个作者Nat,他在
N.'s LaTeX Style Guide
N.'s LaTeX Style Guide
🧱
LaTeX color/text blocks examples
中提供了许多有意思的Latex模板,并且对每个模板进行了说明,只需通过简单的修改就可以使用到自己的notion页面中。

Nat提供的Latex模板
Nat提供的Latex模板

3. 全局字体设置

前面介绍了两种局部字体美化的方法,notion还可以进行全局的字体设置,目前notion支持三种不同的字体设置:Default、Serif、Mono,十分有限。有很多优秀的文章对notion全局字体的修改进行了介绍,大家可以参考如下链接,但这些修改都仅本地可见,这里就不再展开。
如何更改 Notion 中的字体?
Hello 大家好,我是安哥。 今天的这篇文章,想给大家介绍一下:如何更改 Notion 中的字体。 Notion 提供了 三种风格的字体样式,分别是 非衬线字体、 衬线字体和 等宽字体,默认使用的是非衬线字体,这种字体的特点是 所有笔画粗细一致 ,典型如微软雅黑、思源黑体。 如果你想在 Notion 中使用 自定义的字体 ,也是可以实现的,网页版 Notion 和客户端 Notion 的实现方法略有不同。 ① 网页版 Notion 网页版 Notion 有两种更改字体的方法,一种是 更改浏览器默认的字体设置,以 Chrome 浏览器为例,在地址栏输入 chrome://settings/fonts 打开字体设置页面。 字体设置页面可分别改变 4 类字体所使用的字体,包含标准字体、Serif 字体(衬线字体)、Sans-serif 字体(非衬线字体)和等宽字体。 经测试,只更改 Sans-serif 字体所使用的字体,例如我将其设置为「 江西拙楷 」,就可以更改 Notion 的中文字体。 使用这个更改 Notion 字体的方法,由于它改变的是浏览器的 全局字体 ,这会让其他页面的字体也受到影响,例如 Chrome 新标签页的字体。 如果我们 只想单独更改 Notion 的字体 而不影响到其他的页面,这里可以使用另外一种更改字体的方法: 这种方法需要你安装一个浏览器插件 Stylus,它是一个可用来调整网页外观的插件,让你自行修改网站的主题、皮肤和 字体 等。 安装插件之后,在打开 Notion 页面的情况下,点击浏览器右上角的 Stylus 插件图标,将鼠标移动到面板上的 notion.so 网址 并单击。 在打开的样式编辑页中,粘贴下方的 CSS 代码,其中 font-family 的值 替换为你想使用的字体名称 ,前提是你已经在电脑上安装了这款字体。 * { font-family: '江西拙楷','字体圈欣意冠黑体'; } 如果你不确定你是否安装了某款字体,可以打开路径 C:\Windows\Fonts ,查看本地安装的所有字体。 修改好之后回到 Notion 页面,顺利的话,就可以看到页面的字体同样被更改了。 Stylus 插件下载地址: https://www.
如何更改 Notion 中的字体?

Temple

终于来到【模板】这个大部头了,鼓掌 👏🏻
Notion的使用比较复杂,许多高级功能和使用都需要一些学习时间,因此十分推荐大家在最开始使用Notion时,可以直接复制其他人分享的模板,然后在此基础上进行一些优化和改进。notion官方已经推荐了很多优秀的模板,任意新建一个page,就可以在Templates看到这些优秀的模板
notion image
notion image
下面是我自己收集的一些notion使用者分享在网上的个人模板,均标注了出处,大家可以随意探索
Temples

功能拓展

Widget

Widget网站地址

Notion-enhancer

  • 借助Fruition,在HeadReWriter中插入修改的css样式,实现更加自由的页面自定义
  • 自定义嵌入音乐播放器
    •  
Loading...
目录