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

[!Example]+ 属性

  • 版本 v0.0.1-alpha+20240828

基础行内样式的渲染

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

修改前

image-20240827221933-e1v9nxm

修改后

image-20240828154022-ekhg86t

其中,块引用​、超链接​ 和 备注​ 我觉得可先不动,后续如果看着不舒服再调整。粗体、斜体这种简单的基本上和行内代码(行级代码)的渲染和处理思路一样,我这里就只贴一下 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

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

image-20240828160649-6hcql7i

为了开发方便,后续我用都是 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文件的路径")​ 需要注意:

  1. 使用相对路径: ./​ 表示相对于当前文件开始;
  2. 路径和文件名中尽量不要包含有中文;
  3. 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"] {
    // 这里放在明亮 模式 下的渲染效果,为了简化写法,最好在这里重新修改变量的值
}

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

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

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

image-20240828174624-wurrf1v

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

image-20240828174836-dn3nuqx

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

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

image-20240828175256-vdo7wdw

image-20240828175402-v7z17o0

image-20240828175456-n9283xs

  1. mini-vlook​ 主题的 theme.css​ 文件中,引入 theme-conifg-dk.css​。

image-20240828180036-ubdumc7

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

注意:需要同样的方法,把你自己的

image-20240828174432-1vojgyw

添加一点小小的 JS 震撼(不推荐)

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

image-20240828182120-dcib4ja


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

(() => {
    try {

        window.onload = setTimeout(renderAll, 0);

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

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

image-20240828181919-ru5yzt9

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22025 引用 • 87847 回帖 • 3 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • bug320

    [抱拳]

  • 其他回帖
  • bug320

    OK,那就太好了,以后在主题里用 theme.js 就放心了。❤️

  • EmptyLight

    我记得上次看主题讨论时候 theme.js 已经决定保留了,并且确定了加载和卸载主题的代码格式,应该算一定时间内稳定下来了,可以尝试通过 js 辅助一些功能实现。

    顺带一提,文中的写法 (()=>{})(); 我记得是加载插件时候执行的代码,如果不这样写,在主题加载时候不会执行 js(记忆可能有误,也可能有其他写法)

    1 回复
  • Guardianzm 1 赞同

    最近也在弄样式,很有参考价值

    1 回复