Notion博客配置和二次开发 | 😈Zabanya’s Blog

一、其他配置

（一）微软 Clarity 站点统计

Microsoft Clarity - Free Heatmaps & Session Recordings

Clarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.

https://clarity.microsoft.com/

进入官网完成注册、登录流程，然后点击「新建项目」，「名称」和「网站行业」按照实际情况填写，⚠️ 如果你的博客绑定了多个域名，那么填写其中一个即可，具体解释请看后文。

然后会自动跳转到配置界面，选择手动安装，点击「获取跟踪代码」，然后我们就可以复制这个值到我们的配置项 CLARITY_ID 中。

💡根据官网的提示我们可以知道，程序是通过这段代码进行对打开的网页进行统计，所以域名只要和博客绑定，能通过该域名访问到博客网站Clarity都能识别出来。

（二）Algolia 搜索服务

AI search that understands

Enterprises and developers use Algolia’s AI search infrastructure to understand users and show them what they’re looking for.

https://www.algolia.com/

Algolia 搜索提供给免费版客户服务如下：前1,000,000条记录是免费的，每月将享受 10,000 次搜索请求和 10,000 次推荐请求，😬对于普通使用应该是没问题的。

进入官网完成注册、登录流程，然后如下图所示进入API配置界面

以下就是三个关键的参数对应的位置

最后剩下 ALGOLIA_INDEX 参数，该参数可以理解为在Algolia中博客数据存放的地方。以下步骤是关于如何具体设置 ALGOLIA_INDEX 参数，⚠️需要注意，设置的「Index」名称需要与该参数一致。

⚠️

关于该四个参数的存放位置也有需要注意的点

1️⃣ ALGOLIA_APP_ID 参数必须在 blog.config.js 中进行设置，否则将无法触发向Algolia发送博客数据，具体原因见以下代码；

2️⃣ ALGOLIA_SEARCH_ONLY_APP_KEY 参数可以存放在Notion数据库中、环境变量或者写在blog.config.js代码中均可，但是 ALGOLIA_ADMIN_APP_KEY 参数建议直接在环境变量中设置；

3️⃣ ALGOLIA_INDEX 属性设置可以存放在Notion数据库中、环境变量或者写在blog.config.js代码中均可，关键是需要与Algolia设置中存在的Index名称相对应。

二、二次开发

（一）项目框架

该项目的主要布局如下：

/components：存放一些公用组件，E.g. Algolia搜索服务、Clarity站点统计、评论插件Twikoo等等；

/hooks：一些回调函数，例如用于界面尺寸修改时作出的回调响应；

/lib：对接第三方or一些工具的接口，如获取Notion页面数据…；

/pages：页面布局的逻辑、url跳转及路由的配置设置情况，其中「/pages/index」是主入口文件，主要用于Notion页面数据获取后的各种处理；

/theme：博客主题，其中该文件夹下的/components子文件夹设置了不同主题下的不同组件的摆放展示。

（二）修改样式

部分主题的一些细节可能并不对我们的胃口，此时我们就需要通过CSS知识微调一下界面效果（没有基础的同学建议先浅浅学习CSS规则噢🫣）。修改的方法分为两种：1️⃣全局CSS样式修改；2️⃣项目代码中进行修改。

1️⃣ 全局CSS样式修改

在配置中心的 GLOBAL_CSS 属性中添加对现有的CSS样式的覆盖。以heo主题为例，如果我们认为右侧公告的背景颜色太亮影响阅读，我们可以鼠标悬浮在需要修改的元素上方，右键「检查」即可打开开发者工具，发现是如下样式控制背景颜色，我们可以找到自己喜欢的颜色进行替代，并在 GLOBAL_CSS 属性中加入以下代码进行对现有样式的覆盖。

2️⃣ 修改源代码

由于项目采用的是 Tailwind CSS，属性都是以内联样式形式传递，拥有最高优先级。首先简单介绍 Tailwind CSS，其原理是通过在Html元素中添加类名的方式编写CSS样式。官方默认会为我们提供很多预设的类名，例如：className 属性为 rounded-sm，则实际中定义了CSS样式为 border-radius: 0.125rem;。若需要查询其他className代表的含义，请查看官网。

Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.