Notionic博客定制化修改
内容提要
本文介绍 Notionic 博客的个性化修改，包括调整内容区宽度至 52rem、修改页脚社交图标并新增音乐页面、修复友链预览图标偏移、多级标题不换行、表格被撑大等问题，优化搜索页标签显示逻辑，调整文章目录缩进，并定制友链卡片、评论框、代码块等样式。
延伸解读
修改前的准备与注意事项
文章开头提到，博客前期部署可参考项目作者的文章。作者还列出了一些未成功的修改，如同步块内文章无法显示目录、评论提交按钮在切换黑暗模式时有跳色、想固定底部导航栏未成功。这些说明定制化修改并非一帆风顺，读者在尝试类似修改时需有心理准备，并注意备份原始文件。
内容区宽度调整的细节
作者认为原内容区宽度42rem略窄，最终将宽度调整为52rem。由于项目使用tailwindcss，默认最大宽度没有52rem，因此需要在tailwind.config.js中扩展maxWidth，并在Container.js中修改类名。这体现了利用tailwindcss配置文件进行自定义样式的方法，读者可举一反三调整其他尺寸。
页脚社交图标与新增页面的步骤
修改页脚社交图标需在Social.js中注释掉不需要的图标，并新增contact图标，同时隐藏contact页面按钮。新增音乐页面则涉及在Notion中新建页面、在lang.js中添加多语言文本、在blog.config.js中启用页面、在Footer.js中导入图标并添加链接对象。步骤较多，需仔细对应文件路径和键值。
样式修复与定制化修改的集中管理
文章将多个样式修复和定制化修改集中在/styles/notion.css文件中，包括修复友链预览图标偏移、多级标题不换行、表格被撑大等问题，以及定制友链卡片、评论框、代码块等样式。这种集中管理的方式便于维护，但需注意选择器优先级和!important的使用，避免影响其他样式。
Q&A
如何修改 Notionic 博客的内容区宽度？
在 blog-notionic/tailwind.config.js 的 theme.extend 中添加 maxWidth: { 'custom-3xl': '52rem' }，然后在 blog-notionic/components/Container.js 中将 max-w-3xl 改为 max-w-custom-3xl。
Notionic 博客页脚如何添加音乐页面？
在 Notion 模板中新建页面并设置 slug，在 lib/lang.js 的 NAV 对象中添加 MUSIC 键值（中英文），在 blog.config.js 的 pagesShow 中设置 music: true，在 components/NavBar/Footer.js 中导入 PlayIcon 并在 links 列表中添加对应对象。
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 为 true 时渲染 Tags 组件，实现初始显示标签、搜索有结果时隐藏标签、无结果时显示标签等逻辑。
