博客自定义样式及修改.CSS文件以调整渲染后的博客字体大小

01 起因-碎碎念

昨天晚上看到了好多人自己搭建的博客网站，用以发表技术文章或者记录生活中的事。思来想去觉得我并没有搭建个人博客网站的必要，就用博客园的好了（主要还是懒）。

于是今天早上就心血来潮地去修改我的博客主题和样式，折腾了一个上午加半个下午，终于搞的差不多了。

好吧其实早上一开始是想学点 SQL 注入的基础知识的，但是在看到这篇博客后：

SQL注入基础知识 - Riiiiiysl - 博客园 (cnblogs.com)

感觉他的主题比我原来的主题要好看，在浏览文章的时候左边不会莫名其妙地空一块地方，搞的文章有点“向右对齐”的效果，看的有点不爽，他的是居中的，看的很舒服。就想着换一下博客主题，能激励下自己写博客。

偶然看到的某个博客主题

我之前的博客主题
(配图是https://www.cnblogs.com/guanghe/的博客截图，我之前的博客主题就是copy他的样式的)

02 主题官网-照着弄

本来是想直接 copy 别人样式了事的，可是好像不知道出了什么错这次直接修改博客主题选项、粘贴 .CSS 文件没用了。但是采用这个主题的博客很多，有些底下写了这个主题的 Github 项目地址，找着找着居然找到了这个主题的官网：

简介 - Document (bndong.github.io)

作者的博客园就是用的这个博客主题，地址：https://www.cnblogs.com/bndong

于是照着官网弄，一步步拼凑“博客侧边栏公告”里面要填写的 html 代码。

一开始我是直接在博客园后台那里拼凑代码的，由于不懂 JavaScript 中间代码漏了些逗号，搞的样式加载出错，后面换到 Sublime Text 里面去从头开始编辑，一个部分一个部分确认没有错，才慢慢搞好了。这部分需要摸索、猜测各个英文参数的意义，猜测其控制的是博客里的哪个显示的部分，并由需求出发去粘贴、微调对应部分的代码，最后调整自己的个性化配置，因为是第一次搞这种东西，虽然作者在官网教程写的很清楚，但是由于我大概看了看还是不懂，最后是靠修改后看变动部分来反推参数意义的，所以花了很多时间。

小插曲-F12妙用

想模仿作者的博客，在侧边菜单栏加上 Github 部分和友链部分。但是官网教程仅给出了 Github 的图标，不知道友链的图标怎么填。

教程官网菜单导航设置部分仅有Github图标

相关文档里说可以自己去建一个图标库，但我寻思着作者不是有现成的图标吗，我要直接拿来用！

官网的内置图标页面404

然而官网的内置图标又访问不了，看不到了，只好找别的方法，看看能不能搞到作者那个图标。

作者博客页面有“友链”图标

于是想到用 F12 调用开发者控制台，用箭头审计元素寻找相关信息。

移到 Github 图标上，发现子串 “icon-github”：

找到了“icon-github”

移到友链图标上，发现子串 "icon-pengyoufill"，猜测用这个就能设置作者的友链图标了。

找到了友链图标的变量名“icon-pengyoufill”

于是自定义 html 文件相关部分就试着这样写：

navList: [
	    	['友链', 'https://www.cnblogs.com/Matrix-250/p/16497273.html', 'icon-pengyoufill'],
	    	['Github', 'https://github.com/waibiwaiba', 'icon-github'],
	    ],

最后发现也是实现了一样的效果，这也就证实了我们的猜测：

自定义友链部分成功

03 强迫症-修改.CSS文件调整字体大小

样式搞好了，友链部分也搞了，书单也大概写了写，看看效果吧：

验收成果！

行内代码字体太小了，看得好难受哇😝

这里一对比就显得格外的丑，字太小啦😣

受不了，必须改过来。

通过审查元素发现这里的行内代码用的是 12px 字号：

我靠，原来正文段落其他字体是 15.5px ，相差这么多更显小啦。

接下来试图将行内代码字体大小修改成和段落正文一样的 15.5.px。

由于字体大小，颜色等样式的设置写在.CSS文件中，于是想办法修改.CSS文件实现修改字体大小功能。

但源码中的 simpleMemory.css ，无论使用记事本(多行但无高亮)、Notepad++(单行有高亮)、Sublime Text(单行无高亮)打开，显示效果都不好。

尝试用查找替换，将 # 号在 Notepad++ 中用 \n# 替换，期望能在每个 # 前换行显示，无果。

常试寻找在线工具，将其由单行显示改成多行显示。果然网上有人已经做好了这个工具：

CSS格式化 CSS代码压缩在线CSS格式化工具 (ip138.com)

原来单行显示是.CSS文件经过了压缩，将其格式化就能得到多行显示的结果。格式化后在Notepad++中还有高亮，编辑起来舒服多了。

接下来需寻找.CSS文件中哪个参数、哪个部分是设置行内代码字体大小的。从下面这篇博客：

Markdown样式自定义及详解-博客园、Typora、Markdown Nice - 梦幻之心星 - 博客园 (cnblogs.com)

了解到：

试图以下图中部分信息(如#D83B64、12px、“Courier New”)为关键字搜索：

发现：上图中的.cnblogs_code中的字体大小设置14px，最终代码块中的代码字体大小也是14px

对比上面两图，可以发现 code , #home code:not([class]),span.cnblogs_code{} 两部分都有以下部分的设置(其实右图后面的 .cnblogs_code{} 也有下面这三个部分的设置)：

padding
border
background-color

发现在 #home code:not([class]),span.cnblogs_code{} 并无字体大小设置，尝试加入字体大小设置后，观察结果，惊奇地发现只要在 #home code:not([class]),span.cnblogs_code{}里面加入字体大小设置后即可达到目的。(一开始我是在 .cnblogs_code{} 里面改的，发现不行，然后又在 #home code:not([class]),span.cnblogs_code{}改，结果这下就好了。)

最后把修改后的.CSS文件内容粘贴到博客园页内定制CSS代码部分即可(格式化后多行显示的代码粘进去也行)。

可以看到现在的行内代码的字体大小被我们修改成了和正文段落字体一样大(15.5px)。

至此任务完成，舒服了。😁

下面是修改前后的对比：(字大就是爽)

可以看到没有前端基础知识，仅靠摸索、猜测、修改后看效果的方式，实现这个修改还是很花时间的，同时也有一定的运气成分。其中的原理、这些步骤究竟在干啥我还是不太懂的，前端相关知识值得去学一学，摸索的过程还是挺好玩的。^_^

04 附录-新学会的typora插入图片技巧

学会了利用html块插入图片，支持更多的功能：比如在图片下方加入图片说明，多张图片并排放置，代码一下子记不住，放这里以便日后参考：

图片下方加图片说明

摘自：https://blog.csdn.net/m0_47098916/article/details/117827687

图-1. 蒙那丽莎(doge)

多个图片并排显示

摘自：https://blog.csdn.net/he_nan/article/details/105849370

显示效果如下：

另一种实现(我自己想的)：先创建table，再插入图片

代码块折叠

摘自：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/issues/276

代码

/* 空一行然后插入代码块然后空一行 */

import numpy as np
x = 1
y = 2
print(x+y)

source code:

<details>
<summary> 代码 </summary>

/* 空一行然后插入代码块然后空一行 */
```
import numpy as np
x = 1
y = 2
print(x+y)
```

</details>

posted @ 2022-07-20 18:54 Matrix_250 阅读(225) 评论(0) 编辑收藏举报

刷新页面返回顶部