使用 Gatsby.js 搭建靜態博客 3 樣式調整

時間 2019-12-04

標籤使用 gatsby.js gatsby 搭建靜態博客樣式調整欄目 JavaScript 简体版

原文原文鏈接

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

回顧：使用 Gatsby.js 搭建靜態博客 2 實現分頁css

修復代碼高亮

爲了測試樣式，隨便找一個之前的 .md 文件粘貼到 blog 項目中渲染看看效果：html

emmm，問題大了，必備的代碼高亮都沒有...java

可是當我審查元素時發現，這居然是已經被分詞的狀態，又通過一系列的資料蒐集，發現 prismjs 已經預裝到項目中，那麼咱們要作僅僅是引入css文件就好了。node

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

成功添加樣式！固然，除了 TWILIGHT，prismjs 還有其餘樣式如 COY、OKAIDIA 等，還有其餘能夠看官網右側的選項。git

大問題解決了而後就按照本身喜愛調整樣式吧～github

全局自定義樣式

方案 1：修改 `typography.js`

你能夠經過在 src/utils/typography.js 中的 overrideThemeStyles 添加全局樣式（固然，其更重要的做用是覆蓋原有的主題樣式）。npm

不過比較麻煩的是:segmentfault

覆蓋樣式需重啓服務才能生效
不能嵌套選擇器

// 這是一個 🌰
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 文件。sass

由於預想到將來可能須要修改主題，方便起見應該將一些經常使用顏色存爲變量，因此須要先安裝 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 更方便。