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

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

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

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


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

  • 20220404 更新代码:

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

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

  • 20220329 更新代码:

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

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


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

改造效果如下:

图片.png

图片.png

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

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

  • 思源笔记

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

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

    22001 引用 • 87710 回帖
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/

推荐标签 标签

  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 8 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 489 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 13 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3453 回帖 • 201 关注
  • Elasticsearch

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

    117 引用 • 99 回帖 • 224 关注
  • 宕机

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

    13 引用 • 82 回帖 • 52 关注
  • Vue.js

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

    264 引用 • 665 回帖
  • 游戏

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

    176 引用 • 815 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 29 回帖
  • GAE

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

    14 引用 • 42 回帖 • 754 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 625 关注
  • JSON

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

    52 引用 • 190 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 53 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 5 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 388 关注
  • 周末

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

    14 引用 • 297 回帖
  • Openfire

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

    6 引用 • 7 回帖 • 97 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    565 引用 • 3532 回帖
  • JetBrains

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

    18 引用 • 54 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 2 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 740 关注
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    165 引用 • 594 回帖
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 10 关注
  • OpenStack

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

    10 引用 • 2 关注