总需求:
有点复杂,以有序列表为例:
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 所有标题。
修改后的代码,不知是否你想要的结果
/* 有序列表,折叠时,去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.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 或插入图标元素等重新设计,这个修改的代价可能太过高昂,且可能存在一些列兼容问题,甚至影响现有插件或现有功能,因此,暂时无法简单的支持,只能用其他样式或标记代替这个箭头按钮来标记折叠状态。
另:折叠状态下,上面的片段似乎会覆盖以下片段
我不知道你说的覆盖是指什么,我这里并没有出现覆盖情况,如果你指折叠时省略号被隐藏的话,这和这段代码无关,你不用这段代码,折叠时省略号也会隐藏(因为省略号超出折叠元素的范围)。
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 所有标题。
SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。
Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。
Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。
SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。
Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。
Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。
七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。
OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。
Open Source, Open Mind, Open Sight, Open Future!
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。
确认过眼神后的灵魂连接,站在链在!
PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。
Postman 是一款简单好用的 HTTP API 调试工具。
网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。
Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。
这是一个不能说的秘密。
MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。
用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖。
用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/
AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。
webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。
又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。
区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。