思源笔记美化 | 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

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • yjmsiyuan

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

  • 其他回帖
  • JeffreyChen 1 2 评论

    帖子中间就说了:

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

    高度近视,不过后续确实有自定义模板的计划 😂
    Frostime 1 赞同
    @Frostime 其实用插件还有一点问题,把笔记导出为 markdown 分享到博客上,emoji 会丢失的
    Achuan-2
  • 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 回复
  • 已经有 callout 插件了啊

    1 回复
  • 查看全部回帖
Achuan-2
给时间以生命而不是给生命以时间,个人博客https://www.achuan-2.top/ 上海

推荐标签 标签

  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    26 引用 • 222 回帖 • 165 关注
  • 正则表达式

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

    31 引用 • 94 回帖
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    21 引用 • 58 回帖
  • Facebook

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

    4 引用 • 15 回帖 • 450 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 113 关注
  • PostgreSQL

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

    22 引用 • 22 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 134 关注
  • 互联网

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

    96 引用 • 330 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 31 关注
  • Git

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

    205 引用 • 357 回帖
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 119 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 291 关注
  • 游戏

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

    170 引用 • 813 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1056 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    941 引用 • 1458 回帖 • 126 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    42 引用 • 25 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖
  • JetBrains

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

    18 引用 • 54 回帖
  • Markdown

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

    165 引用 • 1468 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 704 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 627 关注
  • PHP

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

    165 引用 • 407 回帖 • 523 关注
  • 音乐

    你听到信仰的声音了么?

    59 引用 • 509 回帖
  • Vue.js

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

    261 引用 • 662 回帖 • 1 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • 996
    13 引用 • 200 回帖 • 2 关注