diff options
| author | Linlin Yan <yanlinlin82@gmail.com> | 2022-04-04 20:38:52 +0300 |
|---|---|---|
| committer | Linlin Yan <yanlinlin82@gmail.com> | 2022-04-04 20:46:10 +0300 |
| commit | d99321e01fb0a900efd64034376ee9c320e19710 (patch) | |
| tree | eb88c13683bfcfaac0a374815f5276105bc0129f | |
| parent | f1c5331cd286ee95feebd684d57782f8820b0641 (diff) | |
Improve TOC.
| -rw-r--r-- | layouts/_default/baseof.html | 15 | ||||
| -rw-r--r-- | layouts/_default/single.html | 55 | ||||
| -rw-r--r-- | layouts/partials/toc.html | 44 | ||||
| -rw-r--r-- | static/css/main.css | 62 |
4 files changed, 81 insertions, 95 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6af1f0e..0faa1b7 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,12 +3,12 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - {{ partial "html-meta.html" . -}} +{{ partial "html-meta.html" . -}} <title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ .Site.Title }}</title> <link rel="stylesheet" type="text/css" href="{{ "/css/main.css" | relURL }}"> - {{ with .Site.Params.favicon -}} +{{ with .Site.Params.favicon -}} <link rel="shortcut icon" href="{{ . }}" type="image/x-icon"> - {{ end -}} +{{ end -}} </head> <body> <header> @@ -28,11 +28,14 @@ <a href="{{ .URL }}">{{ .Name }}</a> {{- end -}} </nav> + {{ if .Site.Params.EnableSearch -}} + <div class="search"> + {{ partial "search.html" . }} + </div> + {{ end -}} </header> <main> - <article> - {{ block "main" . }}{{- end }} - </article> + {{ block "main" . }}{{- end }} </main> <footer> <div> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 855237b..851744d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,33 +1,36 @@ {{ define "main" -}} -<div class="title"> - <h1>{{ .Title }}</h1> - {{ with .Params.Subtitle -}} - <h2>{{ . }}</h2> +<article> + <div class="title"> + <h1>{{ .Title }}</h1> + {{ with .Params.Subtitle -}} + <h2>{{ . }}</h2> + {{ end -}} + </div> + {{ if .Date -}} + <div class="meta">{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02 15:04") }}</div> {{ end -}} -</div> -{{ if .Site.Params.EnableSearch -}} -<div class="search"> -{{ partial "search.html" . }} -</div> -{{ end -}} -{{ if .Date -}} -<div class="meta">{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02 15:04") }}</div> -{{ end -}} -{{ $taxo := "tags" -}} -{{ if .Param $taxo -}} -<div class="meta"> - {{ range .Param $taxo -}} + {{ $taxo := "tags" -}} + {{ if .Param $taxo -}} + <div class="meta"> + {{ range .Param $taxo -}} {{ $name := . -}} {{ with $.Site.GetPage (printf "/%s/%s" $taxo ($name | urlize)) -}} - <span><a href="{{ .Permalink }}">#{{ $name }}</a></span> + <span><a href="{{ .Permalink }}">#{{ $name }}</a></span> {{ end -}} + {{ end -}} + </div> {{ end -}} -</div> -{{ end -}} -<div class="content"> - {{ .Content -}} -</div> -<div class="toc"> -{{ partial "toc.html" . }} -</div> + <div class="artical-body"> + {{ if ne .TableOfContents "<nav id=\"TableOfContents\"></nav>" }} + {{ .TableOfContents }} + <div class="content-with-toc"> + {{ .Content -}} + </div> + {{ else }} + <div class="content"> + {{ .Content -}} + </div> + {{ end }} + </div> +</article> {{ end -}} diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html deleted file mode 100644 index 7b4ac78..0000000 --- a/layouts/partials/toc.html +++ /dev/null @@ -1,44 +0,0 @@ -<!-- toc.html --> -<!-- ignore empty links with + --> -{{ $headers := findRE "<h[1-4].*?>(.|\n])+?</h[1-4]>" .Content }} -<!-- at least one header to link to --> -{{ if ge (len $headers) 1 }} -{{ $h1_n := len (findRE "(.|\n])+?" .Content) }} -{{ $re := (cond (eq $h1_n 0) "<h[2-4]" "<h[1-4]") }} -{{ $renum := (cond (eq $h1_n 0) "[2-4]" "[1-4]") }} - -<!--Scrollspy--> -<div class="toc"> - - <div class="page-header"><strong>目录</strong></div> - - <div id="page-scrollspy" class="toc-nav"> - - {{ range $headers }} - {{ $header := . }} - {{ range first 1 (findRE $re $header 1) }} - {{ range findRE $renum . 1 }} - {{ $next_heading := (cond (eq $h1_n 0) (sub (int .) 1 ) (int . ) ) }} - {{ range seq $next_heading }} - <ul class="nav"> - {{end}} - {{ $anchorId := (replaceRE ".* id=\"(.*?)\".*" "$1" $header ) }} - <li class="nav-item"> - <a class="nav-link text-left" href="#{{ $anchorId }}"> - {{ $header | plainify | htmlUnescape }} - </a> - </li> - <!-- close list --> - {{ range seq $next_heading }} - </ul> - {{ end }} - {{ end }} - {{ end }} - {{ end }} - - </div> - -</div> -<!--Scrollspy--> - -{{ end }}
\ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index cc1aba7..2c1dd88 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,9 +1,8 @@ body { - margin: 16px auto; - max-width: 677px; - padding: 0 10px; + margin: 0 auto; + max-width: 960px; + padding: 10px; color: #333; - line-height: 1.6 } h1 { @@ -73,7 +72,7 @@ a:visited { } a:hover { - color: #f00 + color: #f80; } header a, @@ -93,7 +92,7 @@ h5 a:visited, h6 a, h6 a:visited { text-decoration: none; - color: #333 + color: #333; } header a:hover, @@ -108,12 +107,12 @@ h6 a:hover { color: #f00 } -nav { +header nav { padding: 10px 0; text-align: right } -nav a { +header nav a { padding-left: 15px } @@ -189,6 +188,41 @@ svg:hover.permalink { margin: 10px 0 } +nav#TableOfContents { + float: right; + width: 200px; + overflow: auto; + margin: 0; + padding: 0 10px; + vertical-align: top; +} +nav#TableOfContents:before { + content: 'Content'; + font-weight: bold; +} +nav#TableOfContents:lang(*-Hans)::before { + content: '目录'; + font-weight: bold; +} +nav#TableOfContents ul { + margin: 0; + padding-inline-start: 24px; +} +.content-with-toc { + width: calc(100% - 220px); + margin: 0; +} + +@media (max-width:600px) { + nav#TableOfContents { + float: none; + width: 100%; + } + .content-with-toc { + width: 100%; + } +} + .title h1, .title h2 { padding: 0 @@ -241,14 +275,4 @@ svg:hover.permalink { top: 1px; width: 300px; bottom: 100px -} - -.toc { - position: fixed; - right: 50px; - max-width: 255px; - overflow: auto; - top: 120px; - width: 220px; - bottom: 90px -} +}
\ No newline at end of file |