总需求:
有点复杂,以有序列表为例:
1. 折叠时,去除数字方框阴影
另:无序列表的折叠阴影不用去除
2. 只显示“‣”
3. 鼠标悬浮“‣”时,去除方框阴影、“折叠/展开”字样
4. 折叠标题,去除方框(任我行主题,可以理解为“去除折叠状态标识”)
总需求:
有点复杂,以有序列表为例:
1. 折叠时,去除数字方框阴影
另:无序列表的折叠阴影不用去除
2. 只显示“‣”
3. 鼠标悬浮“‣”时,去除方框阴影、“折叠/展开”字样
4. 折叠标题,去除方框(任我行主题,可以理解为“去除折叠状态标识”)
css 代码如下
/* 有序列表,折叠时,去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{
background-color: transparent!important;
}
/* 只显示“‣” */
.protyle-gutters button[data-type="NodeList"] svg,
.protyle-gutters button[data-type="NodeListItem"] svg
{
display:none;
}
/* 鼠标悬浮“‣”时去除方框引用 */
.protyle-gutters button:hover svg{
background-color: transparent;
}
/* 折叠标题,去除方框(任我行主题,可以理解为“去除折叠状态标识”) */
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
background-color: transparent;
border:none;
}
/* 鼠标悬浮“‣”时,去除“折叠/展开”字样,css无法实现,见下面的js代码 */
鼠标悬浮“‣”时,去除“折叠/展开”字样,css 无法实现,js 代码如下
// 鼠标悬浮“‣”时,去除“折叠/展开”字样
(()=>{
whenElementExist(".layout__center").then((element)=>{
element.addEventListener('mouseover', async (e)=>{
if(e.target.closest('button[aria-label="折叠/展开"]')){
const tooltip = await whenElementExist("#tooltip");
tooltip.remove();
}
});
});
function whenElementExist(selector) {
return new Promise(resolve => {
const checkForElement = () => {
let element = null;
if (typeof selector === 'function') {
element = selector();
} else {
element = document.querySelector(selector);
}
if (element) {
resolve(element);
} else {
requestAnimationFrame(checkForElement);
}
};
checkForElement();
});
}
})();
另外,你需求里提到的一级标题,我想你本意应该不是仅针对一级标题的样式吧,所以这里的样式和 js 会应用到 h1-h6 所有标题。
css 代码如下
/* 有序列表,折叠时,去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{
background-color: transparent!important;
}
/* 只显示“‣” */
.protyle-gutters button[data-type="NodeList"] svg,
.protyle-gutters button[data-type="NodeListItem"] svg
{
display:none;
}
/* 鼠标悬浮“‣”时去除方框引用 */
.protyle-gutters button:hover svg{
background-color: transparent;
}
/* 折叠标题,去除方框(任我行主题,可以理解为“去除折叠状态标识”) */
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
background-color: transparent;
border:none;
}
/* 鼠标悬浮“‣”时,去除“折叠/展开”字样,css无法实现,见下面的js代码 */
鼠标悬浮“‣”时,去除“折叠/展开”字样,css 无法实现,js 代码如下
// 鼠标悬浮“‣”时,去除“折叠/展开”字样
(()=>{
whenElementExist(".layout__center").then((element)=>{
element.addEventListener('mouseover', async (e)=>{
if(e.target.closest('button[aria-label="折叠/展开"]')){
const tooltip = await whenElementExist("#tooltip");
tooltip.remove();
}
});
});
function whenElementExist(selector) {
return new Promise(resolve => {
const checkForElement = () => {
let element = null;
if (typeof selector === 'function') {
element = selector();
} else {
element = document.querySelector(selector);
}
if (element) {
resolve(element);
} else {
requestAnimationFrame(checkForElement);
}
};
checkForElement();
});
}
})();
另外,你需求里提到的一级标题,我想你本意应该不是仅针对一级标题的样式吧,所以这里的样式和 js 会应用到 h1-h6 所有标题。
修改后的代码,不知是否你想要的结果
/* 有序列表,折叠时,去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{
background-color: transparent;
}
/* 只显示“‣” */
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeList"] svg,
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeListItem"] svg,
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeHeading"] svg
{
display:none;
}
/* 鼠标悬浮“‣”时去除方框引用 */
.protyle-gutters button:hover svg{
background-color: transparent;
}
/* 折叠标题,去除方框(任我行主题,可以理解为“去除折叠状态标识”) */
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
background-color: transparent;
border:none;
}
/* 去掉标题折叠按钮背景 */
.protyle-wysiwyg div[fold="1"][data-type=NodeHeading]:before {
background:none;
}
- 折叠状态下,需要常驻显示“‣”
这个常驻不了,因为左侧图标是公用的,即随着鼠标切换到不同的块,这个里的内容会被替换掉,并且这个图标根据鼠标位置实时移动,因此无法针对每个块常驻这里的图标。
如果想实现,必须抛弃现有的实现逻辑,用 before 或插入图标元素等重新设计,这个修改的代价可能太过高昂,且可能存在一些列兼容问题,甚至影响现有插件或现有功能,因此,暂时无法简单的支持,只能用其他样式或标记代替这个箭头按钮来标记折叠状态。
另:折叠状态下,上面的片段似乎会覆盖以下片段
我不知道你说的覆盖是指什么,我这里并没有出现覆盖情况,如果你指折叠时省略号被隐藏的话,这和这段代码无关,你不用这段代码,折叠时省略号也会隐藏(因为省略号超出折叠元素的范围)。
好记性不如烂笔头。
OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。
FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。
确认过眼神后的灵魂连接,站在链在!
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。
又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。
VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。
Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。
互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。
GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。
JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。
一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。
链滴是一个记录生活的地方。
记录生活,连接点滴
webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。
Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。
NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。
我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。
Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。
Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。
Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。
Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加 [css]
或 [js]
用于区分代码片段类型。
IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。
IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。