登录 注册

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

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

最近把 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

  • 思源笔记

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

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

    25119 引用 • 103564 回帖 • 1 关注
1 引用
豆沙绿等背景色分享 • tongzi
1 操作
Achuan-2 在 2024-01-07 12:43:16 更新了该帖
上海 位置
2 感谢
6 收藏
3 赞同
1 引用
1 操作
6 回帖
2
1.3k 465 11 532 17 5 226

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 回复
    1 引用
  • yjmsiyuan •

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

  • Frostime •
    订阅者 付费者 支持者 捐赠者

    已经有 callout 插件了啊

    1 回复
  • JeffreyChen • • 1 • 2 评论
    付费者 支持者 捐赠者

    帖子中间就说了：

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

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

近期热议

推荐标签 标签

  • Sandbox

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

    432 引用 • 1250 回帖 • 597 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 2 关注
  • Facebook

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

    4 引用 • 15 回帖 • 442 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 2 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 177 关注
  • Dubbo

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

    60 引用 • 82 回帖 • 609 关注
  • JavaScript

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

    730 引用 • 1278 回帖 • 1 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 545 关注
  • 代码片段

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

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

    142 引用 • 954 回帖 • 2 关注
  • 叶归
    5 引用 • 16 回帖 • 8 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 544 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖 • 1 关注
  • Shell

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

    124 引用 • 74 回帖
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖 • 1 关注
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 持续集成

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

    15 引用 • 7 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖
  • WebSocket

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

    48 引用 • 206 回帖 • 295 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    179 引用 • 408 回帖 • 490 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 827 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    227 引用 • 476 回帖
  • Git

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

    211 引用 • 358 回帖 • 1 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 595 回帖 • 1 关注

最新标签