Notion 独特的风格一直受广泛的喜爱,Notion 也因此被世界各地的开发者们玩出了花样。

作为一个 Notion 热衷爱好者,当然少不了收集那些 Notion 有趣好玩的技巧。

Fruitionsite
:使用 Notion 搭建属于你的网站

官网

实例

准备

  1. 一个公开的 Notion 页面
  1. 一个属于自己的域名
  1. 已经绑定自己域名的 Cloudflare 账户

优势

  1. 使用自己的域名
  1. 使用 Pretty Link 来替代繁琐的 pageID
  1. 可以设置自己喜欢的字体(基于 Google Fonts )
  1. 自由添加 JavaScript 来启用某些功能(比如使用 Google Analytics 来统计访问量)
  1. 几乎“ 0 成本

劣势

  1. Notion 页面上的所有工具都会同步启用,在一定程度上减慢了网站的访问速度

步骤

官网上也有完整的视频和文字教学
  1. 创建 Cloudflare 账号并绑定自己的域名(成功后如下所示)
  1. 主页进入 Workers,创建一个 Worker 项目(第一次设置时,需要设置 Workers 域名)
  1. 访问此网站,填写必要信息,之后按下 COPY THE CODE。
  1. 将代码粘贴至 Worker 项目里,并保存,修改名字为 fruitionsite(也可随意修改)
  1. 返回主页,点选 DNS 选项,添加 A 记录(推荐使用 A 记录)随便输入一个 IPv4 地址,并使用 Cloudflare 代理其流量,后保存。
  1. 转到 Workers 选项,添加路由,并保存
务必在路由最后添加 /*
  1. 大功告成。现在你可以使用此域名访问属于你的个人网站。

Super.so
:简洁的网页,除了 Notion,其他都不要

官网

实例

准备

  1. 一个公开的 Notion 页面
  1. 一个属于自己的域名

优势

  1. 去除了 Notion 自带的工具/插件,让页面访问速度更快
  1. 可以免费尝试使用,之后将以每月 12 美元付费

React-Notion
:使用 React 构建的 Notion 的快速渲染器

📌
技术含量 UP 🆙

官网

实例

  1. https://splitbee.io/blog
  1. https://pstunnel.com/blog
  1. https://timo.sh/

准备

  1. 一个公开的 Notion 页面
  1. 一个属于自己的域名
  1. 编程“基础”

优势

  1. ⚡️ 快速 - 比 Notion 快 n 倍
  1. 🎯 准确
  1. 🔮 支持代码高亮 - 使用prismjs
  1. 🎨 可自定义样式
  1. “几乎” 0 成本

劣势

  1. 有一些 Notion Block 并不支持
  1. 需要自行搭建 notion-api (可选,可以用由 Splitbee 提供的 API)

步骤


React-Notion-X
:又一个使用 React 构建的 Notion 的快速渲染器

📌
技术含量 UP 🆙

官网 & 实例

准备

  1. 一个公开的 Notion 页面
  1. 一个属于自己的域名
  1. 编程“基础”

优势

  1. 🚀 简单 - TypeScript + React。
  1. ⚡ 快速 - 比 Notion 快 10-100 倍
  1. 🔮 支持代码高亮 - 使用prismjs
  1. 🎨 可自定义样式
  1. “几乎” 0 成本
  1. 支持“几乎”全部 Notion Blocks

步骤

和 React-Notion 类似

Notion Web Clipper(Chrome 插件)

官网

下载

优势

  1. 由 Notion 官方推出
  1. 支持将当前页面快速保存至 Notion

Notion Enhancer(桌面端插件)

官网

优势 & 介绍

  1. Notion + Notion

下载