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

15
_layouts/home.html
View file

@ -1,5 +1,6 @@
---
layout: default
refactor: true
---
{% include lang.html %}
@ -39,8 +40,7 @@ layout: default
{% endfor %}
{% endif %}
{% capture _content %}
<div id="post-list" class="flex-grow-1 pe-xl-2">
<div id="post-list" class="flex-grow-1 px-xl-1">
{% for post in posts %}
<article class="card-wrapper card">
<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 lqip = null %}
{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
{% endif %}
<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>
{% assign card_body_col = '7' %}
@ -106,9 +112,6 @@ layout: default
{% endfor %}
</div>
<!-- #post-list -->
{% endcapture %}
{% include refactor-content.html content=_content lang=lang %}
{% if paginator.total_pages > 1 %}
{% include post-paginator.html %}

12
_layouts/page.html
View file

@ -4,14 +4,6 @@ layout: default
{% 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">
{% if page.layout == 'page' or page.collection == 'tabs' %}
{% assign tab_key = page.title | downcase %}
@ -20,9 +12,9 @@ layout: default
{{ title }}
</h1>
<div class="content">
{{ _content }}
{{ content }}
</div>
{% else %}
{{ _content }}
{{ content }}
{% endif %}
</article>

212
_layouts/post.html
View file

@ -1,5 +1,5 @@
---
layout: page
layout: default
refactor: true
panel_includes:
- toc
@ -11,125 +11,125 @@ tail_includes:
{% include lang.html %}
<header>
<h1 data-toc-skip>{{ page.title }}</h1>
<article class="px-1">
<header>
<h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted">
<!-- 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 %}
<div class="post-meta text-muted">
<!-- published date -->
<span>
{{ site.data.locales[lang].post.updated }}
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
{{ site.data.locales[lang].post.posted }}
{% include datetime.html date=page.date tooltip=true lang=lang %}
</span>
{% endif %}
{% if page.image %}
{% capture src %}src="{{ page.image.path | default: page.image }}"{% 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 lqip %}
{% if page.image.lqip %}
lqip="{{ page.image.lqip }}"
<!-- lastmod date -->
{% if page.last_modified_at and page.last_modified_at != page.date %}
<span>
{{ site.data.locales[lang].post.updated }}
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
</span>
{% endif %}
{% endcapture %}
<div class="mt-3 mb-3">
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
{%- if page.image.alt -%}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
{%- endif -%}
{% if page.image %}
{% capture src %}src="{{ page.image.path | default: page.image }}"{% 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 %}
{% 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>
{% 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 %}
<!-- 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 %}
{{ 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>
{% 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 %}
<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 }}">
{{ site.data.locales[lang].copyright.license.name }}
</a>
{% endcapture %}
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
{% endif %}
</div>
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
{% endif %}
</div>
{% include post-sharing.html lang=lang %}
{% include post-sharing.html lang=lang %}
</div>
<!-- .post-tail-bottom -->
</div>
<!-- .post-tail-bottom -->
</div>
<!-- div.post-tail-wrapper -->
<!-- div.post-tail-wrapper -->
</article>

13
_sass/addon/commons.scss
View file

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