QYL 主题 CSS 自定义属性使用教程

QYL 主题其实很早就支持了这个功能,但好像很多小伙伴没有发现?或者不知道如何使用,所以这里简单的介绍一下
使用方法:打开块/文档的右键菜单,找到 QYL 自定义属性,设置 CSS 属性即可,如图所示image.png
那可以用来干什么呢?

  • 简单的,设置块内文字都是紫色,则可以填入 color: purple

  • 复杂一点的,对文档设置文档编辑器宽度,可以填入

    --custom-number: 100px; &.protyle-wysiwyg {padding-left: var(--custom-number) !important;padding-right: var(--custom-number) !important} & .protyle-title {margin-left: var(--custom-number) !important;margin-right: var(--custom-number) !important} & .protyle-background__ia {margin-left: var(--custom-number) !important}

    调整其中 custom-number 的值即可固定某个文档的左右边距

  • 再有想象力一点,可以搭配其他的 QYL 自定义属性,比如设置某个块为完成样式,将其 CSS 属性设置为 &::before {content: "今天吃饭了吗"},就可以达到下图的效果,非常轻松的实现了可自定义标题的 callout 块的效果image.png

当然,以上的所有用法的前提是要懂一点点 css,那完全不会怎么办呢,很简单,求助 AI,下面是一个简单的例子,比如我现在想设置一个块具有黑色的边框,并且需要它具有蓝紫色的渐变背景

image.png

现在复制我们需要的部分并粘贴

image.png

效果如图所示image.png

这只是一个简单的教程,更多用法等你发现

  • 思源笔记

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

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

    26267 引用 • 109207 回帖
2 操作
queguaiya 在 2025-05-10 19:51:09 更新了该帖
queguaiya 在 2025-05-10 19:44:30 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 有时间一定要实践一下,这个 callout 真有趣!

  • daloo 2 评论 via macOS

    大神居然认为我能学会写代码,哈哈。感谢大神的主题,很棒,要不再给思源笔记设计一个更有现代感的 LOGO 吧,现在的 LOGO 等华为开发四折叠以后估计会送律师函来 😄

    现在思源的 logo 应该是不会变了
    queguaiya
    @queguaiya 此前好像有征集创意,没有更换的原因不大了解,有好的创意和设计相信不会介意更换的吧。目前的 LOGO 第一印象是上个世纪八九十年年代甚至更早的风格,不过现在扁平化设计变多也就不显了,单看外形 70 分应该也有的。不过我感觉应该注意的一个问题是“M”字母的造型和思源笔记的关系不明,至少不能很直观的传递相关信息
    daloo
  • CSMsamuel 2 评论

    我觉得现在这个功能比较尴尬的点就是如果要把多个块都包裹进来就必须先设置一个超级块..这样子会很麻烦。

    已实现对引述块的支持(改了好久,涉及引述块嵌套改起来超级麻烦。。)
    queguaiya 1
    @queguaiya 辛苦大神了 qwq 才发现原来这个帖子是本尊...等上线了火速实践一下!
    CSMsamuel
  • FACAI78 1 评论

    image.png下滑编辑页面,添加标签按钮会和文章标题重叠

    视差滚动效果哈
    queguaiya

推荐标签 标签

  • 创业

    你比 99% 的人都优秀么?

    81 引用 • 1395 回帖
  • Spring

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

    947 引用 • 1460 回帖
  • Postman

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

    4 引用 • 3 回帖 • 2 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 2 关注
  • Outlook
    1 引用 • 5 回帖 • 3 关注
  • 倾城之链
    23 引用 • 66 回帖 • 166 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 564 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 642 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3201 引用 • 8217 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 85 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 564 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 8 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1794 回帖 • 1 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 254 关注
  • 宕机

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

    13 引用 • 82 回帖 • 78 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    182 引用 • 3882 回帖
  • Mobi.css

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

    1 引用 • 6 回帖 • 765 关注
  • DevOps

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

    59 引用 • 25 回帖 • 3 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 49 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 410 关注
  • 域名

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

    43 引用 • 208 回帖 • 2 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 62 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 680 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 238 关注
  • Vim

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

    29 引用 • 66 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 670 关注