refactor: optimize the basic layouts

This commit is contained in:
Cotes Chung 2023-09-30 04:46:40 +08:00
parent f49155f034
commit 475d181aac
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
5 changed files with 134 additions and 149 deletions

View file

@ -8,14 +8,8 @@ layout: compress
{% include lang.html %} {% include lang.html %}
{% capture prefer_mode %} {% if site.theme_mode %}
{% if site.theme_mode %} {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
data-mode="{{ site.theme_mode }}"
{% endif %}
{% endcapture %}
{% if layout.tail_includes %}
{% assign has_tail = true %}
{% endif %} {% endif %}
<!-- `site.alt_lang` can specify a language different from the UI --> <!-- `site.alt_lang` can specify a language different from the UI -->
@ -30,11 +24,12 @@ layout: compress
{% include topbar.html lang=lang %} {% include topbar.html lang=lang %}
<div class="row flex-grow-1"> <div class="row flex-grow-1">
<main <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
aria-label="Main Content" {% if layout.refactor or layout.layout == 'default' %}
class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}" {% include refactor-content.html content=content lang=lang %}
> {% else %}
{{ content }} {{ content }}
{% endif %}
</main> </main>
<!-- panel --> <!-- panel -->
@ -54,12 +49,10 @@ layout: compress
<div class="row"> <div class="row">
<!-- tail --> <!-- tail -->
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4"> <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
{% if has_tail %}
{% for _include in layout.tail_includes %} {% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %} {% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %} {% include {{ _include_path }} lang=lang %}
{% endfor %} {% endfor %}
{% endif %}
{% include_cached footer.html lang=lang %} {% include_cached footer.html lang=lang %}
</div> </div>

View file

@ -1,5 +1,6 @@
--- ---
layout: default layout: default
refactor: true
--- ---
{% include lang.html %} {% include lang.html %}
@ -39,8 +40,7 @@ layout: default
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% capture _content %} <div id="post-list" class="flex-grow-1 px-xl-1">
<div id="post-list" class="flex-grow-1 pe-xl-2">
{% for post in posts %} {% for post in posts %}
<article class="card-wrapper card"> <article class="card-wrapper card">
<a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse"> <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
@ -54,8 +54,14 @@ layout: default
{% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %} {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
{% assign lqip = null %}
{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
{% endif %}
<div class="col-md-5"> <div class="col-md-5">
<img src="{{ src }}" alt="{{ alt }}" {% if post.image.lqip %}lqip="{{ post.image.lqip }}"{% endif %}> <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
</div> </div>
{% assign card_body_col = '7' %} {% assign card_body_col = '7' %}
@ -106,9 +112,6 @@ layout: default
{% endfor %} {% endfor %}
</div> </div>
<!-- #post-list --> <!-- #post-list -->
{% endcapture %}
{% include refactor-content.html content=_content lang=lang %}
{% if paginator.total_pages > 1 %} {% if paginator.total_pages > 1 %}
{% include post-paginator.html %} {% include post-paginator.html %}

View file

@ -4,14 +4,6 @@ layout: default
{% include lang.html %} {% include lang.html %}
{% capture _content %}
{% if layout.refactor or page.layout == 'page' %}
{% include refactor-content.html content=content lang=lang %}
{% else %}
{{ content }}
{% endif %}
{% endcapture %}
<article class="px-1"> <article class="px-1">
{% if page.layout == 'page' or page.collection == 'tabs' %} {% if page.layout == 'page' or page.collection == 'tabs' %}
{% assign tab_key = page.title | downcase %} {% assign tab_key = page.title | downcase %}
@ -20,9 +12,9 @@ layout: default
{{ title }} {{ title }}
</h1> </h1>
<div class="content"> <div class="content">
{{ _content }} {{ content }}
</div> </div>
{% else %} {% else %}
{{ _content }} {{ content }}
{% endif %} {% endif %}
</article> </article>

View file

@ -1,5 +1,5 @@
--- ---
layout: page layout: default
refactor: true refactor: true
panel_includes: panel_includes:
- toc - toc
@ -11,7 +11,8 @@ tail_includes:
{% include lang.html %} {% include lang.html %}
<header> <article class="px-1">
<header>
<h1 data-toc-skip>{{ page.title }}</h1> <h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted"> <div class="post-meta text-muted">
@ -34,14 +35,12 @@ tail_includes:
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %} {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %} {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
{% capture lqip %}
{% if page.image.lqip %} {% if page.image.lqip %}
lqip="{{ page.image.lqip }}" {%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
{% endif %} {% endif %}
{% endcapture %}
<div class="mt-3 mb-3"> <div class="mt-3 mb-3">
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}> <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
{%- if page.image.alt -%} {%- if page.image.alt -%}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption> <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
{%- endif -%} {%- endif -%}
@ -77,13 +76,13 @@ tail_includes:
<!-- .d-flex --> <!-- .d-flex -->
</div> </div>
<!-- .post-meta --> <!-- .post-meta -->
</header> </header>
<div class="content"> <div class="content">
{{ content }} {{ content }}
</div> </div>
<div class="post-tail-wrapper text-muted"> <div class="post-tail-wrapper text-muted">
<!-- categories --> <!-- categories -->
{% if page.categories.size > 0 %} {% if page.categories.size > 0 %}
<div class="post-meta mb-3"> <div class="post-meta mb-3">
@ -131,5 +130,6 @@ tail_includes:
{% include post-sharing.html lang=lang %} {% include post-sharing.html lang=lang %}
</div> </div>
<!-- .post-tail-bottom --> <!-- .post-tail-bottom -->
</div> </div>
<!-- div.post-tail-wrapper --> <!-- div.post-tail-wrapper -->
</article>

View file

@ -148,7 +148,6 @@ footer {
} }
p { p {
line-height: 1.75;
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
} }
@ -820,9 +819,11 @@ $btn-mb: 0.5rem;
padding-right: 1rem; padding-right: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
$btn-size: 1.75rem;
%button { %button {
width: 1.75rem; width: $btn-size;
height: 1.75rem; height: $btn-size;
margin-bottom: $btn-mb; // multi line gap margin-bottom: $btn-mb; // multi line gap
border-radius: 50%; border-radius: 50%;
color: var(--sidebar-btn-color); color: var(--sidebar-btn-color);
@ -849,7 +850,7 @@ $btn-mb: 0.5rem;
} }
i { i {
line-height: 1.75rem; line-height: $btn-size;
} }
.mode-toggle { .mode-toggle {
@ -1129,10 +1130,6 @@ search {
> :not(script) { > :not(script) {
margin-top: 3rem; margin-top: 3rem;
} }
> :only-child {
margin-top: 0;
}
} }
/* --- button back-to-top --- */ /* --- button back-to-top --- */