登录 注册

自定义样式：搜索窗口改造（窗口放大 + 左右布局）

本贴最后更新于 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 引用 • 92610 回帖
1 引用
搜索窗口左右显示，适配 2.5.2 • yjmsiyuan
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 更新了该帖
3 感谢
1 关注
3 收藏
1 引用
6 操作
34 回帖
13
7
6
3
2
3.3k 493 454 1.3k 71 34 938

相关帖子

优质回帖
  • abbj • • 1 • 1 赞同
    订阅者 支持者 勇士 作者

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

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

  • abbj • • 1 赞同
    订阅者 支持者 勇士 作者

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

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

  • abbj • • 1 赞同
    订阅者 支持者 勇士 作者

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

34 回帖
自定义样式：搜索窗口改造（窗口放大 + 左右布局）

欢迎来到这里！

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

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

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

  • 其他回帖
  • Zhangwuji •

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

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

    Issue #27 · UserZYF/zhang-light

    1 回复
  • abbj •
    订阅者 支持者 勇士 作者

    是的，是官方设计的问题。感觉自定义 css 的方法优化空间不大了。

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

    1 回复
  • Zhangwuji •

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

    1 回复
  • 查看全部回帖
abbj
我的小站 https://blog.abbj.top/
回帖
386
 帖子
124
 积分
13934

近期热议

推荐标签 标签

  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    156 引用 • 3792 回帖
  • SOHO

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

    7 引用 • 55 回帖 • 5 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 2 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • Kotlin

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

    19 引用 • 33 回帖 • 63 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    943 引用 • 1460 回帖 • 3 关注
  • 锤子科技

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

    4 引用 • 31 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    90 引用 • 562 回帖 • 1 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 2 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 363 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    288 引用 • 734 回帖
  • Electron

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

    15 引用 • 136 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 52 关注
  • 深度学习

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

    53 引用 • 40 回帖 • 2 关注
  • 区块链

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

    91 引用 • 751 回帖 • 1 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • JRebel

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

    26 引用 • 78 回帖 • 672 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8449 引用 • 38493 回帖 • 155 关注
  • GitHub

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

    210 引用 • 2036 回帖 • 1 关注
  • Typecho

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

    12 引用 • 65 回帖 • 446 关注
  • 30Seconds

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

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

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

    15 引用 • 161 回帖 • 3 关注
  • BookxNote

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

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

    1 引用 • 1 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 75 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 1 关注

最新标签