右键编辑菜单优化

找了很久都没有看到能修改右键菜单布局、增加子菜单的插件,只能添加、隐藏或删除功能命令,就自个做了个CSS,尽力也只能做到按钮布局的变化。
obsidian版本是1.4.16,效果如图,主要是编辑区的右键菜单:


吐槽下Obsidian的右键菜单,明明右键菜单都不一样,class都是menu,也没个其它属性来区分(排序右键菜单除外),CSS选择起来都难。

5 个赞
/* 右键菜单 */
.menu:not(.mod-no-icon){
	display: flex;
	flex-wrap: wrap;	/* 允许元素换行 width: 173.6px;*/
	width: 13%;		/* 右键菜单宽度 */
}
.menu-separator{		/* 菜单中的分隔符 */
  flex-basis: 100%;		/* 占据整行 */
  height: 0px;			/* 隐藏分隔符的高度 */
  overflow: hidden;		/* 隐藏分隔符可能的内容 */
  padding: 0px;			/* 移除可能的内边距 */
}

/* 基础功能按钮 */
div[data-section="edit"] .menu-item-title{
	display: none;			/* 隐藏基础编辑功能的文本 */
}

/* 其它功能按钮 */
.menu-item:not([data-section="edit"]) div[class="menu-item-title"]{
	display:block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	/* 功能文本溢出裁切 */
	width: 150px			/* 功能文本溢出裁切宽度 */
}

/* 针对侧边栏的右键菜单 */
div[class*="menu-item mod-checked"] div[class="menu-item-title"],
div[class*="menu-item mod-checked selected"] div[class="menu-item-title"]{
	width: 122.062px !important;
}

/* 针对标签栏文件的右键菜单中的子菜单 */
div[class*="menu-item has-submenu"]{
	width: 190px;
}

/* 针对标签栏文件的右键菜单中的阅读视图 */
div[class*="menu-item mod-checked"][data-section="pane"]{
	width: 190px;
}
3 个赞

怎么删除右键菜单的命令啊

哈哈哈哈这应该是往后的设计方向了,最近几个大版本已经把大纲和文件列表的子节点class全改成一样的 :rofl:每次更新都想死

1 个赞

没办法,类型 属性都不是唯一的

那以后只能自己开发插件了 :sob:

虽早已不更新, 但一直还能用.

谢谢。

image

v1.6.7 版 CSS 代码,点击展开
.menu-item.is-disabled {display: none;}
.menu:has(:first-child > :first-child > svg) {
  display: flex; flex-wrap: wrap; width: 142px;
  & .menu-separator {flex-basis: 110%;}
  & .menu-item .menu-item-title {display: none;}
  & .menu-item:hover .menu-item-title {
    display: block; position: absolute;
    left: 6px; margin-bottom: 28px;
    font-size: 8px; color: var(--text-muted);
  }
}
v1.7.4 版 CSS 代码
.menu-item.is-disabled {display: none;}
.menu:has(.menu-scroll > :first-child > :first-child > svg) {
  display: flex; width: 142px;
  & .menu-scroll {
    flex-wrap: wrap; flex-direction: unset;
    & .menu-separator {flex-basis: 110%;}
    & .menu-item .menu-item-title {display: none;}
    & .menu-item:hover .menu-item-title {
      display: block; position: absolute;
      left: 6px; margin-bottom: 28px;
      font-size: 8px; color: var(--text-muted);
    }
  }
}
3 个赞

更新下css,目前的缺点是所有右键窗口的宽度都是一样的,不太美观。

/* 右键菜单测试 */
.menu:not(.mod-no-icon):not(.MySnippets-statusbar-menu){
	display: flex;
	flex-wrap: wrap;	/* 允许元素换行 width: 173.6px;*/
	width: 205.6px;		/* 右键菜单宽度13.3854166% */
}
.menu-separator{		/* 菜单中的分隔符 */
  flex-basis: 100%;		/* 占据整行 */
  height: 0px;			/* 隐藏分隔符的高度 */
  overflow: hidden;		/* 隐藏分隔符可能的内容 */
  padding: 0px;			/* 移除可能的内边距 */
}

/* 基础功能按钮 */
div[data-section="edit"] .menu-item-title{
	display: none;			/* 隐藏基础编辑功能的文本 */
}

/* 其它功能按钮 */
.menu-item:not([data-section="edit"]) div[class="menu-item-title"]{
	display:block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	/* 功能文本溢出裁切 */
	width: 150px			/* 功能文本溢出裁切宽度 */
}

/* 针对侧边栏的右键菜单 */
div[class="menu-item mod-checked"] div[class="menu-item-title"],
div[class="menu-item mod-checked selected"] div[class="menu-item-title"]{
	width: 132.062px !important;
}

/* 针对标签栏文件的右键菜单中的子菜单 */
div[class*="menu-item has-submenu"]{
	width: 198px;
}

/* 针对标签栏文件的右键菜单中的阅读视图 */
div[class*="menu-item mod-checked"][data-section="pane"]{
	width: 199px;
}
1 个赞

那个 编辑区右键菜单 就是图片里红框圈起来的那个,是怎么实现的,我复制了你的css,但不是这个效果 :sob:

1 个赞

可以试试目前自用的css,如果没效果,可能就是样式被覆盖了,Ctrl+shift+i选择右键菜单元素查看哪个样式不生效

/* 右键菜单测试 */
.menu:not(.mod-no-icon):not(.MySnippets-statusbar-menu){
	display: flex;
	flex-wrap: wrap;	/* 允许元素换行 width: 173.6px;*/
	width: 205.6px;		/* 右键菜单宽度13.3854166% */
}
.menu-separator{		/* 菜单中的分隔符 */
  flex-basis: 100%;		/* 占据整行 */
  height: 0px;			/* 隐藏分隔符的高度 */
  overflow: hidden;		/* 隐藏分隔符可能的内容 */
  padding: 0px;			/* 移除可能的内边距 */
}

/* 基础功能按钮 */
div[data-section="edit"] .menu-item-title{
	display: none;			/* 隐藏基础编辑功能的文本 */
}

/* 其它功能按钮 */
.menu-item:not([data-section="edit"]) div[class="menu-item-title"]{
	display:block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	/* 功能文本溢出裁切 */
	width: 150px			/* 功能文本溢出裁切宽度 */
}

/* 针对侧边栏的右键菜单 */
div[class="menu-item mod-checked"] div[class="menu-item-title"],
div[class="menu-item mod-checked selected"] div[class="menu-item-title"]{
	width: 132.062px !important;
}

/* 针对标签栏文件的右键菜单中的子菜单 */
div[class*="menu-item has-submenu"]{
	width: 198px;
}

/* 针对标签栏文件的右键菜单中的阅读视图 */
div[class*="menu-item mod-checked"][data-section="pane"]{
	width: 199px;
}

也可能你的是新版本,Obsidian把几个重要的类给合并了,所以css无效,我目前用的是1.4.16版

谢谢回复,不过还是没效果,看来应该是版本问题了

可以换这个,功能更强大,一直在更新

可以换 #16 的那个插件

可以换 #16 那个插件

我记得这个插件只能加而不能删吧, 只有那个老插件可以删或者说隐藏右键菜单里的选项.

这个插件不支持修改右键菜单布局、增加子菜单。

2025年1月11日23:31:32更新,以上CSS不再使用,新CSS将通过命令图标的唯一class与伪选择器has准确定位编辑区的右键菜单,并更改编辑区布局。其余右键菜单可通过类似原理定位,这里不涉及。

/* 更改编辑区右键菜单中基础编辑功能按钮的布局 */
/* 首先,隐藏功能按钮的文本 */
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: 173.6px;*/
	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 */
	/* 编辑区右键菜单的原始宽度为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"]) .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%
}

新CSS优势:不再对无关右键菜单及其子菜单产生影响;编辑超链接时的“编辑链接”命令不再溢出行

1 个赞

此外,通过命令图标的唯一class与伪选择器has、兄弟选择器+,还可实现右键菜单的指定命令、分隔符隐藏,当然对于共享同一图标的命令依然无法准确定位。
以下为示例:

/* 命令隐藏系列 */
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;
}