使用 Gatsby.js 搭建静态博客 3 样式调整

原文连接：https://ssshooter.com/2018-12...

回顾：使用 Gatsby.js 搭建静态博客 2 实现分页

修复代码高亮

为了测试样式，随便找一个之前的 .md 文件粘贴到 blog 项目中渲染看看效果：

emmm，问题大了，必备的代码高亮都没有...

可是当我审查元素时发现，这居然是已经被分词的状态，又通过一系列的资料搜集，发现 prismjs 已经预装到项目中，那么咱们要作仅仅是引入css文件就好了。

import 'prismjs/themes/prism-TWILIGHT.css'

成功添加样式！固然，除了 TWILIGHT，prismjs 还有其余样式如 COY、OKAIDIA 等，还有其余能够看官网右侧的选项。

大问题解决了而后就按照本身喜爱调整样式吧～

全局自定义样式

方案 1：修改 typography.js

你能够经过在 src/utils/typography.js 中的 overrideThemeStyles 添加全局样式（固然，其更重要的做用是覆盖原有的主题样式）。

不过比较麻烦的是:

1. 覆盖样式需重启服务才能生效
2. 不能嵌套选择器

// 这是一个 🌰
Wordpress2016.overrideThemeStyles = () => ({
  'a.gatsby-resp-image-link': {
    boxShadow: 'none',
  },
  'h1, h2, h3, h4, h5, h6': {
    fontWeight: 100,
  },
  h1: {},
  img: {
    background: '#fff',
    padding: '5px',
  },
  body: {
    backgroundColor: $backgroundColor,
    color: $fontColor,
    fontFamily: 'source-han-sans-simplified-c, sans-serif',
    fontWeight: 400,
    fontStyle: 'normal',
  },
})

方案 2：使用 SCSS

除了修改 typography.js，你还能够添加全局 CSS 文件。

由于预想到将来可能须要修改主题，方便起见应该将一些经常使用颜色存为变量，因此须要先安装 scss 和 gatsby 对应插件：

npm install --save node-sass gatsby-plugin-sass

并在插件列表添加插件 gatsby-plugin-sass

参考 https://github.com/gatsbyjs/g...

再次运行项目，此时已经能够正常引入 scss 文件。

$backgroundColor: #434343;
$titleColor: #E87A90;

body {
    background-color: $backgroundColor;
}

.css-title{
    color: $titleColor;
}

css-title 这种命名方式或许很非主流，可是，不知道你们有没有这样的经历，在全局搜索时，搜一个经常使用词，就好比 title，会搜出一大堆东西影响判断。因此我以 css-title 命名的目的是区分其余 title，在搜索 css-title 绝对不会出如今 js 中使用的变量，在特殊状况须要全选修改的时候能够轻松无坑地全选此 class。

其实实际上仍是要两种方法都用上，由于有的地方须要覆盖原来的样式，这个时候最好用 js，而自定义的样式常常须要嵌套，使用 scss 更方便。

PS1 打包后出现的问题

明明开发环境好好的，可是打包后却出现了样式不正常的问题（第一次加载全局css失效，刷新才出现效果）。在 github 提了个 issue，获得了热心回答，真的感人 😭。简单来讲这个问题就是上面说的最好用 js 覆盖原来样式的缘由。➡️传送门

PS2 选择网络字体

字体对于中文用户是永远的痛。字符量大致使字体的体积大得可怕，严重影响用户体验。使用网络字体是其中一个方法（可是本质来讲体积仍是没有减少的，只是提供商能够为你高速提供字体，减小用户等待）。

在线字体能够在这里找到：adobe 谷歌