登录 注册

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

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

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

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

  • 20220506 更新：搜索结果列表改成双行显示（照搬 notion-theme，感谢作者 🤝）

  • 20220404 更新代码：

    • 调整结果预览区域的高度，避免对应笔记底部内容不能完整显示
    • 禁止搜索结果列表出现横向滚动条（不良后果是如果笔记路径很长就会无法完整显示，我觉得这个不重要）；
    • 调整窄窗口上下布局时，搜索结果部分和结果预览部分的相对比例。

  • 20220402 更新代码：当窗口宽度较窄（尺寸可自定义）时，左右分栏不合适，ctrl+p 窗口将自动调整为上下布局

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

  • 20220329 更新代码：

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

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

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

改造效果如下：

图片.png

图片.png

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

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

  • 思源笔记

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

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

    18580 引用 • 69107 回帖
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 关注
2 收藏
1 引用
6 操作
34 回帖
13
7
6
3
2
2.7k 459 453 777 38 33 927

相关帖子

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

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

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

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

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

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

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

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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • abbj • • 1 赞同
    订阅者 支持者 勇士 作者

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

  • 其他回帖
  • abbj •
    订阅者 支持者 勇士 作者

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

    代码有更新（正文有说明），记得下载新版。

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

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

    即使改完之后，左侧路径信息还是占据了太多空间。

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

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

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

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

    1 回复
  • 查看全部回帖
abbj
我的小站 https://blog.abbj.top/
回帖
385
 帖子
123
 积分
14017

近期热议

推荐标签 标签

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    311 引用 • 1666 回帖
  • Electron

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

    15 引用 • 136 回帖 • 8 关注
  • Kotlin

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

    19 引用 • 33 回帖 • 22 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 229 关注
  • Mac

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

    164 引用 • 594 回帖 • 1 关注
  • uTools

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

    5 引用 • 13 回帖 • 1 关注
  • Bug

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

    78 引用 • 1743 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 628 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 602 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 532 回帖 • 711 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    476 引用 • 899 回帖
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 551 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖 • 1 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 596 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    163 引用 • 1450 回帖 • 1 关注
  • Q&A

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

    6504 引用 • 29233 回帖 • 246 关注
  • Mobi.css

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

    1 引用 • 6 回帖 • 695 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 243 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 28 关注
  • Laravel

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

    19 引用 • 23 回帖 • 680 关注
  • 架构

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

    139 引用 • 441 回帖 • 1 关注
  • CSDN

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

    14 引用 • 155 回帖

最新标签