找了很久都没有看到能修改右键菜单布局、增加子菜单的插件,只能添加、隐藏或删除功能命令,就自个做了个CSS,尽力也只能做到按钮布局的变化。
obsidian版本是1.4.16,效果如图,主要是编辑区的右键菜单:
吐槽下Obsidian的右键菜单,明明右键菜单都不一样,class都是menu,也没个其它属性来区分(排序右键菜单除外),CSS选择起来都难。
找了很久都没有看到能修改右键菜单布局、增加子菜单的插件,只能添加、隐藏或删除功能命令,就自个做了个CSS,尽力也只能做到按钮布局的变化。
obsidian版本是1.4.16,效果如图,主要是编辑区的右键菜单:
/* 右键菜单 */
.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;
}
怎么删除右键菜单的命令啊
哈哈哈哈这应该是往后的设计方向了,最近几个大版本已经把大纲和文件列表的子节点class全改成一样的 每次更新都想死
没办法,类型 属性都不是唯一的
那以后只能自己开发插件了
虽早已不更新, 但一直还能用.
谢谢。Obsidian 版本是 1.6.7。
.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);
}
}
更新下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;
}
那个 编辑区右键菜单
就是图片里红框圈起来的那个,是怎么实现的,我复制了你的css,但不是这个效果
可以试试目前自用的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版
谢谢回复,不过还是没效果,看来应该是版本问题了