♻️ Refactor: main layout and add toc.position option support (#65)

2026-08-24 15:28:57 +00:00 · 2022-02-18 12:53:26 +08:00
parent 14168640f0
commit 0bf30a50d9
12 changed files with 62 additions and 56 deletions
@@ -8,20 +8,20 @@
  main {
    flex: 1 0 auto;

-    .container,
-    .container-reverse {
+    aside:first-child {
+      order: 2;
+    }
+
+    &.container {
      display: flex;
      align-items: flex-start;
+      justify-content: center;
      padding: 0 1rem;
    }

-    .container {
-      justify-content: center;
-    }
-
-    .container-reverse {
+    &.container-reverse {
+      @extend .container;
      flex-direction: row-reverse;
-      justify-content: flex-start;
    }
  }
 }
@@ -7,7 +7,7 @@
    }
  }
  
-  #toc-auto {
+  aside {
    width: 20%;

    [page-style=wide] & {
@@ -25,7 +25,7 @@
    }
  }

-  #toc-auto {
+  aside {
    width: 22%;

    [page-style=wide] & {
@@ -43,7 +43,7 @@
    }
  }

-  #toc-auto {
+  aside {
    width: 24%;

    [page-style=wide] & {
@@ -61,8 +61,8 @@
 }

@media only screen and (max-width: 960px) {
-  #toc-auto {
-    display: none;
+  aside {
+    display: none!important;
  }

  #toc-static {
@@ -94,14 +94,6 @@
  .page {
    width: 100%!important;

-    [header-mobile] & {
-      padding-top: $header-height;
-    }
-
-    [header-mobile=normal] & {
-      padding-top: 0;
-    }
-
    .content {
      [id] {
        [header-mobile=normal] & {
@@ -150,6 +142,7 @@
    }
  }

+  // TODO add common class for all elements
  header,
  footer .footer-line:not(.powered):not(.copyright),
  #toc-auto,
@@ -50,7 +50,7 @@
 #toc-auto {
  display: block;
  position: sticky;
-  top: $header-height + 1rem;
+  top: $header-height + 1rem; // TODO calculate top
  padding-left: 1rem;
  padding-right: 1rem;
  @include overflow-wrap(break-word);
@@ -614,8 +614,8 @@ enableEmoji = true
    # whether to show the full text content in RSS
    # 是否在 RSS 中显示全文内容
    rssFullText = false
-    # Page style ("normal", "wide")
-    # 页面样式 ("normal", "wide")
+    # Page style ("normal", "wide", ...) since v0.2.13
+    # 页面样式 ("normal", "wide", ...) since v0.2.13
    pageStyle = "wide"
    # Table of the contents config
    # 目录配置
@@ -628,7 +628,10 @@ enableEmoji = true
      keepStatic = false
      # whether to make the table of the contents in the sidebar automatically collapsed
      # 是否使侧边目录自动折叠展开
-      auto = false
+      auto = true
+      # position of TOC ("left", "right") since v0.2.13
+      # 目录位置 ("left", "right") since v0.2.13
+      position = "right"
    # Code config
    # 代码配置
    [params.page.code]
@@ -867,7 +870,7 @@ enableEmoji = true
    opacity = 0.02
    # parent of watermark's container
    # 水印父节点
-    appendTo = '.wrapper>.main'
+    appendTo = '.wrapper>main'
    # watermark's width. unit: px
    # 单水印宽度 单位：px
    width = 150
@@ -424,6 +424,8 @@ Please open the code block below to view the complete sample configuration :(far
    linkToMarkdown = true
    # {{< version 0.2.4 >}} whether to show the full text content in RSS
    rssFullText = false
+    # {{< version 0.2.13 >}} Page style ("normal", "wide", ...)
+    pageStyle = "normal"
    # {{< version 0.2.0 >}} Table of the contents config
    [params.page.toc]
      # whether to enable the table of the contents
@@ -432,6 +434,8 @@ Please open the code block below to view the complete sample configuration :(far
      keepStatic = true
      # whether to make the table of the contents in the sidebar automatically collapsed
      auto = true
+      # {{< version 0.2.13 >}} position of TOC ("left", "right")
+      position = "right"
    # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas (https://katex.org)
    [params.page.math]
      enable = true
@@ -619,7 +623,7 @@ Please open the code block below to view the complete sample configuration :(far
    # watermark's transparency
    opacity = 0.1
    # parent of watermark's container
-    appendTo = '.wrapper>.main'
+    appendTo = '.wrapper>main'
    # watermark's width. unit: px
    width = 150
    # watermark's height. unit: px
@@ -435,6 +435,8 @@ hugo
    linkToMarkdown = true
    # {{< version 0.2.4 >}} 是否在 RSS 中显示全文内容
    rssFullText = false
+    # {{< version 0.2.13 >}} 页面样式 ("normal", "wide", ...)
+    pageStyle = "normal"
    # {{< version 0.2.0 >}} 目录配置
    [params.page.toc]
      # 是否使用目录
@@ -443,6 +445,8 @@ hugo
      keepStatic = true
      # 是否使侧边目录自动折叠展开
      auto = true
+      # {{< version 0.2.13 >}} 目录位置 ("left", "right")
+      position = "right"
    # {{< version 0.2.0 >}} 代码配置
    [params.page.code]
      # 是否显示代码块的复制按钮
@@ -630,7 +634,7 @@ hugo
    # 水印透明度
    opacity = 0.1
    # 水印父节点
-    appendTo = '.wrapper>.main'
+    appendTo = '.wrapper>main'
    # 单水印宽度 单位：px
    width = 150
    # 单水印高度 单位：px
@@ -25,11 +25,9 @@
    {{- /* Body wrapper */ -}}
    <div class="wrapper">
      {{- partial "header.html" . -}}
-      <main class="main">
-        {{- $pageStyle := (.Scratch.Get "params").pageStyle | default "normal" -}}
-        <div class="container" page-style="{{ $pageStyle }}">
-          {{- block "content" . }}{{ end -}}
-        </div>
+      {{- $toc := .Scratch.Get "toc" -}}
+      <main class="container{{ if (eq $toc.enable true) | and (eq $toc.position `left`) }}-reverse{{ end }}" page-style="{{ (.Scratch.Get `params`).pageStyle | default `normal` }}">
+        {{- block "content" . }}{{ end -}}
      </main>
      {{- partial "footer.html" . -}}
    </div>
@@ -11,6 +11,12 @@
 {{- end -}}

 {{- $params := .Params | merge .Site.Params.page -}}
+{{- $toc := $params.toc -}}
+{{- if eq $toc true -}}
+  {{- $toc = .Site.Params.page.toc | default dict -}}
+{{- else if eq $toc false -}}
+  {{- $toc = dict "enable" false -}}
+{{- end -}}

 {{- if eq hugo.Environment "production" -}}
  {{- $cdn := .Site.Params.cdn -}}
@@ -36,6 +42,7 @@
 {{- end -}}

 {{- .Scratch.Set "params" $params -}}
+{{- .Scratch.Set "toc" $toc -}}
 {{- .Scratch.Set "this" dict -}}

 {{- partial "plugin/compatibility.html" . -}}
@@ -2,22 +2,20 @@

 {{- define "content" -}}
  {{- $params := .Scratch.Get "params" -}}
+  {{- $toc := .Scratch.Get "toc" -}}

-  {{- $toc := $params.toc -}}
-  {{- if eq $toc true -}}
-    {{- $toc = .Site.Params.page.toc | default dict -}}
-  {{- else if eq $toc false -}}
-    {{- $toc = dict "enable" false -}}
-  {{- end -}}
-
-  {{- /* Auto TOC */ -}}
-  {{- $tocEmpty := eq .TableOfContents `<nav id="TableOfContents"></nav>` -}}
-  {{- if (ne $toc.enable false) | and (ne $tocEmpty true) -}}
-    <div class="toc" id="toc-auto">
+  <aside class="toc" id="toc-auto">
+    {{- /* Auto TOC */ -}}
+    {{- $tocEmpty := eq .TableOfContents `<nav id="TableOfContents"></nav>` -}}
+    {{- if (ne $toc.enable false) | and (ne $tocEmpty true) -}}
      <h2 class="toc-title">{{ T "contents" }}</h2>
      <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}" id="toc-content-auto"></div>
-    </div>
-  {{- end -}}
+    {{- end -}}
+  </aside>
+
+  <aside class="aside-custom">
+    <!-- put aside for later use -->
+  </aside>

  <article class="page single">
    {{- /* Title */ -}}
@@ -394,12 +394,12 @@ class Theme {
    }
  }

+  // TODO review
  initToc() {
    const $toc = document.getElementById('toc-auto');
    if ($toc === null){
      return;
    }
-    document.querySelector('.container').className = 'container-reverse';
    const $tocCore = document.getElementById('TableOfContents');
    if (document.getElementById('toc-static').getAttribute('kept') === 'true' || this.util.isTocStatic()) {
      const $tocContentStatic = document.getElementById('toc-content-static');
@@ -414,8 +414,8 @@ class Theme {
        $tocCore.parentElement.removeChild($tocCore);
        $tocContentAuto.appendChild($tocCore);
      }
-      const $page = document.getElementsByClassName('page')[0];
-      const rect = $page.getBoundingClientRect();
+      // const $page = document.getElementsByClassName('page')[0];
+      // const rect = $page.getBoundingClientRect();
      // $toc.style.left = `${rect.left + rect.width + 20}px`;
      // $toc.style.maxWidth = `${$page.getBoundingClientRect().left - 20}px`;
      $toc.style.visibility = 'visible';
@@ -428,9 +428,9 @@ class Theme {
      const minTocTop = $toc.offsetTop;
      const minScrollTop = minTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
      this._tocOnScroll = this._tocOnScroll || (() => {
-        const footerTop = document.getElementById('post-footer').offsetTop;
-        const maxTocTop = footerTop - $toc.getBoundingClientRect().height;
-        const maxScrollTop = maxTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
+        // const footerTop = document.getElementById('post-footer').offsetTop;
+        // const maxTocTop = footerTop - $toc.getBoundingClientRect().height;
+        // const maxScrollTop = maxTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
        // if (this.newScrollTop < minScrollTop) {
        //   $toc.style.position = 'absolute';
        //   $toc.style.top = `${minTocTop}px`;
@@ -695,7 +695,7 @@ class Theme {
  initWatermark() {
    this.config.watermark.enable && new Watermark({
      content: this.config.watermark.content || '<img class="fixit-icon" src="/svg/fixit.svg" alt="FixIt logo" /> FixIt Theme',
-      appendTo:this.config.watermark.appendTo || '.wrapper>.main',
+      appendTo: this.config.watermark.appendTo || '.wrapper>main',
      opacity: this.config.watermark.opacity,
      width: this.config.watermark.width,
      height: this.config.watermark.height,
@@ -762,7 +762,6 @@ class Theme {
        this._resizeTimeout = window.setTimeout(() => {
          this._resizeTimeout = null;
          for (let event of this.resizeEventSet) event();
-          // this.initToc(); // TODO delete
          this.initMermaid();
          this.initSearch();
        }, 100);