Skip to content

Commit 475d181

Browse files
cotes2020cotes2020
committed
refactor: optimize the basic layouts
1 parent f49155f commit 475d181

File tree

5 files changed

+130
-145
lines changed

5 files changed

+130
-145
lines changed

‎_layouts/default.html‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,8 @@
88

99
{% include lang.html %}
1010

11-
{% capture prefer_mode %}
12-
{% if site.theme_mode %}
13-
data-mode="{{ site.theme_mode }}"
14-
{% endif %}
15-
{% endcapture %}
16-
17-
{% if layout.tail_includes %}
18-
{% assign has_tail = true %}
11+
{% if site.theme_mode %}
12+
{% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
1913
{% endif %}
2014

2115
<!-- `site.alt_lang` can specify a language different from the UI -->
@@ -30,11 +24,12 @@
3024
{% include topbar.html lang=lang %}
3125

3226
<div class="row flex-grow-1">
33-
<main
34-
aria-label="Main Content"
35-
class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
36-
>
37-
{{ content }}
27+
<main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
28+
{% if layout.refactor or layout.layout == 'default' %}
29+
{% include refactor-content.html content=content lang=lang %}
30+
{% else %}
31+
{{ content }}
32+
{% endif %}
3833
</main>
3934

4035
<!-- panel -->
@@ -54,12 +49,10 @@
5449
<div class="row">
5550
<!-- tail -->
5651
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
57-
{% if has_tail %}
58-
{% for _include in layout.tail_includes %}
59-
{% assign _include_path = _include | append: '.html' %}
60-
{% include {{ _include_path }} lang=lang %}
61-
{% endfor %}
62-
{% endif %}
52+
{% for _include in layout.tail_includes %}
53+
{% assign _include_path = _include | append: '.html' %}
54+
{% include {{ _include_path }} lang=lang %}
55+
{% endfor %}
6356

6457
{% include_cached footer.html lang=lang %}
6558
</div>

‎_layouts/home.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
layout: default
3+
refactor: true
34
---
45

56
{% include lang.html %}
@@ -39,8 +40,7 @@
3940
{% endfor %}
4041
{% endif %}
4142

42-
{% capture _content %}
43-
<div id="post-list" class="flex-grow-1 pe-xl-2">
43+
<div id="post-list" class="flex-grow-1 px-xl-1">
4444
{% for post in posts %}
4545
<article class="card-wrapper card">
4646
<a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
@@ -54,8 +54,14 @@
5454

5555
{% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
5656

57+
{% assign lqip = null %}
58+
59+
{% if post.image.lqip %}
60+
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
61+
{% endif %}
62+
5763
<div class="col-md-5">
58-
<img src="{{ src }}" alt="{{ alt }}" {% if post.image.lqip %}lqip="{{ post.image.lqip }}"{% endif %}>
64+
<img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
5965
</div>
6066

6167
{% assign card_body_col = '7' %}
@@ -106,9 +112,6 @@ <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
106112
{% endfor %}
107113
</div>
108114
<!-- #post-list -->
109-
{% endcapture %}
110-
111-
{% include refactor-content.html content=_content lang=lang %}
112115

113116
{% if paginator.total_pages > 1 %}
114117
{% include post-paginator.html %}

‎_layouts/page.html‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@
44

55
{% include lang.html %}
66

7-
{% capture _content %}
8-
{% if layout.refactor or page.layout == 'page' %}
9-
{% include refactor-content.html content=content lang=lang %}
10-
{% else %}
11-
{{ content }}
12-
{% endif %}
13-
{% endcapture %}
14-
157
<article class="px-1">
168
{% if page.layout == 'page' or page.collection == 'tabs' %}
179
{% assign tab_key = page.title | downcase %}
@@ -20,9 +12,9 @@ <h1 class="dynamic-title">
2012
{{ title }}
2113
</h1>
2214
<div class="content">
23-
{{ _content }}
15+
{{ content }}
2416
</div>
2517
{% else %}
26-
{{ _content }}
18+
{{ content }}
2719
{% endif %}
2820
</article>

‎_layouts/post.html‎

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: page
2+
layout: default
33
refactor: true
44
panel_includes:
55
- toc
@@ -11,125 +11,125 @@
1111

1212
{% include lang.html %}
1313

14-
<header>
15-
<h1 data-toc-skip>{{ page.title }}</h1>
14+
<article class="px-1">
15+
<header>
16+
<h1 data-toc-skip>{{ page.title }}</h1>
1617

17-
<div class="post-meta text-muted">
18-
<!-- published date -->
19-
<span>
20-
{{ site.data.locales[lang].post.posted }}
21-
{% include datetime.html date=page.date tooltip=true lang=lang %}
22-
</span>
23-
24-
<!-- lastmod date -->
25-
{% if page.last_modified_at and page.last_modified_at != page.date %}
18+
<div class="post-meta text-muted">
19+
<!-- published date -->
2620
<span>
27-
{{ site.data.locales[lang].post.updated }}
28-
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
21+
{{ site.data.locales[lang].post.posted }}
22+
{% include datetime.html date=page.date tooltip=true lang=lang %}
2923
</span>
30-
{% endif %}
3124

32-
{% if page.image %}
33-
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
34-
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
35-
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
36-
37-
{% capture lqip %}
38-
{% if page.image.lqip %}
39-
lqip="{{ page.image.lqip }}"
25+
<!-- lastmod date -->
26+
{% if page.last_modified_at and page.last_modified_at != page.date %}
27+
<span>
28+
{{ site.data.locales[lang].post.updated }}
29+
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
30+
</span>
4031
{% endif %}
41-
{% endcapture %}
4232

43-
<div class="mt-3 mb-3">
44-
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
45-
{%- if page.image.alt -%}
46-
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
47-
{%- endif -%}
48-
</div>
49-
{% endif %}
33+
{% if page.image %}
34+
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
35+
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
36+
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
5037

51-
<div class="d-flex justify-content-between">
52-
<!-- author(s) -->
53-
<span>
54-
{% if page.author %}
55-
{% assign authors = page.author %}
56-
{% elsif page.authors %}
57-
{% assign authors = page.authors %}
38+
{% if page.image.lqip %}
39+
{%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
5840
{% endif %}
5941

60-
{{ site.data.locales[lang].post.written_by }}
42+
<div class="mt-3 mb-3">
43+
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
44+
{%- if page.image.alt -%}
45+
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
46+
{%- endif -%}
47+
</div>
48+
{% endif %}
6149

62-
<em>
63-
{% if authors %}
64-
{% for author in authors %}
65-
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
66-
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
67-
{% endfor %}
68-
{% else %}
69-
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
50+
<div class="d-flex justify-content-between">
51+
<!-- author(s) -->
52+
<span>
53+
{% if page.author %}
54+
{% assign authors = page.author %}
55+
{% elsif page.authors %}
56+
{% assign authors = page.authors %}
7057
{% endif %}
71-
</em>
72-
</span>
7358

74-
<!-- read time -->
75-
{% include read-time.html content=content prompt=true lang=lang %}
59+
{{ site.data.locales[lang].post.written_by }}
60+
61+
<em>
62+
{% if authors %}
63+
{% for author in authors %}
64+
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
65+
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
66+
{% endfor %}
67+
{% else %}
68+
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
69+
{% endif %}
70+
</em>
71+
</span>
72+
73+
<!-- read time -->
74+
{% include read-time.html content=content prompt=true lang=lang %}
75+
</div>
76+
<!-- .d-flex -->
7677
</div>
77-
<!-- .d-flex -->
78+
<!-- .post-meta -->
79+
</header>
80+
81+
<div class="content">
82+
{{ content }}
7883
</div>
79-
<!-- .post-meta -->
80-
</header>
81-
82-
<div class="content">
83-
{{ content }}
84-
</div>
85-
86-
<div class="post-tail-wrapper text-muted">
87-
<!-- categories -->
88-
{% if page.categories.size > 0 %}
89-
<div class="post-meta mb-3">
90-
<i class="far fa-folder-open fa-fw me-1"></i>
91-
{% for category in page.categories %}
92-
<a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
93-
{%- unless forloop.last -%},{%- endunless -%}
94-
{% endfor %}
95-
</div>
96-
{% endif %}
97-
98-
<!-- tags -->
99-
{% if page.tags.size > 0 %}
100-
<div class="post-tags">
101-
<i class="fa fa-tags fa-fw me-1"></i>
102-
{% for tag in page.tags %}
103-
<a
104-
href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
105-
class="post-tag no-text-decoration"
106-
>
107-
{{- tag -}}
108-
</a>
109-
{% endfor %}
110-
</div>
111-
{% endif %}
112-
113-
<div
114-
class="
115-
post-tail-bottom
116-
d-flex justify-content-between align-items-center mt-5 pb-2
117-
"
118-
>
119-
<div class="license-wrapper">
120-
{% if site.data.locales[lang].copyright.license.template %}
121-
{% capture _replacement %}
84+
85+
<div class="post-tail-wrapper text-muted">
86+
<!-- categories -->
87+
{% if page.categories.size > 0 %}
88+
<div class="post-meta mb-3">
89+
<i class="far fa-folder-open fa-fw me-1"></i>
90+
{% for category in page.categories %}
91+
<a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
92+
{%- unless forloop.last -%},{%- endunless -%}
93+
{% endfor %}
94+
</div>
95+
{% endif %}
96+
97+
<!-- tags -->
98+
{% if page.tags.size > 0 %}
99+
<div class="post-tags">
100+
<i class="fa fa-tags fa-fw me-1"></i>
101+
{% for tag in page.tags %}
102+
<a
103+
href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
104+
class="post-tag no-text-decoration"
105+
>
106+
{{- tag -}}
107+
</a>
108+
{% endfor %}
109+
</div>
110+
{% endif %}
111+
112+
<div
113+
class="
114+
post-tail-bottom
115+
d-flex justify-content-between align-items-center mt-5 pb-2
116+
"
117+
>
118+
<div class="license-wrapper">
119+
{% if site.data.locales[lang].copyright.license.template %}
120+
{% capture _replacement %}
122121
<a href="{{ site.data.locales[lang].copyright.license.link }}">
123122
{{ site.data.locales[lang].copyright.license.name }}
124123
</a>
125124
{% endcapture %}
126125

127-
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
128-
{% endif %}
129-
</div>
126+
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
127+
{% endif %}
128+
</div>
130129

131-
{% include post-sharing.html lang=lang %}
130+
{% include post-sharing.html lang=lang %}
131+
</div>
132+
<!-- .post-tail-bottom -->
132133
</div>
133-
<!-- .post-tail-bottom -->
134-
</div>
135-
<!-- div.post-tail-wrapper -->
134+
<!-- div.post-tail-wrapper -->
135+
</article>

‎_sass/addon/commons.scss‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,6 @@ footer {
148148
}
149149

150150
p {
151-
line-height: 1.75;
152151
text-align: center;
153152
margin-bottom: 0;
154153
}
@@ -820,9 +819,11 @@ $btn-mb: 0.5rem;
820819
padding-right: 1rem;
821820
margin-bottom: 1.5rem;
822821

822+
$btn-size: 1.75rem;
823+
823824
%button {
824-
width: 1.75rem;
825-
height: 1.75rem;
825+
width: $btn-size;
826+
height: $btn-size;
826827
margin-bottom: $btn-mb; // multi line gap
827828
border-radius: 50%;
828829
color: var(--sidebar-btn-color);
@@ -849,7 +850,7 @@ $btn-mb: 0.5rem;
849850
}
850851

851852
i {
852-
line-height: 1.75rem;
853+
line-height: $btn-size;
853854
}
854855

855856
.mode-toggle {
@@ -1129,10 +1130,6 @@ search {
11291130
> :not(script) {
11301131
margin-top: 3rem;
11311132
}
1132-
1133-
> :only-child {
1134-
margin-top: 0;
1135-
}
11361133
}
11371134

11381135
/* --- button back-to-top --- */

0 commit comments

Comments
 (0)