2

我正在做我第一个笨拙的步骤来建立一个博客（与 Hugo，通过 blogdown / R）并与我的浮动目录作斗争。经过长时间的反复试验，我已经能够设置它，但是，在使用移动设备时我无法隐藏目录。

该网站的样式是通过tachyons.io / css进行的，到目前为止，我认为我必须设置“浮动正确，而不是小”（fl-ns）（请参阅此处）。不幸的是，这无济于事，我不知道如何进行。

这是定义目录的代码：

    {{ if .Params.toc | default true}}
  <div class="fr-ns fr-nm" id="sidebar-wrapper">
    <div id="sidebar">      
      <ul class="nav nav-pills nav-stacked fr-ns fr-nm" style="list-style:none;">
         <!-- ignore empty links with + -->
        {{ $headers := findRE "<h[1-3].*?>(.|\n])+?</h[1-3]>" .Content }}
        <!-- at least one header to link to -->
        {{ $has_headers := ge (len $headers) 1 }}
        {{ if $has_headers }}
          {{ range $headers }}
            {{ $header := . }}
            {{ range first 1 (findRE "<h[1-3]" $header 1) }}
              {{ range findRE "[1-3]" . 1 }}
                {{ $head_level := (int .) }}
                {{ $base := ($.Page.File.LogicalName) }}
                {{ $anchorId := ($header | plainify | htmlEscape | urlize | safeURL) }}
                <li class="toc-h{{ $head_level }} no-underline"><a href="#{{ $anchorId }}">
                    {{ $header | plainify | htmlEscape }}
                </a></li>
              {{end}}
            {{end}}
          {{ end }}
        {{ end }}
      </ul>
    </div>
  </div>
{{end}}

这是 style.css 文件中的相关部分：

#sidebar-wrapper {
    max-width: 20px;
}

#sidebar {
    position: fixed; 
    top: 140px;
    /*background-color:gray;*/
}

@media (--breakpoint-not-small) {
  fr-ns {float: right; _display: inline; }
}

#sidebar > ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.nav-stacked>li>a {
    list-style-type:none;
    text-decoration:none;
    margin: 0px;
    color:black;
    text-align:left;
}



.toc-h1 {
    font-size: 100%;
    font-color:orange;
    text-decoration:none;
}

.toc-h2 {
  font-size: 90%;
  padding-left: 20px;
}

.toc-h3 {
  font-size: 90%;
  padding-left: 40px;
}

整个博客的代码在这里可见。

我知道这是一个长镜头，但如果有人有想法 - 非常感谢！

4

1 回答 1

0

想我明白了。屏幕小于 600px 时，将不会显示 ToC。

@media screen and (max-width: 600px) {
  #sidebar {
    display: none;
  }
}
于 2019-10-14T20:22:17.020 回答