为啥论坛里的子弹线列表 css 都不行了,我新建了个空间测试也不行

  • 思源笔记

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

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

    25342 引用 • 104655 回帖 • 1 关注
  • Q&A

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

    9685 引用 • 44065 回帖 • 91 关注
1 操作
JeffreyChen 在 2025-03-08 16:28:06 更新了该帖

相关帖子

被采纳的回答
  • Imuvux 1

    可以用 Savor 主题的子弹线样式(个人调整了非列表块顶层时的显示问题、非 Savor 主题激活节点显示)。

    css 代码:

    .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { content: ''; display: block; box-sizing: border-box; border-left: 2px solid var(--b3-theme-primary); border-bottom: 2px solid var(--b3-theme-primary); border-bottom-left-radius: 8px; position: absolute; left: -18px; } [data-subtype="u"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 32px; height: calc(var(--en-bullet-line-height) - 1px); top: calc(var(--en-bullet-line-height) * -1 + 20px); } [data-subtype="o"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 24px; height: calc(var(--en-bullet-line-height) - 8px); top: calc(var(--en-bullet-line-height) * -1 + 25px); } [data-subtype="t"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 30px; height: calc(var(--en-bullet-line-height) - 4px); top: calc(var(--en-bullet-line-height) * -1 + 21px); } /* 激活状态样式 */ [data-subtype="u"] .en_item_bullet_actived>.protyle-action, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::before, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::after { color: var(--b3-theme-primary) !important; } [data-subtype="o"] .en_item_bullet_actived>.protyle-action::after { background-color: var(--b3-theme-primary); } [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::before, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::after { color: var(--b3-theme-primary) !important; }

    js 代码:

    allListItemNode = [] document.addEventListener('selectionchange', () => { const selection = window.getSelection() if (!selection.rangeCount) { return } const range = selection?.getRangeAt(0) const startNode = range?.startContainer let currentNode = startNode allListItemNode.forEach((node) => { node.classList.remove('en_item_bullet_actived') node.classList.remove('en_item_bullet_line') }) allListItemNode = [] while (currentNode) { if (currentNode?.dataset?.type === 'NodeListItem') { allListItemNode.push(currentNode) } currentNode = currentNode.parentElement } for (let i = 0; i < allListItemNode.length - 1; i++) { const currentNode = allListItemNode[i] const currentRect = currentNode.getBoundingClientRect() const nextNode = allListItemNode[i + 1] const nextRect = nextNode.getBoundingClientRect() const height = currentRect.top - nextRect.top currentNode.style.setProperty('--en-bullet-line-height', `${height}px`) currentNode.classList.add('en_item_bullet_line') } allListItemNode.forEach((node) => { node.classList.add('en_item_bullet_actived') }) })

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 用插件试试:

    image.png

    1 回复
  • ioypl

    这个插件可以,但是会导致 bug,出现莫名的东西。

    1、列表后转标题出现 bug

    PixPin20250308164756.png

    2、层级多了,就出现莫名元素,导致下层无法选中。

    PixPin20250308164856.png

    1 回复
    1. 可能跟你的什么样式冲突了,我这里看起来没问题:

      image.png

    2. 这个是伪元素的样式问题,我这里是能选中块的

  • Imuvux 1 1 评论

    可以用 Savor 主题的子弹线样式(个人调整了非列表块顶层时的显示问题、非 Savor 主题激活节点显示)。

    css 代码:

    .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { content: ''; display: block; box-sizing: border-box; border-left: 2px solid var(--b3-theme-primary); border-bottom: 2px solid var(--b3-theme-primary); border-bottom-left-radius: 8px; position: absolute; left: -18px; } [data-subtype="u"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 32px; height: calc(var(--en-bullet-line-height) - 1px); top: calc(var(--en-bullet-line-height) * -1 + 20px); } [data-subtype="o"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 24px; height: calc(var(--en-bullet-line-height) - 8px); top: calc(var(--en-bullet-line-height) * -1 + 25px); } [data-subtype="t"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 30px; height: calc(var(--en-bullet-line-height) - 4px); top: calc(var(--en-bullet-line-height) * -1 + 21px); } /* 激活状态样式 */ [data-subtype="u"] .en_item_bullet_actived>.protyle-action, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::before, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::after { color: var(--b3-theme-primary) !important; } [data-subtype="o"] .en_item_bullet_actived>.protyle-action::after { background-color: var(--b3-theme-primary); } [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::before, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::after { color: var(--b3-theme-primary) !important; }

    js 代码:

    allListItemNode = [] document.addEventListener('selectionchange', () => { const selection = window.getSelection() if (!selection.rangeCount) { return } const range = selection?.getRangeAt(0) const startNode = range?.startContainer let currentNode = startNode allListItemNode.forEach((node) => { node.classList.remove('en_item_bullet_actived') node.classList.remove('en_item_bullet_line') }) allListItemNode = [] while (currentNode) { if (currentNode?.dataset?.type === 'NodeListItem') { allListItemNode.push(currentNode) } currentNode = currentNode.parentElement } for (let i = 0; i < allListItemNode.length - 1; i++) { const currentNode = allListItemNode[i] const currentRect = currentNode.getBoundingClientRect() const nextNode = allListItemNode[i + 1] const nextRect = nextNode.getBoundingClientRect() const height = currentRect.top - nextRect.top currentNode.style.setProperty('--en-bullet-line-height', `${height}px`) currentNode.classList.add('en_item_bullet_line') } allListItemNode.forEach((node) => { node.classList.add('en_item_bullet_actived') }) })
    4 回复
    1 操作
    Imuvux 在 2025-03-26 01:08:42 更新了该回帖
    这个是 OK 的,感谢分享!
    veryzhh
  • 我也遇到这个问题。

  • ioypl 1 评论

    可以了,怎么修改线的颜色

    css 第 5, 6 行的 var(--b3-theme-primary) 替换成颜色代码
    Imuvux
  • Wetoria 2 评论 via macOS

    这代码怎么看着这么眼熟 @royc1

    听说 Savor 某版更新就是得了 VV 佬斧正,都吹爆
    Imuvux
    @Imuvux 叶归的超级块宽度滑杆其实也是 R 佬催更出来的功能
    Wetoria
  • Savor 是唯一不冲突不变形的.

  • 就是 VV 佬的作品,效率最大化提升 @Wetoria

  • 奇了怪了,睡一觉起来,子弹线又不显示了。

    新代码也不行,在新空间里也不行。只有 Savor 的子弹线能稳定显示。

    刚从 Savor 切换到其他主题,子弹线代码是有效的,但重启思源后就又无效了。

    就好像有什么隐秘的开关,需要被开启,才可以。

    1 回复
  • 从 Savor 切换到其他主题,子弹线代码是有效的

    看起来像是 Savor 的 JS 没卸载干净,所以才有效

    1 操作
    JeffreyChen 在 2025-03-09 15:18:30 更新了该回帖
    但我在一个只装了默认主题和子弹线 CSS 的新工作空间里,也是不能显示子弹线。Savor 的 JS 会影响到新空间吗?
    veryzhh
    @veryzhh 不会
    JeffreyChen
请输入回帖内容 ...

推荐标签 标签

  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 44 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    95 引用 • 901 回帖 • 2 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 31 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 618 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 1 关注
  • 运维

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

    150 引用 • 257 回帖 • 2 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    494 引用 • 930 回帖
  • CSDN

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

    14 引用 • 155 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 763 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 118 关注
  • CAP

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

    12 引用 • 5 回帖 • 631 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 2 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 400 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • Solo

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

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

    1441 引用 • 10069 回帖 • 496 关注
  • OpenCV
    15 引用 • 36 回帖 • 5 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 446 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 396 回帖
  • ReactiveX

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

    1 引用 • 2 回帖 • 182 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 164 关注
  • Sandbox

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

    432 引用 • 1250 回帖 • 596 关注
  • frp

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

    20 引用 • 7 回帖
  • 自由行
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注