开源这个博客的源码 — Nobelium-Plus
date
Apr 26, 2022
slug
nobelium_plus
status
Published
tags
Website
Craft.do
Notion
Next.js
summary
在 Nobelium 的基础上修改而来, 增加了侧边栏大纲, 主题切换, 语言切换, 原生评论, 联系表单等等功能, 还集成了 Craft.do 分享页面到站点中.
type
Post
一个 Nobelium 的衍生版本, 懒得想名字, 所以就叫 Nobelium-Plus 吧. 虽然样式修改了很多, 不过都在原有的 TailwindCSS "框架"内, 新增的功能也没有添加什么复杂的依赖包.
总体来说, 增加了一些实用的功能, 比如:
- 侧边栏文章大纲
- 主题实时切换
- 多语言实时切换
- 贴合网站风格的评论区
还有一些很私人化的功能, 像是:
- 联系表单
- 微信打赏
- Telegram 通知集成
你可以在下面 Github 仓库找到本站的全部代码:
部署过程和 Nobelium 基本一样, 所以请参考原版的说明即可. 本文主要补充一些新增功能的用法.
周刊 Newsletter
Nobelium 本身支持了两种类型的文章, 分别是 Post 和 Page, 对应了博客文章和博客页面, 我新增了一个类型 Newsletter, 它和 Post 类似, 但不会出现在首页的博客文章列表中.
当你在 Notion 的 Nobelium 数据库里新建一个页面时, Type 选择 Newsletter (没有就在数据库里新建一个) 时, 该页面就不会显示在博客文章列表中, 而是显示在周刊 Newsletter 那一页.
多语言
为了站点轻便, 多语言这个功能没有使用其他依赖库, 只在 Next.js 原生 i18n 支持下配合 next/router 实现了这个功能.
如果你要新增或者修改网站的语言或者文案, 只需要打开
lib/lang.js 修改其中的内容即可. 值得一提的是, 目前全站的文字内容都已经"提炼"到这个文件, 也就是说你可以在这个文件中修改全站每一处的文字内容.如果需要新增语言, 首先在
lang.js 后面按格式添加你的语言和相对应的翻译, 然后在 next.config.js 中修改 i18n 的配置.如下所示, 请确保两个文件中语言的缩写一致, 举个例子:
- 如果你在
lang.js中新增了新语言, 名为zh-HK
- 那么在
next.config.js中也需要配置一样的语言缩写zh-HK才会生效
// lib/lang.js
export const lang = {
zh: { ... },
zh-HK: { ... },
en: { ... },
ja: { ... },
es: { ... }
}
// next.config.js
i18n: {
locales: ['en', 'zh', 'zh-HK'],
defaultLocale: 'zh',
localeDetection: false
},目前的语言切换按钮只支持在两种语言之间切换. 需要修改切换的语言, 可以编辑
components/LangSwitcher.js 里的表达式, 当前是中英两个语言之间切换.<Link locale={locale === 'en' ? 'zh' : 'en'} passHref href={asPath}>联系表单
联系表单会把提交的内容发送到 Telegram 里, 即便访客在国内也可以把内容发送到 Telegram. 因为它是通过 Vercel 的边缘函数给 Telegram 发送信息的, 所以不存在 Telegram 被墙发不出去的情况.
要配置这个表单, 你需要先创建一个 Telegram 机器人. 然后和 @BotFather 机器人交互, 获取你的 bot 的 API token.
类似 Nobelium 部署时添加的
NOTION_PAGE_ID 环境变量一样, 你需要在 Vercel 后台添加一个变量, 名为 TELEGRAM_TOKEN, 值就是你申请到的 API token.最后修改 blog.config.js 里的
telegramChatId 那一项为你的 chat id (可以询问 Telegram 机器人 @chatIDrobot), 这样你的联系表单就配置好了.记得要和你创建的机器人互动一下, 给它发个
/start, 不然机器人无法给你发消息.评论区
因为 Nobelium 已经支持的评论系统似乎都不太好用, 或者和网站主题风格不搭. 所以就自己动手搞了一个, 这样评论区看起来和网站风格比较一致.
评论内容存储在 Supabase, 免费版已经完全够用. 要配置这个评论区, 你需要注册一个 Supabase 的账号, 然后新建一个数据库, 再新建一张名为
comments 的表, 表结构如下:id - int8
name - text
email - text
postURL - text
comment - text
created_at - timestamp
show - boolean表结构如图(点击展开):
然后在数据库的 settings —> api 页面复制
anon key 和 URL, 把它粘贴到 blog.config.js 文件里的 supaCommentsConfig 那两行中, 并修改 provider 为 supacomments.如图, 是 anon key, 不是 secret, 不要复制错了 (点击显示图片).
provider: 'supacomments', // leave it empty if you don't need any comment plugin
supaCommentsConfig: {
supabaseUrl: '', // The url of your Supabase instance
supabaseAnonKey: '', // The anonymous key of your Supabase instance
},这样评论区就配置完了. 值得一提的是, 如果你配置了
TELEGRAM_TOKEN, 那么当有人发表评论时, 你的 Telegram 同样也会收到通知.目前评论区的代码还没开源(快了), 因为有一些细节还没搞定, 但是并不影响使用. 打包后的代码我放在了 public/comment 目录, 目前已经适配了中英两个语言.
请注意你使用的 Supabase 数据库, 如果有敏感数据建议你开启 RLS(行级安全), 否则任何人都可以修改你的数据库. 但如果这个实例只是用于网站评论, 你也可以无视这个提醒, 毕竟评论数据本来就是要公开的.
行级安全配置示意(可选):
Craft.do 分享页面
Craft.do 同样是我很喜欢用的一个软件, 而且 Craft.do 的分享页面做得很出色, 早在去年我便写过一个 Cloudflare Worker 的脚本用来自定义 Craft.do 分享页面的域名. 后来我发现 Next.js 也支持一定程度的 rewrite, 可以做到类似 Cloudflare Worker 的功能, 于是我便把 Craft.do 也整合到这个博客中了.
配置方式很简单, 在 Craft.do 新建一个文档, 设为公开, 格式参考这个页面:
把分享链接粘贴到
blog.config.js 里的 craftConfigShareUrl 就可以了, 网站会自动生成笔记页面.要修改笔记页面左上角的 logo 只需要在
public 下替换那个 favicon.svg 图片. 要修改右上角的菜单内容也是在 blog.config.js 里修改 notes 相关的部分即可.notes: '左蓝的笔记',
notesNav: {
index: '全部笔记',
blog: '返回博客',
contact: '联系我'
},
notesLink: {
index: '/',
blog: '<https://zuolan.me>',
contact: '<https://zuolan.me/contact>'
},如果你的 Craft.do 配置页面格式不正确, 在生成的笔记页面底部会有一行字提示你. 自己核对一下
craftConfigShareUrl 页面内容的格式.最后, 这里还有一个去掉了 Notion 相关代码的版本, 只保留了 Craft.do rewrite 的相关功能. 我把它也开源出来, 供有需要的人参考使用.