同步块测试文章
内容提要
本文介绍了使用tailwindcss自定义样式的方法，包括修改布局、添加图标和隐藏页面按钮。还提供了修复预览图标显示问题、标题和表格文本换行的技巧，以及控制搜索页面标签显示的逻辑。
延伸解读
自定义 Tailwind 宽度的实践要点
文章通过修改 tailwind.config.js 的 theme.extend.maxWidth 添加了 52rem 的自定义宽度，并在 Container.js 中替换类名生效。这提示我们，当默认配置不满足设计需求时，优先查阅官方文档进行扩展，而不是硬编码样式。同时，修改后需确保类名引用一致，避免遗漏导致布局失效。
图标替换与页面按钮隐藏的联动
隐藏 Telegram 和 Twitter 图标并新增 contact 图标时，不仅需要修改 Social.js 中的图标代码，还要在 blog.config.js 中将 pagesShow.contact 设为 false 以隐藏对应页面按钮。这种前后端配置的联动提醒我们，界面元素的显隐往往涉及多个文件，修改时需全面检查，防止出现死链或无效入口。
新增页面的标准化流程
新增音乐播放器页面涉及多个步骤：在 Notion 中创建页面并设置 slug、在 lib/lang.js 中添加多语言导航文本、在 blog.config.js 中启用页面显示、在 Footer.js 中导入图标并添加链接对象。这一流程表明，扩展功能需要遵循项目既定的配置结构，任何遗漏都可能导致页面无法访问或显示异常。
CSS 修复中的常见陷阱与对策
文章提到修复预览图标偏移、标题不换行和表格换行等问题，均通过调整 CSS 属性解决。例如，为 .lazy-image-real 添加 top:0 修复图标偏移，为标题设置 display:block 强制换行，为表格设置 white-space:nowrap 和 overflow-x:auto 实现横向滚动。这些案例说明，细致观察元素样式并针对性覆盖，能有效解决界面显示问题。
Q&A
如何用 tailwindcss 自定义最大宽度为 52rem？
在 tailwind.config.js 的 theme.extend 中添加 maxWidth: { 'custom-3xl': '52rem' }，然后在 Container.js 中将 max-w-3xl 改为 max-w-custom-3xl。
怎么隐藏 telegram 和 Twitter 图标并新增 contact 图标？
在 components/Common/Social.js 中注释掉 telegram 和 Twitter 图标代码，复制一份社交代码，替换 svg 为 envelope 图标，修改 Link 的 href 为 '/contact'。
如何隐藏 contact 页面按钮？
在 blog.config.js 文件中，将 pagesShow 对象的 contact 值设置为 false。
新增音乐播放器页面的步骤是什么？
在 Notion 新建页面并设置 slug；在 lib/lang.js 的 NAV 对象中添加中英文名称；在 blog.config.js 的 pagesShow 中添加 music: true；在 components/NavBar/Footer.js 中导入图标组件并在 links 列表新增对象，包含 id、name、to、icon、show 等属性。
如何修复 gallery 预览图标只显示一半的问题？
在 /styles/notion.css 中添加 .lazy-image-real { top: 0; }。
标题不换行的问题怎么解决？
在 /styles/notion.css 中添加 .notion-h, .notion-h1, .notion-h2, .notion-h3 { display: block; }。
如何设置表格内文本不自动换行并显示滑动条？
在 /styles/notion.css 中为 .notion-simple-table 添加 whitespace-nowrap overflow-x-auto block w-full border-0 !important; 并为 .notion-simple-table td 添加 white-space: pre;。
搜索页面标签显示的逻辑如何控制？
在 layouts/search.js 中新增状态变量 showTags，通过 useEffect 监听 filteredBlogPosts、searchValue 和 currentTag 的变化来更新 showTags，从而控制 Tags 组件的渲染。
