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

Julylovin 發布于2019-08-23 14:04 / 3012人閱讀

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

原文鏈接：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 添加全局樣式（當然，其更重要的作用是覆蓋原有的主題樣式）。

不過比較麻煩的是:

覆蓋樣式需重啟服務才能生效

不能嵌套選擇器

// 這是一個

GPU云服務器云服務器靜態博客博客靜態html php靜態博客系統 php使用css樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100028.html

創造屬于自己的靜態博客

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

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

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

william 2019-08-23 13:59 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 4 標簽系統

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

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

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

KnewOne 2019-08-23 14:26 評論0 收藏0
使用 Gatsby.js 搭建靜態博客 1 關鍵文件

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

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