使用 Gatsby.js 搭建静态博客 3 样式调整
内容提要
本文介绍 Gatsby.js 静态博客的样式调整方法：引入 prismjs 的 CSS 实现代码高亮；通过修改 typography.js 覆盖全局样式，或安装 gatsby-plugin-sass 用 SCSS 自定义样式。建议两者结合，覆盖原样式用 JS，自定义嵌套样式用 SCSS。同时提及打包后首次加载 CSS 失效的问题及中文网络字体的选择。
延伸解读
代码高亮：引入 CSS 即可
文章指出，Gatsby 项目已预装 prismjs，但默认没有样式，导致代码块无高亮。解决方法很简单：在项目中引入 prismjs 的主题 CSS 文件，例如 prism-TWILIGHT.css。prismjs 还提供 COY、OKAIDIA 等多种主题，可按喜好选择。这提醒我们，遇到样式缺失时先检查依赖是否已存在，可能只需补充引入即可。
全局样式调整的两种路径
文章介绍了两种全局样式调整方式：修改 typography.js 的 overrideThemeStyles 可覆盖原有主题样式，但需重启服务且不能嵌套选择器；安装 gatsby-plugin-sass 后可用 SCSS 编写样式，支持变量和嵌套。作者建议两者结合：覆盖原样式用 JS，自定义嵌套样式用 SCSS，这样更灵活高效。
打包后 CSS 失效的注意点
文章提到一个常见问题：开发环境样式正常，但打包后首次加载全局 CSS 失效，刷新后才恢复。作者在 GitHub 提 issue 后得到解答，并指出这正是推荐用 JS 覆盖原样式的原因之一。这提醒开发者，样式方案的选择需考虑生产环境表现，避免仅依赖全局 CSS 文件。
中文网络字体的取舍
针对中文用户，文章指出字体文件因字符量大而体积惊人，影响加载体验。使用网络字体是一种缓解方法，但本质体积未减小，只是由提供商高速分发以减少等待。作者推荐了 Adobe 和 Google 的在线字体服务。这提示我们，中文站点选择字体时需权衡视觉效果与性能。
Q&A
Gatsby 博客代码高亮不生效怎么办？
在项目中引入 prismjs 的 CSS 文件即可，例如在代码中 import "prismjs/themes/prism-TWILIGHT.css"。prismjs 已预装，只需选择喜欢的主题样式。
如何全局自定义 Gatsby 博客的样式？
有两种方案：一是修改 src/utils/typography.js 中的 overrideThemeStyles 添加全局样式，但需重启服务且不能嵌套选择器；二是安装 node-sass 和 gatsby-plugin-sass，使用 SCSS 文件定义全局样式。
typography.js 和 SCSS 自定义样式各有什么优缺点？
typography.js 适合覆盖原有主题样式，但修改后需重启服务且不支持嵌套选择器；SCSS 适合自定义嵌套样式，方便管理变量，但覆盖原有样式时不如 JS 直接。建议两者结合使用。
为什么打包后首次加载 CSS 会失效？
这是打包后出现的问题，第一次加载全局 CSS 失效，刷新后才正常。原因与覆盖原有样式的方式有关，建议使用 JS 覆盖原有样式来避免此问题。
中文博客如何选择网络字体？
中文字体体积大，影响加载速度。可以使用网络字体服务，如 Adobe Fonts 或 Google Fonts，它们能高速提供字体，减少用户等待时间，但字体体积本身并未减小。
为什么建议同时使用 typography.js 和 SCSS？
因为覆盖原有样式时用 JS 更方便，而自定义样式常需要嵌套，用 SCSS 更合适。两者结合能兼顾覆盖和自定义需求。
