登录 注册

[js][css] 提取写味主题列表转表格导图看板功能

本贴最后更新于 328 天前，其中的信息可能已经时异事殊
  • 思源笔记

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

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

    28442 引用 • 119752 回帖
  • 代码片段

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

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

    285 引用 • 1983 回帖
3 引用
表格里面的内容能变成列表吗？ • wilsons
思源笔记列表使用指南 • Imuvux
有无大佬提取 savor 主题中的列表转表格功能 • wilsons
5 感谢
2 关注
10 收藏
2 赞同
3 引用
18 回帖
8
6
2
987 321 6 249 1 1 408

相关帖子

18 回帖
[js][css] 提取写味主题列表转表格导图看板功能

欢迎来到这里！

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

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

    他这个可导出 pdf 的时候也保留这个格式吗？自定义格式可以做到类似的但是就是没法导出的时候显示

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

    这个导出的时候也能保持格式，除了看板导出时背景色丢失外其他没问题。

  • Anastasia •
    付费者

    大佬才看到，十分感谢啊啊啊！！！

  • Anastasia •
    付费者

    佬我用的是默认主题，只开了几个插件。我把你的代码分别复制到 css 和 js 的代码片段里面。想问问为啥效果是这样的呢？

    image.png

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

    你用新工作空间试试，排除其他插件或代码片段的影响，你思源版本是多少？

    1 回复
  • Anastasia •
    付费者

    我用了新空间还是这样，我的版本是 3.1.20

    image.png

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

    思源版本问题，我更新了 css，你用新代码试试看。

    1 回复
  • Anastasia •
    付费者

    确实可以了！🎉

  • Mayrain •

    其他功能貌似都可以，但是在 asri 主题下使用的时候发现会变成这样：

    image.png

    不知道是为什么，想来求问一下有办法解决嘛

  • Anastasia •
    付费者

    大佬你好，我又有一个问题想请教你。就是我今天尝试了 PDF 导出之后，发现显示图下问题，想问问有解决方法吗？

    image.png

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

    这个和该代码无法，是思源导出的问题。目前无法解决。

    不过，可以在导出页面手动打开 devtools，然后去掉 .protyle-wysiwyg 的 overflow:auto 样式来解决

    image.png

  • Anastasia •
    付费者

    佬我想提问一个关于行高调整的问题。我使用了“行高调整”插件之后，如下图。列表转换成表格那个点就变了。我想问有没有什么办法调整这个表格，或者不使用“行高调整”插件，而是用什么 css 代码调整正文的代码块间距和行间距呢？

    image.png

    image.png

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

    修改这个最小高度应该就行

    image.png

    1 回复
  • Anastasia • • 1 评论
    付费者

    佬我尝试了好几个都是毫无变化

    image.png

    我去看了行高修改插件，它本质是下面这个 css 代码（附在图片后面），我发现只有设置 --custom-node-margin-tb: 0.5px; 为 0.5 的时候，才可以合到一起，不然就会变成下图：

    所以我在想会不会是全局变量啥的改了还是啥，但是问了一下 gpt 也没整明白。

    image.png

    :root {
    --custom-line-height: 1.625;
    --custom-node-margin-tb: 5px;
}

.b3-typography p, .b3-typography [data-node-id], .protyle-wysiwyg p, .protyle-wysiwyg [data-node-id] [spellcheck] {
    line-height: var(--custom-line-height);
}

#layouts div.layout-tab-container > div.protyle > div.protyle-content > div.protyle-wysiwyg {
    p {
        line-height: var(--custom-line-height) !important;
    }
    [data-node-id] {
        margin-top: var(--custom-node-margin-tb);
        margin-bottom: var(--custom-node-margin-tb);

        &.p {
            line-height: var(--custom-line-height) !important;
        }
    }
}

    简单来说，我就是想修改文档内的行间距和块间距，我在社区也扒拉了一下，使用如下代码倒是改了，但是前面的列表项那个点点没有跟着一起动。然后列表转表格也是有和使用行高修改插件一样的问题。

    /* 行高修改-整体行文基础 */
.b3-typography p, .b3-typography [data-node-id], .protyle-wysiwyg p, .protyle-wysiwyg [data-node-id] {
    line-height: 1.5;
    padding: 0px 4px; /* 不再增加上下 padding */
    margin: 0.1em 0; /* 所有的段落间距 */
}

作者：MarshR
链接：https://ld246.com/article/1707122049476
来源：链滴
协议：CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/

    所以想问问有没有什么方法能够在修改文档内行间距和块间距的同时，让列表转表格那个点点还是能维持在中间这样。

    抱歉，我这边用你最后 MarshR 的那段代码，没有任何影响，能正常修改和行高和块间距等而不会影响到表格的点，可能是你本地环境因素的影响吧。
    wilsons •
  • Anastasia •
    付费者

    佬我说错了，就是 MarshR 的那个，列表转表格是正常的，就是正文的那个列表点没有一起动，想问问这个 css 能咋改呀

    image.png

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

    我这边一切正常，如果你那边圆点有问题的话，可以试试用下面的代码调整下 top 试试

    .protyle-wysiwyg [data-node-id].li>.protyle-action{
    top: 0px; /* 根据自己需要调整 */
}
  • Kitty •
    订阅者 捐赠者

    超级棒啊，我等一下就来试一试

  • chuchen •

    现在版本失效了吗？我现在无论是用 savor 主题或者这个代码片段 好像菜单都看不到这个“视图”选项？

    忽然又可以了，打扰了 谢谢大佬

    1 操作
    chuchen 在 2025-07-29 15:14:30 更新了该回帖
请输入回帖内容 ...
wilsons
正式入驻知乎了，以后新贴主要在这里。 欢迎大家订阅关注！ 你的关注对我是莫大鼓励，也能让我持续产出优质内容，我们一起成长 🙏 点这里立即关注：https://www.zhihu.com/people/wilsonses
回帖
2148
 帖子
112
 积分
87391

近期热议

推荐标签 标签

  • 音乐

    你听到信仰的声音了么？

    63 引用 • 513 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 687 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 494 关注
  • Spark

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

    74 引用 • 46 回帖 • 563 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注
  • OneDrive
    2 引用 • 2 关注
  • 机器学习

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

    78 引用 • 37 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 445 关注
  • 笔记

    好记性不如烂笔头。

    315 引用 • 790 回帖
  • 思源笔记

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

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

    28442 引用 • 119750 回帖
  • Python

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

    561 引用 • 677 回帖 • 1 关注
  • 服务

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

    41 引用 • 24 回帖 • 2 关注
  • 996

    “工作 996， 生病 ICU”

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

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

    2 引用 • 8 回帖 • 544 关注
  • LaTeX

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

    14 引用 • 84 回帖 • 1 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    498 引用 • 934 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 838 关注
  • SOHO

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

    7 引用 • 55 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖
  • V2Ray
    1 引用 • 15 回帖 • 5 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 12 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 2 关注
  • Quicker

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

    39 引用 • 170 回帖
  • 外包

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

    26 引用 • 234 回帖 • 3 关注
  • Kafka

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

    36 引用 • 35 回帖
  • TensorFlow

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

    20 引用 • 19 回帖 • 1 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 548 关注

最新标签