[!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 作用域内的变量。
}
- 在
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()
命令,可以看到下面的输出结果
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于