自己那 savor 的 css 折腾了一下,发现聚焦和闪卡状态下会失效,求大佬帮忙 🙏
样式大小参照 FlowUs
自己那 savor 的 css 折腾了一下,发现聚焦和闪卡状态下会失效,求大佬帮忙 🙏
样式大小参照 FlowUs
css 片段增加下面的代码即可。
然后你说的字体如果修改整体字体可以到 设置 》编辑器 》字体中修改即可,如果仅修改 li 的字体,请参考下面的代码和说明。
/* 定义li前缀大小 */
:root {
/* 无序列表圆点大小 / 有序列表数字大小, 这里的根据你的需求调整 */
--my-li-icon-size: 24px;
/* 我的自定义字体,,根据需要改成你自己本地的字体 */
--my-font-family: "流畅书写体"
}
/* li文字大小 */
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action, .protyle .protyle-wysiwyg .li[data-subtype="u"] > .protyle-action, .protyle .protyle-wysiwyg[data-readonly="false"] .li[data-subtype="t"] > .protyle-action{
font-size: var(--my-li-icon-size);
/* 如果仅修改li前缀的字体改这里,但无序列表的圆点不生效 */
/*font-family: var(--my-font-family), var(--b3-font-family-protyle);*/
}
/* 如果仅单独调整有序列文字大小改这里
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action{
font-size: var(--my-li-icon-size);
}
*/
/* li前缀图标大小 */
.protyle-wysiwyg [data-node-id].li > .protyle-action svg {
height: var(--my-li-icon-size);
width: var(--my-li-icon-size);
}
/* 修改li元素字体 */
.protyle-wysiwyg [data-node-id].li{
font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
/* 如果仅更改li文本内容的字体改这里
.protyle-wysiwyg [data-node-id].li [data-type=NodeParagraph]{
font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
*/
效果
注意:
--my-font-family: "流畅书写体"
这里的字体名要改成你本地的字体名。
本地字体只需要安装字体到系统中即可。
如果不生效,重启下思源即可。
不过字体和系统相关,不同操作系统或手机上也得安装相应的字体才行,否则会回落到默认字体。
那么怎么查看本地的字体有哪些?叫什么名呢?
打开思源设置对话框,然后打开控制台(windows/linux:Ctrl + Shift + I
, macos:Cmd + Opt + I
),切换到 console 选项卡,然后输入以下代码查看
Array.from(document.querySelector("#fontFamily")).map(option=>option.value)
css 片段增加下面的代码即可。
然后你说的字体如果修改整体字体可以到 设置 》编辑器 》字体中修改即可,如果仅修改 li 的字体,请参考下面的代码和说明。
/* 定义li前缀大小 */
:root {
/* 无序列表圆点大小 / 有序列表数字大小, 这里的根据你的需求调整 */
--my-li-icon-size: 24px;
/* 我的自定义字体,,根据需要改成你自己本地的字体 */
--my-font-family: "流畅书写体"
}
/* li文字大小 */
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action, .protyle .protyle-wysiwyg .li[data-subtype="u"] > .protyle-action, .protyle .protyle-wysiwyg[data-readonly="false"] .li[data-subtype="t"] > .protyle-action{
font-size: var(--my-li-icon-size);
/* 如果仅修改li前缀的字体改这里,但无序列表的圆点不生效 */
/*font-family: var(--my-font-family), var(--b3-font-family-protyle);*/
}
/* 如果仅单独调整有序列文字大小改这里
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action{
font-size: var(--my-li-icon-size);
}
*/
/* li前缀图标大小 */
.protyle-wysiwyg [data-node-id].li > .protyle-action svg {
height: var(--my-li-icon-size);
width: var(--my-li-icon-size);
}
/* 修改li元素字体 */
.protyle-wysiwyg [data-node-id].li{
font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
/* 如果仅更改li文本内容的字体改这里
.protyle-wysiwyg [data-node-id].li [data-type=NodeParagraph]{
font-family: var(--my-font-family), var(--b3-font-family-protyle);
}
*/
效果
注意:
--my-font-family: "流畅书写体"
这里的字体名要改成你本地的字体名。
本地字体只需要安装字体到系统中即可。
如果不生效,重启下思源即可。
不过字体和系统相关,不同操作系统或手机上也得安装相应的字体才行,否则会回落到默认字体。
那么怎么查看本地的字体有哪些?叫什么名呢?
打开思源设置对话框,然后打开控制台(windows/linux:Ctrl + Shift + I
, macos:Cmd + Opt + I
),切换到 console 选项卡,然后输入以下代码查看
Array.from(document.querySelector("#fontFamily")).map(option=>option.value)
代码片段
/* 定义li前缀大小 */
:root {
/* 无序列表圆点大小 / 有序列表数字大小 */
--my-u-li-icon-size: 12px;
--my-o-li-icon-size: 15px;
}
/* li文字大小 */
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action, .protyle .protyle-wysiwyg .li[data-subtype="u"] > .protyle-action, .protyle .protyle-wysiwyg[data-readonly="false"] .li[data-subtype="t"] > .protyle-action{
font-size: var(--my-u-li-icon-size);
}
.protyle .protyle-wysiwyg .li[data-subtype="o"] > .protyle-action{
font-size: var(--my-o-li-icon-size);
}
主题
经测试,其他主题下,以上代码片段不生效。
测试文档:测试.sy.zip
经测试,有序列表在聚焦/闪卡状态下能够正常显示。
不太清楚,用你的代码和主题和文件并没有发现有问题,如图
不知道是否插件影响,建议把集市插件先关掉试试
不过,还是建议你加上这段代码,做个兼容处理
/* li前缀图标大小 */
.protyle .protyle-wysiwyg .li[data-subtype="u"] > .protyle-action svg {
height: var(--my-u-li-icon-size);
width: var(--my-u-li-icon-size);
}
经测试,其他主题下,以上代码片段不生效
我测试了官方主题,Asri 主题,包括你的主题,都没问题,你那边不清楚什么原因,实在不行建议新建个空间测试看看。以排除是否什么东西干扰导致的。
另外,我在 Mac 上 3.1.2 上测试的,不清楚是否和系统及版本有关。
大佬,你把无序列表的圆点设置小一点再测试下。
图中圆点大小跟默认值差不多,圆点越小、观察的越明显。
插件和其他代码片段我已经排除过,如果你那边把圆点调小后显示正常的话,就不折腾了,凑活用 😄
Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。
应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。
PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。
用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖。
用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/
让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
新手上路,请谨慎驾驶!
据说 99% 的性能瓶颈都在数据库。
WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。
Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。
发布对别人有帮助的原创内容是最好的 SEO 方式。
你若安好,便是晴天。
Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。
ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。
Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。
PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。
Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。
大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。
Open Source, Open Mind, Open Sight, Open Future!
Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。
jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。
ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。
CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。