原文链接:https://ssshooter.com/2018-12…
修复代码高亮
为了测试款式,随意找一个之前的 .md
文件粘贴到 blog 项目中衬着看看结果:
emmm,题目大了,必备的代码高亮都没有…
然则当我检察元素时发明,这竟然是已被分词的状况,又经由一系列的材料汇集,发明 prismjs 已预装到项目中,那末我们要做仅仅是引入css文件就好了。
import 'prismjs/themes/prism-TWILIGHT.css'
胜利增加款式!固然,除了 TWILIGHT,prismjs 另有其他款式如 COY、OKAIDIA 等,另有其他能够看官网右边的选项。
大题目处理了然后就根据本身喜欢调解款式吧~
全局自定义款式
计划 1:修正 typography.js
你能够经由过程在 src/utils/typography.js
中的 overrideThemeStyles
增加全局款式(固然,其更主要的作用是掩盖原有的主题款式)。
不过比较贫苦的是:
- 掩盖款式需重启效劳才见效
- 不能嵌套挑选器
// 这是一个 🌰
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
再次运转项目,此时已能够一般引入 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 挑选收集字体
字体关于中文用户是永远的痛。字符量大致使字体的体积大得恐怖,严重影响用户体验。运用收集字体是个中一个要领(然则实质来讲体积照样没有减小的,只是供应商能够为你高速供应字体,削减用户守候)。