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

image.png

就是图中这个效果,

试了半天,没找到怎么弄

相关帖子

欢迎来到这里!

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

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

    三选一,我做模板用的

  • yuyuyuyu
    订阅者 作者
  • yuyuyuyu
    订阅者 作者

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

    image.png

  • wlcycxy
    订阅者

    image.png

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

  • wlcycxy
    订阅者

    image.png

  • wlcycxy 1 赞同
    订阅者
    1 回复
  • hhailing 1 评论
    订阅者

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

  • 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 这里调整宽度,是有什么快捷键吗

  • 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
请输入回帖内容 ...
融合块、大纲和双向链接
构建你永恒的数字花园
思源笔记是一款本地优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步

推荐标签 标签

  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    64 引用 • 164 回帖 • 294 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    157 引用 • 797 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 36 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    34 引用 • 103 回帖 • 20 关注
  • CodeMirror
    1 引用 • 2 回帖 • 40 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3065 引用 • 8187 回帖 • 411 关注
  • Spring

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

    912 引用 • 1447 回帖 • 454 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 93 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    2 引用 • 15 回帖 • 1 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 105 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 403 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 49 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    22 引用 • 186 回帖 • 37 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    96 引用 • 330 回帖
  • 导航

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

    25 引用 • 159 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    108 引用 • 99 回帖 • 409 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    29 引用 • 88 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    194 引用 • 354 回帖 • 201 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 151 关注
  • Facebook

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

    4 引用 • 15 回帖 • 482 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 504 关注
  • Shell

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

    118 引用 • 73 回帖 • 264 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    340 引用 • 1190 回帖 • 562 关注
  • Node.js

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

    135 引用 • 267 回帖 • 408 关注