登录 注册

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

image.png

额外需求

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

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

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

    22220 引用 • 88795 回帖 • 2 关注
  • Q&A

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

    8057 引用 • 36820 回帖 • 161 关注
佛山 位置 3 回帖
2
78 59 18 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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 回复
  • 其他回帖
  • Muu •
    付费者 作者

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

    top: 0 有一个问题就是

    image.png

    它和那个按钮重合了位置

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

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

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

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

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

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

Muu
佛山
回帖
66
 帖子
20
 积分
3191

近期热议

推荐标签 标签

  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 460 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注
  • Netty

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

    49 引用 • 33 回帖 • 23 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    339 引用 • 708 回帖
  • 链滴

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

    记录生活，连接点滴

    153 引用 • 3783 回帖 • 2 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • CSS

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

    197 引用 • 548 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 638 关注
  • 持续集成

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

    15 引用 • 7 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 3 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 628 关注
  • JetBrains

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

    18 引用 • 54 回帖 • 2 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 6 关注
  • Electron

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

    15 引用 • 136 回帖 • 1 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • Redis

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

    286 引用 • 248 回帖 • 67 关注
  • 爬虫

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

    106 引用 • 275 回帖
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 657 关注
  • 旅游

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

    90 引用 • 899 回帖
  • 服务

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

    41 引用 • 24 回帖 • 3 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 6 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖

最新标签