右键编辑菜单优化

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


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

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

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

谢谢。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);
  }
}
2 个赞

更新下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 个赞