From e369458f092b9a63edca4f3b1808d284cf3cbb3c Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Wed, 16 Feb 2022 21:25:24 +0800 Subject: [PATCH] Draft: :sparkles: 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! --- CHANGELOG.md | 1 + assets/css/_core/_layout.scss | 3 +++ assets/css/_core/_media.scss | 25 +++++++++++++++++++------ assets/css/_page/_index.scss | 3 --- assets/css/_partial/_single/_toc.scss | 20 ++++++++++++++------ exampleSite/config.toml | 7 +++++++ layouts/_default/baseof.html | 3 ++- src/js/theme.js | 24 ++++++++++++------------ 8 files changed, 58 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9bbbfbba..c08a2e52 100644 --- 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 index 154f3a6b..79cdc5fd 100644 --- 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 index c937b0a9..1454f0c2 100644 --- 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 index 0d69d485..532b03a5 100644 --- 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 index 9cac0562..4095aa83 100644 --- 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 index 8b90434c..c6430c34 100644 --- 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 index 59b46e8d..c7f922fb 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -26,7 +26,8 @@
{{- partial "header.html" . -}}
-
+ {{- $pageStyle := (.Scratch.Get "params").pageStyle | default "normal" -}} +
{{- block "content" . }}{{ end -}}
diff --git a/src/js/theme.js b/src/js/theme.js index 3655d1f7..fd3a0cc8 100644 --- 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'); });