通过 CSS 让某些列表变成嵌套段落

本贴最后更新于 664 天前,其中的信息可能已经水流花落

之前 @iamqiz 发帖提到过这一需求:

调查: 是否支持段落缩进形成树状嵌套结构?(像 notion/wolai/flowus/logseq 那样)

调查 [v2 更新版]: 是否支持段落缩进形成树状嵌套结构?(像 notion/wolai/flowus/logseq 那样)

我写了个 CSS 满足了这一需求,效果如下:

image.png

以下是 CSS 代码。注意属性分为 hidedot 和 hidedots,后者多了个 s,表示批量隐藏小圆点,而前者表示只隐藏所选中的小圆点。

/* 点击想要隐藏的小圆点(或对应的列表项块标)->属性->添加一条名为hidedot的属性,值为1->确定 */
/* 注意hidedot末尾不带s表示非批量隐藏,即只隐藏所选的小圆点 */
/* 属性hidedot的值可取0,此时代表批量隐藏小圆点时排除掉选中的某个小圆点 */
/* ↓ 文字左移 ↓ */
.protyle-wysiwyg [data-node-id][custom-hidedot="1"].li>[data-node-id] {
    margin-left: 0 !important;
}
/* ↓ 隐藏小圆点,但小圆点原位置仍然可点击 ↓ */
.protyle-wysiwyg [data-node-id][custom-hidedot="1"].li>.protyle-action>svg>use:not(:hover) {
    opacity:0;  /* 如果此处希望不可点击, 自行替换为 display:none; */
}
/* ↓ 竖线稍微左移,更美观 ↓*/
.protyle-wysiwyg [data-node-id][custom-hidedot="1"].li:before {
    left:11px;  /* 如果此处希望不显示竖线, 自行替换为 display:none; */
}

/* ------------------------------------------------------------------------------------ */

/* 点击想要批量隐藏小圆点的无序列表或列表项的块标->属性->添加一条名为hidedots的属性,值填1即可->确定 */
/* 注意是hidedots,最后有个s */
/* 属性hidedots的值取0没有意义 */
/* ↓ 文字左移 ↓ */
.protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>[data-node-id],
.protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>[data-node-id] {
    margin-left: 0 !important;
}
/* ↓ 隐藏小圆点,但小圆点原位置仍然可点击 ↓ */
.protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>.protyle-action>svg>use:not(:hover),
.protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>.protyle-action>svg>use:not(:hover) {
    opacity:0;  /* 如果此处希望不可点击, 自行替换为 display:none; */
}
/* ↓ 竖线稍微左移,更美观 ↓*/
.protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li:before,
.protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li:before {
    left:11px;  /* 如果此处希望不显示竖线, 自行替换为 display:none; */
}

怎样配置 CSS 呢?设置-> 外观-> 代码片段-> 添加 CSS-> 复制粘贴-> 确定。

第一次发帖标签是“思源笔记开发者”,哈哈。我还写了一些别的 CSS,一个是 pdf 暗黑模式页面背景改为纯黑,一个是指定部分图片在暗黑模式下反色显示,不过现在积分不够了,等积分多了再单独发帖介绍。

  • 思源笔记

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

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

    23349 引用 • 94345 回帖
5 操作
openAI 在 2023-03-14 11:35:48 更新了该帖
openAI 在 2023-03-14 11:33:32 更新了该帖
openAI 在 2023-03-14 11:22:25 更新了该帖
openAI 在 2023-03-14 11:06:11 更新了该帖 openAI 在 2023-03-14 02:33:46 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • i1356

    不错。

    手动有点麻烦,能不能做到一次性全部替换掉。

    1 回复
  • i1356

    隐藏小圆点有个好处,就是在手机端可以一行多显示文字内容。

  • 全局隐藏小圆点的代码要简单得多:

    /* 全局隐藏列表小圆点 */
    /* ↓ 文字左移 ↓ */
    .protyle-wysiwyg [data-node-id][data-subtype="u"].li>[data-node-id] {
        margin-left: 0 !important;
    }
    /* ↓ 隐藏小圆点,但小圆点原位置仍然可点击 ↓ */
    .protyle-wysiwyg [data-node-id][data-subtype="u"].li>.protyle-action>svg>use:not(:hover) {
        opacity:0;  /* 如果希望此处不可点击, 自行替换为 display:none; */
    }
    /* ↓ 竖线稍微左移,更美观 ↓*/
    .protyle-wysiwyg [data-node-id][data-subtype="u"].li:before {
        left:11px;  /* 如果希望此处不显示竖线, 自行替换为 display:none; */
    }
    
    1 回复
    2 操作
    openAI 在 2023-03-14 13:52:51 更新了该回帖
    openAI 在 2023-03-14 11:34:50 更新了该回帖
  • i1356 1 评论

    感谢。能去掉竖线吗?有些地方竖线错乱了。

    image.png

    把 left:11px; 改成 display:none;
    openAI 2
  • 秀儿呀我的哥 😂

    这样看起来是有那味了

    不过没有小黑点,就没法区分段落和列表项了, 它俩在列表中 Tab 的效果不同,很有区分的必要

    我觉得把黑点换成减号, 然后再紧凑一点, 会好看点, 同时能区分段落和列表项

    1 回复
  • iamqiz 1 赞同

    D 大说过没积分发帖,可以给他发邮件,他会给你加 😄

  • 写好了,我测试了一下没问题。

    将非全局隐藏的小圆点替换为短横线:

    /* 将非全局隐藏的小圆点替换为短横线。此段代码补充在(非全局)隐藏小圆点的CSS后面。 */
    .protyle-wysiwyg [data-node-id][custom-hidedot="1"].li>div[data-type="NodeParagraph"].p>div:before,
    .protyle-wysiwyg [custom-hidedots] [data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>div[data-type="NodeParagraph"].p>div:before,
    .protyle-wysiwyg [custom-hidedots][data-node-id][data-subtype="u"]:not([custom-hidedot="0"]).li>div[data-type="NodeParagraph"].p>div:before {
        content: "-";
    }
    

    将全局隐藏的小圆点替换为短横线:

    /* 将全局隐藏的小圆点替换为短横线。此段代码补充在(全局)隐藏小圆点的CSS后面。 */
    .protyle-wysiwyg [data-node-id][data-subtype="u"].li>div[data-type="NodeParagraph"].p>div:before {
        content: "-";
    }
    

    感谢打赏积分!!😋

请输入回帖内容 ...

推荐标签 标签

  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 677 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 518 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 533 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 703 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 54 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 310 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 369 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 121 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 222 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 99 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 725 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 597 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 487 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 615 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 29 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 48 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 43 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    170 引用 • 513 回帖 • 1 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 320 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 130 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1436 引用 • 10058 回帖 • 492 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    943 引用 • 1460 回帖 • 2 关注