登录 注册

求代码片段 折叠的代码块仍然显示属性的命名和别名等信息

本贴最后更新于 213 天前，其中的信息可能已经物是人非

image.png

额外需求

  1. 如何显示备注的文字
    1. 备注的文字如何只显示前 20 个字
  • 思源笔记

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

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

    24822 引用 • 102098 回帖
  • Q&A

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

    9416 引用 • 42896 回帖 • 109 关注
佛山 位置 3 回帖
2
234 66 124 1 43

相关帖子

被采纳的回答
  • wilsons • • 1
    付费者 捐赠者

    代码块折叠时不显示命名和别名等，这个应该是思源的一个 bug，原因是折叠时父容器设置了 overflow:hidden;这样的话，命名和别名因为超出了父容器所以，被隐藏了。

    最简单的解决办法就是折叠时把命名和别名移动到父容器中。

    下面的代码基本上可以满足你的需求。

    .protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]){
    opacity:1;
}
.protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]) .protyle-attr {
    opacity: 1;
    top: 0px;
}
​

    演示

    r31.gif

    关于备注显示问题，这个有些复杂，虽然直接显示备注内容很简单，但这涉及到打开和关闭文档时要定位元素及修改属性后要刷新备注内容等让它变得麻烦起来。

    不过我可以给你一个思路：

    首先，显示备注内容，可以在备注元素的后面插入一个元素，用于显示备注内容，它的数据读取自备注元素的 aria-label 属性的内容。

    然后，可以参考我之前这个帖子回复中的 observeTabChanged 函数，然后把打开和关闭文档的监听工作放到这个函数里，同时也监听备注元素的属性 aria-label 的内容被修改，然后动态修改备注后面的那个结点元素的内容（即刚才提到的放备注内容的元素）。

    image.png

3 回帖
求代码片段 折叠的代码块仍然显示属性的命名和别名等信息

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Muu •
    付费者 作者

    很神奇 为啥我设置 top: -16px; 就无法显示

    top: 0 有一个问题就是

    image.png

    它和那个按钮重合了位置

    所以我正常的不折叠代码备注命名等位置就是 top: -16px

    1 回复
  • 其他回帖
  • wilsons • • 1
    付费者 捐赠者

    代码块折叠时不显示命名和别名等，这个应该是思源的一个 bug，原因是折叠时父容器设置了 overflow:hidden;这样的话，命名和别名因为超出了父容器所以，被隐藏了。

    最简单的解决办法就是折叠时把命名和别名移动到父容器中。

    下面的代码基本上可以满足你的需求。

    .protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]){
    opacity:1;
}
.protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]) .protyle-attr {
    opacity: 1;
    top: 0px;
}
​

    演示

    r31.gif

    关于备注显示问题，这个有些复杂，虽然直接显示备注内容很简单，但这涉及到打开和关闭文档时要定位元素及修改属性后要刷新备注内容等让它变得麻烦起来。

    不过我可以给你一个思路：

    首先，显示备注内容，可以在备注元素的后面插入一个元素，用于显示备注内容，它的数据读取自备注元素的 aria-label 属性的内容。

    然后，可以参考我之前这个帖子回复中的 observeTabChanged 函数，然后把打开和关闭文档的监听工作放到这个函数里，同时也监听备注元素的属性 aria-label 的内容被修改，然后动态修改备注后面的那个结点元素的内容（即刚才提到的放备注内容的元素）。

    image.png

    1 回复
  • wilsons •
    付费者 捐赠者

    之前解释过，命名等不能超过父容器范围，top:-16px 超出父容器了，自然隐藏了。

    重合了有啥影响吗？右侧操作按钮是你移动上去才显示，平时使用时一般不会鼠标一直留在操作按钮上吧。

    如果纠结可以设置 right: 50px;这样就避开按钮了，不过感觉这样还不如重合好看。

    要想显示在上面你得把这个命名等按钮移到父容器之外，或者重新实现代码隐藏的逻辑，修改起来较为麻烦，如果你有兴趣可以研究研究。

Muu
佛山
回帖
84
 帖子
26
 积分
5900

近期热议

推荐标签 标签

  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 143 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 568 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 76 回帖
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • etcd

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

    6 引用 • 26 回帖 • 544 关注
  • OpenStack

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

    10 引用 • 3 关注
  • 宕机

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

    13 引用 • 82 回帖 • 83 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 链滴

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

    记录生活，连接点滴

    171 引用 • 3842 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 731 关注
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 5 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    133 引用 • 889 回帖 • 1 关注
  • Kafka

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

    36 引用 • 35 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 28 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 5 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 382 关注
  • OneNote
    1 引用 • 3 回帖
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖 • 1 关注
  • 大数据

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

    93 引用 • 113 回帖
  • React

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

    192 引用 • 291 回帖 • 384 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 76 关注
  • CAP

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

    12 引用 • 5 回帖 • 637 关注

最新标签