登录 注册

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​

  • 思源笔记

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

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

    23011 引用 • 92561 回帖
5 感谢
3 收藏
1 赞同
4 回帖
2
162 106 51 3 2

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Guardianzm • • 1 赞同
    付费者

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

    1 回复
  • bug320 •
    订阅者 付费者 作者

    [抱拳]

  • EmptyLight •
    付费者

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

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

    1 回复
  • bug320 •
    订阅者 付费者 作者

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

bug320
回帖
8
 帖子
6
 积分
923