登录 注册

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

  • 思源笔记

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

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

    18806 引用 • 70365 回帖 • 1 关注
1 操作
Achuan-2 在 2024-01-07 12:43:16 更新了该帖
上海 位置
2 感谢
4 收藏
3 赞同
1 操作
6 回帖
2
455 273 10 163 3 3

相关帖子

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
给时间以生命而不是给生命以时间，个人博客https://www.achuan-2.top/ 上海
回帖
554
 帖子
190
 积分
816

近期热议

推荐标签 标签

  • 域名

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

    43 引用 • 208 回帖 • 1 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    69 引用 • 190 回帖 • 496 关注
  • Rust

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

    57 引用 • 22 回帖 • 2 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • PHP

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

    164 引用 • 407 回帖 • 524 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 2 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 689 关注
  • frp

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

    15 引用 • 7 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    106 引用 • 152 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 641 关注
  • 招聘

    哪里都缺人，哪里都不缺人。

    189 引用 • 1056 回帖 • 2 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1425 引用 • 10043 回帖 • 470 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    85 引用 • 1201 回帖 • 448 关注
  • Q&A

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

    6589 引用 • 29582 回帖 • 251 关注
  • Jenkins

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

    51 引用 • 37 回帖
  • Caddy

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

    10 引用 • 54 回帖 • 127 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 33 关注
  • danl
    • 64 关注
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖 • 2 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 497 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • QQ

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

    45 引用 • 557 回帖 • 218 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 740 关注
  • Bootstrap

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

    18 引用 • 33 回帖 • 684 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • 互联网

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

    96 引用 • 330 回帖

最新标签