目录

注意：

此页为于sgtz的个人站内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

这是什么？

本组件是对The Backrooms中文维基旧站规页面中使用的目录样式进行修改而成的。

如何使用

你只需要在需要的页面中引入如下代码：

[[include :sgtz:component:toc
|height={$height}
|width={$width}
]]

默认的，建议的输入高度为220，而宽度为180，但仍可以键入不同值来改变样式。

源代码

组件的源代码如下（默认样式）：

#toc {
    position: fixed;
    z-index: 20;
    bottom: 1em;
    right: 1em;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: none;
    padding: 0.5rem;
    opacity: 0.3;
    animation-name: toc-initial-fade;
    animation-duration: 2s;
    transition: opacity 0.3s ease-in-out;
    width: {$width}px
}
#toc-action-bar {
    display: none;
}
#toc a {
   font-size: 0.8em;
}
#toc-list {
    overflow: auto;
    max-height: {$height}px;
}
#toc:hover {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
 
@media only screen and (max-width: 768px) {
   #toc {
      position: fixed;
      bottom: 0.5em;
      right: 0.5em;
      opacity: 1;
      animation: none;
   }
 
   #toc-action-bar {
      display: block;
   }
}
 
@keyframes toc-initial-fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}