站点更新记录

date
Feb 2, 2023
slug
nobelium2notionic
status
Published
tags
日常
Noiton
summary
从Nobelium到Notionic
type
Post
建立站点的初衷是把我无聊时的遐想，看书时的收获、学习时的笔记以及工作生活中的一些总结汇集到一处。对于不懂前端、不会后端且并不想在建站上花太多时间的我来说，如何用好已在使用的工具（Noiton），来尽可能使这个站点可以充分满足我的需求便是我更关注的事情。因此 nextjs-notion-starter-kit、Nobelium、Notionic、NotionNext 这类开源项目自然成了我的首选。
这类项目有个共同点，即都是将 Notion 作为博客的数据库，用 NextJS 生成静态页面，然后布署在Vercel上；差异则一方面在界面风格、另一方面在博客附属功能不同。

Nobelium, No

A static blog build on top of Notion and NextJS, deployed on Vercel.
这是 Nobelium 在github上的简介，几个关键字：Notion、NextJS、Vercel 便可以完全表达Nobelium的 优势。
2021年使用 Nobelium 建立了第一个博客，对我而言， Nobelium 最大的特点就是简单，样式风格看起来简单，部署简单，使用也简单，可以说，简单是我选择 Nobelium 的主要原因（次要原因是彼时我只会搞搞这种零开发一键部署的blog）。此外， Nobelium 还支持多种评论系统、RSS订阅及Sitemap等看起来花哨的功能。
Nobelium Demo 截图Nobelium Demo 截图
Nobelium Demo 截图
然而还没写几篇文章，我就发现一个致命的缺点，Nobelium 没法渲染 NOTION_PAGE_ID 所对应 databse 之外的 Notion 页面，这对我而言是致命的缺陷，因为彼时我的很多内容都是成体系的写在 Notion上 的，并不想因为部分内容要展现在站点上就打破已有的体系。想着自力更生，然而花了一天速成html, css, javascript 之后依然毫无头绪，就暂时放弃了，坐等作者更新吧。
时过一年之后，想要的功能依旧没有得到更新，且此时 Nobelium 已经几乎处于不维护的状态了，因此便开始寻找下一个满足需求（支持 subpage）的类似工具了。

Notionic, Yes

Notionic 是一个类 Nobelium 的开源项目，相较于 Nobelium，Notionic 在页面美观上下了不少功夫，此外，最关键的是Block page support，这便是我一直想要的子页面渲染。当然，Notionic 还有很多额外的功能，例如打赏、Newsletter、Draftt 笔记、联系表单等，这些功能虽然用不到，但是想着删功能总比加功能容易吧，于是便有了现在这个站点。
Notionic Demo 截图Notionic Demo 截图
Notionic Demo 截图

修改记录

关于子页面

经过短暂的试用后，发现 Notionic 所支持的子页面仅仅是 subpage 的支持，对于/link to page或者 @ page 是不完全的支持，因为其对引用的页面渲染的逻辑是：只在当前database下查找，只有在database里面找到了引用的page才给渲染，而对于database外部的page是不支持渲染的。
当然这难不倒我，在经过不断的console.log()之后，找到了支持外部 page 的方式，那就是对于外部的 page，给他伪造一份假的 post ，使其可以按照 database 内部的 page 一样正常渲染。
👉
UPDATE：目前 Notionic项目已经支持了外部page的引用，查看源代码之后，发现思路与我上述相同。

关于评论区 & 联系

在每个post下面放一个评论输入框，便可极大便捷与博主的联系，但对我而言，目前站点只是个人输出、个人展示的地方，加上评论区只会成为我的思绪累赘。而且，微信、电子邮件的发展，使得“联系我“变得更加便捷，所以我想放个邮箱在关于页面足矣。因此，评论系统就没开启，且移除了快速联系页面。当然，不否定日后开启评论功能。

关于侧边目录

可能是看书的时候，会很习惯的翻看目录。不管是看书前想通过目录对书做个大概了解；还是看到中途，想通过目录来思考内容前后的逻辑，总之，目录对我个人比较重要。Notion的目录通过 /toc 便可以呈现，不过在侧边栏显示需要通过插件来实现。而Notionic官方并没有支持侧边目录，想要这个功能只能自己代码实现，在参考 NotionNext 项目的目录实现后，通过 Ctrl+C、Ctrl+V 以及 console.log() 算是实现了个简陋的侧边目录，工作原理大概是每渲染一个页面时，通过函数获取到当前页面文章的目录结构，然后令其展示在侧边。看上去很简单的一个功能，但是却修改了两天，还是有bug，在网页缩小至80%的时候，目录标题与目录就会发生错位。CSS一身之敌，到现在都很困惑，为什么这个子容器的属性不受父容器的约束呢？
后来，再请教 Notionic 的作者的时候，了解到 Notionic 本来就是支持目录侧边展示的，只不过在我的电脑上需要把页面缩小至90%才能在侧边看到。当然，工作原理和我修改的完全不同，Notionic 是把Noiton 页面的 toc 偏移至了右侧，也就是说，如果我的Notion中没有 toc，那就完全不会显示。而我的修改的思路是，渲染页面的时候，去自动生成目录，然后再呈现出来，与页面本身有无 toc 是无关的。
目录的功能由于上面 CSS 的问题暂时搁置了，后续有时间再修改合并。

关于路径

理想中的路径是能透过这个路径一眼知道文章的内容主题。比如https://xxxx.com/about，一眼便能明白这是个关于页面。虽然给每个页面编辑一个 slug 有些困难，但是想到这和写一篇文章相比这只不过是写文章时候的举手之劳罢了。当然，对于引用 Notion 中的别处的页面，是没法为其指定一个slug的，考虑过使用标题来作为slug，但是又想到 slug 不能重复便觉得有些困难。所以目前对于引用的子页面，一般都是把页面的 pageId 作为 slug。

额外的修改

此外，还做了不少小修小改，比如：
  • Draft支持的移除。因为用不到此部分功能，因此直接砍掉，且把Note定向到Notion的某个页面。
  • 捐赠按钮位置移动。不够简洁，遂移至底部，且点击过后最多只显示8s。
  • pageFooter 和 pageHeader移除。不够简洁，移除。
  • 搜索页面屏蔽部分page。诸如 links、about，note 这些出现在导航栏的页面不太想让其出现在搜索页面，因此屏蔽掉了。
  • 社交链接部分移除。移除了 telegrame 和 twitter 社交链接。
  • 域名修改为环境变量。原先的域名是写在配置文件中的，修改为了环境变量。

感悟

凭借者 console.log()，花了一周多时间，完成了对 Notionic 的修改，现在基本满足个人需求了。
在这个过程中，next.js, javascript, html react, vercel, css 无数次出现在我的搜索栏中，印象最深的一个问题是我把域名作为环境变量后，始终无法在代码中访问这个环境变量，通过consloe.log打印出来的也一直是 undefined，想不通，搞了一下午，最后还是看 next.js 文档才知道 Next 环境变量分为服务端和客户端这两种，定义名称上还有区别。当然，方法总比问题多，凭借着粗浅的编程技能、热情的网友及强大的互联网，除了上文描述的目录的css问题之外，遇到的问题最后基本都得到了解决，但是对于javascript, nextjs，目前的水平依旧是只能看不会写，对CSS更是一脸茫然。领悟到了编程语言的一通百通，但是对与CSS真的无能为力。
站点完善好了，剩下的便只有多输出、多整理了。Notionic 绝对不是我最后一个站点方案，希望下次更新的时候，文章能更充实一些
最后，感谢 Nobelium 与 Notionic 开发者们，让我的想法能够得以简单实现。