From f60826e6dad8298ac8336ebd804c160449989237 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Mon, 31 Oct 2022 16:38:04 +0800
Subject: [PATCH] website: adjust the layout.

---
 docs/awk.md                   | 24 +++++++++++++-----------
 scripts/style.css             | 29 +++++++++++++++--------------
 scripts/utils/getTocsTree.mjs | 27 +++++++++++++++++++--------
 3 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/docs/awk.md b/docs/awk.md
index 3ce2e3e..515963c 100644
--- a/docs/awk.md
+++ b/docs/awk.md
@@ -74,7 +74,7 @@ awk -F: '{print $1 "=" $6}' /etc/passwd
 
 查看: [Awk 变量](#awk-变量)
 
-### awk 程序示例
+### Awk 程序示例
 <!--rehype:wrap-class=row-span-2 col-span-2-->
 
 ```shell
@@ -153,6 +153,7 @@ Awk 变量
 `FILENAME`     | 文件名
 
 ### 表达式
+<!--rehype:wrap-class=row-span-2-->
 
 :- | :-
 :- | :-
@@ -173,6 +174,7 @@ Awk 变量
 `ORS=NR%5?",":"\n"`  | 连接记录
 
 ### 示例
+<!--rehype:wrap-class=row-span-2-->
 
 打印总和和平均值
 
@@ -213,6 +215,16 @@ awk 'BEGIN {
         print RLENGTH }'
 ```
 
+### 仅限 GNU awk
+
+:- | :-
+:- | :-
+`ENVIRON`     | 环境变量
+`IGNORECASE`  | 忽略大小写
+`CONVFMT`     | 转换格式
+`ERRNO`       | 系统错误
+`FIELDWIDTHS` | 固定宽度字段
+
 ### 环境变量
 
 :- | :-
@@ -226,16 +238,6 @@ awk 'BEGIN {
 `SUBSEP`  | 多维数组分隔符 _(default "\034")_
 `ARGIND`  | 参数索引
 
-### 仅限 GNU awk
-
-:- | :-
-:- | :-
-`ENVIRON`     | 环境变量
-`IGNORECASE`  | 忽略大小写
-`CONVFMT`     | 转换格式
-`ERRNO`       | 系统错误
-`FIELDWIDTHS` | 固定宽度字段
-
 ### 定义变量
 
 ```shell
diff --git a/scripts/style.css b/scripts/style.css
index eb45ddc..5ce7340 100644
--- a/scripts/style.css
+++ b/scripts/style.css
@@ -630,6 +630,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 
 .wrap.h3body-exist > .h3wrap-body {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .wrap-header.h3wrap {
@@ -658,7 +660,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 }
 
 .wrap-header.h3wrap > .wrap-body p,
-.wrap-header.h4wrap > .wrap-body p {
+.h3wrap-body p {
   margin: 0px;
   width: 100%;
   padding-left: 1rem;
@@ -681,7 +683,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   border-radius: 0.5rem 0.5rem 0 0;
 }
 
-.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child {
+.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child,
+.h3wrap-body p:not(:first-child):last-child {
   margin-top: auto;
   border-radius: 0 0 0.5rem 0.5rem;
 }
@@ -694,7 +697,9 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   flex-direction: column;
 }
 
-.h4wrap > h4 {
+.h3wrap-body > h4,
+.h3wrap-body > h5,
+.h3wrap-body > h6 {
   border-color: transparent;
   background-color: var(--color-neutral-muted);
   color: var(--color-fg-default);
@@ -708,12 +713,12 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   text-align: center;
 }
 
-.h4wrap > .wrap-body ul,
-.h4wrap > .wrap-body ol,
-.h4wrap > .wrap-body dl,
-.h3wrap > .wrap-body ul,
-.h3wrap > .wrap-body ol,
-.h3wrap > .wrap-body dl {
+.h3wrap .wrap-body > ul,
+.h3wrap .wrap-body > ol,
+.h3wrap .wrap-body > dl,
+.h3wrap-body > ul,
+.h3wrap-body > ol,
+.h3wrap-body > dl {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: grid;
@@ -721,10 +726,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.h4wrap > .wrap-body ul + hr {
-  margin-bottom: 0;
-}
-
 .h3wrap > .wrap-body ul:not(:last-child),
 .h3wrap > .wrap-body ol,
 .h3wrap > .wrap-body dl {
@@ -850,7 +851,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
 }
 
-.h2wrap-body > .wrap .wrap-body > *:last-child {
+.h3wrap-body > *:last-child {
   border-radius: 0 0 0.5rem 0.5rem;
 }
 
diff --git a/scripts/utils/getTocsTree.mjs b/scripts/utils/getTocsTree.mjs
index 8311f67..cdeec31 100644
--- a/scripts/utils/getTocsTree.mjs
+++ b/scripts/utils/getTocsTree.mjs
@@ -93,7 +93,7 @@ export function getTocsTree(arr = [], result = []) {
       const wrapClass = toc.properties['wrap-class'];
       if (wrapClass) wrapCls.push(wrapClass);
       delete toc.properties['wrap-class'];
-      const panle = {
+      let panle = {
         type: 'element',
         tagName: 'div',
         properties: { class: wrapCls, style: wrapStyle },
@@ -114,19 +114,30 @@ export function getTocsTree(arr = [], result = []) {
           },
         ],
       };
+      if (titleNum(toc.tagName) > 3) {
+        panle = [toc, ...header];
+      }
       if (resultChilds.length > 0) {
         const bodyStyle = toc.properties['body-style'];
         delete toc.properties['body-style'];
         const bodyClass = toc.properties['body-class'];
         delete toc.properties['body-class'];
-        panle.children = panle.children.concat({
-          type: 'element',
-          tagName: 'div',
-          properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
-          children: [...resultChilds],
-        });
+        if (Array.isArray(panle)) {
+          panle = panle.concat(resultChilds);
+        } else if (panle.children) {
+          panle.children = panle.children.concat({
+            type: 'element',
+            tagName: 'div',
+            properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
+            children: [...resultChilds],
+          });
+        }
+      }
+      if (Array.isArray(panle)) {
+        result = result.concat(panle);
+      } else {
+        result.push(panle);
       }
-      result.push(panle);
     }
 
     n++;