右键编辑菜单优化

经验分享
1

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

无标题.png0
无标题.png01960×1137 293 KB

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

2 个赞
2 
/* 右键菜单 */
.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;
}
2 个赞
3

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

4

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

5

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

6

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

7

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

8

谢谢。Obsidian 版本是 1.5.12。

image

CSS 代码，点击展开 
.menu-item.is-disabled {display: none;}
.menu:not(.mod-no-icon):has(.menu-item:not([data-section])) {
  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);
  }
}
1 个赞
9

更新下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;
}