From df3a7039889207cf65c21bfbb71ee8115058e307 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 1 Dec 2021 21:48:57 +0800 Subject: [PATCH 1/2] Refactor HTML structure --- _includes/disqus.html | 4 + _includes/panel.html | 59 --------- _includes/search-results.html | 8 -- _includes/toc.html | 10 ++ _includes/trending-tags.html | 14 +++ _includes/update-list.html | 16 +++ _layouts/default.html | 2 +- _layouts/page.html | 49 +++++--- _layouts/post.html | 217 ++++++++++++++-------------------- 9 files changed, 170 insertions(+), 209 deletions(-) delete mode 100644 _includes/panel.html create mode 100644 _includes/toc.html diff --git a/_includes/disqus.html b/_includes/disqus.html index 65af8b5..c4746de 100644 --- a/_includes/disqus.html +++ b/_includes/disqus.html @@ -2,6 +2,8 @@ The Disqus lazy loading. --> +{% if site.disqus.comments and page.comments %} +

Comments powered by Disqus. @@ -52,3 +54,5 @@ } + +{% endif %} diff --git a/_includes/panel.html b/_includes/panel.html deleted file mode 100644 index 98b859c..0000000 --- a/_includes/panel.html +++ /dev/null @@ -1,59 +0,0 @@ - - -{% include lang.html %} - -

- -
- - {% include update-list.html %} - - {% if update_list.size > 0 %} - -
- {{- site.data.locales[lang].panel.lastmod -}} -
    - - {% for item in update_list %} - {% assign index = item | split: "::" | last | plus: 0 %} - {% assign post = site.posts[index] %} - {% assign url = post.url | relative_url %} -
  • {{ post.title }}
    • - {% endfor %} - -
-
- - {% endif %} - - {% include trending-tags.html %} - - {% if trending_tags.size > 0 %} -
- {{- site.data.locales[lang].panel.trending_tags -}} -
- - {% for tag_name in trending_tags %} - {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %} - {{ tag_name }} - {% endfor %} - -
-
- {% endif %} -
- - {% if include.toc %} - - -
- - {{- site.data.locales[lang].panel.toc -}} - - -
- {% endif %} - -
diff --git a/_includes/search-results.html b/_includes/search-results.html index 166ed5f..d19e3bd 100644 --- a/_includes/search-results.html +++ b/_includes/search-results.html @@ -4,15 +4,7 @@
-

{{ site.data.locales[lang].panel.trending_tags }}

- {% include trending-tags.html %} - - {% for tag in trending_tags %} - {% capture url %}/tags/{{ tag | slugify | url_encode }}/{% endcapture %} - {{ tag | replace: '-', ' ' }} - {% endfor %} -
diff --git a/_includes/toc.html b/_includes/toc.html new file mode 100644 index 0000000..e9da07e --- /dev/null +++ b/_includes/toc.html @@ -0,0 +1,10 @@ +{% if site.toc and page.toc %} + + +
+

+ {{- site.data.locales[lang].panel.toc -}} +

+ +
+{% endif %} diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html index 05f9c84..a5ff0c0 100644 --- a/_includes/trending-tags.html +++ b/_includes/trending-tags.html @@ -34,3 +34,17 @@ {% endif %} {% endfor %} {% endfor %} + +{% if trending_tags.size > 0 %} +
+

{{- site.data.locales[lang].panel.trending_tags -}}

+
+ + {% for tag_name in trending_tags %} + {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %} + {{ tag_name }} + {% endfor %} + +
+
+{% endif %} diff --git a/_includes/update-list.html b/_includes/update-list.html index 8dbf984..4f4201b 100644 --- a/_includes/update-list.html +++ b/_includes/update-list.html @@ -22,3 +22,19 @@ {% for entry in all_list limit:MAX_SIZE %} {% assign update_list = update_list | push: entry %} {% endfor %} + +{% if update_list.size > 0 %} + +
+

{{- site.data.locales[lang].panel.lastmod -}}

+
    + {% for item in update_list %} + {% assign index = item | split: "::" | last | plus: 0 %} + {% assign post = site.posts[index] %} + {% assign url = post.url | relative_url %} +
  • {{ post.title }}
    • + {% endfor %} +
+
+ +{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html index a3c9104..4bcede5 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -30,7 +30,7 @@ layout: compress
- {% include refactor-content.html content=content %} + {{ content }} {% include footer.html %} diff --git a/_layouts/page.html b/_layouts/page.html index 7afb697..8298b4a 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -1,11 +1,14 @@ --- layout: default -# The page layout --- -
-
-
+{% include lang.html %} + +
+ + +
+
{% if page.dynamic_title %}

{% if page.collection == 'tabs' %} @@ -16,26 +19,40 @@ layout: default {% endif %}

- {{ content }} + {% include refactor-content.html content=content %}
{% else %} - {{ content }} + {% include refactor-content.html content=content %} {% endif %} -
-
+
+
- {% include panel.html %} + +
+ +
+ {% include update-list.html %} + {% include trending-tags.html %} +
+ + {% for _include in layout.pannel_includes %} + {% assign _include_path = _include | append: '.html' %} + {% include {{ _include_path }} %} + {% endfor %} +
-{% if site.disqus.comments and page.comments %} + +{% if layout.tail_includes %}
-
- - {% include disqus.html %} - -
-
+
+ {% for _include in layout.tail_includes %} + {% assign _include_path = _include | append: '.html' %} + {% include {{ _include_path }} %} + {% endfor %} +
+
{% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 961f0de..8e78eb9 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,143 +1,110 @@ --- -layout: default -# The posts' layout +layout: page +pannel_includes: + - toc +tail_includes: + - related-posts + - post-nav + - disqus --- {% include lang.html %} -
+

{{ page.title }}

-
+
+ +
+ + {{ page.author | default: site.social.name }} + + {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %} + {% include timeago.html date=page.date tooltip=true preposition=_preposition %} +
-
- -

{{ page.title }}

- -
- -
- - {{ page.author | default: site.social.name }} - - {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %} - {% include timeago.html date=page.date tooltip=true preposition=_preposition %} -
- -
- - {% if page.last_modified_at %} - - {{ site.data.locales[lang].post.updated }} - {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %} - - {% endif %} - - - {% include read-time.html content=content prompt=true %} - - - {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %} - - - - {{ site.data.locales[lang].post.pageview_measure }} - {% endif %} - -
- -
- -
- - {% if page.image.src %} - {{ page.image.alt | default: - {% endif %} - - {{ content }} - -
- -
- - - {% if page.categories.size > 0 %} - -
- - {% for category in page.categories %} - {{ category }} - {%- unless forloop.last -%}, {%- endunless -%} - {% endfor %} -
- {% endif %} - - - {% if page.tags.size > 0 %} -
- - {% for tag in page.tags %} - - {{- tag -}} - - {% endfor %} -
- {% endif %} - -
-
- {% if site.data.locales[lang].copyright.license.template %} - {% capture _replacement %} - - {{ site.data.locales[lang].copyright.license.name }} - - {% endcapture %} - {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} - {% endif %} -
- - {% include post-sharing.html %} - -
- -
- -
- - -
- - {% assign enable_toc = false %} - - {% if site.toc and page.toc %} - {% if content contains ' + + {% if page.last_modified_at %} + + {{ site.data.locales[lang].post.updated }} + {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %} + {% endif %} + + + {% include read-time.html content=content prompt=true %} + + + {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %} + + + + {{ site.data.locales[lang].post.pageview_measure }} + {% endif %} + +
+ +
+ +
+ + {% if page.image.src %} + {{ page.image.alt | default: {% endif %} - {% include panel.html toc=enable_toc %} + {{ content }} -
+
-
-
-
+
- {% include related-posts.html %} + + {% if page.categories.size > 0 %} +
+ + {% for category in page.categories %} + {{ category }} + {%- unless forloop.last -%}, {%- endunless -%} + {% endfor %} +
+ {% endif %} - {% include post-nav.html %} + + {% if page.tags.size > 0 %} +
+ + {% for tag in page.tags %} + + {{- tag -}} + + {% endfor %} +
+ {% endif %} - {% if site.disqus.comments and page.comments %} - {% include disqus.html %} - {% endif %} +
+
-
+ {% if site.data.locales[lang].copyright.license.template %} -
+ {% capture _replacement %} + + {{ site.data.locales[lang].copyright.license.name }} + + {% endcapture %} -
+ {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} + + {% endif %} +
+ + {% include post-sharing.html %} + +
+ +
From 1c758cf4a257e68de729be22d819939ed8330403 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 1 Dec 2021 21:49:51 +0800 Subject: [PATCH 2/2] Update related styles --- _sass/addon/commons.scss | 64 ++++++++++++++++++++++---------------- _sass/addon/module.scss | 2 +- _sass/addon/variables.scss | 2 +- _sass/layout/post.scss | 8 ++--- 4 files changed, 43 insertions(+), 33 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 263edbc..253c0e6 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -223,19 +223,16 @@ i { // fontawesome icons } } - span { - @include panel-label; - } - .post-content { font-size: 0.9rem; } } -#access-tags { - > div.post-content > div { - max-width: 80%; +#panel-wrapper { + h4 { + @include panel-label; + font-family: inherit; } .post-tag { @@ -996,7 +993,11 @@ $sidebar-display: "sidebar-display"; } #search-hints { - display: none; + padding: 0 1rem; + + h4 { + margin-bottom: 1.5rem; + } .post-tag { display: inline-block; @@ -1005,13 +1006,15 @@ $sidebar-display: "sidebar-display"; background: var(--search-tag-bg); border: none; padding: 0.5rem; - margin: 0 1rem 1rem 0; + margin: 0 1.25rem 1rem 0; &::before { content: "#"; color: var(--text-muted-color); padding-right: 0.2rem; } + + @extend %link-color; } } @@ -1068,7 +1071,7 @@ $sidebar-display: "sidebar-display"; white-space: nowrap; } -#page { +#core-wrapper { .categories, #tags, #archives { @@ -1105,20 +1108,28 @@ $sidebar-display: "sidebar-display"; @include pl-pr(0); } -#main > div.row:first-child > div { - &:nth-child(1), - &:nth-child(2) { - margin-top: $topbar-height; /* same as the height of topbar */ +#main { + .row:first-child { + > div { + &:nth-child(1), + &:nth-child(2) { + margin-top: $topbar-height; /* same as the height of topbar */ + } + + &:first-child { + /* 3rem for topbar, 6rem for footer */ + min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}); + } + } } - &:first-child { - /* 3rem for topbar, 6rem for footer */ - min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}); + .row.alone { + margin-bottom: 4rem; } } -#post-wrapper { - min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; +#core-wrapper { + min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important; } #topbar-wrapper.row, @@ -1175,8 +1186,8 @@ $sidebar-display: "sidebar-display"; min-height: calc(100vh - #{$topbar-height} - #{$footer-height}); } - #post-wrapper { - min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; + #core-wrapper { + min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important; h1 { margin-top: 2.2rem; @@ -1318,18 +1329,13 @@ $sidebar-display: "sidebar-display"; letter-spacing: 0; } - #search-hints { - display: block; - padding: 0 1rem; - } - #tags { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } - #page h1.dynamic-title { + h1.dynamic-title { display: none; ~ .post-content { @@ -1523,6 +1529,10 @@ $sidebar-display: "sidebar-display"; } } + #search-hints { + display: none; + } + .post-content { font-size: 1.03rem; } diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index d7ef8e9..9053ede 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -48,7 +48,7 @@ } %section { - #post-wrapper & { + #core-wrapper & { line-height: 1.2; margin-bottom: 1rem; } diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 32b5f6c..43192f0 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -27,7 +27,7 @@ $main-content-max-width: 1150px !default; $panel-max-width: 300px !default; -$post-extend-min-height: 35rem !default; +$bottom-min-height: 35rem !default; /* syntax highlight */ diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 39e72d9..6d37a32 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -23,7 +23,7 @@ padding-right: $pr; } -#post-wrapper .post-meta { +h1 + .post-meta { > div:nth-child(2) { > span:not(:first-child)::before { @include dot; @@ -220,7 +220,7 @@ nav[data-toggle=toc] { } } -#post-extend-wrapper { +#tail-wrapper { min-height: 2rem; #disqus_thread { @@ -339,8 +339,8 @@ nav[data-toggle=toc] { } @media all and (min-width: 768px) { - #post-wrapper { - .post-meta { + #core-wrapper { + h1 + .post-meta { > div:not(:first-child)::before { @include dot(0.5rem, 0.2rem); }