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

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

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

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

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

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

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

图片.png

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

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

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

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

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

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

以下是文件地址:

admonition.zip

  • 思源笔记

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

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

    27221 引用 • 113937 回帖
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 占位符,记得修改占位符颜色

请输入回帖内容 ...

推荐标签 标签

  • Sandbox

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

    450 引用 • 1240 回帖 • 604 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • QQ

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

    45 引用 • 557 回帖 • 1 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 421 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 649 关注
  • BookxNote

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

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

    1 引用 • 1 回帖 • 2 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    53 引用 • 190 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 293 关注
  • Love2D

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

    14 引用 • 53 回帖 • 563 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    16 引用 • 143 回帖 • 1 关注
  • 区块链

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

    92 引用 • 752 回帖
  • 宕机

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

    13 引用 • 82 回帖 • 81 关注
  • 996
    13 引用 • 200 回帖 • 3 关注
  • abitmean

    有点意思就行了

    40 关注
  • 酷鸟浏览器

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

    3 引用 • 59 回帖 • 68 关注
  • 负能量

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

    89 引用 • 1251 回帖 • 388 关注
  • Java

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

    3204 引用 • 8217 回帖
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 3 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 1 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 527 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • 微信

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

    135 引用 • 798 回帖 • 1 关注