希望将文档树的按钮调大一点

想要从一个父文档点开查看他的子文档,奈何这个文档的展开按钮太小,老是误点到父文档,大佬们能否写个 css 片段将文档树图案删去,来扩大按钮的点击范围

image.png

  • 思源笔记

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

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

    22330 引用 • 89351 回帖
  • Q&A

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

    8107 引用 • 36990 回帖 • 161 关注
被采纳的回答
  • EmberSky 1
    1. css 是可以隐藏文档树图案, 但是隐藏之后, 是文字左移, 而不是折叠按钮右移
      /* 隐藏: 文档树->文档->图标 */
      div.sy__file>div.fn__flex-1 ul>li>span.b3-list-item__icon {display: none!important;}
      
    2. 你用的这个插件应该是文档树自定义, 它里面有个文档树压缩, 可以研究一下
    3. 另外, 推荐一个 js 片段, 单击折叠/展开文档树, 也可以试下效果
      /* 文档树点击文档自动展开下级 JS片段 */
      setTimeout(() => {
          console.log("加载代码片段:自动展开文件树");
          document.querySelector('.sy__file').addEventListener('mousedown', event => {
              if (!event.target.classList.contains('b3-list-item__text')) return;
              if (event.target.parentNode.getAttribute("data-type") !== "navigation-file") return;
              const b3ListItemToggle = event.target.parentNode.querySelector('.b3-list-item__toggle');
              if (b3ListItemToggle.classList.contains('fn__hidden')) return;
              b3ListItemToggle.click();
          });
      }, 200);
      
      

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • EmberSky

    文档树自定义 插件可以在鼠标悬停的时候, 换行

  • 其他回帖
  • EmberSky 1
    1. css 是可以隐藏文档树图案, 但是隐藏之后, 是文字左移, 而不是折叠按钮右移
      /* 隐藏: 文档树->文档->图标 */
      div.sy__file>div.fn__flex-1 ul>li>span.b3-list-item__icon {display: none!important;}
      
    2. 你用的这个插件应该是文档树自定义, 它里面有个文档树压缩, 可以研究一下
    3. 另外, 推荐一个 js 片段, 单击折叠/展开文档树, 也可以试下效果
      /* 文档树点击文档自动展开下级 JS片段 */
      setTimeout(() => {
          console.log("加载代码片段:自动展开文件树");
          document.querySelector('.sy__file').addEventListener('mousedown', event => {
              if (!event.target.classList.contains('b3-list-item__text')) return;
              if (event.target.parentNode.getAttribute("data-type") !== "navigation-file") return;
              const b3ListItemToggle = event.target.parentNode.querySelector('.b3-list-item__toggle');
              if (b3ListItemToggle.classList.contains('fn__hidden')) return;
              b3ListItemToggle.click();
          });
      }, 200);
      
      
  • wilsons 2

    你样式的问题,左侧的线把空间挤小了,官方默认主题没这么小,空间挺大的。

    理想状态应该是蓝色区域,官方默认主题就是蓝色区域

    image.png

    我这个目录层次背景线不会挤占原有空间

    [分享] 斜杠命令菜单展开和支持左右方向键 - wilsons 的回帖

  • 文档树中的具体文档标题现在不能换行,太宽了更加减少显示空间。

    1 回复
CongSec
没事别关注我, 因为发帖需要更多积分 香港

推荐标签 标签

  • 周末

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

    14 引用 • 297 回帖 • 2 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖 • 1 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 3 关注
  • CSS

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

    198 引用 • 550 回帖
  • Python

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

    543 引用 • 672 回帖
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖
  • LeetCode

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

    209 引用 • 72 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 437 关注
  • SendCloud

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

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

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3453 回帖 • 203 关注
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖 • 1 关注
  • 微服务

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

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

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖 • 2 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    351 引用 • 1813 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 245 关注
  • Kafka

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

    36 引用 • 35 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 529 关注
  • TensorFlow

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

    20 引用 • 19 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 资讯

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

    55 引用 • 85 回帖
  • 分享

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

    248 引用 • 1792 回帖
  • Pipe

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

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

    132 引用 • 1114 回帖 • 125 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • Sillot

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

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

    主仓库地址:Hi-Windom/Sillot

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

    注意事项:

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

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

    10 引用 • 4 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 432 关注