碎言博客

细说修改碎言博客站点的样式

J.sky 2019-12-30 20:15:29 碎言博客

碎言博客HTML结构

博客HTML只有4个:

CSS修改

碎言博客CSS前端采用的bootstrap4框架,CSS样式修改采用了less本地修改生成的.css文件。这里推荐一个vscode插件: Easy LESS

这个插件的特点就是在相同目录下可以生成一个同名的.CSS文件,配合 less 的引用命令 @import "theme-dark-1.less"; 使用起来很方便的。

博客的样式修改

碎言博客的样式主要集中在 <link id="blogcss"> 标签连接的CSS,通过修改对应的LESS文件中对应的颜色变量,可以快速的修改博客的颜色及相关样式,变量我都有注释。

Markdown代码样式

Markdown代码样式通过修改 <link id="highlight"> 标签连接的highlightCSS来修改,在 assets/plugins/highlight/styles 下可以选择自己喜欢的样式。

进阶修改

觉得手动修改站点样式太麻烦?可以利用 jQuery 在站点上添加在线改变站点样式的浮动按钮,近期会考录添加的碎言博客的。

发现错误?想参与编辑? 在 GitHub 上编辑此页!

如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问

Python/Javascript学习QQ群号:217840699