网页版notion自定义样式

前言：本人习惯使用notion进行读书笔记、目标管理、生活记录。奈何其字体有限，颜色也不能随心所欲的设置，所以探索了自定义网页版样式的方法。
参考b站博主 notion美化css样式

1. 首先，你需要拥有一个自己的域名 参考购买域名教程

2. 登录网站：cloudflare.com 并且注册一个账号，具体网址百度一下，因为可能会有更新

3. 注册登录完毕后，在这个页面点击第一个get started
   

4. 在输入site的地方，输入你的域名，并且点击add site
   

5. 选择免费的plan
   

6. 管理域名的dns。
   

7. 其中192.0.2.1是cloudfare的ip，可以在下图所示位置找到
   

8. 点击save之后，点击continue
   根据提示，我们需要将dns修改成cloudflare提供的dns
   

9. 去往阿里云修改自己的dns

10. 修改完成之后，到cloudflare点击check按钮，会显示下图页面
    

11. 把配置项都点上，然后点击完成按钮
    

12. 点击如下按钮，可能会等待一段时间才会连接上
    

13. 去吃个饭，睡个午觉回来

14. 已经成功创建
    

15. 点击左侧边栏的workers，可能会有邮箱验证，验证之后进入创建worker的界面
    
    点击create a service
    
    点击http router

16. 点击continue进入edit界面，这个页面不要关闭
    

17. 在新标签页打开fruitionsite.com,在step2输入notion的分享链接和你的域名，点击下方的copy复制生成的代码
    

18. 回到cloudflare，将复制的代码粘贴到编辑区域，点击save按钮
    

19. 点击add router
    

20. 填写信息，点击保存
    

21. 这里我试了好几次，如果不行就看看流程是不是哪里没有设置正确，最终输入域名，就可以访问notion了
    

22. 在cloudflare中，service的编辑区域，我们复制进入的代码里，这个地方就可以设置google字体，并且附有google字体的链接
    
    这一行可以允许设置自定义的script
    

23. 找到这个变量使用的地方
    
    仿照自定义script的方法，输入一个style标签
    

24. 在上边定义一下CUSTOM_STYLE变量，并且根据notion网页中的元素选择器设置css样式
    
    

25. 点击保存，回到网页刷新