Notion备份服务

¥1.00

运用的Python工具,将Notion.so页面变成轻量级、可定制的静态网站。

SKU: 6-6 分类:

描述

Loconotion


Loconotion是一个Python脚本,它可以解析一个Notion.so公共页面(以及它的所有子页面),并从中生成一个轻量级的、可定制的静态网站。

为何要如此


Notion是一个网络应用,你可以从内容块中创建你自己的工作空间/个人维基。它使用起来感觉很好,而且结果看起来非常漂亮–开发者做得很好。鉴于它还提供了在网上公开一个页面(及其子页面)的可能性,一些人选择用Notion来管理他们的个人博客、投资组合或某种简单的网站。遗憾的是,Notion不支持自定义域名:你的公共页面被卡在notion.so域名下,在电脑生成的长的URL下。

一些服务,如Super、HostingPotion、HostNotion和Fruition,试图通过依靠使用CloudFlare工作者的黑客入侵来解决这个问题。然而,这种解决方案有一些缺点。

  • 不是免费的 -Super、HostingPotion和HostNotion都需要支付月费,因为他们为你管理所有的 “黑客位”;Fruition是开源的,但任何具有相当数量的每日访问量的域名很快就会与CloudFlare的免费层限制发生冲突,并迫使你升级到5美元或更高的计划(另外你需要自己设置Cloudflare)
  • 缓慢 –由于页面仍然托管在Notion上,它捆绑了他们所有的分析、编辑/协作javascript、供应商css和更多的臃肿,导致页面的加载速度不完全适合一个简单的博客/网站。在谷歌的PageSpeed Insights上运行的例子页面在移动/桌面上的得分只有24 – 66
  • 丑陋的URLs – 虽然上述服务可以使用自定义域名,但单个页面的URLs却停留在冗长、丑陋、原始的Notion URL上(除了Fruition – 他们想出了自定义URLs,尽管当页面加载时,你总是会看到原始URL闪动)。
    Notion免费账户的限制 -最近Notion对其定价模式进行了调整,在免费账户中,公共页面不能被搜索引擎收录(但他们也取消了块数限制,如果你问我,这是一个很好的权衡)。

Loconotion在这方面的做法有点不同。它让Notion渲染页面,然后抓取它并将页面的静态版本保存到磁盘。这提供了以下好处。

  • 剥离所有不必要的臃肿,如Notion的分析,供应商的脚本/样式,以及为了实现协作而留下的javascript。
  • 缓存所有图片/资产/字体(散列文件名),同时保持链接的完整性。
  • 清理页面的URL,如果需要,可以使用自定义的slug。
  • 对整个网站或单个页面进行全面的元标签控制。
  • 对标题、导航栏、正文和代码块进行细致的自定义Goggle字体控制。
  • 让你注入任何自定义样式或脚本,从自定义分析或实时聊天支持到隐藏的加密货币矿工(请不要这么做)。
  • 输出静态文件,准备部署在Netlify、GitHub Pages、Vercel、你的Raspberry PI、你用作随机服务器的廉价二手Thinkpad上–你的名字。

其结果是什么?一个更快的,独立的页面版本,保持所有Notion的漂亮的页面布局和眼睛的糖果。作为比较,同样的例子,用Loconotion解析的页面和部署在Netflify的免费层,实现了PageSpeed Insight得分96 – 100!

请记住,由于我们正在有效地解析一个静态版本的页面,与Notion的实时公共页面相比,有一些限制。

  • 所有的页面都将在自己的页面中打开,而不是模版(取决于你如何看待它,这可能是一个优点)。
  • 数据库将在其初始视图中显示–例如,没有从表格到图库之类的切换视图。
  • 所有的编辑功能将被禁用–不能勾选复选框或拖动看板卡片。通常这不是一个问题,因为作为网站的公共页面会锁定更改。
  • 动态元素不会自动更新 – 例如,日历不会突出当前日期。

其他一切都应该是好的。Loconotion在客户端重新实现了以下动态元素的逻辑,所以它们仍然可以工作。

  • 切换块(也包括嵌套的!)。
  • 锚点链接
  • 嵌入
  • 表上的名称列成为该行的数据库项目的页面链接

除此之外,它还定义了一些额外的CSS规则,以实现整个网站的移动响应性(在某些情况下,看起来甚至比Notion的默认值更好–并不完全是为了移动而思考)。

 

但是Notion已经有了一个html导出功能?

它有,但我对它的风格不是很满意–页面看起来比在Notion活页上的样子要难看一些。此外,它还不支持上面概述的所有很酷的定制功能

 

例子


你可以查看一个包含Notion的大部分块/元素的网站实例,它是用Loconotion导出的一个静态网站,并托管在Netlify上:https://loconotion-example.netlify.app/

作为参考,该网站所产生的原始Notion公共页面可以在这里访问。

 

Installation & Requirements


确保你在你选择的虚拟环境中,然后运行

  • poetry install –no-dev 如果你已经安装了Poetry的话
  • pip install -r requirements.txt 否则

本脚本使用ChromeDriver来自动运行谷歌浏览器,因此需要安装谷歌浏览器才能工作。

脚本会自动尝试下载并使用适合你的操作系统和Chrome版本的chromedriver发行版。如果这不起作用,请从https://chromedriver.chromium.org/downloads 下载适合你的版本,并在运行时使用-chromedriver参数来指定其路径。

Docker支持

也有一个Docker支持。要建立一个容器并渲染页面,请运行。

# 使用 loconotion 构建容器
$ docker-compose build loconotion

# 运行带有任何参数的loconotion渲染器
$ docker-compose run loconotion PATH_TO_NOTION_FILE [ARGS]

Docker容器是由python:3.8标签构建的,安装了google-chrome-stable和chromedriver。更多信息请见docker/Dockerfile

 

简单用法


python loconotion https://www.notion.so/The-perfect-It-s-Always-Sunny-in-Philadelphia-episode-d08aaec2b24946408e8be0e9f2ae857e

在其最简单的形式中,该脚本接收一个公共Notion.so页面的URL,并根据该页面的标题在dist文件夹中生成网站(上面的例子将在dist\The-perfect-It-s-Always-Sunny-in-Philadelphia\中生成网站)。

高级用法


你可以通过向脚本传递一个.toml配置文件来完全配置Loconotion,以满足你的需求。

python loconotion example/example_site.toml

下面是一个完整的.toml配置文件的样子,同时还有每个参数的解释。

## #Loconotion网站配置文件##。
# 完整的.toml配置示例文件展示了所有Loconotion的可用设置
#请查看https://github.com/toml-lang/toml,了解更多关于toml格式的信息。

# 网站将被生成的文件夹的名称

name = “Notion Test Site”

# 正在解析的 notion.so 页面。这个页面将成为生成的站点的index.html
# 生成的网站,并且 loconotion 将解析该页面上的所有子页面。
page = “https://www.notion.so/Loconotion-Example-Page-03c403f4fdc94cc1b315b9469a8950ef”

# 可选择应用notion的黑暗模式,删除下面一行以使用默认的明亮模式
theme = “dark”

##全局网站设置 ##
#这个[site]表定义了整个网站的覆盖设置
#稍后我们将看到如何为单个页面定义设置
[site]
## 自定义元标签 ##
#定义为一个表格阵列(双方括号)。
#表中的每个键都对应于标签中的一个属性
# 以下是添加的标签 <meta name=”title” content=”Loconotion Test Site” />
[[site.meta]]
name = “title”
content = “Loconotion Test Site”
[[site.meta]]
name = “description”
content = “A static site generated from a Notion.so page using Loconotion”

##自定义字体 ##
#你可以指定在网站上使用的谷歌字体的名称–使用字体嵌入名称
#如果有疑问,请在fonts.google.com上选择一个样式,然后导航到 “嵌入 “标签,以便
# 检查CSS规则下的名称
# 下面的表格键控制特定元素的字体。
# site: 改变整个页面的字体(除了代码块之外)
# 但下面的设置会覆盖它
# navbar:页面左上方的网站面包屑。
# title:页面标题(在图标下面)。
# h1:标题块,以及内联数据库的标题
# h2:副标题块
# h3:副标题区块
# body:页面上的非标题文本
# 代码:代码块内的文本
[site.fonts]
site = ‘Nunito’
navbar = ”
title = ‘Montserrat’
h1 = ‘Montserrat’
h2 = ‘Montserrat’
h3 = ‘Montserrat’
body = ”
code = ”

## [Custom Element Injection] [自定义元素注入]。
#定义为一个表格数组[[site.inject]],后面有’head’或’body’来设置
# 注入点,然后是要注入的标签的名称
# 表中的每个键都对应于标签中的一个属性
# 例如,以下是对<head>中这个标签的注入。
# <link href=”favicon-16×16.png” rel=”icon” sizes=”16×16″ type=”image/png” />
[[site.inject.head.link]]
rel=”icon”
sizes=”16×16″
type=”image/png”
href=”/example/favicon-16×16.png”

# 以下是在<body>中注入这个标签。
# <script src=”custom-script.js” type=”text/javascript”></script>
# 注意,所有的href/src文件都会被复制到网站的根目录下
# 无论其原始路径如何
[[site.inject.body.script]]
type=”text/javascript”
src=”/example/custom-script.js”

# 以下是在<head>中注入这个脚本。
<script>console.log(“Hello, world!”)</script>。
[[site.inject.body.script]]
inner_html=”””
console.log(“Hello, world!”)
“””

## [Individual Page Settings] [个别页面设置]
# [pages] 表定义了单个页面的覆盖设置,通过定义
#一个以页面url命名的子表(或url的一部分,但要注意
#不要使用一个出现在多个页面url中的字符串)
[pages]
# 以下设置只适用于这个页面。
# https://www.notion.so/d2fa06f244e64f66880bb0491f58223d
[pages.d2fa06f244e64f66880bb0491f58223d]
## 用户 slugs ##
#在页面设置中,你可以用 “slug “键来改变该页面的URL。
#例如,页面”/d2fa06f244e64f66880bb0491f58223d “现在会映射到”/games-list”

#只为这个页面改变描述元标签
[[pages.d2fa06f244e64f66880bb0491f58223d.meta]]
name = “description”
content = “A fullscreen list database page, now with a pretty slug”

#只为这一页改变标题字体
[pages.d2fa06f244e64f66880bb0491f58223d.fonts]
title = ‘DM Mono’

# 为其他的数据库页面设置漂亮的词条和选项
[pages.54dab6011e604430a21dc477cb8e4e3a]
slug = “film-gallery”

[pages.2604ce45890645c79f67d92833083fee]
slug = “books-table”

# 不跟踪页面上的任何链接,跳过解析从这个页面链接的子页面
# 对大型表格很有用,我们不希望每个项目都有单独的页面
no-links = true

[pages.a28dba2e7a67448da52f2cd2c641407b]
slug = “random-board”
no-links = true

在此基础上,该脚本可以接受这些可选参数。

  • -h, –help 显示此帮助信息并退出
  • –chromedriver CHROMEDRIVER
    使用一个特定的chromedriver可执行文件,而不是
    自动安装的那个
  • –single-page 只解析第一页,然后停止
  • –dark-theme 使用目标Notion.so页面的黑暗主题版本动态元素的时间(默认为5)。如果页面上的内容的内容似乎丢失了,请尝试增加这个值
  • –timeout TIMEOUT 等待加载lazy-loaded 动态元素的时间(默认为5)。如果页面上的内容 的内容似乎丢失了,请尝试增加这个值
  • –clean 在生成网站之前删除所有先前的缓存文件。生成前,删除该网站以前的所有缓存文件。
  • –clean-css 在生成前删除网站以前缓存的.css文件
    生成前,删除网站以前缓存的.css文件
  • –clean-js 在生成前删除网站以前缓存的.js文件。
    生成前删除网站以前缓存的js文件
  • –non-headless 在非无头模式下运行chromedriver。
  • –v, –verbose 增加输出日志的粗略程度