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

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

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

  • 思源笔记

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

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

    22341 引用 • 89399 回帖 • 1 关注
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 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 全局隐藏小圆点的代码要简单得多:

    /* 全局隐藏列表小圆点 */
    /* ↓ 文字左移 ↓ */
    .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 更新了该回帖
  • 其他回帖
  • iamqiz

    秀儿呀我的哥 😂

    这样看起来是有那味了

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

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

    1 回复
  • i1356

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

  • i1356

    不错。

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

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    153 引用 • 3783 回帖 • 1 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 382 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • JRebel

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

    26 引用 • 78 回帖 • 664 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 3 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 130 关注
  • 锤子科技

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

    4 引用 • 31 回帖 • 4 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 4 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 787 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 73 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • jsoup

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

    6 引用 • 1 回帖 • 477 关注
  • frp

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

    20 引用 • 7 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    543 引用 • 672 回帖
  • 运维

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

    149 引用 • 257 回帖