Notionic博客定制化修改
内容提要
本文介绍 Notionic 博客的个性化修改，包括调整内容区宽度至 52rem、修改页脚社交图标并新增音乐页面、修复友链预览图标偏移、多级标题不换行和表格被撑大等问题、优化搜索页标签显示逻辑、调整文章目录缩进，以及定制友链卡片、评论框和代码块样式。
延伸解读
修改前的准备与注意事项
文章开头提到，博客前期部署可参考项目作者的文章。作者也列出了一些想修改但未成功的地方，如同步块内文章无法显示目录、评论提交按钮在切换黑暗模式时跳色、无法固定底部导航栏。这些未解决的问题提醒读者，定制化修改可能遇到技术瓶颈，需有心理准备。
内容区宽度调整的细节
原内容区宽度为42rem，作者觉得略窄，最终调整为52rem。由于项目使用tailwindcss，默认最大宽度没有52rem，需在tailwind.config.js的theme.extend中自定义maxWidth，并在Container.js中修改类名。这展示了如何通过配置文件扩展默认样式。
页脚社交图标与新增页面的方法
作者删除了telegram和Twitter图标，新增contact图标并隐藏contact页面按钮。新增页面以音乐播放器为例，需在Notion新建页面、在lib/lang.js的NAV对象中添加中英文标签、在blog.config.js的pagesShow中启用、在Footer.js中导入图标并添加链接对象。注意选择图标时避免多单词以防部署报错。
样式修复与定制化调整
文章还修复了友链预览图标偏移、多级标题不换行、表格被撑大等问题，并优化了搜索页标签显示逻辑、调整了文章目录缩进。此外，定制了友链卡片、评论框和代码块样式。这些修改大多通过添加CSS或调整组件实现，体现了对细节的打磨。
Q&A
Notionic博客的内容区宽度怎么从42rem改成52rem？
在blog-notionic/tailwind.config.js的theme.extend.maxWidth中添加'custom-3xl': '52rem'，然后在blog-notionic/components/Container.js中将max-w-3xl改为max-w-custom-3xl。
如何修改Notionic博客页脚的社交图标，比如去掉Telegram和Twitter，加上邮箱图标？
在components/Common/Social.js中注释掉Telegram和Twitter图标代码，新增一个Link组件，使用envelope图标的svg，并设置href='/contact'。同时，在blog.config.js中将pagesShow.contact设为false以隐藏contact页面按钮。
Notionic博客怎么新增一个音乐播放器页面？
在Notion模板中新建页面并设置slug，在lib/lang.js的NAV对象中添加MUSIC字段（中英文），在blog.config.js的pagesShow中添加music: true，在components/NavBar/Footer.js中导入PlayIcon并在links列表中添加新对象，包含id、name、to、icon和show属性。
Notionic博客的友链预览图标只显示一半，怎么修复？
在/styles/notion.css中添加.lazy-image-real { top: 0; }即可修复。
Notionic博客的多级标题不换行，如何解决？
在/styles/notion.css中添加.notion-h, .notion-h1, .notion-h2, .notion-h3 { display: block; }，让标题独占一行。
Notionic博客的表格被撑大了，怎么调整？
在/styles/notion.css中添加.notion-simple-table { @apply whitespace-nowrap overflow-x-auto block w-full border-0 !important; line-height: 1.5rem; }和.notion-simple-table td { border: 1px solid darkgray; white-space: pre; }。
Notionic博客搜索页的标签显示逻辑怎么优化？
在layouts/search.js中新增showTags状态，通过useEffect根据搜索值和结果更新showTags，当有搜索结果或选中标签时隐藏标签，否则显示标签，并调整NOT_FOUND显示在标签上方。
Notionic博客的文章目录如何实现缩进？
在components/Post/TableOfContents.js中，将第51行div的className修改为包含条件判断的字符串，根据node.indentLevel添加ml-4或ml-8类。
