登录 注册

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

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

  • 思源笔记

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

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

    19819 引用 • 75895 回帖
1 操作
Achuan-2 在 2024-01-07 12:43:16 更新了该帖
上海 位置
2 感谢
5 收藏
3 赞同
1 操作
6 回帖
2
564 308 11 235 4 3

相关帖子

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

欢迎来到这里！

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

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

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

    两个问题

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

    2.模板从那下？

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

    帖子中间就说了：

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

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

    赞啊！

    笔记做出来真漂亮

  • 查看全部回帖
Achuan-2
给时间以生命而不是给生命以时间，给我买包辣条https://afdian.net/a/achuan-2 上海
回帖
608
 帖子
199
 积分
343

近期热议

推荐标签 标签

  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 232 回帖
  • 域名

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

    43 引用 • 208 回帖 • 2 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 704 关注
  • 宕机

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

    13 引用 • 82 回帖 • 51 关注
  • 支付宝

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

    29 引用 • 347 回帖 • 3 关注
  • JetBrains

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

    18 引用 • 54 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 644 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 24 关注
  • danl
    • 89 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 4 关注
  • Q&A

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

    6890 引用 • 31071 回帖 • 229 关注
  • 百度

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

    63 引用 • 785 回帖 • 248 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 685 关注
  • Git

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

    207 引用 • 358 回帖
  • 创造

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

    175 引用 • 992 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 399 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • 服务器

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

    124 引用 • 580 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    16 引用 • 7 回帖 • 1 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 611 关注
  • 正则表达式

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

    31 引用 • 94 回帖
  • DNSPod

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

    6 引用 • 26 回帖 • 522 关注
  • 安装

    你若安好，便是晴天。

    131 引用 • 1184 回帖
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    25 引用 • 83 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    51 引用 • 190 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 2 关注

最新标签