登录 注册

有没有大佬能写一个类似 logseq 的层次子弹线 css 片段

本贴最后更新于 451 天前，其中的信息可能已经时移世异

如下图所示，之前好像看到有大佬实现了，但是必须使用对应的主题，有咩有对应的 css 片段能够实现呢，之前还看到 obsidion 社区他们那边也在求，这个其实还是挺好用的

image.png

  • 思源笔记

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

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

    22346 引用 • 89406 回帖 • 1 关注
  • Q&A

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

    8116 引用 • 37015 回帖 • 160 关注
1 引用
CSS 片段分享（行 focus 高亮显示） • Zhangwuji
汕尾 位置
20 悬赏
1 感谢
4 收藏
1 引用
8 回帖
2
1.2k 565 15 365 3 7 245

相关帖子

被采纳的回答
  • mdzz2048 • • 6 • 1 赞同
    订阅者 付费者 恶龙

    css 片段

    /* REF https://github.com/svchord/Rem-Craft */
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{
    color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:16px;
    height:16px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:not(:has(.block-focus))::after{
    bottom:-2px;
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:38px;
    border-radius:0 0 0 8px;
    border-width:0 0 2px 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)~.li:not(:has(.block-focus))::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=o]::after{
    width:24px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=t]::after{
    width:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:rgb(70, 110, 220);
    top:20px;
    height:calc(100% + 4px);
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]:has(+.list)::after{
    height:auto;
    bottom:0
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id][data-type=NodeHeading]::after{
    top:0;
    height:185%
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)~[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[fold="1"]>[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus):has(>.block-focus)>[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-10px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action{
    color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:14px;
    height:14px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-14px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:32px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus).protyle-task--done>.list:has(.block-focus)>.li::after{
    border-color:rgba(139, 139, 139)
}
8 回帖
有没有大佬能写一个类似 logseq 的层次子弹线 css 片段

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • py • • 1 评论

    你好，只把 CSS 片段复制就可以么，还是说 JS 片段也需要做什么操作呢？

    分别把 CSS 代码、JS 代码放在 设置——外观——代码片段中。两个都要放。注意代码片段功能中 CSS 和 JS 代码需要切换一下。
    5Z4Uo6oGvKPB7o • • 1 赞同
  • 其他回帖
  • 5kyfkr •
    付费者 捐赠者

    JS 片段我用 AI 优化了下，新代码滚动页面的延迟降低，并且没有 100ms 的显示延迟了。

    // 缓存编辑器块并处理聚焦状态的函数定义
let cachedEditorBlocks = []; // 缓存所有编辑器块
let focusedBlock = null; // 缓存当前聚焦的块

// 初始化缓存
function initEditorBlocksCache() {
    const editors = document.querySelectorAll('.protyle-wysiwyg');
    editors.forEach(editor => {
        if (!editor.classList.contains('NodeAttributeView')) {
            cachedEditorBlocks.push(...editor.querySelectorAll('[data-node-id]'));
        }
    });
}

// 更新聚焦状态并维护缓存
function handleBlockFocus(e) {
    let target;
    if (e.type === 'mouseup') {
        // 鼠标事件，查找最近的具有data-node-id属性的元素
        target = e.target.closest('[data-node-id]');
    } else if (e.type === 'keyup') {
        // 键盘事件，查找当前焦点所在的具有data-node-id属性的元素
        const activeElement = document.activeElement;
        if (activeElement.classList.contains('protyle-wysiwyg')) {
            target = window.getSelection()?.focusNode?.parentElement;
            while (target && !target.dataset.nodeId) {
                target = target.parentElement;
                if (!target) break; // 避免空指针异常
                if (target.classList.contains('NodeAttributeView')) {
                    target = null; // 如果找到NodeAttributeView，则不处理该元素
                    break;
                }
            }
        }
    }

    if (!target || target === focusedBlock) return;

    if (focusedBlock) {
        focusedBlock.classList.remove('block-focus');
    }
    focusedBlock = target;
    focusedBlock.classList.add('block-focus');

    // 根据需要调用相关功能，例如：
    // setSelector(focusedBlock);
}

// 初始化编辑器块缓存
initEditorBlocksCache();

// 绑定事件监听器
document.addEventListener('mouseup', handleBlockFocus, true);
document.addEventListener('keyup', handleBlockFocus, true);

// 立即调用的异步函数表达式，执行handleBlockFocus并输出日志
(async () => {
    // 这里我们调用handleBlockFocus函数，但由于它不返回Promise，所以不需要await
    handleBlockFocus({ type: 'dummy' }); // 模拟事件调用
    console.log('加载子弹线成功');
})();
    1 操作
    5kyfkr 在 2024-05-11 21:29:55 更新了该回帖
  • mdzz2048 • • 4
    订阅者 付费者 恶龙

    Rem Craft 主题有这个，需要 JS 定位 app-translate-content Rem Craft 主题有这个，需要 JS 定位

    js 片段

    /**
 * 获得指定块位于的编辑区
 * @params {HTMLElement}
 * @return {HTMLElement} 光标所在块位于的编辑区
 * @return {null} 光标不在块内
 */
function getTargetEditor(block) {
    while (block != null && !block.classList.contains('protyle-wysiwyg')) block = block.parentElement;
    return block;
}

/**
 * 获得焦点所在的块
 * @return {HTMLElement} 光标所在块
 * @return {null} 光标不在块内
 */
function getFocusedBlock() {
    if (document.activeElement.classList.contains('protyle-wysiwyg')) {
        let block = window.getSelection()?.focusNode?.parentElement; // 当前光标
        while (block != null && block.dataset.nodeId == null) block = block.parentElement;
        return block;
    }
}

function focusHandler() {
    /* 获取当前编辑区 */
    let block = getFocusedBlock(); // 当前光标所在块
    /* 当前块已经设置焦点 */
    if (block?.classList.contains(`block-focus`)) return;

    /* 当前块未设置焦点 */
    const editor = getTargetEditor(block); // 当前光标所在块位于的编辑区
    if (editor) {
        editor.querySelectorAll(`.block-focus`).forEach((element) => element.classList.remove(`block-focus`));
        block.classList.add(`block-focus`);
        // setSelector(block);
    }
}

function bulletMain() {
    // 跟踪当前所在块
    window.addEventListener('mouseup', focusHandler, true);
    window.addEventListener('keyup', focusHandler, true);
}

(async () => {
    bulletMain();
    console.log('加载子弹线成功')
})();
    1 回复
    2 引用
  • Kidus •
    付费者 作者

    woc，感谢大佬分享！！！

  • 查看全部回帖
Kidus
汕尾
回帖
13
 帖子
2
 积分
456

近期热议

推荐标签 标签

  • 大疆创新

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

    2 引用 • 14 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 22 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 小薇

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

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

    34 引用 • 467 回帖 • 742 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 232 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 62 关注
  • 招聘

    哪里都缺人，哪里都不缺人。

    190 引用 • 1057 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 599 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 531 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    47 引用 • 25 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 99 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 362 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 471 关注
  • SOHO

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

    7 引用 • 55 回帖 • 18 关注
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • V2EX

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

    17 引用 • 236 回帖 • 328 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • HTML

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

    107 引用 • 295 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 384 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    32 引用 • 130 回帖 • 2 关注
  • LaTeX

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

    12 引用 • 54 回帖 • 63 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖

最新标签