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

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

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

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

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

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

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

图片.png

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

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

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

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

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

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

以下是文件地址:

admonition.zip

  • 思源笔记

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

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

    20156 引用 • 77732 回帖
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

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

    1 回复
  • Zhangwuji

    集市里边的主题,blue-dog

    1 回复
  • zxhd86

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

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

    1 回复
  • Zhangwuji

    okkk,辛苦啦

  • Zhangwuji

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

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

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

    1 回复
  • zxhd86

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

请输入回帖内容 ...

推荐标签 标签

  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    923 引用 • 936 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    51 引用 • 226 回帖
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 19 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖 • 2 关注
  • TGIF

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

    285 引用 • 4482 回帖 • 658 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    207 引用 • 2031 回帖
  • 房星科技

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

    6 引用 • 141 回帖 • 566 关注
  • Node.js

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

    138 引用 • 268 回帖 • 129 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    402 引用 • 3522 回帖 • 1 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    14 引用 • 7 回帖 • 5 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • 安全

    安全永远都不是一个小问题。

    191 引用 • 813 回帖 • 2 关注
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 224 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 701 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 429 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 121 关注
  • 星云链

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

    3 引用 • 16 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 609 关注
  • Hexo

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

    21 引用 • 140 回帖 • 12 关注
  • Vue.js

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

    262 引用 • 664 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    103 引用 • 126 回帖 • 442 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    386 引用 • 1226 回帖 • 593 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    713 引用 • 1174 回帖 • 105 关注