asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: optimize the basic layouts

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

31
_layouts/default.html
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>

15
_layouts/home.html
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 %}

12
_layouts/page.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>

212
_layouts/post.html
View file

@ -1,5 +1,5 @@
--- ---
layout: page layout: default
refactor: true refactor: true
panel_includes: panel_includes:
- toc - toc
@ -11,125 +11,125 @@ tail_includes:
{% include lang.html %} {% include lang.html %}
<header> <article class="px-1">
<h1 data-toc-skip>{{ page.title }}</h1> <header>
<h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted"> <div class="post-meta text-muted">
<!-- published date --> <!-- published date -->
<span>
{{ site.data.locales[lang].post.posted }}
{% include datetime.html date=page.date tooltip=true lang=lang %}
</span>
<!-- lastmod date -->
{% if page.last_modified_at and page.last_modified_at != page.date %}
<span> <span>
{{ site.data.locales[lang].post.updated }} {{ site.data.locales[lang].post.posted }}
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %} {% include datetime.html date=page.date tooltip=true lang=lang %}
</span> </span>
{% endif %}
{% if page.image %} <!-- lastmod date -->
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %} {% if page.last_modified_at and page.last_modified_at != page.date %}
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %} <span>
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %} {{ site.data.locales[lang].post.updated }}
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
{% capture lqip %} </span>
{% if page.image.lqip %}
lqip="{{ page.image.lqip }}"
{% endif %} {% endif %}
{% endcapture %}
<div class="mt-3 mb-3"> {% if page.image %}
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}> {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
{%- if page.image.alt -%} {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption> {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
{%- endif -%}
{% if page.image.lqip %}
{%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
{% endif %}
<div class="mt-3 mb-3">
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
{%- if page.image.alt -%}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
{%- endif -%}
</div>
{% endif %}
<div class="d-flex justify-content-between">
<!-- author(s) -->
<span>
{% if page.author %}
{% assign authors = page.author %}
{% elsif page.authors %}
{% assign authors = page.authors %}
{% endif %}
{{ site.data.locales[lang].post.written_by }}
<em>
{% if authors %}
{% for author in authors %}
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
{% endfor %}
{% else %}
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
{% endif %}
</em>
</span>
<!-- read time -->
{% include read-time.html content=content prompt=true lang=lang %}
</div>
<!-- .d-flex -->
</div>
<!-- .post-meta -->
</header>
<div class="content">
{{ content }}
</div>
<div class="post-tail-wrapper text-muted">
<!-- categories -->
{% if page.categories.size > 0 %}
<div class="post-meta mb-3">
<i class="far fa-folder-open fa-fw me-1"></i>
{% for category in page.categories %}
<a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</div> </div>
{% endif %} {% endif %}
<div class="d-flex justify-content-between"> <!-- tags -->
<!-- author(s) --> {% if page.tags.size > 0 %}
<span> <div class="post-tags">
{% if page.author %} <i class="fa fa-tags fa-fw me-1"></i>
{% assign authors = page.author %} {% for tag in page.tags %}
{% elsif page.authors %} <a
{% assign authors = page.authors %} href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
{% endif %} class="post-tag no-text-decoration"
>
{{- tag -}}
</a>
{% endfor %}
</div>
{% endif %}
{{ site.data.locales[lang].post.written_by }} <div
class="
<em> post-tail-bottom
{% if authors %} d-flex justify-content-between align-items-center mt-5 pb-2
{% for author in authors %} "
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a> >
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %} <div class="license-wrapper">
{% endfor %} {% if site.data.locales[lang].copyright.license.template %}
{% else %} {% capture _replacement %}
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
{% endif %}
</em>
</span>
<!-- read time -->
{% include read-time.html content=content prompt=true lang=lang %}
</div>
<!-- .d-flex -->
</div>
<!-- .post-meta -->
</header>
<div class="content">
{{ content }}
</div>
<div class="post-tail-wrapper text-muted">
<!-- categories -->
{% if page.categories.size > 0 %}
<div class="post-meta mb-3">
<i class="far fa-folder-open fa-fw me-1"></i>
{% for category in page.categories %}
<a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</div>
{% endif %}
<!-- tags -->
{% if page.tags.size > 0 %}
<div class="post-tags">
<i class="fa fa-tags fa-fw me-1"></i>
{% for tag in page.tags %}
<a
href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
class="post-tag no-text-decoration"
>
{{- tag -}}
</a>
{% endfor %}
</div>
{% endif %}
<div
class="
post-tail-bottom
d-flex justify-content-between align-items-center mt-5 pb-2
"
>
<div class="license-wrapper">
{% if site.data.locales[lang].copyright.license.template %}
{% capture _replacement %}
<a href="{{ site.data.locales[lang].copyright.license.link }}"> <a href="{{ site.data.locales[lang].copyright.license.link }}">
{{ site.data.locales[lang].copyright.license.name }} {{ site.data.locales[lang].copyright.license.name }}
</a> </a>
{% endcapture %} {% endcapture %}
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
{% endif %} {% endif %}
</div> </div>
{% include post-sharing.html lang=lang %} {% include post-sharing.html lang=lang %}
</div>
<!-- .post-tail-bottom -->
</div> </div>
<!-- .post-tail-bottom --> <!-- div.post-tail-wrapper -->
</div> </article>
<!-- div.post-tail-wrapper -->

13
_sass/addon/commons.scss
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 --- */