纯粹使用模板和属性制作的 admonition 提示条

本贴最后更新于 891 天前,其中的信息可能已经时移世改

在之前的一个帖子里有人提到了这个问题,当时我认为只使用 css 恐怕很难达到他的要求。

结果 @MN02K 真的做到了,而且效果相当出众。

虽然效果是很不错的,但是我觉得这样就有点重了,整一个提示条,需要改主题的 css,还要考虑 svg 的存放地址,总觉得相对有点折腾。

所以我在想,能不能只用模板实现这一点?

折腾了半天后,勉勉强强实现了吧……

图片.png

同时还插入了自定义属性 admonition ,方便查找。

当然,效果是比不过 @MN02K 的,但是胜在不折腾,把模板解压到对应文件夹(SiYuan\data\templates)就可以用了。

由于感觉实在没有什么技术含量,就不上架模板集市了……(主要是懒)

如果大家觉得有必要,那就再说吧。

------------------------------------2022.7.8 更新--------------------------------

解决了在一些主题下的兼容性问题

以下是文件地址:

admonition.zip

  • 思源笔记

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

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

    25388 引用 • 104876 回帖
2 操作
zxhd86 在 2022-07-08 14:57:31 更新了该帖
zxhd86 在 2022-06-29 21:18:48 更新了该帖

相关帖子

欢迎来到这里!

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

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

    很强,已经下载使用了,很好用。之前就想要一个这样的效果,甚至能修改标题文字的,之前做了一个,但是文字固定,所以就做成了便利贴的样式。

    不过不是通过自定义属性实现的,而是先调出引用样式,然后给引用样式再添加外观样式中的 4 中颜色效果。

    Snipaste20220704183632.png

    Snipaste20220704184614.png

    PS:自己做的主题给引用左上角添加了图标导致有点不兼容,所以想问一下可以用一下您写的代码做一些修改吗?😄

    2 回复
  • zxhd86

    抱歉,之前在学 clojure,有段时间没有上 ld 了,能问问是什么样的兼容吗?

    是不是就是第二张图里面段落标志出现在正文里?

    至于代码的话,其实你看到的模板就是全部了。当时就是为了安装简单起见,将所有需要的样式都打包到模板里,其实就是 css 修改加部分自定义文本而已。

    1 回复
  • zxhd86

    还有,图标其实就是比较少见的 unicode 字符而已,这是为了能更好的跨平台,且安装不折腾。如果你的显示图标只是与我展示的不太一样,那是很正常的 Unicode 图标显示差异

  • zxhd86

    另外,由于 css 的限制,文字的修改最好是先加入,在删去,否则字体会与 Unicode 图标一致,也就是变色、变大。

    不知道你有没有注意到,我展示的文字是黑色的,而你修改后是各种颜色的。

  • Zhangwuji

    我给主题的引用左上角加了引号图标,可能需要设置一下,在这个自定义属性下取消显示

    1 回复
  • zxhd86 via Ubuntu

    不介意的话,能把你的主题发给我一下吗?光看截图实在看不出是什么属性导致这种显示效果

    1 回复
  • Zhangwuji

    集市里边的主题,blue-dog

    1 回复
  • zxhd86 via Ubuntu

    ok,搞定了,你下载一下我更新的文件试一试

    顺便一题,你的主题做的挺不错。

    1 回复
  • Zhangwuji

    okkk,辛苦啦

  • Zhangwuji

    大佬,最近我新做了一个 OneNote 主题,我想要把这个效果集成到主题里边。

    但是用模板做成的效果,就是第一行的文字可以进行编辑和替换,我不知道这个是怎么做到的,想请教一下。

    如果单纯用 CSS 实现,应该怎样操作呢

    1 回复
  • zxhd86 via Ubuntu

    如果使用 css 实现的话,或许可以考虑一下 placeholder 占位符,记得修改占位符颜色

请输入回帖内容 ...

推荐标签 标签

  • AWS
    11 引用 • 28 回帖 • 11 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖
  • Outlook
    1 引用 • 5 回帖 • 5 关注
  • JetBrains

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

    18 引用 • 54 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 396 回帖
  • TensorFlow

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

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

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 649 关注
  • Word
    13 引用 • 41 回帖
  • Markdown

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

    170 引用 • 1529 回帖
  • Log4j

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

    20 引用 • 18 回帖 • 30 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 618 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖 • 1 关注
  • jQuery

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

    63 引用 • 134 回帖 • 735 关注
  • 自由行
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    290 引用 • 4494 回帖 • 654 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 2 关注
  • Hprose

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

    9 引用 • 17 回帖 • 634 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 9 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 6 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 690 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 3 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 437 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 592 关注
  • Jenkins

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

    54 引用 • 37 回帖 • 1 关注