运用 Gatsby.js 搭建静态博客 3 款式调解

原文链接:https://ssshooter.com/2018-12…

回忆:运用 Gatsby.js 搭建静态博客 2 完成分页

修复代码高亮

为了测试款式,随意找一个之前的 .md 文件粘贴到 blog 项目中衬着看看结果:

《运用 Gatsby.js 搭建静态博客 3 款式调解》

emmm,题目大了,必备的代码高亮都没有…

《运用 Gatsby.js 搭建静态博客 3 款式调解》

然则当我检察元素时发明,这竟然是已被分词的状况,又经由一系列的材料汇集,发明 prismjs 已预装到项目中,那末我们要做仅仅是引入css文件就好了。

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

《运用 Gatsby.js 搭建静态博客 3 款式调解》

胜利增加款式!固然,除了 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 谷歌

    原文作者:ssshooter
    原文地址: https://segmentfault.com/a/1190000017374335
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞