登录 注册

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

  • 思源笔记

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

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

    25453 引用 • 105285 回帖
  • 代码片段

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

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

    168 引用 • 1136 回帖 • 2 关注
3 引用
表格里面的内容能变成列表吗？ • wilsons
思源笔记列表使用指南 • Imuvux
有无大佬提取 savor 主题中的列表转表格功能 • wilsons
5 感谢
2 关注
10 收藏
2 赞同
3 引用
17 回帖
8
6
2
646 266 143 236

相关帖子

17 回帖
[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 •
    订阅者 捐赠者

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

请输入回帖内容 ...
wilsons
人生最大的敌人是自己，战胜自己，才能超越一切。
回帖
1385
 帖子
62
 积分
44980

近期热议

推荐标签 标签

  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • 外包

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

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

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

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

    1441 引用 • 10069 回帖 • 494 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 74 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 636 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 263 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 613 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 57 关注
  • OneDrive
    2 引用
  • Redis

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

    286 引用 • 248 回帖
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 621 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖 • 1 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 166 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 54 关注
  • OneNote
    1 引用 • 3 回帖
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 590 关注
  • uTools

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

    7 引用 • 27 回帖 • 1 关注
  • jQuery

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

    63 引用 • 134 回帖 • 735 关注
  • MySQL

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

    693 引用 • 537 回帖 • 1 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • 叶归
    8 引用 • 36 回帖 • 17 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    28 引用 • 226 回帖 • 128 关注
  • 运维

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

    150 引用 • 257 回帖 • 1 关注
  • 自由行
    • 2 关注
  • 旅游

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

    96 引用 • 901 回帖 • 1 关注

最新标签