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

[!Example]+ 属性

版本 v0.0.1-alpha+20240828

基础行内样式的渲染

上个教程里，我介绍了怎么使用调试模式（开发者模式）定位和修改行内代码，其他几个也可以用类似的方式修改，这里放出了我修改前和修改后的截图：　

修改前

修改后

‍

其中，块引用、超链接 和 备注 我觉得可先不动，后续如果看着不舒服再调整。粗体、斜体这种简单的基本上和行内代码（行级代码）的渲染和处理思路一样，我这里就只贴一下 CSS 代码片段。


/* 斜体 */
.b3-typography em, .b3-typography span[data-type~=em], .protyle-wysiwyg em, .protyle-wysiwyg span[data-type~=em] {
    font-style: italic;
    color: var(--m-inline-em-color);
}

/* 粗体 */
.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] {
    font: var(--m-inline-strong-font);
    color: var(--m-inline-strong-color);
}

今天多了点新东西 —— var(--m-inline-em-color) 这里使用了变量，本文稍后讲，你可以理解这里相当于你给属性值起了一个别名，后面使用这些别名来给样式赋值，有点像电脑桌面的快捷方式。

下划线通过 border-bottom 样式（在元素底部绘制线条）来实现，具体用法请检索 “==CSS border-bottom 给元素添加下划线==”。

标签和行级公式有点特殊，使用了 “伪类” 的方式在元素前面绘制了一些额外的内容，比如上面显示的 “#” 和 “$” 都是通过伪类的方式实现的。实现的方式就是在原本的选择器上添加 ::before 后缀，代码如下：


/* 标签 */
.protyle-wysiwyg [data-node-id] span[data-type~=tag] {
   
    color: var(--m-inline-tag-color);
    background-color: var(--m-v-tag-bgcolor);
    margin: 0px 0px;
    padding: 1px 5px;
    border-radius: 5px;

    transition: var(--b3-transition);
    cursor: pointer;
    border-bottom: none; /*这里覆盖掉思源笔记原本的下划线效果*/

    font-weight: bold;
    border-left: 1px solid var(--m-theme1-background);
    border-right: 1px solid var(--m-theme1-background);
}
.protyle-wysiwyg [data-node-id] span[data-type~=tag]::before{
    content: "#";   /*显示内容*/
    color: var(--m-v-tag-icon);   /*颜色*/ 
  
    padding-right: 3px;
    font-weight: bold;   /*加粗*/
}

拆分和引入其他文件的 CSS

和昨天不一样的是，今天的主题的文件结构发生了变化

为了开发方便，后续我用都是 Visual Studio Code 这款开源免费的 IDE 来编写代码，大家用自己顺手的 IDE 即可。

拆分

为了应对后面越来越复杂的项目修改，我把文件拆分了下面的结构

styles\ 样式文件夹，存放样式
- theme-config.css: daylight 主题原本的变量和 css 放到了这里
- v-block-inline-style.css: 用来渲染文本样式
- v-dock-main.css：用来渲染主界面的都会放到这里
theme.css ：主题入口，用来引用各个分散

在每个 CSS 文件中，像在 theme.css 中一样正常写 CSS 代码片段即可。

引入

引入通过 @import url("要引入CSS文件的路径") 需要注意：

使用相对路径： ./ 表示相对于当前文件开始；
路径和文件名中尽量不要包含有中文；
import 操作必须放到当前文件中所有 CSS 代码片段前面，否则会出错。

CSS 变量概念：目的、定义和使用

使用变量的目的

第一种用法：变量相当于一个盒子，你把值存进来后，你就可以通过搬运盒子的方式来搬运盒子的值。（比如字体）

第二种用法：变量相当于一个别名，你给某个固定的值起了一个容易识别的名字，想全局修改的时候，只需要修改一处，而不一个一个检索定位。

定义

变量只有先定义了才能使用，定义放到 CSS :root 作用域中，必须是 -- 两个("-") 开头，不能有中文，只能是数字和字母和短横线("-")的组合。和样式一样，一个变量一行，在 :后面填你期望它代表的值，用 ;号结束。（就先这么记，还有其他一些细节，但这样记就够用了）

   
:root{
    /*随便定义一串rgb的代码*/
	--m-theme1-alt: 128, 100, 169;
    /*可以在定义的时候，使用已定义的变量*/
    --m-tag-bg:  rgba(var(--m-theme1-alt),0.4);
    /*用来定义单位*/
    --m-v-r-s-small: 4px;
    /*用来定义字体*/
    --m-v-f-fm-text: "color-emoji", VLOOK Digital local, -apple-system, Roboto, 
    "SF Pro Text", "SF Pro Display", "PingFang SC", "PingFang TC", "PingFang HK", 
    "Segoe UI", SegoeUI, "Microsoft YaHei", "微软雅黑", "Heiti SC", "黑体-简",
    SimHei, "黑体", "Microsoft JhengHei", "微軟正黑體", "Heiti SC", "黑体-简",
    SimHei, "黑体";
   /*用来定义颜色*/
   --m-d-bc: #FCF9F2;
}

使用

就是用 var(变量名) 放到任何你希望它出现的位置上即可。比如上面我在本文 基础行内样式的渲染 部分粘贴出来的代码。

白天和晚上的配色：我都要

就像我们平常有白天使用软件的需求，也有晚上使用软件的需求一样，在晚上使用“暗黑”模式，能缓解眼疲劳。而且，也有相当一部分人喜欢“暗系主题”。因此，我们有必要让自己的主题兼顾这两种使用场景。

思源的主题是区分 dark 模式和 light 模式，判断办法是查看 html 块中的属性。我们还能知道不同模式下主题的名字。


<html lang="zh_CN" data-theme-mode="dark" data-light-theme="mini-vlook" data-dark-theme="midnight">   // 暗模式
<html lang="zh_CN" data-theme-mode="light" data-light-theme="mini-vlook" data-dark-theme="midnight">  // 亮模式

所以，我可以通过下面的代码来表示不同模式下的渲染：


html[data-theme-mode="dark"] {
    // 这里放在 暗黑 模式下的渲染效果，为了简化写法，最好在这里重新修改变量的值
}


html[data-theme-mode="light"] {
    // 这里放在明亮 模式 下的渲染效果，为了简化写法，最好在这里重新修改变量的值
}

‍

为了让自己的主题，可以同时被明亮模式和暗黑模式识别和加载，需要修改 theme.json 文件，改成下面的：


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

‍

重启思源软件后，在 ==设置 > 外观 > 主题== 中的暗黑模式切换主题

‍

在顶部工具栏外观模式下切换为“暗黑”模式，这时候你会发现没有任何变化。因为你就没有对暗黑模式做任何处理。

‍

在 styles 文件夹下，新建一个 theme-conifg-dk.css 文件，在里面写入相关变量


html[data-theme-mode="dark"] {
    // 在这里放 midnight 文件夹中， theme.css 中，:root 作用域内的变量。
}

$midnight \ theme.css 中的 :root 作用域$

在 mini-vlook 主题的 theme.css 文件中，引入 theme-conifg-dk.css。

进入开发者模式在控制台里输入 window.location.reload() 命令，可以看到类似下面的渲染效果：

‍

注意：需要同样的方法，把你自己的

‍

添加一点小小的 JS 震撼（不推荐）

可以通过在 theme.css 同级别添加 theme.js 文件来注入 javascript 脚本。但是不是很推荐，因为社区和官方对主题是否应该支持 theme.js 脚本一直没有一个确定的准信。我个人虽然也是支持拆分的，但是不移除也是挺好的，比如我偶尔需要一些简单的 javascript 脚本来帮助我做一些额外的计算和处理，这个时候单独使用插件又过于“大”，反而没有直接写到 theme.js 中来的方便。


function renderAll(params) {
    console.warn("你好，mini-vlook");
} 

(() => {
    try {

        window.onload = setTimeout(renderAll, 0);

    } catch (err) {
        console.error(err);
    }
})();

进入开发者模式在控制台里输入 window.location.reload() 命令，可以看到下面的输出结果

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

基础行内样式的渲染

拆分和引入其他文件的 CSS

拆分

引入

CSS 变量概念：目的、定义和使用

使用变量的目的

定义

使用

白天和晚上的配色：我都要

添加一点小小的 JS 震撼（不推荐）

相关帖子

求助一个样式 CSS

怎么没有直接对话的客服呢？我想购买 vip，请问终身版是不是不能多端同步？

“/”敲斜杠后弹出的快捷功能面板中的选项条目能否删除 / 自定义？

数据库“资源”下的图片如何批量上传到自建图床

求代码片段折叠的代码块仍然显示属性的命名和别名等信息

数据库是否支持图床

欢迎来到这里！

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

基础行内样式的渲染

拆分和引入其他文件的 CSS

拆分

引入

CSS 变量概念：目的、定义和使用

使用变量的目的

定义

使用

白天和晚上的配色：我都要

添加一点小小的 JS 震撼（不推荐）

相关帖子

求助一个样式 CSS

怎么没有直接对话的客服呢？我想购买 vip，请问终身版是不是不能多端同步？

“/”敲斜杠后弹出的快捷功能面板中的选项条目能否删除 / 自定义？

数据库“资源”下的图片如何批量上传到自建图床

求代码片段 折叠的代码块仍然显示属性的命名和别名等信息

数据库是否支持图床

欢迎来到这里！

求代码片段折叠的代码块仍然显示属性的命名和别名等信息