f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

perf: refactor using semantic HTML (#1207)

Browse Source 
Fixes #1196
This commit is contained in:
Cotes Chung
2023-09-08 22:48:37 +08:00
committed by GitHub
parent 41b8f9f519
commit 505e314a31
33 changed files with 412 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
_layouts/archives.html
View File

@@ -9,28 +9,27 @@ layout: page
{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
<div id="archives" class="pl-xl-3">
{% for post in site.posts %}
{% assign cur_year = post.date | date: '%Y' %}
{% for post in site.posts %}
{% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% if cur_year != last_year %}
{% unless forloop.first %}</ul>{% endunless %}
{% if cur_year != last_year %}
{% unless forloop.first %}</ul>{% endunless %}
<div class="year lead">{{ cur_year }}</div>
<ul class="list-unstyled">
{% assign last_year = cur_year %}
{% endif %}
<time class="year lead d-block">{{ cur_year }}</time>
{{ '<ul class="list-unstyled">' }}
<li>
{% assign ts = post.date | date: '%s' %}
<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
<span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
{{ post.date | date: df_strftime_m }}
</span>
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
</li>
{% assign last_year = cur_year %}
{% endif %}
{% if forloop.last %}</ul>{% endif %}
{% endfor %}
<li>
{% assign ts = post.date | date: '%s' %}
<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
<span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
{{ post.date | date: df_strftime_m }}
</span>
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
</li>
{% if forloop.last %}</ul>{% endif %}
{% endfor %}
</div>

4
_layouts/category.html
View File

@@ -12,12 +12,12 @@ layout: page
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
</h1>
<ul class="post-content ps-0">
<ul class="content ps-0">
{% for post in page.posts %}
<li class="d-flex justify-content-between px-md-3">
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
<span class="dash flex-grow-1"></span>
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
{% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
</li>
{% endfor %}
</ul>

81
_layouts/default.html
View File

@@ -15,6 +15,10 @@ layout: compress
{% endif %}
{% endcapture %}
{% if layout.tail_includes %}
{% assign has_tail = true %}
{% endif %}
<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
{% include head.html %}
@@ -23,46 +27,63 @@ layout: compress
{% include sidebar.html lang=lang %}
<div id="main-wrapper" class="d-flex justify-content-center">
<div id="main" class="container px-xxl-5">
<div class="container px-xxl-5">
{% include topbar.html lang=lang %}
{{ content }}
<div class="row">
<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>
<!-- panel -->
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
<div class="access">
{% include_cached update-list.html lang=lang %}
{% include_cached trending-tags.html lang=lang %}
</div>
{% for _include in layout.panel_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}
</aside>
</div>
<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 %}
{% include_cached footer.html lang=lang %}
</div>
</div>
{% include_cached search-results.html lang=lang %}
</div>
<aside aria-label="Scroll to Top">
<button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
</aside>
</div>
<div id="mask"></div>
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
{% if site.pwa.enabled %}
<div
id="notification"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<button
type="button"
class="btn-close ms-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body text-center pt-0">
<p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
<button type="button" class="btn btn-primary" aria-label="Update">
{{ site.data.locales[lang].notification.update }}
</button>
</div>
</div>
{% include_cached notification.html lang=lang %}
{% endif %}
<!-- JavaScripts -->
{% include js-selector.html %}
{% if page.mermaid %}

23
_layouts/home.html
View File

@@ -1,6 +1,5 @@
---
layout: page
refactor: true
layout: default
---
{% include lang.html %}
@@ -40,10 +39,10 @@ refactor: true
{% endfor %}
{% endif %}
<div id="post-list" class="pe-xl-2">
{% capture content %}
{% for post in posts %}
<a href="{{ post.url | relative_url }}" class="card-wrapper">
<div class="card post-preview flex-md-row-reverse">
<article class="card-wrapper">
<a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
{% if post.image %}
{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
@@ -60,11 +59,9 @@ refactor: true
{% endif %}
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">
{{ post.title }}
</h1>
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
<div class="card-text post-content mt-0 mb-2">
<div class="card-text content mt-0 mb-2">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
@@ -99,9 +96,13 @@ refactor: true
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</a>
</article>
{% endfor %}
{% endcapture %}
<div id="post-list" class="flex-grow-1 pe-xl-2">
{% include refactor-content.html content=content lang=lang %}
</div>
<!-- #post-list -->

84
_layouts/page.html
View File

@@ -2,69 +2,25 @@
layout: default
---
{% include lang.html %}
{% include origin-type.html %}
{% capture _content %}
{% if layout.refactor or page.layout == 'page' %}
{% include refactor-content.html content=content lang=lang %}
{% else %}
{{ content }}
{% endif %}
{% endcapture %}
{% if layout.tail_includes %}
{% assign has_tail = true %}
{% endif %}
<div class="row">
<!-- core -->
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
{% capture padding %}
{% unless page.layout == 'home' %}px-1{% endunless %}
{% endcapture %}
<div class="post {{ padding | strip }} {% unless has_tail %} flex-grow-1 mb-5{% endunless %}">
{% capture _content %}
{% if layout.refactor or page.layout == 'page' %}
{% include refactor-content.html content=content lang=lang %}
{% else %}
{{ content }}
{% endif %}
{% endcapture %}
{% if page.layout == 'page' or page.collection == 'tabs' %}
{% assign tab_key = page.title | downcase %}
{% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
<h1 class="dynamic-title">
{{ title }}
</h1>
<div class="post-content">
{{ _content }}
</div>
{% else %}
{{ _content }}
{% endif %}
<article class="px-1">
{% if page.layout == 'page' or page.collection == 'tabs' %}
{% assign tab_key = page.title | downcase %}
{% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
<h1 class="dynamic-title">
{{ title }}
</h1>
<div class="content">
{{ _content }}
</div>
</div>
<!-- #core-wrapper -->
<!-- panel -->
<div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
<div class="access">
{% include_cached update-list.html lang=lang %}
{% include_cached trending-tags.html lang=lang %}
</div>
{% for _include in layout.panel_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}
</div>
</div>
<div class="row">
<!-- tail -->
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4{% if has_tail%} mt-5{% endif %}">
{% if has_tail %}
{% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}
{% endif %}
{% include_cached footer.html lang=lang %}
</div>
</div>
{% else %}
{{ _content }}
{% endif %}
</article>

138
_layouts/post.html
View File

@@ -11,9 +11,10 @@ tail_includes:
{% include lang.html %}
<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 -->
<span>
{{ site.data.locales[lang].post.posted }}
@@ -22,99 +23,101 @@ tail_includes:
<!-- 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>
<span>
{{ site.data.locales[lang].post.updated }}
{% include datetime.html date=page.last_modified_at 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 %}
{% 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 %}
{% capture lqip %}
{% if page.image.lqip %}
lqip="{{ page.image.lqip }}"
{% 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 -%}
</div>
{% endif %}
<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 -%}
</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 %}
<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 }}
{{ 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>
<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>
<div>
<!-- read time -->
{% include read-time.html content=content prompt=true lang=lang %}
</div>
<!-- .d-flex -->
</div>
<!-- .post-meta -->
</header>
</div> <!-- .d-flex -->
</div> <!-- .post-meta -->
<div class="post-content">
<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 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>
<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>
<a
href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
class="post-tag no-text-decoration"
>
{{- tag -}}
</a>
{% endfor %}
</div>
</div>
{% endif %}
<div class="post-tail-bottom
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
<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 }}
@@ -122,12 +125,11 @@ tail_includes:
{% endcapture %}
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
{% endif %}
</div>
{% include post-sharing.html lang=lang %}
</div><!-- .post-tail-bottom -->
</div><!-- div.post-tail-wrapper -->
</div>
<!-- .post-tail-bottom -->
</div>
<!-- div.post-tail-wrapper -->

4
_layouts/tag.html
View File

@@ -11,12 +11,12 @@ layout: page
{{ page.title }}
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
</h1>
<ul class="post-content ps-0">
<ul class="content ps-0">
{% for post in page.posts %}
<li class="d-flex justify-content-between px-md-3">
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
<span class="dash flex-grow-1"></span>
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
{% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
</li>
{% endfor %}
</ul>