奇技淫巧:给嵌入块加标题(建议只用于 daily note 文档块)

回顾 daily note 会使用到嵌入块来查询,但需要点击进去才能看到标题。

发现查询块中属性值带有 id,可以用来表示创建日期,对于 daily note 的文档块正好适合做标题。

所以写了以下 css 来实现效果,利用是固定显示 id 的长度。

步骤 1:将以下 css 放入对应主题的 theme.css 或者引用的 custom.css 中。

/*嵌入块显示日期*/
[custom-showdate="1"] .protyle-wysiwyg__embed::before {
    content: "日期:" attr(data-id);
    color: var(--b3-theme-on-surface);
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    width: 147px;
    display: inline-block;
    font-size: 20px !important;
    margin-left: -57px;
}

步骤 2. 给嵌入块加上属性 showdate,值为 1。用了这个属性和值的才显示日期,其他的不显示。这样方便控制。

最终效果:

JAEWZN6ZSHON4RROJQ.jpg

样式可以根据自己需要修改~

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Riley188
    订阅者

    解决了我的一个痛点!感谢!

  • ciwoyipang
    捐赠者 订阅者

    这个是嵌入快是怎么写出来这样一列列的呀

    1 回复
  • kobi
    订阅者 作者

    不知道你指的是分隔线吗,是的话给改 css 换个明显点的颜色就行。

    /* 嵌入块分隔线 */
    .protyle-wysiwyg [data-node-id].render-node[data-type=NodeBlockQueryEmbed]>.protyle-wysiwyg__embed { 
        border-bottom: 1px dotted var(--b3-protyle-inline-link-color);
    }
    
    1 回复
  • ciwoyipang
    捐赠者 订阅者

    谢谢回复,我其实是想知道这个查日期出来的嵌入快语法是怎样的

    1 回复
  • kobi
    订阅者 作者

    就是普通的 sql 语句,根据路径查询,比如 hpath like '/daily note%-%' 类型 and type = 'd'

    1 回复
  • ciwoyipang
    捐赠者 订阅者

    谢谢哈,我是比较伸手党了。。

请输入回帖内容 ...
融合块、大纲和双向链接
构建你永恒的数字花园
思源笔记是一款本地优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步

推荐标签 标签

  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    108 引用 • 99 回帖 • 406 关注
  • 创业

    你比 99% 的人都优秀么?

    80 引用 • 1392 回帖 • 4 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • Laravel

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

    19 引用 • 22 回帖 • 611 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    122 引用 • 579 回帖 • 1 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 493 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    83 引用 • 333 回帖 • 2 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 48 关注
  • 微信

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

    126 引用 • 772 回帖 • 21 关注
  • Kotlin

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

    18 引用 • 30 回帖 • 2 关注
  • RIP

    愿逝者安息!

    9 引用 • 92 回帖 • 220 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    157 引用 • 797 回帖 • 1 关注
  • 前端

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

    245 引用 • 1346 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    4 引用 • 31 回帖 • 41 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 11 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    19 引用 • 21 回帖 • 19 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    88 引用 • 370 回帖
  • Solo

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

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

    1394 引用 • 9959 回帖 • 500 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    42 引用 • 24 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    648 引用 • 529 回帖 • 291 关注
  • Caddy

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

    10 引用 • 54 回帖 • 75 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    67 引用 • 881 回帖 • 152 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 152 关注
  • TensorFlow

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

    20 引用 • 19 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    79 引用 • 1744 回帖
  • 微软

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

    8 引用 • 44 回帖