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

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

之前 @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 暗黑模式页面背景改为纯黑,一个是指定部分图片在暗黑模式下反色显示,不过现在积分不够了,等积分多了再单独发帖介绍。

  • 思源笔记

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

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

    20156 引用 • 77717 回帖
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
  • iamqiz

    秀儿呀我的哥 😂

    这样看起来是有那味了

    不过没有小黑点,就没法区分段落和列表项了, 它俩在列表中 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: "-";
    }
    

    感谢打赏积分!!😋

请输入回帖内容 ...

推荐标签 标签

  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 616 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    16 引用 • 7 回帖 • 2 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 613 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 51 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    544 引用 • 3531 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 2 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖 • 1 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 196 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    245 引用 • 1776 回帖 • 1 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖
  • jsoup

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

    6 引用 • 1 回帖 • 473 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1234 回帖 • 441 关注
  • abitmean

    有点意思就行了

    39 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    54 引用 • 85 回帖
  • gRpc
    11 引用 • 9 回帖 • 49 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 8 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 613 关注
  • CAP

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

    11 引用 • 5 回帖 • 580 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    171 引用 • 814 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 641 关注