配置自定义样式功能

来给你的vdoing博客配置一个好看的自定义主题哦……

配置自定义样式功能

版权

:::warning

本着开源共享、共同学习的精神：

本文是在 《Young Kbt blog》博主文章：《本站 - 自定义样式模块》 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者《Young Kbt blog》所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~（这里万分感谢原作者的优质文章😜，感谢开源，拥抱开源💖）

:::

正文

前言

本模块已经提取 Vdoing 主题常用的元素选择器，并写好了注释，方便阅读。

你如果不满意我的颜色样式，想改成自己喜欢的颜色，直接在提取的元素选择器提供 Color 即可。

如果你细心观察，你就会发现本站的一些样式和主题自带的样式有所区别。

在浅色主题，也就是默认主题下，我修改了一些内容：

• 代码块背景色
• 代码块行数颜色
• 代码高亮背景色
• 代码高亮颜色
• 加粗颜色

……

在深色主题下，我修改了一些内容：

• 代码块背景色
• 代码块行数颜色
• 代码高亮背景色
• 代码高亮颜色
• 加粗颜色
• 页面背景色
• 导航栏颜色
• 侧边栏颜色
• 表格背景色
• 表格偶数行颜色

……

如果你喜欢我的一些样式，可以参考下面的代码。

又或者你想定制自己的样式，也可以修改颜色，基本的选择器都已经写好了，只需要更改颜色即可。

样式代码

打开 docs 目录下的 .vuepress 目录下的 style 目录下的 palette.styl 文件，添加如下内容：

插件样式

目前本站使用了 vuepress-plugin-reading-progress 插件，该插件能显示一个页面的进度条（位于顶部的紫色进度条），下面是我用的样式（放在 palette.styl 里）：

1// 顶部进度条插件
2 $readingBgColor = transparent
3 $readingZIndex = 1000
4 $readingSize = 3px
5 $readingProgressColor = #b160ea
6 $readingProgressImage = none

安装这个插件的命令：

1yarn add vuepress-plugin-reading-progress

然后在 config.js 的 plugins 中，添加如下内容：

1module.exports =[
2    [
3        'reading-progress'
4    ]
5],

启动后就会生效。

说明

自己模板是从大佬开源模板里拿到的，因此以上配置无需配置。

官网部分

主题样式变量

下面是vdoing主题使用的css变量，你可以在.vuepress/styles/palette.styl修改这些变量覆盖它们：

上面的变量值可能不是最新的，最新的变量值可查看：palette.styl(opens new window)

样式修改与适配

当你想修改主题某个地方的样式时，或者你在给博客添加了一些新的模块或插件，发现样式和主题的样式不协调时，都可以在.vuepress/styles/index.styl 添加css样式来做修改。 需要注意的是，你在自己写的css样式中，请尽量使用主题提供的变量来进行适配。

小技巧：当你发现自己写的css样式优先级没有原来的样式高时，可以在样式后面添加!improtant后缀，使你的样式优先级是最高的。