思源笔记美化 | blockquote 块添加背景色

本贴最后更新于 578 天前,其中的信息可能已经物是人非

最近把 Tsundoku 主题的引述块样式修改了下,借鉴了 mustakshif/Hadeeth 主题的引述块样式

Tsundoku 主题目前更新已经是只为我个人使用而更新的状态了哈哈哈,所以更新样式就只考虑自己的喜好,不像之前还会顾及其他用户的喜好 🤭 毕竟社区其他主题都很好啦!

现在引述块样式长这样

Clip_2024-01-04_20-46-00

我之前其实很早就给 Tsundoku 引入了语雀的提示区块样式(也叫 callout 块、Admonition 块),给 blockquote 加背景色就可以引用,之前是每个背景色单独调整样式的,现在发现这种样式本身加背景色就很好看了

下面这个图片就是给 blockquote 加上背景色,再添加 emoji,就能得到我觉得很好看的效果。

Clip20240107124257.png

块里放上代码块,样式也还不错

Clip_2024-01-04_20-59-53

为了方便使用,我给设置 callout 模板,就可以快捷调用了

Clip_2024-01-04_20-49-52

虽然社区已经有了 Callout 插件,但是我觉得用模板的方式添加 callout 更自由,更适合我。我可以设置 callout 块是否有标题、添加什么 emoji,也方便更改。当然未来如果 Callout 插件如果支持设置模板的话,我可能就转用插件了哈哈哈

改完之后,就特别爱用 callout 块了

比如我最近在学习生物实验操作,callout 就很方便记录一些思考问题、注意事项、信息补充等等,记笔记更快乐了呢!

Clip_2024-01-04_20-52-32

Clip_2024-01-04_20-53-50

  • 思源笔记

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

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

    26660 引用 • 111008 回帖
1 操作
Achuan-2 在 2024-01-07 12:43:16 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • zxy0124 1 赞同

    赞啊!

    笔记做出来真漂亮

  • yjmsiyuan

    我没看到如何用,用的就是 Tsundoku 主题。没有 emoji。

    两个问题

    1.选择器是什么,如何自定义

    2.模板从那下?

    1 回复
  • Achuan-2 2
    1. 就是 blockquote 样式,目前没有更多样式,只是 blockquote 添加块背景色充当 callout 的

    2. 模板是我自用的,因为我这里所谓的 callout 只是 blockquote 添加背景色,不附带 emoji,emoji 是自己添加的
      Clip20240106173242.png

      下面是我自用的样式,可以参考

      > 🚨 错误 > {: updated="20240103230755" id="20240103230730-nala6w9"} > {: id="20240103230730-nf5k0m1" style="background-color: var(--b3-card-error-background); color: var(--b3-card-error-color);" updated="20240103230730"} > ❓ 疑问 > {: id="20240103230546-plw2ox8" updated="20240103230622"} > {: style="background-color: var(--b3-card-error-background); color: var(--b3-card-error-color);" updated="20240103230546" id="20240103230546-gc3tu8k"} > ℹ 信息 > {: id="20240103230716-sdarob7" updated="20240103230721"} > {: id="20240103230716-4gwz2jo" style="background-color: var(--b3-card-info-background); color: var(--b3-card-info-color);" updated="20240103230716"} > 🤔 思考 > {: id="20240103221959-8e55g9x" updated="20240103230552"} > {: id="20240103221959-lx09a45" style="background-color: var(--b3-card-success-background); color: var(--b3-card-success-color);" updated="20240103222007"} > 💡 灵感 > {: id="20240103230818-92twep3" updated="20240103230840"} > {: id="20240103230818-1mvumtk" style="background-color: var(--b3-card-success-background); color: var(--b3-card-success-color);" updated="20240103230818"}
    1 回复
  • yjmsiyuan

    受教了,又多了一种高级的用法。我原来只会用 css 来设置样式。

  • 已经有 callout 插件了啊

    1 回复
  • JeffreyChen 1 2 评论

    帖子中间就说了:

    虽然社区已经有了 Callout 插件,但是我觉得用模板的方式添加 callout 更自由,更适合我。我可以设置 callout 块是否有标题、添加什么 emoji,也方便更改。当然未来如果 Callout 插件如果支持设置模板的话,我可能就转用插件了哈哈哈

    高度近视,不过后续确实有自定义模板的计划 😂
    Frostime 1 赞同
    @Frostime 其实用插件还有一点问题,把笔记导出为 markdown 分享到博客上,emoji 会丢失的
    Achuan-2
请输入回帖内容 ...

推荐标签 标签

  • Follow
    4 引用 • 12 回帖 • 11 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1062 引用 • 3455 回帖 • 148 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    172 引用 • 1545 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖 • 1 关注
  • Q&A

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

    10282 引用 • 46734 回帖 • 62 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖 • 1 关注
  • SEO

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

    36 引用 • 200 回帖 • 42 关注
  • TGIF

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

    292 引用 • 4495 回帖 • 665 关注
  • gRpc
    11 引用 • 9 回帖 • 102 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1340 回帖 • 1 关注
  • abitmean

    有点意思就行了

    33 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 473 关注
  • 支付宝

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

    29 引用 • 347 回帖 • 2 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 523 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 366 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 620 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 3 关注
  • OneDrive
    2 引用 • 1 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 531 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 280 关注
  • 小说

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

    32 引用 • 108 回帖
  • 友情链接

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

    24 引用 • 373 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • Oracle

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

    107 引用 • 127 回帖 • 339 关注
  • Solidity

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

    3 引用 • 18 回帖 • 450 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    26 引用 • 264 回帖