[css] 在思源中制作 callout

本贴最后更新于 234 天前,其中的信息可能已经时异事殊

图一 github callout,图二是我做的思源 callout

image.png

image.png

代码片段

/* callout_note*/ .bq[custom-cssclasses="callout_note"]{ border-left: .25em solid #1f6feb; background-color: #1f71eb16 !important; color: var(--b3-theme-on-background); padding:15px !important; border-radius: 0; } div[custom-cssclasses="callout_note"] > div:first-child > div:first-child { color: #4493f8; display:inline-flex; align-items: center; } div[custom-cssclasses="callout_note"] > div:first-child > div:first-child:before { content: ""; display: inline-block; overflow: visible !important; vertical-align: middle; width: 22px; height: 22px; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjcxNDI4NTcxNDI4NTcxNDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtY2lyY2xlLWFsZXJ0Ij48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxMiIgeDI9IjEyIiB5MT0iOCIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB4Mj0iMTIuMDEiIHkxPSIxNiIgeTI9IjE2Ii8+PC9zdmc+"); /* 设置为mask */ mask-size: cover; background-color: currentColor; margin-right: 10px; mask-repeat: no-repeat; } /* Tip*/ .bq[custom-cssclasses="callout_tip"]{ border-left: .25em solid #238636; background-color: #23863615 !important; color: var(--b3-theme-on-background); padding:15px !important; border-radius: 0; } div[custom-cssclasses="callout_tip"] > div:first-child > div:first-child { color: #238636; display:inline-flex; align-items: center; } div[custom-cssclasses="callout_tip"] > div:first-child > div:first-child:before { content: ""; display: inline-block; overflow: visible !important; vertical-align: middle; width: 22px; height: 22px; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjcxNDI4NTcxNDI4NTcxNDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtbGlnaHRidWxiIj48cGF0aCBkPSJNMTUgMTRjLjItMSAuNy0xLjcgMS41LTIuNSAxLS45IDEuNS0yLjIgMS41LTMuNUE2IDYgMCAwIDAgNiA4YzAgMSAuMiAyLjIgMS41IDMuNS43LjcgMS4zIDEuNSAxLjUgMi41Ii8+PHBhdGggZD0iTTkgMThoNiIvPjxwYXRoIGQ9Ik0xMCAyMmg0Ii8+PC9zdmc+"); /* 设置为mask */ mask-size: cover; background-color: currentColor; margin-right: 10px; mask-repeat: no-repeat; } /* Important*/ .bq[custom-cssclasses="callout_important"]{ border-left: .25em solid #8957e5; background-color: #8957e515 !important; color: var(--b3-theme-on-background); padding:15px !important; border-radius: 0; } div[custom-cssclasses="callout_important"] > div:first-child > div:first-child { color: #8957e5; display:inline-flex; align-items: center; } div[custom-cssclasses="callout_important"] > div:first-child > div:first-child:before { content: ""; display: inline-block; overflow: visible !important; vertical-align: middle; width: 22px; height: 22px; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjcxNDI4NTcxNDI4NTcxNDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtbWVzc2FnZS1zcXVhcmUtd2FybmluZyI+PHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPjxwYXRoIGQ9Ik0xMiA3djIiLz48cGF0aCBkPSJNMTIgMTNoLjAxIi8+PC9zdmc+"); /* 设置为mask */ mask-size: cover; background-color: currentColor; margin-right: 10px; mask-repeat: no-repeat; } /* Warning*/ .bq[custom-cssclasses="callout_warning"]{ border-left: .25em solid #9e6a03; background-color: #9e6a0315 !important; color: var(--b3-theme-on-background); padding:15px !important; border-radius: 0; } div[custom-cssclasses="callout_warning"] > div:first-child > div:first-child { color: #9e6a03; display:inline-flex; align-items: center; } div[custom-cssclasses="callout_warning"] > div:first-child > div:first-child:before { content: ""; display: inline-block; overflow: visible !important; vertical-align: middle; width: 22px; height: 22px; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjcxNDI4NTcxNDI4NTcxNDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdHJpYW5nbGUtYWxlcnQiPjxwYXRoIGQ9Im0yMS43MyAxOC04LTE0YTIgMiAwIDAgMC0zLjQ4IDBsLTggMTRBMiAyIDAgMCAwIDQgMjFoMTZhMiAyIDAgMCAwIDEuNzMtMyIvPjxwYXRoIGQ9Ik0xMiA5djQiLz48cGF0aCBkPSJNMTIgMTdoLjAxIi8+PC9zdmc+"); /* 设置为mask */ mask-size: cover; background-color: currentColor; margin-right: 10px; mask-repeat: no-repeat; } /* Caution*/ .bq[custom-cssclasses="callout_caution"]{ border-left: .25em solid #da3633; background-color: #da363315 !important; color: var(--b3-theme-on-background); padding:15px !important; border-radius: 0; } div[custom-cssclasses="callout_caution"] > div:first-child > div:first-child { color: #da3633; display:inline-flex; align-items: center; } div[custom-cssclasses="callout_caution"] > div:first-child > div:first-child:before { content: ""; display: inline-block; overflow: visible !important; vertical-align: middle; width: 22px; height: 22px; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjcxNDI4NTcxNDI4NTcxNDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtb2N0YWdvbi1hbGVydCI+PHBhdGggZD0iTTEyIDE2aC4wMSIvPjxwYXRoIGQ9Ik0xMiA4djQiLz48cGF0aCBkPSJNMTUuMzEyIDJhMiAyIDAgMCAxIDEuNDE0LjU4Nmw0LjY4OCA0LjY4OEEyIDIgMCAwIDEgMjIgOC42ODh2Ni42MjRhMiAyIDAgMCAxLS41ODYgMS40MTRsLTQuNjg4IDQuNjg4YTIgMiAwIDAgMS0xLjQxNC41ODZIOC42ODhhMiAyIDAgMCAxLTEuNDE0LS41ODZsLTQuNjg4LTQuNjg4QTIgMiAwIDAgMSAyIDE1LjMxMlY4LjY4OGEyIDIgMCAwIDEgLjU4Ni0xLjQxNGw0LjY4OC00LjY4OEEyIDIgMCAwIDEgOC42ODggMnoiLz48L3N2Zz4="); /* 设置为mask */ mask-size: cover; background-color: currentColor; margin-right: 10px; mask-repeat: no-repeat; }
  • 代码片段

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

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

    177 引用 • 1254 回帖
  • 思源笔记

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

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

    25876 引用 • 107178 回帖
2 操作
JeffreyChen 在 2024-10-19 00:02:44 更新了该帖
JeffreyChen 在 2024-10-19 00:02:32 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 使用指南

    Callout 模板.zip

    1. 将 Callout 模板解压到思源的模板文件夹中。工作空间路径\data\templates
    2. 在设置 -> 外观 -> 代码片段中粘贴 css 片段并启用,然后点击右下角的确定
    3. 在笔记中使用斜杠菜单 / 模板即可使用

    image.png

    image.png

  • 关闭 css 片段后就是个引用块,当然用思源的样式简单调了下

    Image1729269086923.png

  • xjtcnj

    如果带有自动折叠功能,就更好了。obsidian 中的 callout 就挺好的。

    1 回复
    1 操作
    xjtcnj 在 2024-11-07 08:58:22 更新了该回帖
  • EmptyLight

    要是一步到位写成挂件就能自带样式了,但是写挂件好像相当复杂。。。

    1 回复
  • 这个晚上看看,尽量纯 css 不用 js。另外思源所有块都带了个持久化的折叠,好像也没啥必要专门做一个。不过你倒提醒我了,要去优化下折叠后的效果trollface

    3 回复
  • ACai 5 评论

    emmm 挂件就不考虑了,这个 callout 样式和我在群里发的一些样式都是为准备写的 思源笔记装修队施工指南 做准备的。挂件不太适合小白trollface

    为教程确实需要简单一点
    EmptyLight 1 赞同
    另外我不清楚挂件能不能直接创建内容块并赋予样式
    ACai
    挂件就可以引入 css 和 js 了,可以通过 js 添加块,样式还没看其他挂件,好像挂件都是用自己的 iframe 渲染东西(突然感觉不太合适)。。。模板有上架集市的想法吗,感觉很好用啊,为了教程需要不上架也可以
    EmptyLight
    有,但是再等等,多做一些,模板上架规则还没看过
    ACai
    @ACai 上架踢我,我当场把你模板的 CSS 加到主题里面适配(代码片段原地下班),模板示例仓库
    EmptyLight
  • 块的折叠状态目前只是半持久化的,上级标题展开之后所有子块的折叠都会展开

    原来如此
    ACai
  • Kootea

    很好看

  • xnyshu via macOS

    这个解释对不对:在笔记应用如 Obsidian 中,callout 是一种允许用户在不打断笔记流的情况下添加额外内容的功能。

    1 回复
  • 我的理解是 callout 就是一种特殊的引用块。

  • xjtcnj 1 评论

    平时为折叠状态、需要看时,打开。

    1 回复
    只靠模板可以实现这个功能吗?我看思源模板里只有 md 文件,不靠 js 可以达到这个效果吗?
    EmptyLight
  • shiyuankill 1 评论

    请问这个怎么用的,小白不知道怎么使用

    使用指南中有写
    ACai
  • 这个是 ob 的 callout 效果吧,我也是想要这种效果,目前没有发现实现办法

    1 回复
  • 目前折叠效果是这样的image.png

  • xjtcnj

    是 ob 的 callout,,使用上很方便。

  • shiyuankill 1 评论

    是导入到 css 样式吗?然后怎么看出来呢

    把代码片段的内容放在思源设置代码片段->css 中激活,把模板压缩包解压到思源的模板路径下,然后/调用模板即可
    ACai
  • shiyuankill

    请问模版压缩包在哪里下载

  • Mayrain

    唔,很优秀的 callout,但是想问一下 lz 有没有自定义 callout 的教程呢?😭 想自己加几个 callout,但是没法解决图标问题

    1 回复
  • Lucide

    图标在这里找的,每个图标页面的下方 copy data URL,然后替换 css 片段的 mask 中的内容

请输入回帖内容 ...

推荐标签 标签

  • Lute

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

    29 引用 • 202 回帖 • 29 关注
  • gRpc
    11 引用 • 9 回帖 • 99 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 819 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • JetBrains

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

    18 引用 • 54 回帖 • 2 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 599 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 109 关注
  • 小说

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

    32 引用 • 108 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 636 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 7 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 676 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖
  • C

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

    86 引用 • 165 回帖 • 1 关注
  • 大疆创新

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

    2 引用 • 14 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    186 引用 • 1020 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1281 回帖 • 2 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 187 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 762 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 85 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 186 关注
  • 学习

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

    172 引用 • 534 回帖
  • Shell

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

    125 引用 • 74 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1794 回帖 • 5 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 游戏

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

    184 引用 • 824 回帖 • 1 关注
  • CodeMirror
    2 引用 • 17 回帖 • 165 关注