001 从零开始的 mini-vlook: 主题开发基础知识 (1)

[!Example]+ 属性

• 版本 v0.0.1-alpha+20240827

认识主题

主题

软件的主题是对软件本身的美化：

可以理解为房子的装修风格、游戏角色武器的皮肤、模特身上的时装衣服……

注: 部分主题因为植入了脚本，在一定程度上对软件功能扩展，甚至是破坏_(:з)∠)_。

简单来说——主题就是你的画笔，你可以修改软件内部任意元素的布局、颜色、大小和形状。

思源修改主题的两种方式

代码片段

请参考思源软件自带的帮助指南章节： ==帮助 > 用户指南== 中的 ==*请从这里开始 > 自定义外观 > 主题*== 笔记中的教程（点击右小角的小问号进入==*帮助*==）

​​

给懒得找的朋友放上一个截图：官方介绍的很详细了

​​

[!Tip] 广告一下

data-light-theme：可以检测思源软件用的是主题，思源默认使用 daylight 主题包。

data-theme-mode：可以检测思源软件外观模式是亮模式还是暗模式。

这个可以帮助我们后面做插件开发的时候，针对不同的主题进行适配和优化。

具体的语法用到的时候再介绍或者自己先百度看看。

主题包

这是本次折腾之旅的核心任务之一，就是开发一个主题包。小片段的 CSS 代码这适合稍微改动一下，但不适合发布和共享给其他人，也不适合搞复杂的效果。

主题包可以理解成是把代码片段写到一个固定文件夹中的固定文件里，这个文件夹的名字就是主题的名字，后续可以把这个文件夹共享给别人，或者发布到集市中 —— 还可能会被打赏。

Setp1： 打开主题文件夹

==设置 > 外观 > 主题 > 打开主题文件夹== ： 通过 ALT​ + P​ 快捷键即可打开设置

​​

Setp2: 创建文件夹并下载模板

在打开的目录中，新建一个 mini-vlook​ 文件夹

文件夹的名字和你想起的主题名称一样即可，这里用 mini-vlook​, 如果你自己换了其他名字，后续需要出现 mini-vlook​ 的地方都改成你自己的主题名字。

​​

官方建议是从 Github 上下载模板。然而在常规手段下，访问 Github 是个 ”看脸“ 的事情。我觉得可以把上面的 daylight​ 中的文件 theme.css​ 和 theme.json​ 复制一份到咱新建的文件夹里就行了。为了方便以后和官配的 theme.css​ 比对，我建议在创建一个 bak​ 文件夹，里面多留一个当前版本的 theme.css​ 的副本，用途就是为了方便赶上官方的主题更新时有个比对和参考。操作完后的大概是这样的：

​​

编辑 theme.json​ 文件，改成下面的内容

{
  "name": "mini-vlook",
  "author": "你的名字",
  "url": "",
  "version": "0.0.1",
  "modes": [
    "light"
  ]
}

请注意，把上面的 mini-vlook​ 替换成你的主题名字，并且，把 “你的名字”改成你喜欢的昵称。

这是和官方主题教程不一样的地方，没有 ​theme.json​​ 文件，主题是无法被思源软件识别和加载的。

这个文件相当于是你的主题在告诉笔记软件 “你好，我是 mini-vlook 主题，请尽兴的加载我……使用我……”。

Setp3: 切换到新建的主题

重启后在 设置​ - 外观​ - 主题​ 中选择安装好的主题

注意，上面这句官方的意思是重启思源笔记软件，不是重启电脑，虽然重启电脑也是一样的效果……(lll￢ω￢)

怎么重启思源笔记，简单办法就是： 直接右上角点“×”，再重新打开思源笔记，如果没有成功关闭，那么可以在电脑的任务栏右下角找到思源的小图片，鼠标右击它，在菜单项里，选择 “退出程序”。

如果你还要问：“老弟啊，我右下角没有这个图标怎么办？” 可能你用的是 Mac 系统或者 Linux 系统，请自己搜如何关闭软件或者关闭思源笔记软件。

偷摸小声告诉你：不行你就重启电脑吧，看在你和我一样又菜又爱玩的份上，这是我最后的绝招了。

​​

Setp4: 编辑主题

切换成功后，你会发现页面没有任何的变化……

因为你本来就是从 daylight​ 主题复制过来的，肯定是一模一样的。现在，我们给自己的软件增加一点花活——让主题的 行级代码​ 看起来更加活泼一点。（我不想用粗体和斜体这些简单你好理解的样式来说明，都学到这里，身为一个编外程序员，不应该提高一下难度吗? ）

1. 设置文字样式为行级代码（我更喜欢称为行内代码，如果后面出现 “行内代码” 的描述，就是指行级代码）

   ​​

2. 我们先看一下当前行内代码的样式：（你可以参考上面的步骤自行添加多个行内代码样式）

​​

3. 打开 开发者工具​ （见图 4-工具入口位置），可以看到类似下图（图 4-打开状态）的界面；

   1. ​​

   2. ​​

   3. 操作完后你会看到如下图的界面

      1. ​​

Hold On！ Hold On！不要着急，我在试图教会你在不懂很复杂语法的情况下，如何快速定位和修改元素，这也是很多（我只问了一个哈）专业前端修改样式的思路——在开发者页面定位到自己想改的元素（HTML 代码），然后看都应用了那些样式规则（CSS 代码），然后找到它们，修改或添加自己的样式规则。

你可以理解，我们看到的思源笔记，由 HTML 代码提供语义（类比骨架），由 CSS 样式渲染外观（类比皮肤），由 JavaScript 脚本提供功能（类比行动），这样整体组合成我们可以看到渲染结果，并且我们可以在里面通过敲键盘写字、拖动鼠标选中并修改文字样式等等操作。

我们首先看看当前的主题是怎么定义和描述 行内代码 样式的，目前看到的代码如下：

.fn__code, .b3-typography code:not(.hljs), .b3-typography span[data-type~=code], .protyle-wysiwyg code:not(.hljs), .protyle-wysiwyg span[data-type~=code] {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    border-radius: var(--b3-border-radius);
    font-family: var(--b3-font-family-code);
    word-break: break-word;
    background-size: 20px 20px;
    white-space: pre-wrap;
    background-color: var(--b3-protyle-code-background);
}

你可以和下面的伪代码比较比对来看上面的内容看上面的内容：

选择符合我这里写的条件的元素,多个条件用逗号分隔,满足多个条件中的一个即可起效,也称为选择器
{
	在这些元素上的某些可修改属性： 应用上我期望的样式渲染效果;
    把字体设置成: 标准大小的 85%;  (就是 font-size:85% 这条的含义)
}

样式是通过 "属性:值" 这样的组合方式表示约束的。一个约束一行，用 ;​ 作为一个约束结束。不要问我为什么要这样写，这是发明人的规定。

介绍几个比较常见的装修属性：

• ​color​ : 字体颜色；可以用 HEX 格式，比如红色可写为 #FF0000​; 也可以用 RGB 格式的写法 rgb(255,0,0)​ ;也可也用英文名称 red​ ;

  • 不知道的时候就搜 某某颜色 的 HEX 码 或者 Rgb 码这些的，搜下就知道了。

• ​background-color​: 背景颜色； （也可以用 background​ 能实现更复杂的效果，比如渐变和加载背景图片等）

• ​border​: 设置边框，可以设置线条的样式、颜色、宽度和边角的弧度等信息，可以都在在这个属性下面，也可以拆分成多个写：

  • ​border-style​ ：边框的样式，取值为 dotted​ 表示离线的点组成的线，取值为 solid​ 表示实线，当然还有很多其他的值，可以看 w3schools
  • ​border-width​ ：边框的线宽，可以用 1px​ 、2px​ 这些值，单位是像素点，不理解就当作为 单位1​ 。
  • ​border-color​： 边框的颜色。
  • ​border-radius​：边框的四个角的弧度，可取值为 5px​ 。这样就是从直角变的有些弧度了，数字越大，弧度越大。

• ​padding​： 内间距 ，你可以理解在元素内部，增加内容和边框之间空白区域，元素自身的背景色会扩张过去

• ​margin​： 外间距，你可以理解在元素外部， 增加边框和其他元素之间的空白区域，元素自身的背景色不会扩张过去

所以，假设我们现在需要渲染一个带边框，白色背景和近似青色字体颜色的行内代码样式呢？在文件最后添加下面的代码：

.fn__code, .b3-typography code:not(.hljs), .b3-typography span[data-type~=code], .protyle-wysiwyg code:not(.hljs), .protyle-wysiwyg span[data-type~=code]{
    background: white;
    color: #05c091;
    border: rgb(128, 128, 128) solid 1px;  
}

上面的意思就是，给软件中所有出现的行内代码，应用上 白色背景、青色的字体颜色、宽度为 1px 灰色的实体边框。

保存文件后，进入开发者工具，选择 ”控制台“页面，如果是英文可能叫 ”Console“ ，在里面控制台里面敲键盘输入命令 window.location.reload() 然后敲回车，就可以看到应有的效果了

​​

修改后，你的页面目前可能看起来像这样：

​​

恭喜你！你同时也执行了你在本系列教程中的第一个 JavaScript 代码——调用系统函数重载页面。

你如果仔细看我的选择器，你会发现我偷了一个懒，我找到了在控制台右侧一个比较靠上且看起来选择器个数最多的一个 CSS 样式规则，然后删掉它的样式内容，写上我预期样式内容，这样我就可以暂时抛弃麻烦的 ”选择器“语法和编写逻辑。个人认为——咱初学的时候会比官方写的”选择器条件“考虑的还要全面不成？（不抬杠，如果你本身是懂这个的，有可能。）

这里的 border​ 的是一种“连写”：意思是需要一个 ”灰色 rgb(128, 128, 128)“、实线样式、宽度为 1px 的边框。这是一种复合写法，如果看着不好理解，可以分开写成下面这种:

.fn__code, .b3-typography code:not(.hljs), .b3-typography span[data-type~=code], .protyle-wysiwyg code:not(.hljs), .protyle-wysiwyg span[data-type~=code]{
    background: white;  
    color: #05c091;
	  
	/* 下面的写法，和注释的这条效果一样 border: rgb(128, 128, 128) solid 1px; */

    border-color: rgb(128, 128, 128);
    border-style: solid;
    border-width: 1px;
}

各有各的优劣，看你自己喜好，效果一样。

但你真的应该稍微学习一下基础的 CSS 语法，不要看的太深入，能看懂”选择器“和知道一些基础的样式约束就可以了。我建议你去看 CSS 菜鸟教程 。这没什么好害羞的，我就是看这个学的 CSS，而且到现在我也觉得自己也还是个菜鸟。

但你真的需要具备基本 CSS 基础知识 —— ，。

给懒得找的朋友贴一个正式些的 CSS 语法规则介绍。我建议大家至少花个 30 分钟看一看教程。至少知道什么是： 元素选择器、类选择器、ID 选择器、属性选择器。 我也会在具体用到的时候稍微讲一下。但我不会详细讲具体的语法细节，只是会简单解释一下，然后给你一个学习链接，或者告诉你怎么搜。

我后面也是试图用这种方式，尽可能还原我学习过程中的思考路径，学会检索和找资料，比看懂 CSS 的一个具体语法重要。

‍

​​

‍

​​

‍