自定义样式:搜索窗口改造(窗口放大 + 左右布局)

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

如果兄弟们用的满意,别忘了使用我得推荐码:K9TdVww

作为 512 成员之一,推荐码还没有开张过。。


  • 20220506 更新:搜索结果列表改成双行显示(照搬 notion-theme,感谢作者 🤝)

  • 20220404 更新代码:

    • 调整结果预览区域的高度,避免对应笔记底部内容不能完整显示
    • 禁止搜索结果列表出现横向滚动条(不良后果是如果笔记路径很长就会无法完整显示,我觉得这个不重要);
    • 调整窄窗口上下布局时,搜索结果部分和结果预览部分的相对比例。
  • 20220402 更新代码:当窗口宽度较窄(尺寸可自定义)时,左右分栏不合适,ctrl+p 窗口将自动调整为上下布局

  • 20220330 更新代码:修正对 ctrl+r 的影响

  • 20220329 更新代码:

    • 左右宽度自动计算占据一半,不再写死;
      • 实际是左边宽度占据一定比例,右边自动充满,因此,你也可以修改左边宽度,做成左窄右宽的类似侧边栏效果
    • 加了一点署名信息,放了我的推荐码,希望能够被使用,满足一下虚荣心

    各位可以随意在自己的主题使用,不用告知我


一直觉得思源的全局搜索还不够好用,空间利用效率不高,理想情况是 vscode 或者 obsidian 那样的。可惜自己搞不定,那就先在自己能力范围内,把目前的搜索界面小改一下:

改造效果如下:

图片.png

图片.png

相应 css 代码如下(不要解压,直接去掉.zip 后缀后,@import 到当前主题即可。注释很清楚,可以随意修改):

CtrlP.css 删掉 zip 不要解压.zip

  • 思源笔记

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

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

    19812 引用 • 75874 回帖
6 操作
abbj 在 2022-05-06 23:07:31 更新了该帖
abbj 在 2022-04-04 23:45:17 更新了该帖
abbj 在 2022-04-02 09:51:01 更新了该帖
abbj 在 2022-03-30 14:00:30 更新了该帖 abbj 在 2022-03-29 10:35:20 更新了该帖 abbj 在 2022-03-29 10:29:44 更新了该帖

相关帖子

优质回帖
  • abbj 1 1 赞同

    你好,我看最新的 notion 主题应该是修复了这个问题,我暂时没空研究。你可以换成 notion,或者先研究下他是怎么改的。

    不忙了我再改完更新这里 🙏

  • abbj 1 赞同

    想要恢复官方宽度的话,直接把 width 那行删掉就行。

    官方宽度的数值在开发者工具里可以看出来。

  • abbj 1 赞同

    @participants 各位,又有更新了,建议跟进,原先的版本有点小问题,结果预览显示不全。

欢迎来到这里!

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

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

    没有,就先支持一下!感觉很好

  • yjmsiyuan

    压缩包解不开

    1 回复
  • 看正文,直接删扩展名,不要解压

  • yjmsiyuan

    不好意思。不错,使用没问题

    1 操作
    yjmsiyuan 在 2022-03-26 13:24:30 更新了该回帖
  • Zhangwuji

    牛逼!

  • lzuwujx

    太棒了!正需要这个!👍

  • 请问一下,@import 是啥意思,怎样操作

    1 回复
  • 直接把附件内容复制粘贴到当前主题的 theme.css 文件中也行。

    @import 是不复制文件正文而引入文件的一种方法,可以百度一下。

  • Zhangwuji

    大佬好,我是 zhang-light 主题的作者,用了两天您写的这串代码,感觉很好用。鼠标的移动距离短了许多,可视面积大了许多,我能否将这串代码加到主题里边,到时候可能会上传到集市 😄

    1 回复
  • 可以的,随意用吧,能让更多人用到就更好了,我自己懒得上传集市。

    代码有更新(正文有说明),记得下载新版。

    我也不是大佬,D 和 V 才是,我就是需要学习,找到一个满意的工具不容易,希望大家一起,让跟多人接触和使用思源笔记,让两位开发者持续改进这个工具 😄😄

    1 回复
  • Zhangwuji

    感谢感谢,我会在集市中进行说明的

    1 回复
  • 又做了一点更新,记得重新下载 😄

    1 回复
  • Zhangwuji

    ok~

  • 哇,感谢大佬。确实舒服好多

    image.png

    1 回复
    1 操作
    Achuan-2 在 2022-04-02 01:07:31 更新了该回帖
  • 即使改完之后,左侧路径信息还是占据了太多空间。

    要是能彻底改成 obsidian 或者 vscode 那种样式就好了。

    1 回复
  • @participants 兄弟们,又有更新了。

    2 回复
  • lzuwujx

    一直在用,很好用,感谢!!!

  • Zhangwuji

    更新够快的 😄

  • 这个是官方的问题吧,上下布局也是如果路径太长的话,就会完全占据高亮内容

    1 回复
  • 是的,是官方设计的问题。感觉自定义 css 的方法优化空间不大了。

    个人感觉最好是搜索结果按所在文件分组,可以折叠展开,使用效率比现在高很多。

    1 回复
  • 可以提建议啊,思源本文档搜索还有一个很大硬伤是不能按顺序查找

    1 回复
  • 提过好多次了,感觉在 D 大那边优先级不高。懒得再提了,慢慢等吧。估计用户多了之后,提的人也会变多的。

    1 回复
  • Zhangwuji

    大佬好,在使用主题的过程中,有朋友给 CtrlP.css 提供了反馈,说搜索窗口太大,能否减小窗口尺寸。

    不知这个有没有实现的可能

    Issue #27 · UserZYF/zhang-light

    1 回复
  • 图片.png

    修改这两个数字就好了,可以理解为搜索窗口占当前思源笔记主体窗口长宽的百分比。

    1 回复
  • Zhangwuji

    感谢,设置成 80 之后,宽度和官方的设置面板宽度一样了 😄

    1 回复
  • abbj 1 赞同

    想要恢复官方宽度的话,直接把 width 那行删掉就行。

    官方宽度的数值在开发者工具里可以看出来。

  • abbj 1 赞同

    @participants 各位,又有更新了,建议跟进,原先的版本有点小问题,结果预览显示不全。

  • dugufeiyun 1 赞同

    还是希望思源原生就能支持搜索栏左右布局。

  • abbj 1

    @participants 各位,又有一点小改动,可以了解下。

  • yjmsiyuan 1

    必须回帖支持,一直在用!

  • yjmsiyuan

    2.0.16 版本

    ctrl+r.。只能显示替换的,搜索栏闪一下就看不到。

    ctrl+f 正常。

    1 回复
  • abbj 1 1 赞同

    你好,我看最新的 notion 主题应该是修复了这个问题,我暂时没空研究。你可以换成 notion,或者先研究下他是怎么改的。

    不忙了我再改完更新这里 🙏

  • yjmsiyuan

    谢谢,用 notion 解决了

  • jzman

    全局搜索确实 不太友好。

请输入回帖内容 ...
abbj
我的小站 https://blog.abbj.top/

推荐标签 标签

  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 523 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 4 关注
  • RESTful

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

    30 引用 • 114 回帖
  • 新人

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

    51 引用 • 226 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 189 关注
  • DevOps

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

    45 引用 • 25 回帖
  • 服务器

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

    124 引用 • 580 回帖
  • AngularJS

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

    12 引用 • 50 回帖 • 437 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • CSDN

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

    14 引用 • 155 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    9 引用 • 32 回帖 • 155 关注
  • GitHub

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

    207 引用 • 2031 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 63 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    40 引用 • 40 回帖 • 1 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • Love2D

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

    14 引用 • 53 回帖 • 517 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 210 关注
  • 宕机

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

    13 引用 • 82 回帖 • 51 关注
  • sts
    2 引用 • 2 回帖 • 164 关注
  • Node.js

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

    138 引用 • 268 回帖 • 147 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 705 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 60 回帖 • 457 关注
  • 周末

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

    14 引用 • 297 回帖