[思源笔记经验分享] 列表的表格视图与脑图视图

本贴最后更新于 710 天前,其中的信息可能已经时移俗易

简介

主题 Dark+v0.7.3 中又更新的几个小功能:

  • 实现方案

  • 功能介绍

    • 列表表格视图

      • 在列表块或文档块中设置如下自定义属性之一即可启用

        • type: 表格
        • type: table
    • 列表脑图视图

      • 在列表块或文档块中设置如下自定义属性之一即可启用

        • type: 脑图
        • type: 导图
        • type: 思维导图
        • type: map
        • type: mind-map
  • 捷径: 使用块菜单项启用

    • 使用快捷键 Shift + Alt + M 或工具栏 块菜单增强 按钮启用块菜单增强功能

    • 单击列表块或文档块的块标

      • 更多 -> 列表-默认视图 将块恢复为默认视图
      • 更多 -> 列表-脑图视图 将块设置为脑图视图
      • 更多 -> 列表-默认视图 将块设置为表格视图
  • 其他

    • 在转换视图后的列表中插入容器块(例如引述块, 超级块)可以在该列表项内回复纵向排版
    • 在列表块设置时样式仅对当前块生效, 聚焦后恢复默认视图
    • 在文档块设置时对当前文档下所有列表块生效, 聚焦时可以保持所设置的视图样式
    • 如果视图太宽, 可以通过 Shift + 鼠标滚轮 横向滚动
    • 如果视图太高, 可以通过 块菜单 -> 其他 -> 滚屏显示 添加纵向滚动条

如果需要订阅服务, 欢迎使用我的推荐码呀: h0sc9rc (*^▽^*)

演示

思源笔记功能示范 15.gif

使用

  • 若不使用 Dark+ 主题, 可以下载该主题 v0.8.0+ 版本

    1. 将 Dark+ 主题目录下的 theme.js 文件 复制 到所使用的其他主题的目录下

    2. 将如下自定义样式引用 URL 添加到所使用的其他主题目录下 theme.css 文件或 custom.css 文件首部

      • @import url(/appearance/themes/Dark+/style/module/custom-auto-num-f.css);
        @import url(/appearance/themes/Dark+/style/module/custom-auto-num-h.css);
        @import url(/appearance/themes/Dark+/style/module/custom-auto-num-t.css);
        @import url(/appearance/themes/Dark+/style/module/custom-background.css);
        @import url(/appearance/themes/Dark+/style/module/custom-board-kanban.css);
        @import url(/appearance/themes/Dark+/style/module/custom-font-family.css);
        @import url(/appearance/themes/Dark+/style/module/custom-list-guides.css);
        @import url(/appearance/themes/Dark+/style/module/custom-render-danmaku.css);
        @import url(/appearance/themes/Dark+/style/module/custom-render-invert.css);
        @import url(/appearance/themes/Dark+/style/module/custom-render-scroll.css);
        @import url(/appearance/themes/Dark+/style/module/custom-render.css);
        @import url(/appearance/themes/Dark+/style/module/custom-table-width.css);
        @import url(/appearance/themes/Dark+/style/module/custom-time.css);
        @import url(/appearance/themes/Dark+/style/module/custom-title.css);
        @import url(/appearance/themes/Dark+/style/module/custom-type-map.css);
        @import url(/appearance/themes/Dark+/style/module/custom-type-table.css);
        @import url(/appearance/themes/Dark+/style/module/custom-type-title.css);
        @import url(/appearance/themes/Dark+/style/module/custom-writing-mode.css);
        
  • 思源笔记

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

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

    18117 引用 • 66834 回帖
2 操作
shuoying 在 2022-04-18 15:00:40 更新了该帖
shuoying 在 2022-04-18 13:16:45 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Goddard 1 评论

    文件块这些属性都不行

    image.png

    这些也同样不行

    image.png

    这是功能就是需要块属性样式的配合才能生效, 请参考本文的 使用 一节的第二项内容, 在其他主题中引用自定义属性样式文件(以 custom- 开头的 css 文件)
    shuoying
  • 其他回帖
  • QIANFEI

    image.png

    您好 内容多了之后成这样了 请问怎么解决?🙏

    1 回复
  • ZYP0313 1 评论

    大佬,我使用的是这款主题,出不来选项,没有“更多”那些选项

    image.png

    需要在右上角的扩展工具栏中激活块菜单增强功能
    shuoying
  • 请问能发一下这个列表的源代码嘛, 我试着复现一下样式问题 ❓

  • 查看全部回帖