登录 注册

思源如何在一行插入复选框？

本贴最后更新于 777 天前，其中的信息可能已经东海扬尘

image.png

就是图中这个效果，

试了半天，没找到怎么弄

  • 思源笔记

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

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

    22011 引用 • 87764 回帖 • 2 关注
  • Q&A

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

    7935 引用 • 36292 回帖 • 168 关注
20 悬赏
22 回帖
9
5
4
3
1.5k 213 229 478 31 34 545

相关帖子

22 回帖
思源如何在一行插入复选框？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • yuyuyuyu •
    付费者 作者

    三选一，我做模板用的

  • yuyuyuyu •
    付费者 作者
  • yuyuyuyu •
    付费者 作者

    试了一下超级块的效果，是这样的，看来是没有办法了 😭

    image.png

  • wlcycxy •
    订阅者

    image.png

    是这种效果吗？可用超级块

  • wlcycxy •
    订阅者

    image.png

  • wlcycxy • • 1 赞同
    订阅者
    1 回复
  • hhailing • • 1 评论
    订阅者 支持者 捐赠者

    2.2 版本可以一行多个复选么？

    思源如何在一行插入复选框？ - iamqiz 的回帖
    iamqiz •
  • iamqiz • • 2 • 2 赞同

    参考 @wlcycxy 超级块的思路,可以把超级块做成了模板, 搭配 css 让每个复选框之间更加紧凑

    演示:

    模板

    {{{col
* {: id="20220920095813-mnroifl"}[ ] 
  {: id="20220920095813-6qadorw"}
{: id="20220920095813-m2vnvgn"}

* {: id="20220920095813-xzqsayz"}[ ] 
  {: id="20220920095813-brru2fz"}
{: id="20220920095813-lwbtqzi"}

}}}
{: style="text-align: left;" id="20220920095813-dc6019s"}

    保存为 \SiYuan\data\templates\复选框 fxk.md

    css

    /* ----------------------------------------------超级块内水平复选框紧凑设置*/
/*这里使用has来限制父元素,has()需要chrome v105+才支持,electron v21版本*/

/*下面几个margin用来调整超级快的高度,使其变小*/
/*超级块自适应宽度,而不是整个文档宽度*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"] {
	width: fit-content;
	margin: 0px;
}
/*每个复现框内文本不wrap*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"]>div.list[data-type="NodeList"][data-subtype="t"]>div.li[data-type="NodeListItem"][data-subtype="t"]>div.p {
    width: max-content;
	margin: 0px;
}
/*超级块里面段落块的文本不wrap*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"]>div.p>div[contenteditable="true"] {
    width: max-content;
}
/*复选框往右移动,防止其左边菜单和左边的复选框overlap*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"]>div.list[data-type="NodeList"][data-subtype="t"] {
	padding-left: 15px;
	margin: 0px;
}

    添加到

    \SiYuan\conf\appearance\themes\daylight2\theme.css 的尾部

    daylight2 改成你的主题名

    \SiYuan 是思源工作空间路径

    4 回复
    3 操作
    iamqiz 在 2022-09-22 08:20:05 更新了该回帖
    iamqiz 在 2022-09-21 22:14:39 更新了该回帖
    iamqiz 在 2022-09-21 12:35:28 更新了该回帖
  • qifengle1998 •

    勾选以后，被勾选的内容被做删除线处理了，有办法不显示这个删除线吗？

    1 回复
  • yuyuyuyu •
    付费者 作者

    可以采用 html 块的方式，可以展现复选框，但是勾选状态保留不下来，要自己去修改代码

  • yuyuyuyu •
    付费者 作者

    image.png

  • yuyuyuyu •
    付费者 作者

    只能展现效果，复选框本身的功能没有了。

    所以思源没有原生支持复选框，我没找到一个很方便的方法

  • iamqiz •

    是这个吗?

    Snipaste20220921111217.png

    1 回复
  • wlcycxy •
    订阅者

    image.png复选框难道还有什么其它效果，至于删除线，与所用的主题有关吧。

  • qifengle1998 •

    30s 这里调整宽度，是有什么快捷键吗

    1 回复
  • yuyuyuyu • • 1 评论
    付费者 作者

    G770K7KPYG4HD4753D.jpg

    大佬，请问超级块上下的边距有办法缩小吗？现在上下的边距太大了。超级块菜单栏也不支持垂直间距的调整

    css 代码更新了,调整了间距 ,看我之前的回复
    iamqiz • • 1
  • qifengle1998 • • 1 评论

    原来路径下面已经有一个 theme.css 文件了，

    这段 css 代码，是不是只要粘贴到原来文件的末尾就行 😳

    对的
    iamqiz •
  • qifengle1998 • • 1 评论

    真的变小了，感谢！！！如果后面主题例行更新，这个样式会受到影响吗？

    1 回复
    被覆盖掉之类的
    qifengle1998 •
  • yuyuyuyu • • 1 评论
    付费者 作者

    奇怪了，我粘贴到 theme.css 里面来了

    image.png

    保存文件，重启思源，上下间距还是那么大，没有效果。 可能是版本的原因？

    image.png

    你是通过什么步骤创建的?模板?这个 css 针对的是超级块, 你试试通过模板创建,不嵌套进列表里,如果还不行, 用 daylight 主题看看
    iamqiz •
  • iamqiz •

    会有被覆盖丢失的可能,所以要备份,

    或者把自己的 css 单独写到一个文件,比如 SiYuan\conf\appearance\themes\a.css,然后在主题的 theme.css 的开头通过

    @import url(/appearance/themes/a.css);

    来导入

    1 回复
  • yuyuyuyu • • 2 评论
    付费者 作者

    我是不是使用步骤错了 😭

    我复制了你那个超级块模板，然后再 theme.css 中粘贴了代码

    但是在文档里面导入模板以后，超级块的间距没有发生什么变化。

    换成 daylight 也没效果
    yuyuyuyu •
    @yuyuyuyu 你换成 dalight 主题之后,那个 css 片段也要复制到 daylight 的 theme.css 里; 如果你用其他主题,你得把那个 css 片段复制到 theme.css 的尾部
    iamqiz •
  • wlcycxy •
    订阅者

    没有什么快捷键，只是回车键，插入更多块而已

请输入回帖内容 ...
yuyuyuyu
回帖
409
 帖子
144
 积分
120

近期热议

推荐标签 标签

  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 164 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    287 引用 • 4484 回帖 • 667 关注
  • Hexo

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

    21 引用 • 140 回帖 • 4 关注
  • JetBrains

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

    18 引用 • 54 回帖 • 2 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 48 关注
  • Shell

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

    122 引用 • 73 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    942 引用 • 1459 回帖 • 31 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 506 关注
  • 导航

    各种网址链接、内容导航。

    39 引用 • 170 回帖 • 5 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 2 关注
  • 职场

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

    127 引用 • 1705 回帖
  • Ant-Design

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

    17 引用 • 23 回帖
  • 程序员

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

    565 引用 • 3532 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 32 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 70 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 3 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    221 引用 • 473 回帖
  • Netty

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

    49 引用 • 33 回帖 • 19 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 337 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    124 引用 • 169 回帖
  • 创业

    你比 99% 的人都优秀么？

    84 引用 • 1399 回帖
  • Google

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

    49 引用 • 192 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 401 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 354 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖

最新标签