Tags
工具
排版
时间
Oct 24, 2022 04:32 AM
目录
页面施工中
使用[ ℕ𝕠𝕥𝕚𝕠𝕟 ],我是被它简约的页面设计吸引的,通过Block块构成页面,Icon图标的使用符合用户直觉,最重要的是所见即所得。因此在了解到[ ℕ𝕠𝕥𝕚𝕠𝕟 ]还支持MarkDown、Latex和代码高亮,以及最重要的database功能之后不久,我决定将[ ℕ𝕠𝕥𝕚𝕠𝕟 ]作为自己主要的笔记工具,并通过自己的摸索和学习,开始使用[ ℕ𝕠𝕥𝕚𝕠𝕟 ]进行个人事务管理,到现在Dec 6, 2021也已经一年了 。
在使用[ ℕ𝕠𝕥𝕚𝕠𝕟 ]的过程中,虽然Block的自由拖动在一定程度上满足了我的轻排版需求,但偶尔还是会觉得受到束缚,无法完成一些想要的效果或功能。由此驱动,过去一年我一直在整理可以使[ ℕ𝕠𝕥𝕚𝕠𝕟 ]更加好用的工具,现在我把它们记录在这里。如果你想让你的[ ℕ𝕠𝕥𝕚𝕠𝕟 ]变得更美观更强大,那么可以耐心阅读本页内容,相信你可以从中找到你想要的。本页内容会有一些长,包括了Notion美化、功能拓展、模板等内容,推荐选择性取用,你可以随意组合设计你的[ ℕ𝕠𝕥𝕚𝕠𝕟 ]页面,发动你的巧思,拓展更多好玩有趣的[ ℕ𝕠𝕥𝕚𝕠𝕟 ]使用方法,希望我的分享,对你有所帮助。
![如图是我之前使用notion-enhancer自定义的notion主题](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9a2fa253-aff0-4aa2-90d4-e99295ad21c3%2FUntitled.png?table=block&id=69f0dfd5-d5e8-4009-98e5-fe7aab47aa42&t=69f0dfd5-d5e8-4009-98e5-fe7aab47aa42&width=768&cache=v2)
Notion美化
Icon
1. 复制或下载图标网站的Icon
[ ℕ𝕠𝕥𝕚𝕠𝕟 ]自带的Icon图标其实已经很丰富了,但如果你想要更多的个性化设计,就可以通过[ Upload an image ]或者提交[ link ]的方式设置个性化的Icon,步骤都很简单。我自己常用的几个Icon网站,flaticon、icons8、iconfinder上都有大量免费的Icon可以使用,Icon样式丰富且有统一的风格可供选择,已经能完全满足日常使用。
以flaticon为例的使用方法介绍:
- 打开flaticon界面后,选择一组想要使用的Icon点击进入详情页面,点击想要使用的Icon
![点击想要使用的Icon图标,这里选择了菜篮子](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F63538010-361b-4d2d-9071-c9b8fb92ab5a%2FUntitled.png?table=block&id=a9bffde8-742d-4d5e-ae0a-86795bbac353&t=a9bffde8-742d-4d5e-ae0a-86795bbac353&width=240&cache=v2)
- 出现如下界面后,右键图标选择复制图片地址
![右键图标图片选择复制图片地址](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F04ee6a8c-010f-4e53-a0e9-7e9bec3db9ce%2FUntitled.png?table=block&id=a7b905d3-b0af-490d-acd6-1df6b77f8128&t=a7b905d3-b0af-490d-acd6-1df6b77f8128&width=240&cache=v2)
- 进入Notion界面,点击[ Add icon ],并粘贴前面复制Icon链接
![在Notion页面添加图标](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3262d8c5-a9b8-4b34-bea5-ef34ca1de325%2FUntitled.png?table=block&id=faff80d2-1655-4e69-b68f-1f52504a33ac&t=faff80d2-1655-4e69-b68f-1f52504a33ac&width=240&cache=v2)
![在Link栏输入复制好的链接并提交](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb09d0d11-8375-4c9f-a996-dbebc24e9918%2FUntitled.png?table=block&id=8cfee1db-0be1-4338-b242-56f7c80b3079&t=8cfee1db-0be1-4338-b242-56f7c80b3079&width=240&cache=v2)
- 点击提交后,就可以看到页面的图标变成了想要的Icon。复制的方式主要的有点是方便,但网络不稳定的时候可能在页面重新加载时需要较长的时间才能显示,不怕麻烦的可以使用下载图标再上传的方式,进行图标的设置
![设置完成](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F40ffaa98-4aec-4787-b70d-5efd6270e9d5%2FUntitled.png?table=block&id=284892f1-dcd0-445c-8ad2-8d328ab188ad&t=284892f1-dcd0-445c-8ad2-8d328ab188ad&width=240&cache=v2)
常用的Icon网站地址:
- flaticon
- icons8
- iconfinder
- medialoot
我自己比较喜欢的icon风格是线性的涂鸦风格,比较简洁美观:
- Detailed Rounded Lineal color
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff2e3e4bf-919e-4d29-9b41-9b4dfb633aef%2FUntitled.png?table=block&id=fe0b95bf-33e5-4afe-91f1-a2e611afa442&t=fe0b95bf-33e5-4afe-91f1-a2e611afa442&width=1878&cache=v2)
2. notion-enhancer插件
如果你习惯使用notion的桌面版,那么notion-enhancer插件可以让你的notion变得更加个性化。
![notion-enhancer支持定制的主题配色](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fec225b75-3c7e-4c7e-a958-52c994cff869%2FUntitled.png?table=block&id=331f6c0b-72df-44ef-92e7-ab6fc0b1d6d9&t=331f6c0b-72df-44ef-92e7-ab6fc0b1d6d9&width=768&cache=v2)
notion-enhancer插件()是一个关于notion的开源项目,截止目前它在github上已经获得了3.8K的star。 notion-enhancer支持很多拓展功能,比如自定义热键、增加侧边栏、多窗口、主题配色、icon扩展等。 【 需要说明的是,截止目前由于notion的UI和安全更新,notion-enhancer的一些功能被禁用了】
想了解notion-enhancer中Icon拓展功能的详细介绍可以阅读如下链接:
FontStyle
关于[ ℕ𝕠𝕥𝕚𝕠𝕟 ]中的字体美化,下面提供几个我有使用过的方法。
1. 英文花体字
𐓣ⱺ𝗍𝗂ⱺ𐓣
🄽🄾🅃🄸🄾🄽
𝖓𝖔𝖙𝖎𝖔𝖓
𝓃ℴ𝓉𝒾ℴ𝓃
𝕟𝕠𝕥𝕚𝕠𝕟
𝓷𝓸𝓽𝓲𝓸𝓷
InstaFonts.io提供了90多种不同的英文花体字,只需要在输入框中粘贴或输入想要转换的文本即可。
2. Latex排版
LaTex是一种基于TEX的排版系统,,可以通过代码控制排版,是论文、出版物常用的一种排版方法
notion目前的字体样式比较单一,但notion有一个很好的特性就是支持Latex,通过使用Latex就可以实现字体样式和颜色的自定义。
下面举个简单的例子,我有一个标题Title,我想要使用notion中没有的颜色时,使用Latex可以很轻松的解决这一点。
通过使用/inline equation, 在下拉框输入如下code,就可以得到玫红色的
当然Latex也支持,我只是举了一个很简单的例子,除了颜色以外,Latex还可以对字体、大小进行修改,更多复杂的用法还是得继续探索,这里推荐一个作者Nat,他在N.'s LaTeX Style Guide 和LaTeX color/text blocks examples 中提供了许多有意思的Latex模板,并且对每个模板进行了说明,只需通过简单的修改就可以使用到自己的notion页面中。
![Nat提供的Latex模板](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd6c3c210-afce-444f-b8e3-c483502c347c%2FUntitled.png?table=block&id=3e747dea-4093-4741-9479-d5ddeb58900d&t=3e747dea-4093-4741-9479-d5ddeb58900d&width=1152&cache=v2)
3. 全局字体设置
前面介绍了两种局部字体美化的方法,notion还可以进行全局的字体设置,目前notion支持三种不同的字体设置:Default、Serif、Mono,十分有限。有很多优秀的文章对notion全局字体的修改进行了介绍,大家可以参考如下链接,但这些修改都仅本地可见,这里就不再展开。
Temple
终于来到【模板】这个大部头了,鼓掌 👏🏻
Notion的使用比较复杂,许多高级功能和使用都需要一些学习时间,因此十分推荐大家在最开始使用Notion时,可以直接复制其他人分享的模板,然后在此基础上进行一些优化和改进。notion官方已经推荐了很多优秀的模板,任意新建一个page,就可以在Templates看到这些优秀的模板
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F38fca7b0-663b-4033-b475-292ff2f87248%2FUntitled.png?table=block&id=7712a913-44bb-4dd3-a5b4-30b09eff28e0&t=7712a913-44bb-4dd3-a5b4-30b09eff28e0&width=432&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4067870f-05ac-4319-91a6-67b79002d377%2FUntitled.png?table=block&id=7672f06a-1520-45c6-89b4-60a3b6420f99&t=7672f06a-1520-45c6-89b4-60a3b6420f99&width=1631&cache=v2)
下面是我自己收集的一些notion使用者分享在网上的个人模板,均标注了出处,大家可以随意探索
Temples
功能拓展
Widget
Widget网站地址
- Indify
- Joey
- Apption
Notion-enhancer
- 借助Fruition,在HeadReWriter中插入修改的css样式,实现更加自由的页面自定义
- 自定义嵌入音乐播放器