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

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

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

  • 思源笔记

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

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

    18619 引用 • 69278 回帖
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: "-";
    }
    

    感谢打赏积分!!😋

请输入回帖内容 ...

推荐标签 标签

  • V2Ray
    1 引用 • 15 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    164 引用 • 407 回帖 • 526 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 394 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 38 关注
  • sts
    2 引用 • 2 回帖 • 146 关注
  • jsoup

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

    6 引用 • 1 回帖 • 457 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    57 引用 • 22 回帖 • 2 关注
  • ActiveMQ

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

    19 引用 • 13 回帖 • 628 关注
  • CSDN

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

    14 引用 • 155 回帖 • 1 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 150 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    368 引用 • 1212 回帖 • 577 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 9 关注
  • Bug

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

    77 引用 • 1741 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 512 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    205 引用 • 357 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 199 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1398 回帖 • 2 关注
  • 资讯

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

    53 引用 • 85 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    139 引用 • 441 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6521 引用 • 29303 回帖 • 248 关注
  • danl
    61 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 7 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 126 关注