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

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

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

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


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

  • 20220404 更新代码:

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

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

  • 20220329 更新代码:

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

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


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

改造效果如下:

图片.png

图片.png

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

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

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
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 各位,又有更新了,建议跟进,原先的版本有点小问题,结果预览显示不全。

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • abbj 1 赞同

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

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

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

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

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

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

    1 回复
  • Zhangwuji

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

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

    Issue #27 · UserZYF/zhang-light

    1 回复
  • 查看全部回帖
abbj
我的小站 https://blog.abbj.top/

推荐标签 标签

  • AngularJS

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

    12 引用 • 50 回帖 • 483 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 34 关注
  • Ruby

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

    7 引用 • 31 回帖 • 216 关注
  • Firefox

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

    8 引用 • 30 回帖 • 410 关注
  • 开源

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

    407 引用 • 3578 回帖
  • Notion

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

    7 引用 • 40 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 626 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 672 关注
  • 星云链

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

    3 引用 • 16 回帖 • 6 关注
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 745 关注
  • DevOps

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

    51 引用 • 25 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    135 引用 • 190 回帖
  • PostgreSQL

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

    22 引用 • 22 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 4 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 363 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 76 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • 负能量

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

    88 引用 • 1235 回帖 • 410 关注
  • 996
    13 引用 • 200 回帖 • 11 关注