希望可以通过 方向键 ←→ 快速切换不同分组 而不是现在的仅可以支持 ↑↓
每一个框住的可以做一个分组
使用主题 Asri
有一个大概的思路
这个主题会在分组的中间添加一个 b3-menu__separator
标记 b3-menu__separator
的位置, 如果触发了 ← → 则将焦点跳转到当前焦点的下一个 b3-menu__separator
位置的下一个 button 位置
希望可以通过 方向键 ←→ 快速切换不同分组 而不是现在的仅可以支持 ↑↓
每一个框住的可以做一个分组
使用主题 Asri
这个主题会在分组的中间添加一个 b3-menu__separator
标记 b3-menu__separator
的位置, 如果触发了 ← → 则将焦点跳转到当前焦点的下一个 b3-menu__separator
位置的下一个 button 位置
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
这个主题会在分组的中间添加一个
b3-menu__separator
仅在未筛选时才加这个 b3-menu__separator
, 筛选时是没有分组的,比如你输入 /j
或 /gj
就知道了。
不过,在无分组情况下,我通过 skipElementNumInSearch = 3
模拟实现了,这个变量的作用是,在没有分组情况下,按方向键跳过几个元素(如下图第二个 GIF 所示)。
效果如下
有分组效果
无分组效果
代码
注意事项
由于左右方向键和思源的左右方向键冲突,这里采用了一些技巧,避开了这些问题,但不保证后续有没有别的问题,理论上应该问题不大。如果发现有兼容问题,可以开启 useCompatibilityMode = true
,使用兼容模式,但兼容模式需要用 ctrl/cmd+左右方向键
代替,可能体验较差。
最后提醒下,保存后刷新下页面,确保脚本正确执行。
祝你好运 🍀
这个主题会在分组的中间添加一个
b3-menu__separator
仅在未筛选时才加这个 b3-menu__separator
, 筛选时是没有分组的,比如你输入 /j
或 /gj
就知道了。
不过,在无分组情况下,我通过 skipElementNumInSearch = 3
模拟实现了,这个变量的作用是,在没有分组情况下,按方向键跳过几个元素(如下图第二个 GIF 所示)。
效果如下
有分组效果
无分组效果
代码
注意事项
由于左右方向键和思源的左右方向键冲突,这里采用了一些技巧,避开了这些问题,但不保证后续有没有别的问题,理论上应该问题不大。如果发现有兼容问题,可以开启 useCompatibilityMode = true
,使用兼容模式,但兼容模式需要用 ctrl/cmd+左右方向键
代替,可能体验较差。
最后提醒下,保存后刷新下页面,确保脚本正确执行。
祝你好运 🍀
感觉像是主题的问题
主题的原则 看起来是如果进行了筛选 就是将所有的当成了一个分组 而每一个分组的第一个元素存在 margin-top
而这就导致了第一列的元素会因为这一点点 margin 将第五个元素挤到下一列 所以使用此 css 去掉这个在当前场景多余的 margin-top
但是会影响未筛选的时候的第一个元素也会被去掉 margin-top ( 可能会有更好的 seletor? 只去掉筛选后的那个)
如果每一列只会有一个选项看注释是禁用的 但是这里其实应该还是可以启用下
这里看了下逻辑 如果是 0 就关了, 但是采用 我说的那种虚拟分组 其实开关就不应该是这个了
针对的是这种情况, 当每一列的元素只有一个的时候, 那个 skipElementNumInSearch
就是 0 了
@wilsons 大佬 可以根据这个思路进行下重构么?
// 对于没有分组的其实可以动态获取每一列的button数量
const menu = document.querySelector(".hint--menu:not(.fn__none)");
const b3Item = document.querySelector(".hint--menu .b3-list-item");
const b3ItemStyle = window.getComputedStyle(b3Item)
const lineHeight = +b3ItemStyle.lineHeight.slice(0,-2)
const marginBottom = +b3ItemStyle.marginBottom.slice(0,-2)
// 这里有个问题 如果每一列只会有一个选项看注释是禁用的
// 但是这里其实应该还是可以启用下
// 其他思路: 感觉其实可以根据这个进行一个虚拟分组, 而不是直接跳过n个元素
skipElementNumInSearch = Math.floor(menu.offsetHeight / (lineHeight + marginBottom)) - 1
// 搭配css 片段
.hint--menu:not(.fn__none) > div > button:nth-child(1) {
margin-top: 0;
}
Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。
Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。
CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
好记性不如烂笔头。
Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。
Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。
jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。
一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。
Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。
Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。
百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。
你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!
MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。
Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。
Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。
Postman 是一款简单好用的 HTTP API 调试工具。
Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。
FreeMarker 是一款好用且功能强大的 Java 模版引擎。
DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。
SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。
禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。
Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。
Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。
这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!
Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。