前言:本人习惯使用notion进行读书笔记、目标管理、生活记录。奈何其字体有限,颜色也不能随心所欲的设置,所以探索了自定义网页版样式的方法。
参考b站博主 notion美化css样式
-
首先,你需要拥有一个自己的域名 参考购买域名教程
-
登录网站:cloudflare.com 并且注册一个账号,具体网址百度一下,因为可能会有更新
-
注册登录完毕后,在这个页面点击第一个get started
-
在输入site的地方,输入你的域名,并且点击add site
-
选择免费的plan
-
管理域名的dns。
-
其中192.0.2.1是cloudfare的ip,可以在下图所示位置找到
-
点击save之后,点击continue
根据提示,我们需要将dns修改成cloudflare提供的dns
-
去往阿里云修改自己的dns
-
修改完成之后,到cloudflare点击check按钮,会显示下图页面
-
把配置项都点上,然后点击完成按钮
-
点击如下按钮,可能会等待一段时间才会连接上
-
去吃个饭,睡个午觉回来
-
已经成功创建
-
点击左侧边栏的workers,可能会有邮箱验证,验证之后进入创建worker的界面
点击create a service
点击http router -
点击continue进入edit界面,这个页面不要关闭
-
在新标签页打开fruitionsite.com,在step2输入notion的分享链接和你的域名,点击下方的copy复制生成的代码
-
回到cloudflare,将复制的代码粘贴到编辑区域,点击save按钮
-
点击add router
-
填写信息,点击保存
-
这里我试了好几次,如果不行就看看流程是不是哪里没有设置正确,最终输入域名,就可以访问notion了
-
在cloudflare中,service的编辑区域,我们复制进入的代码里,这个地方就可以设置google字体,并且附有google字体的链接
这一行可以允许设置自定义的script
-
找到这个变量使用的地方
仿照自定义script的方法,输入一个style标签
-
在上边定义一下CUSTOM_STYLE变量,并且根据notion网页中的元素选择器设置css样式
-
点击保存,回到网页刷新