# 树状标签页
**URL:** https://meta.appinn.net/t/topic/27411
**Category:** 问题求助
**Tags:** chrome, edge
**Created:** [2021 年11 月 9 日 15:05 UTC](https://meta.appinn.net/t/topic/27411 "2021-11-09T15:05:11Z")
**Posts on this page:** 15
**Page:** 1
### 作者：  [@mico](https://meta.appinn.net/u/mico)
#### 发布日期： [2021 年11 月 9 日 15:05 UTC](https://meta.appinn.net/t/topic/27411/1 "2021-11-09T15:05:11Z")
感觉对 `树状标签页` 有需求：
- 可以看出标签页打开的层级关系，谁由谁引出来的，大体可以根据第一个标签页判断最初是为了做什么的
- 收起某些树枝，那样只占用一个标签页的位置
* * *
在 `firefox` 有体验过 `树状标签页` 这个拓展，还挺满意：
- 内嵌到浏览器侧边
- 每次仅展开一个 `“树枝”`
- 关闭一整个 `“树枝”`
在 `chrome / edge` 上使用 `forest`，有些不满意：
- 只能单个关闭
- 需要登录
---
### 作者：  [@yfzhe](https://meta.appinn.net/u/yfzhe)
#### 发布日期： [2021 年11 月 9 日 15:21 UTC](https://meta.appinn.net/t/topic/27411/2 "2021-11-09T15:21:07Z")
可以尝试一下 Vivaldi，有好用的标签组功能和窗口面板。
---
### 作者：  [@haitao](https://meta.appinn.net/u/haitao)
#### 发布日期： [2021 年11 月 9 日 16:10 UTC](https://meta.appinn.net/t/topic/27411/3 "2021-11-09T16:10:32Z")
vivaldi的两层标签，感觉不好用——操作非常不直观不自由。
虽然我是非常希望树型标签的。。。。
---
### 作者：  [@yfzhe](https://meta.appinn.net/u/yfzhe)
#### 发布日期： [2021 年11 月 9 日 16:24 UTC](https://meta.appinn.net/t/topic/27411/4 "2021-11-09T16:24:52Z")
Vivaldi 只是双层，确实比不上多层的树状结构。但是就使用体验来说我还是挺喜标签组功能欢的，现在日常也是使用 Vivaldi 也是大量使用标签组功能的。
具体哪里让你觉得不直观不自由呢？
---
### 作者：  [@haitao](https://meta.appinn.net/u/haitao)
#### 发布日期： [2021 年11 月 9 日 16:44 UTC](https://meta.appinn.net/t/topic/27411/5 "2021-11-09T16:44:22Z")
1、同一个网站下的页面都 自动挂在一个标签下的第二层；
2、我希望某些同为xx类型的网页能按类别 手工移动 挂在xx标签下——这个功能似乎 操作不好。
最好是三层：
浏览器网页分类标签
```auto
浏览器网页分类标签
├─视频
│ ├─网站1
│ │ ├─影视A
│ │ └─影视C
│ ├─网站2
│ │ ├─影视A
│ │ └─影视B
│ └─网站3
│ ├─影视B
│ ├─影视C
│ └─影视D
├─信息
│ ├─微博
│ │ ├─讨论1
│ │ ├─讨论2
│ │ └─讨论3
│ ├─知乎
│ │ ├─答案1
│ │ ├─答案2
│ │ ├─答案3
│ │ ├─文章1
│ │ └─文章2
│ ├─行业1网站
│ │ ├─网页1
│ │ └─网页2
│ ├─行业2网站
│ │ ├─网页1
│ │ ├─网页1
│ │ └─网页1
│ └─行业3网站
│ ├─网页1
│ ├─网页1
│ └─网页1
└─本人
├─公司项目
│ ├─项目1
│ ├─项目1
│ └─项目1
├─私活
│ ├─项目1
│ ├─项目1
│ └─项目1
└─业余爱好
├─网页1
├─网页1
└─网页1
```
---
### 作者：  [@yfzhe](https://meta.appinn.net/u/yfzhe)
#### 发布日期： [2021 年11 月 9 日 17:04 UTC](https://meta.appinn.net/t/topic/27411/6 "2021-11-09T17:04:42Z")
不确定第一条是说需求还说不满意的点。但反正这个行为是有个设置项在控制的。可以调整。
第二个这个已经是三级书签了，Vivaldi 本身就已经没法做到了。而且给站点所属的类型分类这个也有些困难，看 Vivaldi 目前的状态估计也没法实现。不过这个需求还挺有意思的，希望能看到有什么扩展可以满足这个。
---
### 作者：  [@haitao](https://meta.appinn.net/u/haitao)
#### 发布日期： [2021 年11 月 9 日 17:07 UTC](https://meta.appinn.net/t/topic/27411/7 "2021-11-09T17:07:22Z")
不满意的是 调整操作 基本不符合 treeview里的习惯，
1是基本做到了；但1、2都需要支持调整。
没有3层也无所谓，放弃第2层就行了；
类型其实就可以是一个空网页，实在不行就第2层的第一个网页。
---
### 作者：  [@lockheart](https://meta.appinn.net/u/lockheart)
#### 发布日期： [2021 年11 月 9 日 18:02 UTC](https://meta.appinn.net/t/topic/27411/8 "2021-11-09T18:02:44Z")
推荐 [Tabs Outliner](https://chrome.google.com/webstore/detail/tabs-outliner/eggkanocgddhmamlbiijnphhppkpkmkl) 和 [BrainTool](https://chrome.google.com/webstore/detail/braintool-beyond-bookmark/fialfmcgpibjgdoeodaondepigiiddio)
---
### 作者：  [@uyashenzi](https://meta.appinn.net/u/uyashenzi)
#### 发布日期： [2021 年11 月 10 日 01:34 UTC](https://meta.appinn.net/t/topic/27411/9 "2021-11-10T01:34:36Z")
edge我装了这个鸡肋的树状历史插件，几乎没打开过。
---
### 作者：  [@zzl221000](https://meta.appinn.net/u/zzl221000)
#### 发布日期： [2021 年11 月 11 日 02:15 UTC](https://meta.appinn.net/t/topic/27411/10 "2021-11-11T02:15:27Z")
> [@lockheart](#):
>
> 推荐 [Tabs Outliner](https://chrome.google.com/webstore/detail/tabs-outliner/eggkanocgddhmamlbiijnphhppkpkmkl)
这个和部分网页不兼容，导致整个浏览器很卡
---
### 作者：  [@lanrao](https://meta.appinn.net/u/lanrao)
#### 发布日期： [2021 年11 月 11 日 04:26 UTC](https://meta.appinn.net/t/topic/27411/11 "2021-11-11T04:26:04Z")
在使用一款名为 GraphiTabs的插件，层级从属关系明确，界面美观，思维导图的样式
但问题也不少，不能内嵌到浏览器侧边以及长期没有更新，让人怀疑制作团队已经放弃维护了…
---
### 作者：  [@yazii](https://meta.appinn.net/u/yazii)
#### 发布日期： [2021 年11 月 11 日 13:58 UTC](https://meta.appinn.net/t/topic/27411/12 "2021-11-11T13:58:41Z")
我对树状展示有较高的依赖。
现在在用edge浏览器，tab的部分在使用tree style tab这个扩展，可以关闭标签树，无限层级，有方便的搜索功能。
浏览历史在用自己搓的tree style history，楼上有朋友提及。必须说，通常有线性历史就够了，树状历史是有时需要找东西又记不清楚是什么的时候才用的。
就我个人使用感受，树状管理存在一个很大的问题：浏览器和扩展其实并不知道你在做什么，也不能准确猜测你做什么，一个标签页也可能完成过多个任务，浏览器给扩展的API和数据也是有限的，这导致的结果就是扩展无法直接为浏览网页的task自动分组、隐藏分组、保存分组、恢复分组。
也就是说，你必须一定程度改变自己的习惯，和浏览器及扩展相互协作，这才能提高效率——这个情况实际上是广泛存在的。
---
### 作者：  [@Niceb](https://meta.appinn.net/u/Niceb)
#### 发布日期： [2021 年11 月 12 日 02:28 UTC](https://meta.appinn.net/t/topic/27411/13 "2021-11-12T02:28:48Z")
想手撸一个，，， 不知道能不能腾得出来时间。。。
---
### 作者：  [@popcorn](https://meta.appinn.net/u/popcorn)
#### 发布日期： [2022 年10 月 14 日 01:09 UTC](https://meta.appinn.net/t/topic/27411/14 "2022-10-14T01:09:14Z")
树状层级标签页是强需求。
这两天把市面上的主流浏览器试遍了。
最好用的是firefox的tree style tab，还有Orion浏览器的原生设置，能够满足树状和嵌入页面两个需求。
其次chromium内核浏览器都支持的插件效果最好的是tabs outliner，还可以管理窗口设置，这是其它插件没有的功能，但是必须自己开一个窗口和无法调整页面外观不太满意，支持的快捷键也没有tst多。（有付费版本，我没购买，不了解这一方面）
Chrome市场也有tst插件，但只能附着在地址栏，无法固定住。
还是树状比较好用，单单只是垂直标签页我也觉得不如树状。
---
### 作者：  [@mico](https://meta.appinn.net/u/mico)
#### 发布日期： [2022 年10 月 14 日 12:54 UTC](https://meta.appinn.net/t/topic/27411/15 "2022-10-14T12:54:07Z")
哇，好久都没回应了，抱歉呀，各位；
尝试了论坛内一些办法，我最近半年的选择是 `firefox` + `sidebery` + `userchrome.css` 组合，达到了较为理想的效果；原来的 `树状标签页` 由于未知原因 ~~（忘了为啥了:joy:）~~ 没有继续使用。`chrome/edge` 也没有继续作为主力使用了 ~~（开源“迷信”以及没法使劲造）~~ ，所以原来的烦恼也暂时一并抛在脑后了。
其中，主要缘起于这里：
> [@Edge 的纵向标签页模式太赞了](https://meta.appinn.net/t/topic/23827/13):
>
> 前提 Firefox 设置 访问 about:config，开启 toolkit.legacyUserProfileCustomizations.stylesheets Sidebery 设置 Sidebery settings \> Help \> Preface value: [Sidebery] 在 Firefox 配置文件夹中新建 chrome 文件夹，并在文件夹中新建并修改 userchrome.css /\* Hide the tabs when Sidebery visible \*/ #main-window[titlepreface\*="Sidebery"] #TabsToolbar-customization-target { height: 0 !important; overflow: hidden; } /\* Make the application min-maximize-close buttons height match the address bar \*/ #main-window[titl…
> **效果以及usechrome.css，可能与论坛其他地方是重复内容，请有兴趣再展开**
>
> 顶栏收缩；侧边栏是鼠标靠近展开，然后可以自动收起；保证最大的页面面积。
>
> 
> 
>
> * * *
>
> ```css
> /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
> See the above repository for updates as well as full license text. */
>
> /* Show sidebar only when the cursor is over it */
> /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
>
> #sidebar-box{
> --uc-sidebar-width: 0px;
> --uc-sidebar-hover-width: 210px;
> --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
> position: relative;
> min-width: var(--uc-sidebar-width) !important;
> width: var(--uc-sidebar-width) !important;
> max-width: var(--uc-sidebar-width) !important;
> z-index:1;
> }
>
> #sidebar-box[positionend]{ direction: rtl }
> #sidebar-box[positionend] > *{ direction: ltr }
>
> #sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
> #sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }
>
> #main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }
>
> #sidebar-splitter{ display: none }
>
> #sidebar-header{ overflow: hidden; color: var(--chrome-color, inherit) !important}
>
> #sidebar{
> transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
> min-width: var(--uc-sidebar-width) !important;
> will-change: min-width;
> }
>
> #sidebar-box:hover > #sidebar{ min-width: var(--uc-sidebar-hover-width) !important; transition-delay: 0ms !important }
>
> .sidebar-panel{
> background-color: transparent !important;
> color: var(--newtab-text-primary-color) !important;
> }
>
> .sidebar-panel #search-box{
> -moz-appearance: none !important;
> background-color: rgba(249,249,250,0.1) !important;
> color: inherit !important;
> }
>
> /* Add sidebar divider and give it background */
>
> #sidebar,
> #sidebar-header{
> background-color: var(--toolbar-bgcolor) !important;
> border-inline: 1px solid rgb(80,80,80);
> border-inline-width: 0px 1px;
> }
>
> #sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
> #sidebar-box[positionend] > *{
> border-inline-width: 1px 0px;
> }
>
> /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
>
> #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{ inset-inline: auto 0px !important; }
> #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{ margin-inline: 0px !important; border-left-style: solid !important; }
>
> /* Source file https://github.com/mbnuqw/sidebery/discussions/406 */
> /* Hide the tabs when Sidebery visible */
> #main-window[titlepreface*="Sidebery"] #TabsToolbar-customization-target {
> height: 0 !important;
> overflow: hidden;
> }
>
> /* Make the application min-maximize-close buttons height match the address bar */
> #main-window[titlepreface*="Sidebery"] #TabsToolbar .titlebar-buttonbox-container {
> height: 40px;
> }
>
> /* Push up the address bar */
> #main-window[titlepreface*="Sidebery"] #nav-bar {
> margin-top: -41px;
> }
>
> /* Reduce width of address bar so app buttons have enought room to appear */
> #main-window[titlepreface*="Sidebery"] #nav-bar-customization-target {
> max-width: calc(100vw - 230px);
> }
>
> ```
>
> 仍然是有些小问题存在：
>
> 1. 非最大化的情况下，侧边栏无法触发展开
> 2. 非最大化的情况下，没有预留可以拖动窗口的地方
> 3. `Sidebery` 自带的页面休眠好像效果并不好？（个人觉得不满意，一般组合 `Auto Tab Discard` 使用）
如果大家有其他更好的想法，欢迎大家继续讨论。