[FEATURE] Add pageStyle option (#35)

* feat: Add pageStyle option - Add config to choose between normal or wide - Adjust theme.js for toc - Add documentation * fix: Delete unused code * fix: Mobile view adjustment * fix: fix mobile view
HEIGE-PCloud · May 1, 2021 · 3751b8b · 3751b8b
1 parent b1948d8
commit 3751b8b
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 8 deletions.
diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -28,7 +28,8 @@
   }
 
   .page {
-    width: 80%;
+    width: 80% !important;
+    margin-left: auto !important;
   }
 
   #header-desktop .header-wrapper {
@@ -50,7 +51,8 @@
   }
 
   .page {
-    width: 100%;
+    width: 100% !important;
+    margin-left: auto !important;
 
     [header-mobile] & {
       padding-top: $header-height;

diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
@@ -3,7 +3,11 @@
   max-width: initial;
   width: 60%;
   margin: 0 auto;
-
+  [pageStyle=wide] & {
+    margin-left: 10%;
+    margin-right: auto;
+    width: 70%;
+  }
   [header-desktop] & {
     padding-top: $header-height;
   }

diff --git a/assets/js/theme.min.js b/assets/js/theme.min.js
diff --git a/assets/js/theme.min.js.map b/assets/js/theme.min.js.map
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -753,6 +753,9 @@ enableEmoji = true
     # whether to show the full text content in RSS
     # 是否在 RSS 中显示全文内容
     rssFullText = false
+    # Page style ("normal", "wide")
+    # 页面样式 ("normal", "wide")
+    pageStyle = "wide"
     # Table of the contents config
     # 目录配置
     [params.page.toc]

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -426,6 +426,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.11 >}} page layout 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

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -429,6 +429,8 @@ hugo
     linkToMarkdown = true
     # {{< version 0.2.4 >}} 是否在 RSS 中显示全文内容
     rssFullText = false
+    # {{< version 0.2.11 >}} 页面样式 ("normal", "wide")
+    pageStyle = "normal"
     # {{< version 0.2.0 >}} 目录配置
     [params.page.toc]
       # 是否使用目录

diff --git a/exampleSite/content/posts/theme-documentation-content/index.en.md b/exampleSite/content/posts/theme-documentation-content/index.en.md
@@ -155,6 +155,7 @@ seo:
 * **fontawesome**: {{< version 0.2.0 >}} if `true`, the content will enable the [Font Awesome extended syntax](#fontawesome).
 * **linkToMarkdown**: if `true`, the footer of the content will be shown the link to the orignal Markdown file.
 * **rssFullText**: {{< version 0.2.4 >}} if `true`, the full text content will be shown in RSS.
+* **pageStyle**: {{< version 0.2.11 >}} adjust the page layout style, "normal" or "wide".
 
 * **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).

diff --git a/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-content/index.zh-cn.md
@@ -154,6 +154,7 @@ seo:
 * **fontawesome**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 [Font Awesome 扩展语法](#fontawesome).
 * **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接.
 * **rssFullText**: {{< version 0.2.4 >}} 如果设为 `true`, 在 RSS 中将会显示全文内容.
+* **pageStyle**: {{< version 0.2.11 >}} 调整页面样式，可选择"normal"或"wide".
 
 * **toc**: {{< version 0.2.9 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.toc` 部分相同.
 * **code**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.code` 部分相同.

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -18,6 +18,12 @@ <h2 class="toc-title">{{ T "contents" }}</h2>
         </div>
     {{- end -}}
 
+    {{- /* Page Style */ -}}
+    {{- if eq $params.pageStyle "wide" -}}
+    <script>document.body.setAttribute("pageStyle", "wide")</script>
+    {{- else -}}
+    <script>document.body.setAttribute("pageStyle", "normal")</script>
+    {{- end -}}
     <article class="page single">
         {{- /* Title */ -}}
         <h1 class="single-title animated flipInX">{{ .Title }}</h1>

diff --git a/src/js/theme.js b/src/js/theme.js
@@ -457,7 +457,7 @@ class Theme {
             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.maxWidth = `20%`;
             $toc.style.visibility = 'visible';
             const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
             const $tocLiElements = $tocCore.getElementsByTagName('li');