Draft:

✨ Feat: add pageStyle option (#62) TODO: refactor toc logic (#65) > Tip: This commit needs to be improved and to be tested. Please don't update to it!
hugo-fixit · Feb 17, 2022 · e369458 · e369458
1 parent 231cfc3
commit e369458
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file.
 
 - :tada: Feat: add Artalk comment support ([#54](https://github.com/Lruihao/FixIt/issues/54))
 - :sparkles: Style: add media style for print view ([#61](https://github.com/Lruihao/FixIt/issues/61))
+- :sparkles: Feat: add pageStyle option ([#62](https://github.com/Lruihao/FixIt/issues/62))
 - :sparkles: Feat: update watermark 1.0.3-RC (fontFamily support)
 - :pencil2: Style: fix typo discription should be: description ([#60](https://github.com/Lruihao/FixIt/issues/60))
 - :fire: Feat: remove shortcode cardlink

diff --git a/assets/css/_core/_layout.scss b/assets/css/_core/_layout.scss
@@ -9,6 +9,9 @@
     flex: 1 0 auto;
 
     .container {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: center; 
       padding: 0 1rem;
     }
   }

diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -1,12 +1,26 @@
+@media only screen and (min-width: 1441px) {
+  .page {
+    width: 66%;
+
+    [page-style=wide] & {
+      width: 70%;
+    }
+  }
+}
+
 @media only screen and (max-width: 1440px) {
   .page {
-    width: 56%;
+    width: 60%;
+
+    [page-style=wide] & {
+      width: 66%;
+    }
   }
 }
 
 @media only screen and (max-width: 1200px) {
   .page {
-    width: 52%;
+    width: 56%!important;
   }
 
   #header-desktop .header-wrapper {
@@ -28,7 +42,7 @@
   }
 
   .page {
-    width: 80%;
+    width: 80%!important;
   }
 
   #header-desktop .header-wrapper {
@@ -50,7 +64,7 @@
   }
 
   .page {
-    width: 100%;
+    width: 100%!important;
 
     [header-mobile] & {
       padding-top: $header-height;
@@ -86,11 +100,10 @@
   @page {
     size: A4 portrait;
     margin: 1.27cm;
-    page-break-after: auto;
   }
 
   .page {
-    width: 100%;
+    width: 100%!important;
     padding-top: 0!important;
 
     .single-title,

diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
@@ -1,8 +1,5 @@
 .page {
   position: relative;
-  max-width: 800px;
-  width: 60%;
-  margin: 0 auto;
 
   [header-desktop] & {
     padding-top: $header-height;

diff --git a/assets/css/_partial/_single/_toc.scss b/assets/css/_partial/_single/_toc.scss
@@ -49,19 +49,27 @@
 
 #toc-auto {
   display: block;
-  position: absolute;
-  width: $MAX_LENGTH;
-  max-width: 0;
-  padding: 0 .8rem;
+  // position: absolute;
+  // width: $MAX_LENGTH;
+  // max-width: 0;
+  width: 15%; // TODO
+  padding-left: .8rem;
+  padding-right: .8rem;
+  margin-left: 1rem;
   border-left: 4px solid $global-border-color;
   @include overflow-wrap(break-word);
   box-sizing: border-box;
-  top: 10rem;
+  // top: 10rem;
   left: 0;
   visibility: hidden;
 
+  [header-desktop] & {
+    margin-top: $header-height + 5rem;
+  }
+
   [header-desktop=normal] & {
-    top: 5rem;
+    // top: 5rem;
+    margin-top: 5rem;
   }
 
   @include blur;

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -13,6 +13,10 @@ themesDir = "../.."
 # 网站标题
 title = "FixIt"
 
+# Ignore errors
+# 忽略错误
+ignoreErrors = ["error-remote-getjson"]
+
 # whether to use robots.txt
 # 是否使用 robots.txt
 enableRobotsTXT = true
@@ -610,6 +614,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/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -26,7 +26,8 @@
     <div class="wrapper">
       {{- partial "header.html" . -}}
       <main class="main">
-        <div class="container">
+        {{- $pageStyle := (.Scratch.Get "params").pageStyle | default "normal" -}}
+        <div class="container" page-style="{{ $pageStyle }}">
           {{- block "content" . }}{{ end -}}
         </div>
       </main>

diff --git a/src/js/theme.js b/src/js/theme.js
@@ -415,8 +415,8 @@ class Theme {
       const $toc = document.getElementById('toc-auto');
       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.left = `${rect.left + rect.width + 20}px`;
+      // $toc.style.maxWidth = `${$page.getBoundingClientRect().left - 20}px`;
       $toc.style.visibility = 'visible';
       const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
       const $tocLiElements = $tocCore.getElementsByTagName('li');
@@ -430,16 +430,16 @@ class Theme {
         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`;
-        } else if (this.newScrollTop > maxScrollTop) {
-          $toc.style.position = 'absolute';
-          $toc.style.top = `${maxTocTop}px`;
-        } else {
-          $toc.style.position = 'fixed';
-          $toc.style.top = `${TOP_SPACING}px`;
-        }
+        // if (this.newScrollTop < minScrollTop) {
+        //   $toc.style.position = 'absolute';
+        //   $toc.style.top = `${minTocTop}px`;
+        // } else if (this.newScrollTop > maxScrollTop) {
+        //   $toc.style.position = 'absolute';
+        //   $toc.style.top = `${maxTocTop}px`;
+        // } else {
+        //   $toc.style.position = 'fixed';
+        //   $toc.style.top = `${TOP_SPACING}px`;
+        // }
 
         this.util.forEach($tocLinkElements, $tocLink => { $tocLink.classList.remove('active'); });
         this.util.forEach($tocLiElements, $tocLi => { $tocLi.classList.remove('has-active'); });