[css] 在思源中制作 callout

图一 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] 用于区分代码片段类型。

    74 引用 • 385 回帖 • 1 关注
  • 思源笔记

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

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

    22545 引用 • 90435 回帖 • 2 关注
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

    很好看

  • 这个解释对不对:在笔记应用如 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

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

请输入回帖内容 ...

推荐标签 标签

  • Rust

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

    58 引用 • 22 回帖 • 3 关注
  • danl
    138 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 380 关注
  • uTools

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

    6 引用 • 14 回帖
  • Typecho

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

    12 引用 • 65 回帖 • 440 关注
  • 学习

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

    171 引用 • 512 回帖
  • iOS

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

    85 引用 • 139 回帖 • 3 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • GAE

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

    14 引用 • 42 回帖 • 766 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 64 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 130 关注
  • 互联网

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

    98 引用 • 344 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖 • 1 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 61 关注
  • JavaScript

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

    729 引用 • 1327 回帖 • 3 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 533 关注
  • Hexo

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

    21 引用 • 140 回帖 • 2 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 61 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 401 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 250 关注
  • 小薇

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

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

    34 引用 • 467 回帖 • 746 关注
  • 正则表达式

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

    31 引用 • 94 回帖 • 1 关注