使用 Gatsby.js 搭建静态博客 3 样式调整

Julylovin 发布于2019-08-23 14:04 / 2964人阅读

摘要：成功添加样式当然，除了，还有其他样式如等，还有其他可以看官网右侧的选项。不过比较麻烦的是覆盖样式需重启服务才能生效不能嵌套选择器这是一个

原文链接：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样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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