右键编辑菜单优化

经验分享
23

2025年1月15日18:04:45更新，兼容“查找”命令与“将当前选中内容移动到其他文件中”命令的宽度。

/* 更改编辑区右键菜单中基础编辑功能按钮的布局 */
/* 首先，隐藏功能按钮的文本 */
div[data-section="edit"] .menu-item-title{
	display: none;			
}
/* 其次，定位右键菜单，更改布局 */
/* 情况一：无“编辑链接”命令，基于“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]){
	display: flex;
	flex-wrap: wrap;		/* 允许元素换行*/
	width: max(calc(var(--size-4-2) * 2 * 5 + 16px * 5 + var(--size-2-3) * 2 + 1px * 2), 158px);
	/* 图标两侧内边距var(--size-4-2)*2，图标大小16，共5个图标，右键菜单内边距var(--size-2-3)*2，右键菜单边框1px*2 */
	/* 编辑区右键菜单的原始宽度为158px */
}
/* 情况二：存在“编辑链接”命令，基于“编辑链接”、“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-text-cursor-input"]){
	display: flex;
	flex-wrap: wrap;
	width: max(calc(var(--size-4-2) * 2 * 6 + 16px * 6 + var(--size-2-3) * 2 + 1px * 2), 158px);
	/* 图标两侧内边距var(--size-4-2)*2，图标大小16，共6个图标，右键菜单内边距var(--size-2-3)*2，右键菜单边框1px*2 */
}
/* 情况三：存在“将当前选中内容移动到其他文件中”命令，基于“将当前选中内容移动到其他文件中”、“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]):has(div.menu-item[data-section="action"] svg[class*="lucide-git-branch-plus"]){
	display: flex;
	flex-wrap: wrap;
	width: max(calc(var(--size-4-2) * 2 * 6 + 16px * 6 + var(--size-2-3) * 2 + 1px * 2), 248.77px);
	/* 编辑区右键菜单中的“将当前选中内容移动到其他文件中”命令宽度为248.77px */
}
/* 再次，恢复原本的分隔符 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]) .menu-separator{
	flex-basis: 100%;		/* 占据整行 */
	height: 0px;			/* 清空分隔符的高度 */
	padding: 0px;			/* 移除可能的内边距 */
	overflow: hidden;		/* 隐藏分隔符可能的内容 */
}
/* 最后，强制基础编辑功能按钮以外的命令适配右键菜单的宽度 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]) .menu-item:not([data-section="edit"]){
	width: 100%
}
/* 其它相关修正 */
/* 裁切“查找”命令的溢出文本 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]) .menu-item[data-section="view"]:has(div.menu-item-icon svg.lucide-search) div.menu-item-title{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* 右键菜单命令隐藏 */
/* 命令隐藏系列 */
div.menu div.menu-item[data-section="action"]:has(svg[class*="lucide-image"]),		/* “将其设置为附件文件夹”（文件列表中文件夹的右键菜单） */
div.menu div.menu-item[data-section="pane"]:has(svg[class*="links-coming-in"]),		/* “在页面中显示反向链接”（编辑区的“更多选项”菜单） */
div.menu div.menu-item[data-section="action"]:has(svg[class*="lucide-file-search"])	/* “查找”与“替换”（编辑区的“更多选项”菜单） */
{
	display: none;
}
/* 分隔符隐藏系列 */
div.menu div.menu-item.has-submenu:has(svg[class*="lucide-link"]) + div.menu-separator,		/* “复制 Obsidian 链接”上方（编辑区的“更多选项”菜单） */
div.menu div.menu-item.is-warning:has(svg[class*="lucide-trash-2"]) + div.menu-separator	/* “删除文件”下方（编辑区的“更多选项”菜单） */
{
	display: none;
}
1 个赞
24

想问下是怎么对右键进行调试样式的呀？我右键后，点击 网页代码想查看样式，结果右键菜单内容就没了。不知道我表示的内容能不能理解。

26

没遇到这种情况，把插件都关掉再试

27

后来测试出来了，是 Obsidian 配置中 “原生菜单” 这个选项打开导致的 :face_with_open_eyes_and_hand_over_mouth:

另外，我做了一个针对不同菜单进行隐藏命令的插件，开发了一个隐藏 command 的插件 ，可以试用看看。（就是想做这个插件的时候，发现无法对右键菜单调试的 = =）

28

新版好像不行了了

29

我写了一个新版可用的编辑按钮，你用一下吧，这是效果图
image

/* 让右键的编辑按键，如复制粘贴等变成win11样式的css，并且会悬浮显示注释 */
.menu:has(.menu-scroll > :first-child > :first-child > svg):has(.menu-scroll > [data-section="clipboard"]) {
  display: flex; width: 175px;
  & .menu-scroll {
    flex-wrap: wrap; flex-direction: unset;
    & .menu-separator {flex-basis: 110%;}
    & .menu-item[data-section="clipboard"] .menu-item-title {display: none;}
    & .menu-item[data-section="clipboard"]:hover .menu-item-title {
      display: block; position: absolute;
      left: 6px; margin-bottom: 28px;
      font-size: 8px; color: var(--text-muted);
    }
  }
}
30

暂时凑合着用吧，obsidian老改结构和类名，不打算长久维护，只要清楚原理都可以轻松实现。

/* —————————————————————右键菜单优化————————————————————————— */
/* 1.更改编辑区右键菜单中基础编辑功能按钮的布局 */
/* 首先，隐藏功能按钮的文本 */
div[data-section="clipboard"] .menu-item-title{
	display: none;
}

.menu-scroll div[data-section="selection-link"],
.menu-scroll div[data-section="selection"],
.menu-scroll div[data-section="open"],
.menu-scroll > div[data-section="selection-link"] +div.menu-separator,
.menu-scroll > div[data-section="selection"] +div.menu-separator,
.menu-scroll > div[data-section="open"] +div.menu-separator{
	display: none;
}

/* 其次，定位右键菜单，更改布局 */
/* 情况一：无“编辑链接”命令，基于“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu-scroll:has(div.menu-item[data-section="clipboard"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="clipboard"] svg[class*="lucide-clipboard-type"]){
	display: flex;
	flex-wrap: wrap;		/* 允许元素换行*/
	flex-direction: row;
	width: max(calc(var(--size-4-2) * 2 * 5 + 16px * 5 + var(--size-2-3) * 2 + 1px * 2), 158px);
	/* 图标两侧内边距var(--size-4-2)*2，图标大小16，共5个图标，右键菜单内边距var(--size-2-3)*2，右键菜单边框1px*2 */
	/* 编辑区右键菜单的原始宽度为158px */
}
/* 情况二：存在“编辑链接”命令，基于“编辑链接”、“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu-scroll:has(div.menu-item[data-section="clipboard"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="clipboard"] svg[class*="lucide-clipboard-type"]):has(div.menu-item[data-section="clipboard"] svg[class*="lucide-text-cursor-input"]){
	display: flex;
	flex-wrap: wrap;
	width: max(calc(var(--size-4-2) * 2 * 6 + 16px * 6 + var(--size-2-3) * 2 + 1px * 2), 158px);
	/* 图标两侧内边距var(--size-4-2)*2，图标大小16，共6个图标，右键菜单内边距var(--size-2-3)*2，右键菜单边框1px*2 */
}
/* 情况三：存在“将当前选中内容移动到其他文件中”命令，基于“将当前选中内容移动到其他文件中”、“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu-scroll:has(div.menu-item[data-section="clipboard"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="clipboard"] svg[class*="lucide-clipboard-type"]):has(div.menu-item[data-section="action"] svg[class*="lucide-git-branch-plus"]){
	display: flex;
	flex-wrap: wrap;
	width: max(calc(var(--size-4-2) * 2 * 6 + 16px * 6 + var(--size-2-3) * 2 + 1px * 2), 248.77px);
	/* 编辑区右键菜单中的“将当前选中内容移动到其他文件中”命令宽度为248.77px */
}
/* 再次，恢复原本的分隔符 */
div.menu-scroll:has(div.menu-item[data-section="clipboard"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="clipboard"] svg[class*="lucide-clipboard-type"]) .menu-separator{
	flex-basis: 100%;		/* 占据整行 */
	height: 0px;			/* 清空分隔符的高度 */
	padding: 0px;			/* 移除可能的内边距 */
	overflow: hidden;		/* 隐藏分隔符可能的内容 */
}
/* 最后，强制基础编辑功能按钮以外的命令适配右键菜单的宽度 */
div.menu-scroll:has(div.menu-item[data-section="clipboard"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="clipboard"] svg[class*="lucide-clipboard-type"]) .menu-item:not([data-section="clipboard"]){
	width: 100%
}
/* 其它相关修正 */
/* 裁切“查找”命令的溢出文本 */
div.menu-scroll:has(div.menu-item[data-section="clipboard"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="clipboard"] svg[class*="lucide-clipboard-type"]) .menu-item[data-section="view"]:has(div.menu-item-icon svg.lucide-search) div.menu-item-title{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
31

由于obsidian更新版本总伴随着HTML结构与类名的更迭，本项目只介绍具体的实现原理，并长期维护1.4.6左右版本的obsidian右键菜单，不维护最新版本。
如果新版本不兼容当前css，建议咨询AI手动修复。

32

谢谢~谢谢~谢谢~谢谢~

33

谢谢~谢谢~谢谢~谢谢~谢谢~

1 个赞