更新步骤

正常更新

正常情况下，如果有更新就是像下面一样，可以直接更新，直接点击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，标记为已经解决；

6. 再点击Commit merge，提交更新；

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

本地调试

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

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

• 部署到Netlify使用的直接是main主支，所有的pull命令也是pull 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. 修改themes-heo-config.js

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

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

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

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

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

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

11. 全局搜索替换以下部分(要先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

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

13. 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） 
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

14. lib-lang文件夹内部替换：
zh-CN.js
本文采用 CC BY-NC-ND 4.0 许可协议，转载请注明出处。 👉🏻 如无特别声明，本文版权归©Noooter电子手帐所有， 采用 CC BY-NC-ND 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! 👉🏻 如无特别声明，本文版权归©Noooter电子手帐所有， 采用 CC BY-NC-ND 4.0 许可协议，转载请附上原文出处链接和本声明。 修改英文版声明是因为，网站使用的语言是en-US，但这里需要显示为中文。

15. components-LoadingCover.js修改：

16. 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;