更新步骤

正常更新

正常情况下，如果有更新就是像下面一样，可以直接更新，直接点击Update branch即可，不要点击Discard XX commits，这样的话之前所有的修改就全部没了。

特殊更新

如果出现了下面的提示，那一定是勤劳的tangly1024又更新了配置文件，Github无法理解差异，没办法直接更新了。具体步骤看下面👇🏻

⚠️

这种情况下点击Open pull request会把代码上提交到NotionNext中央仓库（贡献代码），不能随便点！

特殊更新冲突解决办法

解决步骤

1. 先打开Pull requests，点击New pull request新建一个合并请求；

2. 点击Create pull request建立合并请求；

3. 在Add a title里面随便设置一个标题，点击Create pull request，创建合并请求；

4. 拉到最底下，点击Resolve conflicts，手动解决冲突；

5. 修改冲突的代码，修改好之后点击Mark as resolved，标记为已经解决（选择Accept incoming change为）；

6. 再点击Commit merge，提交更新（可以新建一个分支再merge）；

7. 如果你调试之后一切正常了，更新也完成了，记得去tangly1024的NotionNext中央仓库，打开Pull requests，找到自己的合并请求，然后把它关闭掉。

本地调试

• 项目本地位置：WeLoveArale/♾️Code/Noooter/NotionNextNoooter

• 项目文件夹拖到VSCode后，终端运行npm run dev，可以在本地打开调试（http://localhost:3000）。

• 部署到Netlify使用的直接是main主支，所有的pull/push命令也是pull/push origin main

• ⚠️由于本地调试需要调用Notion数据，最好开启TUN模式

修改文件

配置文件

语言

重新安装部署

本地部署过程

1. fork项目到账号（isunkit），clone到本地，先看有没有Node.js环境（过程可以问AI），目前Mac mini已全局安装

2. 在新的项目文件夹运行前要npm install（在Terminal安装比较好）

3. 安装之后npm run dev即可运行项目

4. 如遇上无法连接到站点，可能是Notion被墙，需开TUN模式

修改项目内容

1. 从.env.example复制一份文件重命名为.env.local，修改里面的NOTION_PAGE_ID和 API_BASE_URL，并把文件加入.gitignore（可以把其它在Netlify的环境配置内容都填在这里，方便本地调试）

2. 修改文件blog.config.js（大部分能在Notion配置中心修改的都修改了）

3. 主题选择heo（其实这也是配置文件里面的，单独说一下）

4. 修改文章排序方式conf0ost.config.js
• POSTS_SORT_BY … || 'notion’改成'date’

5. 修改themes-heo-config.js

6. 替换站点图标public-favicon（直接替换文件即可）

7. 替换顶栏右侧板块背景图public-bg_image.jpg（直接替换文件即可）

8. 增加手帐APP图标图片public-images-heo（直接把图片拖进去即可）

9. themes-heo-style.js修改（修改部分标注了新增style by arale）

10. styles-global.css修改（修改部分标注了新增style by arale）

11. 修改themes-heo-index.js注释<Footer/>、<PostAdjacent {...props} />、<ShareBar post={post} />（修改部分标注了modified by arale）

12. 全局搜索替换以下部分(要先11再12，不然12有的地方搜不到)
1. dark:hover:border-yellow 👉🏻 dark:hover:border-indigo
2. dark:hover:text-yellow 👉🏻 dark:hover:text-indigo
3. dark:group-hover:text-yellow 👉🏻 dark:group-hover:text-indigo
4. dark:bg-yellow 👉🏻 dark:bg-indigo
5. dark:hover:bg-yellow 👉🏻 dark:hover:bg-indigo

13. 修改themes-heo-components文件夹下的：Hero.js、：（修改部分标注了modified by arale）

14. 404图片替换
把404.jpg放到public文件夹下
修改themes-heo-index.js代码

15. themes-heo-components文件夹内部替换：
Hero.js：
1. top-10 left-10 👉🏻 top-6 left-5
2. 'text-4xl font-bold mb-3 dark:text-white’ 👉🏻 'text-4xl font-bold mb-3 text-indigo-700'
3. 'w-2/3 hidden xl:block’ 👉🏻 'hidden xl:block’
4. bg-[#4259efdd] dark:bg-[#dca846] 👉🏻 bg-[#df9283db] dark:bg-[#df9283db]
5. '-ml-3 text-gray-300’ 👉🏻 '-ml-3 text-white’
6. today-card h-full bg-black 👉🏻 today-card h-full bg-white
7. text-white p-10 items-end 👉🏻 text-indigo-700 p-10 items-end
8. justify-center rounded-3xl 👉🏻 justify-center bg-indigo-400 text-white rounded-3xl
InfoCard.js：
1. fadeInUp bg-[#4f65f0] dark:bg-indigo-600 👉🏻 fadeInUp bg-[#f9f3eb] dark:bg-[#424242]
2. text-3xl font-extrabold mt-3 👉🏻 text-3xl text-indigo-700 font-extrabold mt-3
3. dark:bg-indigo-500 dark:hover:bg-black 👉🏻 hover:text-indigo-700
4. 去掉hover:text-black dark:hover:text-white（替换为空白）
5. group bg-indigo-400 dark:bg-indigo-500 hover:bg-white dark:hover:bg-black 👉🏻 group bg-indigo-400 hover:text-indigo-950 hover:bg-white
6. Line91-95 👉🏻 Line956（修改部分标注了modified by arale）
7. hover:bg-indigo-50 hover:text-indigo-950 dark:bg-indigo-500 dark:hover:text-white dark:hover:bg-black 👉🏻 hover:bg-white hover:text-indigo-950
MenuItemCollapse.js：
1. hover:bg-gray-50 dark:hover:bg-gray-900 👉🏻 hover:bg-indigo-50 dark:hover:bg-indigo-600
MenuItemDrop.js：
1. hover:bg-black hover:bg-opacity-10 👉🏻 hover:text-white hover:bg-indigo-600
2. cursor-pointer hover:bg-blue-600 👉🏻 cursor-pointer hover:bg-indigo-400
PostHeader.js:
1. 顶部新增import TagItemMini from './TagItemMini’
2. ${isDarkMode ? '#CA8A04' : '#0060e0'} inset; 👉🏻 ${isDarkMode ? '#d68272': '#efc8c1'} inset;
3. {`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} 👉🏻 {`${isDarkMode ? 'bg-[#d68272]' : 'bg-[#efc8c1]'}
4. top-48 z-10 flex flex-col space-y-4 lg:-mt-12 👉🏻 top-30 z-10 flex flex-col space-y-4 md:top-40 lg:top-48 lg:-mt-12
5. bg-blue-500 👉🏻 bg-indigo-600
6. hover:text-blue-500 👉🏻 hover:text-blue-600
7. 注释Line76-93；（修改部分标注了modified by arale）
8. <div className='flex justify-center '> 👉🏻 <div className='flex flex-col justify-center '>
9. dark:text-gray-200 text-opacity-70 👉🏻 dark:text-white text-black
10. 注释Line108-113；（修改部分标注了modified by arale）
11. 新增Line116-121；（修改部分标注了modified by arale）
12. 'fa-regular fa-calendar’ 👉🏻 'fa-regular fa-calendar mr-0.5’
13. 'fa-regular fa-calendar-check’ 👉🏻 'fa-regular fa-calendar-check mr-0.5’
14. 'busuanzi_container_page_pv font-light mr-2’ 👉🏻 'busuanzi_container_page_pv font-light pl-1 mr-2’
15. 'fa-solid fa-fire-flame-curved’ 👉🏻 'fa-solid fa-fire-flame-curved mr-0.5’
16. 新增Line152-160；（修改部分标注了modified by arale） 
17. 更改嵌套关系 👉🏻 className='flex-col flex md:flex-row’后的</div>和className='pl-1 mr-2’后的</div>都移到</section>之前
18. 去掉hover:underline（替换为空白）
PostRecommend.js：
1. 注释Line59-62；（修改部分标注了modified by arale） （这一部分后来找不到了。。。）
修改推荐文章为：标题在底部，且垫一个半透明div（Line50-55）
SideRight.js：
1. 新增Line48-56；（修改部分标注了modified by arale） 
2. 注释Line37、Line64-70、Line76-86（修改部分标注了modified by arale）
SlideOver.js：
1. dark:bg-[#ff953e] 👉🏻  dark:bg-[#1e1e1e] dark:hover:bg-[#df9283]
TagItemMini.js:
直接按文件替换
TouchMeCard.js：
1. bg-[#4f65f0] dark:bg-indigo-600 dark:border-gray-600 👉🏻 bg-[#f9f3eb] text-[#424242] dark:bg-[#424242] dark:text-white
2. cursor-pointer lg:p-6 p-4 border 👉🏻 cursor-pointer lg:p-6 p-4
3. font-[1000] text-3xl 👉🏻 font-[1000] text-3xl text-indigo-700
4. font-[1000] text-xl h-full 👉🏻 font-[1000] text-xl h-full text-gray-600 text-gray-600 dark:text-white
PostCopyright.js：
修改SmartLink里的href，不然会跳转到不存在的/about；并注释掉{siteConfig('AUTHOR')}，改为下一行内容，这样的修改是为了可以直接在Copyright这里显示Post作者（如果作者是第三方也会显示），不然会都显示站点作者Noooter

16. lib-lang文件夹内部替换：
zh-CN.js
本文采用 CC BY-NC-ND 4.0 许可协议，转载请注明出处。 👉🏻 本文采用 CC BY-NC-SA 4.0 许可协议，转载请附上原文出处链接和本声明。
en-US.js
All articles in this blog, except for special statements, adopt BY-NC-ND 4.0 agreement. Please indicate the source! 👉🏻 本文采用 CC BY-NC-SA 4.0 许可协议，转载请附上原文出处链接和本声明。 修改英文版声明是因为，网站使用的语言是en-US，但这里需要显示为中文。

17. components-LoadingCover.js修改：

18. styles/notion.css默认样式修改
字体颜色修改
可以修改Notion默认字体颜色和背景色。
品牌标准色使用：橙色，绿色，黄色，紫色。
下图为修改前后对比：


具体色号：文本为标准视觉的加深色；背景色则是light色（等级不一定）
橙色文本.notion-orange .notion-orange_co👉🏻#d68272;
橙色背景.notion-orange_background👉🏻#f7e4e0;
绿色文本.notion-teal, .notion-teal_co👉🏻#73b192;
绿色背景.notion-teal_background👉🏻#edf4f0；
黄色文本.notion-yellow, .notion-yellow_co👉🏻#d3a259;
黄色背景.notion-yellow_background👉🏻c;
紫色文本.notion-purple, .notion-purple_co👉🏻#6659a7;
紫色背景.notion-purple_background👉🏻#dddaea;
粉色文本.notion-pink, .notion-pink_co👉🏻#fae4ef;
粉色背景.notion-pink_background👉🏻#f8e5ea;
红色文本.notion-red, .notion-red_co👉🏻#c83c3c;
 
notion-quote修改
原quote样式配色略不和谐，修改以下内：

使用技巧记录

超链接：

1. 整页超链接时，直接使用在netlify的网页链接

2. 区块超链接时，先在Notion笔记里复制区块链接，把#以及后面的部分拼合到网页链接之后即可。例如：
• 区块链接为： https://www.notion.so/3377b2bc1261809e8c77e28e6e5d2ea8?source=copy_link#3377b2bc12618061a549eadf30effa27 这里蓝色字是notion生成的未经过NotionNext解析的初始网页地址，红色字是网页里区块链接编号，那么先找到蓝色字对应的解析后网址，为https://noooter.netlify.app/article/how-to-use-resource，然后把#➕红色字的区块链接编号加到后面即可。结果为： https://noooter.netlify.app/article/how-to-use-resource#3377b2bc12618061a549eadf30effa27
• 或者也可以直接把解析后的网页地址替换掉原来的notion生成的初始地址： https://noooter.netlify.app/article/how-to-use-resource?source=copy_link#3377b2bc12618061a549eadf30effa27
• 以上两种链接方式没有区别。注意不要直接使用初始网页地址，否则会访问到notion原始笔记页，也不要就简单把原始网址的https://www.notion.so改成https://noooter.netlify.app，这样虽然能访问到解析后的网页，但是网页标签页会显示为null，Post Header的作者、日期也无法显示。
• ⚠️ 如果Notion再次改动API接口方式，需要重新解析网页，这里可能会有变化，需要重新更改地址。