NotionNext使用备忘

type

status

date

slug

summary

部署

按照前辈教程来说就可以

参考：NotionNext-快速免费建站 | Notion开源、免费、快速建站

遇到的问题

页面ID失效

问题

~~在vercel中多次删除重建项目，会导致引入notion的页面ID失效~~

补充，很快发现，导致页面ID失效的原因是打乱了notion数据库的视图顺序

如果我把Table试图拖到最后，网站就找不到notion数据库的页面信息了。

解决办法

~~备份好数据，建立新数据库，获得新页面ID，更新vercel中的环境变量并重新部署~~

保持notion数据库的视图顺序，注意每个视图调整filter是不影响的

多数据库静态部署

使用同一套 github 上 fork 的 notion-next 项目

使用 vercel 部署基于第一步项目的新项目，如 miozlife-notionnext-read（添加 notion 页面 ID）

添加二级域名解析，如 read.mioz.life

给 vercel 项目 miozlife-notionnext-read 添加域名

根据 vercel 提醒补充 _vercel 解析

给 vercel 项目 miozlife-notionnext-read 添加 twikoo 评论的环境变量（从已有项目复制过来即可）

将 vercel 的 notionnext 项目均改成 yarn export 静态部署

修改 github 的 notionnext 项目文件，vercel 项目将自动排队重新部署

音乐组件

参考：

simple-notion-widgets

通过QQ获取音乐列表

通过网易云专辑 id 获取播放列表，通过歌单 id 来获取播放列表。并设置列表高度，防止出现浏览器的滚动条，一格可认为是 32

通过网易云音乐歌曲 id 来获取。并强制开启黑暗模式，默认是跟随系统

其他属性

option	default	description
server	require	音乐平台 `netease`, `tencent`
type	require	类型 `song`, `playlist`, `album`, `search`, `artist`
id	require	`song id` `playlist id` `album id` `search keyword` `artist`
colorscheme	ㅤ	`dark` 黑暗模式， `light` 白天模式，默认跟随系统。
theme	`#2980b9`	主色调，不包括背景色
loop	`all`	循环模式 `all`, `one`, `none`
order	`list`	播放顺序 `list`, `random`
preload	`auto`	预加载 `none`, `metadata`, `auto`
volume	`0.7`	默认音量，如果手动修改了音量，则该设置无效
list-folded	`false`	列表默认折叠
list-max-height	`340px`	列表最大高度
storage-name	`metingjs`	存储播放器设置的 localStorage key

一些修改

Heo主题文章头图

初始的文章头图，蓝色面积过大，视觉上会觉得颜色偏亮，容易造成视觉疲累。

简单修改样式，保持蓝色主调，扩大头图

Magzine主题修改

修改右上引导卡片配色

路径 themes/magzine/components/BannerItem.js

修改通知栏颜色和间色相同（浅灰色）

路径 themes/magzine/components/CTA.js

修改文章右下角联系卡片配色并增加圆角

路径 themes/magzine/components/TouchMeCard.js

增加友链随机跳转

访问 https://yourdomain.com/random 即可。

💡

欢迎您在底部评论区留言，一起交流~

部署

遇到的问题

页面ID失效

问题

解决办法

多数据库静态部署

音乐组件

一些修改

Heo主题文章头图

Magzine主题修改

增加友链随机跳转

猫酣 | Mioz

打赏赞助

支持猫酣更好的打理小窝