登录 注册

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

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

image.png

就是图中这个效果，

试了半天，没找到怎么弄

  • 思源笔记

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

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

    25480 引用 • 105374 回帖
  • Q&A

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

    9750 引用 • 44350 回帖 • 87 关注
20 悬赏
22 回帖
9
5
4
3
2.1k 222 229 695 62 36 2 845

相关帖子

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

欢迎来到这里！

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

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

    三选一，我做模板用的

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

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

    image.png

  • wlcycxy • via Linux
    订阅者

    image.png

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

  • wlcycxy • via Linux
    订阅者

    image.png

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

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

    思源如何在一行插入复选框？ - cyanc 的回帖
    cyanc •
  • cyanc • • 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 操作
    cyanc 在 2022-09-22 08:20:05 更新了该回帖
    cyanc 在 2022-09-21 22:14:39 更新了该回帖
    cyanc 在 2022-09-21 12:35:28 更新了该回帖
  • qifengle1998 •

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

    1 回复
  • yuyuyuyu •
    付费者 作者

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

  • yuyuyuyu •
    付费者 作者

    image.png

  • yuyuyuyu •
    付费者 作者

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

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

  • cyanc •
    付费者 捐赠者

    是这个吗?

    Snipaste20220921111217.png

    1 回复
  • wlcycxy • via Linux
    订阅者

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

  • qifengle1998 •

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

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

    G770K7KPYG4HD4753D.jpg

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

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

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

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

    对的
    cyanc •
  • qifengle1998 • • 1 评论

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

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

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

    image.png

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

    image.png

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

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

    或者把自己的 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 的尾部
    cyanc •
  • wlcycxy • via Linux
    订阅者

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

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

近期热议

推荐标签 标签

  • 代码片段

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

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

    169 引用 • 1148 回帖 • 1 关注
  • 尊园地产

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

    1 引用 • 22 回帖 • 786 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • OpenShift

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

    14 引用 • 20 回帖 • 657 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 5 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 3 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 48 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 639 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    118 引用 • 54 回帖 • 5 关注
  • Tomcat

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

    162 引用 • 529 回帖 • 2 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 591 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 647 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 289 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 67 回帖 • 451 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 364 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • Shell

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

    125 引用 • 74 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    412 引用 • 3588 回帖
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    174 引用 • 538 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • Netty

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

    49 引用 • 33 回帖 • 34 关注
  • TGIF

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

    290 引用 • 4494 回帖 • 651 关注
  • uTools

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

    7 引用 • 27 回帖 • 1 关注

最新标签