使用NotionNext搭建静态博客
00 分钟
2023-4-21
2023-8-3
type
status
category
date
slug
summary
tags
icon
Last edited time
Aug 3, 2023 01:11 PM

前言

最近网上冲浪,找到了一个新玩具,还挺有意思的。
NotionNext
tangly1024Updated Nov 18, 2024
使用 NextJS + Notion API 实现的,支持多种部署方案的静态博客,无需服务器、零门槛搭建网站,为Notion和所有创作者设计。
让我想起曾经用wordpress做过的一个静态博客,现在已经关闭了。目前所有内容都在Notion上。看了看NotionNext的文档,写的很详细,就试着实现了下。顺便记录一下遇到的问题和配置探索过程,之后也方便查询。

建站

具体建站过程就不记录了,作者的文档写的很详细,基本需要什么跟着配置就可以了。
文档在本文末参考文章内。

建站Tips

  • 如果要开启二级菜单的话,需要把type==Page && status==Published的页面删除,否则似乎会造成首页菜单和分页菜单出错,不统一。

关于blog.config.js的推荐配置(这些配置非默认情况)

 
 

关于音乐播放器的配置

默认音乐平台为网易云音乐
配置也是在blog.config.js
注:VIP歌曲无法播放

音乐需要VIP无法播放的解决方案

 
部分音乐在网易云、QQ音乐等平台需要会员,直接把歌曲id加到上面的链接中,是无效的,显示404。
在此提供两个替代方案。

方案一

这种方案并不完美,因为大部分链接都是临时的,过几天就过期了。
在网上找一个在线播放音乐网站,例如这个:
搜你需要的歌曲名字,由于版本很多,听一下哪一首是自己需要的。
找到之后点击播放,在下方播放器上右键→审查元素
notion image
notion image
<audio src=””>内的链接就是需要的链接,复制到浏览器打开
显示的是浏览器的播放器,那么这个链接就是有效的,把配置中url替换成这个链接就行
notion image
用例
Ping Pong的ED在网易云为VIP尊享
notion image
通过这种方式即可实现博客的音乐播放
notion image

方案二

有自己服务器或者对象存储的,直接把歌曲下载下来然后上传上去就行了。
这种方案最方便可靠。

主题的配置

我目前使用hexo主题,hexo主题的配置在
NotionNext/themes/hexo/config_hexo.js

更详细具体的配置

对于需要对于网站主题样式进行更详细的配置可以在NotionNext/themes里面进行配置,需要一点代码阅读能力。
例如说我有5个Category需要展示,在默认配置下,显示效果是这样的
notion image
看着很难受只能说
前往themes/hexo/components/NavButtonGroup.js
md:w-40改成md:w-32即可解决
notion image
更多个性化需求可以自己配置。
  • 修改文章区域宽度
    • themes/hexo/LayoutBase

如何进行page搬迁

二次开发

跟着原作者文档即可进行二次开发
有一个细节,代码下载到本地后,在blog.config.js中,将第五行
引号内修改为你自己的页面id,即可在本地进行二次开发调试
notion image

总结

还是挺有趣的一个玩具,简单配置了一下,就还行先用着了,后续有更多的需求在进行修改。

后续

顺带帮作者找到个Matery的Bug,作者已经修复,效率极高。
notion image

参考文章


评论