随意录

NotionNext搭建时遇到的一些问题

logger

摸鱼经验|2022-10-12|最后更新: 2022-11-4|
slug
notion-next-settings
status
Published
type
Post
date
Oct 12, 2022
summary
tags
建站
NotionNext
category
摸鱼经验
password
Property
Nov 4, 2022 10:49 AM
icon

说在前面

在折腾过hexo、WordPress、Gridea后，每个都很好，每个又多少有点问题。
  • hexo：需要本地编译、上传GitHub，换了电脑，相关环境配置迁移让人头疼，很难在多个设备上操作。
  • WordPress
  • Gridea：和Hexo很类似，节省的是命令行编译和推送步骤，同样有多设备同步的问题。
群里看到有小伙伴提到了Notion-Next，可以在Notion上编写文字后，自动发布到博客，无需其他额外操作。
于是就跟着官方教程进行了搭建，
确实如官方所说，整个搭建过程不复杂，搭建完成后，确实可以在Notion上写文章，会自动发布到博客。
下面是整个搭建过程中遇到的一些问题，记录，可能对你有用。

域名

在大陆vercel域名被污染的情况下，域名基本上属于必须配置的选项。
所以，先去准备一个域名吧。

评论

评论模块的配置，大佬说的不是很清楚，如果自己摸索，还是需要一些精力的。

waline

waline基本上是最简单快捷的，且支持匿名（无需登录）评论，对用户来说更加友好。
参考官方文档，基本可以完成所有流程。
注意点：
  1. 如果没有国内已备案域名，一定要用LeanCloud国际版（很重要！）
  1. Vercel配置后，默认页面国内已经无法打开，需要配置域名以及在域名提供商配置CNAME解析才可以（也是因为Vercel被污染）；
这里我用的是namesilo，配置可以参考：
notion image
cname-china.vercel-dns.com 是国内专用的DNS。
Vercel中的配置：
notion image
⚠️⚠️⚠️国内站点配置NEXT_PUBLIC_WALINE_SERVER_URL，一定要填写自定义域名，不要填默认生成的https://xxx.vercel.app/ ，默认生成的地址国内无法正常访问，评论时，会出现Failed to fetch的问题：
notion image

cusdis

cusdis的使用也非常简单，官方地址：https://cusdis.com/
注册登录后，创建项目，在项目页面，点击Embed Code，即可获取到配置中所需的app-id（如下图）。
拿到这些信息，去NotionNext配置文件或vercel项目环境变量中配置即可。
notion image
cusdis评论，需管理员审核才会显示。
notion image

giscus

官方主页：https://giscus.app/zh-CN
安装步骤：

安装

直接访问：https://github.com/apps/giscus
点击inst
notion image
此时进入安装页面，可以选择在所有仓库安装，也可以选择在指定仓库安装。
这里，选择了博客所在的仓库。点击install即可。
notion image

开启仓库Discussions

参考官方文档，在仓库设置页面，在Features部分，点击开启Features
notion image
 

配置giscus

完成上述所有配置后，进入https://giscus.app/zh-CN页面
在仓库章节，填入安装了giscus的仓库地址，如下图。
填入后，页面会自动检测仓库是否满足条件。
其他配置，可以参考下图。
notion image
在启用giscus章节，即可找到NotionNext配置文件中所需的配置信息。
拿到这些信息，去NotionNext配置文件或vercel项目环境变量中配置即可。

百度统计

百度统计可以用来统计网站的一些访问量、用户量等信息。
有些小伙伴可能不确定具体地址，百度统计的地址是：https://tongji.baidu.com/main/homepage/self/homepage/index
进入后，点击使用设置，即可进入网站管理页面。
在此页面，点击新增网站，可以添加自己网站的信息。
notion image
添加完成后，点击获取代码，即可看到配置文件中提到的百度统计id。
notion image
过段时间后，就可以在百度统计中看到网站的访问统计信息啦~
notion image

页面挂件

页面挂件是live2d-widget-models 项目提供的功能，该页面可以进行效果预览。
配置文件中挂件设置方式如下：
// 悬浮挂件
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
WIDGET_PET_LINK:
  'https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
如果要更换的话，需要将挂件的完整CDN地址更换，但是其他插件的完整地址并不容易确定，偷懒的办法是直接换URL中主题的key。
准确的办法：
访问jsdelivr官网地址，搜索live2d-widget-model- 即可得到所有live2d-widget-models的CDN。
在预览页面选中某一挂件够，去jsdelivr搜索，就能找到完整地址。
比如，hijiki ，搜索live2d-widget-model-hijiki
notion image
通过上图操作，就能得到hijiki的完整地址啦：https://cdn.jsdelivr.net/npm/[email protected]/assets/hijiki.model.json
（其实就是换个主题的key就行啦~但是也可能版本不一致呢🤣）

后记

每次都是一样。
搭建博客的过程热血沸腾，幻想着有了方便快捷的博客编写发布系统，就会随时记录发布想法。
过了一段时间后，又回到了之前的状态，三天打鱼两天晒网。
诚然，博客的输入方便性会减少一些写的“仪式感”，让写的过程没有压力，从而促进整个写的过程。
但是其实这些都不是很重要。
重要的是写什么，去写，而不是用什么写。
 
  • Waline
  • Giscus
  • Cusdis