From c27081fd26eeffd41d08d69e5fd2b613306d99d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 21 May 2022 19:18:19 +0800 Subject: [PATCH] :wrench: :triangular_flag_on_post: :construction: Finished the components variable replace content. --- .../_common/components/reading-progress.scss | 12 +++---- .../{disqusjs.styl => disqusjs.scss} | 2 +- .../components/third-party/gitalk.scss | 2 +- .../components/third-party/gitter.scss | 7 ++++ .../components/third-party/gitter.styl | 7 ---- .../_common/components/third-party/math.scss | 2 +- .../components/third-party/related-posts.scss | 2 +- .../components/third-party/search.scss | 8 ++--- .../components/third-party/utterances.scss | 2 +- assets/css/_sitevars.scss | 35 ++++++++++++++++--- assets/css/_variables/Muse.scss | 2 +- assets/css/_variables/Pisces.scss | 2 +- assets/css/main.scss | 5 +-- exampleSite/config.yaml | 12 +++---- 14 files changed, 63 insertions(+), 37 deletions(-) rename assets/css/_common/components/third-party/{disqusjs.styl => disqusjs.scss} (93%) create mode 100644 assets/css/_common/components/third-party/gitter.scss delete mode 100644 assets/css/_common/components/third-party/gitter.styl diff --git a/assets/css/_common/components/reading-progress.scss b/assets/css/_common/components/reading-progress.scss index a2bcb13..791dcc9 100644 --- a/assets/css/_common/components/reading-progress.scss +++ b/assets/css/_common/components/reading-progress.scss @@ -1,24 +1,24 @@ -@if hexo-config('reading_progress.enable') { +@if $reading_progress_enable { .reading-progress-bar { --progress: 0; - background: convert(hexo-config('reading_progress.color')); - height: convert(hexo-config('reading_progress.height')); + background: convert($reading_progress_color); + height: convert($reading_progress_height); position: fixed; z-index: $zindex-5; - @if hexo-config('reading_progress.reversed') { + @if $reading_progress_reversed { width: calc(100% - var(--progress)); } @else { width: var(--progress); } - @if hexo-config('reading_progress.start_at') == 'right' { + @if $reading_progress_start == 'right' { right: 0; } @else { left: 0; } - @if hexo-config('reading_progress.position') == 'bottom' { + @if $reading_progress_position == 'bottom' { bottom: 0; } @else { top: 0; diff --git a/assets/css/_common/components/third-party/disqusjs.styl b/assets/css/_common/components/third-party/disqusjs.scss similarity index 93% rename from assets/css/_common/components/third-party/disqusjs.styl rename to assets/css/_common/components/third-party/disqusjs.scss index 1662456..2c38803 100644 --- a/assets/css/_common/components/third-party/disqusjs.styl +++ b/assets/css/_common/components/third-party/disqusjs.scss @@ -1,4 +1,4 @@ -if (hexo-config('disqusjs.enable') and hexo-config('darkmode')) { +@if $disqusjs_enable and $darkmode { @media (prefers-color-scheme:dark) { html #dsqjs a { color: var(--link-color) diff --git a/assets/css/_common/components/third-party/gitalk.scss b/assets/css/_common/components/third-party/gitalk.scss index 52f7934..735c9d5 100644 --- a/assets/css/_common/components/third-party/gitalk.scss +++ b/assets/css/_common/components/third-party/gitalk.scss @@ -1,4 +1,4 @@ -@if hexo-config('gitalk.enable') { +@if $gitalk_enable { .gt-header a, .gt-comments a, .gt-popup a { border-bottom: 0; } diff --git a/assets/css/_common/components/third-party/gitter.scss b/assets/css/_common/components/third-party/gitter.scss new file mode 100644 index 0000000..8a1986e --- /dev/null +++ b/assets/css/_common/components/third-party/gitter.scss @@ -0,0 +1,7 @@ +@if $gitter_enable { + .gitter-open-chat-button { + $alignment : sidebar-toggle-alignment(false); + #{$alignment[0]}: auto !important; + #{$alignment[1]}: 10px !important; + } +} diff --git a/assets/css/_common/components/third-party/gitter.styl b/assets/css/_common/components/third-party/gitter.styl deleted file mode 100644 index ced2490..0000000 --- a/assets/css/_common/components/third-party/gitter.styl +++ /dev/null @@ -1,7 +0,0 @@ -if (hexo-config('gitter.enable')) { - .gitter-open-chat-button { - $alignment = sidebar-toggle-alignment(false); - {$alignment[0]}: auto !important; - {$alignment[1]}: 10px !important; - } -} diff --git a/assets/css/_common/components/third-party/math.scss b/assets/css/_common/components/third-party/math.scss index 87bb78b..46883b2 100644 --- a/assets/css/_common/components/third-party/math.scss +++ b/assets/css/_common/components/third-party/math.scss @@ -1,4 +1,4 @@ -@if hexo-config('math.mathjax.enable') { +@if $math_mathjax_enable { mjx-container[jax='CHTML'][display='true'], .has-jax { overflow: auto hidden; } diff --git a/assets/css/_common/components/third-party/related-posts.scss b/assets/css/_common/components/third-party/related-posts.scss index 0c16dad..1ce37f1 100644 --- a/assets/css/_common/components/third-party/related-posts.scss +++ b/assets/css/_common/components/third-party/related-posts.scss @@ -1,4 +1,4 @@ -@if hexo-config('related_posts.enable') { +@if $related_posts_enable { .popular-posts-header { border-bottom: 1px solid $gainsboro; font-size: $font-size-large; diff --git a/assets/css/_common/components/third-party/search.scss b/assets/css/_common/components/third-party/search.scss index 4748079..ca5e9a5 100644 --- a/assets/css/_common/components/third-party/search.scss +++ b/assets/css/_common/components/third-party/search.scss @@ -1,4 +1,4 @@ -@if hexo-config('local_search.enable') or hexo-config('algolia_search.enable') { +@if $local_search_enable or $algolia_search_enable { .search-active { overflow: hidden; } @@ -56,7 +56,7 @@ .search-header { background: $gainsboro; - if (hexo-config('darkmode')) { + @if $darkmode { @media (prefers-color-scheme: dark) { background: $grey-dim; } @@ -108,7 +108,7 @@ } } -@if hexo-config('algolia_search.enable') { +@if $algolia_search_enable { .search-input-container { flex-grow: 1; @@ -149,7 +149,7 @@ } } -@if hexo-config('local_search.enable') { +@if $local_search_enable { .search-popup { .search-input-container { flex-grow: 1; diff --git a/assets/css/_common/components/third-party/utterances.scss b/assets/css/_common/components/third-party/utterances.scss index 7dd3c92..d324d55 100644 --- a/assets/css/_common/components/third-party/utterances.scss +++ b/assets/css/_common/components/third-party/utterances.scss @@ -1,4 +1,4 @@ -@if hexo-config('utterances.enable') { +@if $utterances_enable { .utterances { max-width: unset; } diff --git a/assets/css/_sitevars.scss b/assets/css/_sitevars.scss index 2395dee..7acadf9 100644 --- a/assets/css/_sitevars.scss +++ b/assets/css/_sitevars.scss @@ -4,8 +4,8 @@ // Base $scheme: {{ $P.scheme }}; $darkmode: {{ $P.darkmode }}; -$theme_color_light: {{ $P.themeColor.light }}; $theme_color_dark: {{ $P.themeColor.dark }}; +$theme_color_light: {{ $P.themeColor.light }}; // Font $font_enable: {{ $P.font.enable }}; @@ -15,15 +15,40 @@ $font_title_size: {{ default $P.font.title.size 1.375 }}; // Code & Code blocks // TODO find the configure variable -$highlight_light_background: #000; -$highlight_light_foreground: #222; $highlight_dark_background: #000; $highlight_dark_foreground: #222; +$highlight_light_background: #000; +$highlight_light_foreground: #222; // Sidebar -$sidebar_position: {{ $P.sidebar.position }}; -$sidebar_padding: {{ $P.sidebar.padding }}; $sidebar_offset: {{ $P.sidebar.offset }}; +$sidebar_padding: {{ $P.sidebar.padding }}; +$sidebar_position: {{ $P.sidebar.position }}; +$sidebar_width: {{ $P.sidebar.width }}; // Note $note_light_bg_offset: {{ $P.note.lightBgOffset }}; + +// Reading progress bar +$reading_progress_start: {{ $P.readingProgress.start }}; +$reading_progress_color: {{ $P.readingProgress.color }}; +$reading_progress_enable: {{ $P.readingProgress.enable }}; +$reading_progress_height: {{ $P.readingProgress.height }}; +$reading_progress_position: {{ $P.readingProgress.position }}; +$reading_progress_reversed: {{ $P.readingProgress.reversed }}; + +// Thirdparty +$math_mathjax_enable: {{ $P.math.mathjax.enable }}; +$related_posts_enable: {{ $P.relatedPosts.enable }}; + +// Search engine +$algolia_search_enable: {{ $P.algoliaSearch.enable }}; +$local_search_enable: {{ $P.localSearch.enable }}; + +// Online IM +$gitalk_enable: {{ $P.gitalk.enable }}; +$gitter_enable: {{ $P.gitter.enable }}; + +// Comment +$disqusjs_enable: {{ $P.disqusjs.enable }}; +$utterances_enable: {{ $P.utterances.enable }}; diff --git a/assets/css/_variables/Muse.scss b/assets/css/_variables/Muse.scss index e5d17e9..b0000af 100644 --- a/assets/css/_variables/Muse.scss +++ b/assets/css/_variables/Muse.scss @@ -1,7 +1,7 @@ // Variables of Muse scheme // ================================================== -$sidebar-width : if(type-of(hexo-config('sidebar.width')) == number, hexo-config('sidebar.width'), 320); +$sidebar-width : if(type-of($sidebar_width) == number, $sidebar_width, 320); $sidebar-desktop : $sidebar-width * 1px; $content-padding-bottom : 60px; diff --git a/assets/css/_variables/Pisces.scss b/assets/css/_variables/Pisces.scss index 4dd3672..83eecbc 100644 --- a/assets/css/_variables/Pisces.scss +++ b/assets/css/_variables/Pisces.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- $body-bg-color : #f5f7f9; -$sidebar-width : if(type-of(hexo-config('sidebar.width')) == number, hexo-config('sidebar.width'), 240); +$sidebar-width : if(type-of($sidebar_width) == number, $sidebar_width, 240); $sidebar-desktop : $sidebar-width * 1px; $content-wrap : calc(100% - #{$sidebar-width + $sidebar-offset}); diff --git a/assets/css/main.scss b/assets/css/main.scss index d2e8b94..8b618a3 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -7,7 +7,8 @@ // Variables Layer // -------------------------------------------------- @import '_variables/base'; -//@import '"_variables/" + theme.scheme'; +// TODO think how dynamic import the scheme variables +@import '_variables/Gemini'; //@import 'theme.injects.variable'; // Mixins Layer @@ -29,7 +30,7 @@ // @import '_common/outline'; // Components -// @import '_common/components'; +@import '_common/components'; // Schemes Layer diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 7e5b4aa..5ed87b9 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -128,7 +128,7 @@ params: # Manual define the sidebar width. If commented, will be default for: # Muse | Mist: 320 # Pisces | Gemini: 240 - #width: 300 + width: 300 # Sidebar Display (only for Muse | Mist), available values: # - post expand on posts automatically. Default. @@ -292,7 +292,7 @@ params: # Related popular posts # Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts - related_posts: + relatedPosts: enable: false title: # Custom header, leave empty to use the default one display_in_home: false @@ -389,10 +389,10 @@ params: scrollpercent: false # Reading progress bar - reading_progress: + readingProgress: enable: false # Available values: left | right - start_at: left + start: left # Available values: top | bottom position: top reversed: false @@ -739,14 +739,14 @@ params: # Algolia Search # For more information: https://www.algolia.com - algolia_search: + algoliaSearch: enable: false hits: per_page: 10 # Local Search # Dependencies: https://github.com/next-theme/hexo-generator-searchdb - local_search: + localSearch: enable: false # If auto, trigger search by changing input. # If manual, trigger search by pressing enter key or search button.