登录 注册

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

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

image.png

额外需求

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

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

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

    24873 引用 • 102357 回帖
  • Q&A

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

    9444 引用 • 43006 回帖 • 108 关注
佛山 位置 3 回帖
2
236 66 124 1 45

相关帖子

被采纳的回答
  • 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
佛山
回帖
84
 帖子
26
 积分
5970

近期热议

推荐标签 标签

  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 630 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 88 关注
  • 旅游

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

    93 引用 • 901 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 224 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 197 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    586 引用 • 3538 回帖
  • 外包

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

    26 引用 • 233 回帖 • 2 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 393 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 162 关注
  • JSON

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

    52 引用 • 190 回帖
  • 强迫症

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

    15 引用 • 161 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    22 引用 • 148 回帖 • 7 关注
  • Python

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

    556 引用 • 675 回帖 • 1 关注
  • 开源中国

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

    7 引用 • 86 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • etcd

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

    6 引用 • 26 回帖 • 547 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1708 回帖
  • 自由行
    • 1 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 32 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 662 关注
  • Swagger

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

    26 引用 • 35 回帖 • 3 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    335 引用 • 324 回帖
  • CAP

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

    12 引用 • 5 回帖 • 639 关注
  • RESTful

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

    30 引用 • 114 回帖 • 7 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖 • 1 关注

最新标签