使用 Gatsby.js 搭建靜態(tài)博客 3 樣式調(diào)整

Julylovin 發(fā)布于2019-08-23 14:04 / 3085人閱讀

摘要：成功添加樣式當(dāng)然，除了，還有其他樣式如等，還有其他可以看官網(wǎng)右側(cè)的選項。不過比較麻煩的是覆蓋樣式需重啟服務(wù)才能生效不能嵌套選擇器這是一個

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

回顧：使用 Gatsby.js 搭建靜態(tài)博客 2 實現(xiàn)分頁

修復(fù)代碼高亮

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

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

但是當(dāng)我審查元素時發(fā)現(xiàn)，這竟然是已經(jīng)被分詞的狀態(tài)，又經(jīng)過一系列的資料搜集，發(fā)現(xiàn) prismjs 已經(jīng)預(yù)裝到項目中，那么我們要做僅僅是引入css文件就行了。

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

成功添加樣式！當(dāng)然，除了 TWILIGHT，prismjs 還有其他樣式如 COY、OKAIDIA 等，還有其他可以看官網(wǎng)右側(cè)的選項。

大問題解決了然后就按照自己喜好調(diào)整樣式吧～

全局自定義樣式 方案 1：修改 typography.js

你可以通過在 src/utils/typography.js 中的 overrideThemeStyles 添加全局樣式（當(dāng)然，其更重要的作用是覆蓋原有的主題樣式）。

不過比較麻煩的是:

覆蓋樣式需重啟服務(wù)才能生效

不能嵌套選擇器

// 這是一個

GPU云服務(wù)器云服務(wù)器靜態(tài)博客博客靜態(tài)html php靜態(tài) 博客系統(tǒng) php使用css樣式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100028.html

相關(guān)文章

創(chuàng)造屬于自己的靜態(tài)博客

摘要：所以自己定值博客，或許可以讓自己堅持更新下去。配合上語雀的文章發(fā)布推送絕配，于是有了這么個功能專題。可以前往我的博客閱讀：https://ssshooter.com/2019-02... 0 前言本文并不是從 0 開始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節(jié)省項目搭...

Channe 2019-08-23 15:05 評論0 收藏0
使用 Gatsby.js 搭建靜態(tài)博客 2 實現(xiàn)分頁

摘要：原文地址使用搭建靜態(tài)博客關(guān)鍵文件本文將會介紹如何為初始項目添加分頁功能。不過由于本來就打算重寫樣式，這一塊可以放心刪掉處理完這個問題你的新博客就實現(xiàn)分頁功能了下一步是樣式的相關(guān)調(diào)整，留到下一篇繼續(xù)講原文地址：https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件 0 && ( ← 上一頁 ...

william 2019-08-23 13:59 評論0 收藏0
使用 Gatsby.js 搭建靜態(tài)博客 4 標(biāo)簽系統(tǒng)

摘要：原文鏈接回顧使用搭建靜態(tài)博客樣式調(diào)整官方自帶標(biāo)簽系統(tǒng)教程，英語過關(guān)可以直接閱讀官方教程。制作頁面展示所有標(biāo)簽重點同樣是查詢部分是標(biāo)簽名，是包含該標(biāo)簽的文章總數(shù)。在之前寫好的文章頁渲染標(biāo)簽就是查詢的時候多一個標(biāo)簽字段，然后渲染上，完事。原文鏈接：https://ssshooter.com/2018-12... 回顧：使用 Gatsby.js 搭建靜態(tài)博客 3 樣式調(diào)整官方自帶標(biāo)簽系統(tǒng)...

AndroidTraveler 2019-08-23 14:23 評論0 收藏0
使用 Gatsby.js 搭建靜態(tài)博客 5 博客上線

摘要：原文鏈接這真的是最簡單的一步啦使用你的網(wǎng)站是一個可以幫助你自動部署網(wǎng)站的平臺。詳細(xì)設(shè)置可以在查看，可以進(jìn)行構(gòu)建環(huán)境變量等相關(guān)配置。原文鏈接：https://ssshooter.com/2018-12... 這真的是最簡單的一步啦～使用 netlify deploy 你的網(wǎng)站 netlify 是一個可以幫助你自動部署網(wǎng)站的平臺。你可以選擇自己買服務(wù)器，運行 build 然后推送到自己...

KnewOne 2019-08-23 14:26 評論0 收藏0
使用 Gatsby.js 搭建靜態(tài)博客 1 關(guān)鍵文件

摘要：原文地址靜態(tài)博客之前也有搭建過，不過使用一鍵生成的，其實當(dāng)時也有考慮過，不過這個框架搭建博客入門還是比較難的，前置知識點包括和。使用建立項目已經(jīng)自帶了不少插件，但在我的搭建過程中仍然有一些需要自己添加的。原文地址：https://ssshooter.com/2018-12... 靜態(tài)博客之前也有搭建過，不過使用 Hexo 一鍵生成的，其實當(dāng)時也有考慮過 Gatsby，不過這個框架搭...

mzlogin 2019-08-23 13:58 評論0 收藏0