Improve JS/CSS selector
Separate layout from tabs, and more friendly to tabs rename (#187)
This commit is contained in:
Cotes Chung
parent
36c4f32b17
commit
e27825d3eb
8 changed files with 196 additions and 227 deletions
|
|
@ -6,50 +6,21 @@
|
|||
MIT Licensed
|
||||
-->
|
||||
|
||||
{% if page.layout == 'home' %}
|
||||
<link rel="preload" href="{{ '/assets/css/home.css' | relative_url }}" as="style">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/home.css' | relative_url }}">
|
||||
|
||||
{% elsif page.layout == 'page' %}
|
||||
{% if page.layout == 'category' or page.layout == 'tag' %}
|
||||
{% assign style = 'category-tag' %}
|
||||
{% else %}
|
||||
{% assign style = page.layout %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.collection == 'tabs' and page.title != 'About' %}
|
||||
{% assign src = style | prepend: '/assets/css/' | append: '.css' | relative_url %}
|
||||
|
||||
{% if page.title == 'Categories' %}
|
||||
<link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
|
||||
|
||||
{% elsif page.title == 'Tags' %}
|
||||
<link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
|
||||
|
||||
{% elsif page.title == 'Archives'%}
|
||||
<link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
<link rel="preload" href="{{ '/assets/css/page.css' | relative_url }}" as="style">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}">
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% elsif page.layout == 'category' or page.layout == 'tag' %}
|
||||
|
||||
<link rel="preload" href="{{ '/assets/css/category-tag.css' | relative_url }}" as="style">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/category-tag.css' | relative_url }}">
|
||||
|
||||
{% elsif page.layout == 'post' %}
|
||||
|
||||
<link rel="preload" as="style" href="{{ '/assets/css/post.css' | relative_url }}">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/post.css' | relative_url }}">
|
||||
<link rel="preload" href="{{ src }}" as="style">
|
||||
<link rel="stylesheet" href="{{ src }}">
|
||||
|
||||
{% if page.layout == 'post' %}
|
||||
{% if site.toc and page.toc %}
|
||||
|
||||
<link rel="preload" as="style" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}">
|
||||
<link rel="stylesheet" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}" />
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -6,35 +6,22 @@
|
|||
MIT Licensed
|
||||
-->
|
||||
|
||||
{% if page.layout == 'home' %}
|
||||
{% if page.layout == 'home' or page.layout == 'post' or page.layout == 'categories' %}
|
||||
{% assign js = page.layout %}
|
||||
{% else %}
|
||||
{% assign js = "page" %}
|
||||
{% endif %}
|
||||
|
||||
<script async src="{{ '/assets/js/home.min.js' | relative_url }}"></script>
|
||||
{% assign js_src = js | prepend: '/assets/js/' | append: '.min.js' | relative_url %}
|
||||
|
||||
{% elsif page.layout == 'post' %}
|
||||
<script async src="{{ js_src }}"></script>
|
||||
|
||||
<script async src="{{ '/assets/js/post.min.js' | relative_url }}"></script>
|
||||
|
||||
{% if page.math %}
|
||||
{% if page.math %}
|
||||
<!-- MathJax -->
|
||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
||||
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||
{% endif %}
|
||||
|
||||
{% elsif page.layout == 'page' %}
|
||||
|
||||
{% if page.title == 'Categories' and page.collection == 'tabs' %}
|
||||
<script async src="{{ '/assets/js/categories.min.js' | relative_url }}"></script>
|
||||
{% else %}
|
||||
<script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
<script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if jekyll.environment == 'production' %}
|
||||
<!-- PWA -->
|
||||
<script defer src="{{ '/app.js' | relative_url }}"></script>
|
||||
|
|
|
|||
41
_layouts/archives.html
Normal file
41
_layouts/archives.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
layout: page
|
||||
|
||||
# The Archives of posts.
|
||||
# v2.0
|
||||
# https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
# © 2017-2019 Cotes Chung
|
||||
# MIT License
|
||||
---
|
||||
|
||||
|
||||
<div id="archives" class="pl-xl-2">
|
||||
{% for post in site.posts %}
|
||||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||
{% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
|
||||
{% if forloop.first %}
|
||||
{% assign last_day = "" %}
|
||||
{% assign last_month = "" %}
|
||||
<span class="lead">{{this_year}}</span>
|
||||
<ul class="list-unstyled">
|
||||
{% endif %}
|
||||
<li>
|
||||
<div>
|
||||
{% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
|
||||
{% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
|
||||
<span class="date day">{{ this_day }}</span>
|
||||
<span class="date month small text-muted">{{ this_month }}</span>
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
</div>
|
||||
</li>
|
||||
{% if forloop.last %}
|
||||
</ul>
|
||||
{% elsif this_year != pre_year %}
|
||||
</ul>
|
||||
<span class="lead">{{pre_year}}</span>
|
||||
<ul class="list-unstyled">
|
||||
{% assign last_day = "" %}
|
||||
{% assign last_month = "" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
105
_layouts/categories.html
Normal file
105
_layouts/categories.html
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
---
|
||||
layout: page
|
||||
|
||||
# All the Categories of posts
|
||||
# v2.0
|
||||
# https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
# © 2017-2019 Cotes Chung
|
||||
# MIT License
|
||||
---
|
||||
|
||||
|
||||
{% assign HEAD_PREFIX = "h_" %}
|
||||
{% assign LIST_PREFIX = "l_" %}
|
||||
|
||||
{% assign group_index = 0 %}
|
||||
|
||||
{% assign sort_categories = site.categories | sort %}
|
||||
|
||||
{% for category in sort_categories %}
|
||||
{% assign category_name = category | first %}
|
||||
{% assign posts_of_category = category | last %}
|
||||
{% assign first_post = posts_of_category | first %}
|
||||
|
||||
{% if category_name == first_post.categories[0] %}
|
||||
{% assign sub_categories = "" | split: "" %}
|
||||
|
||||
{% for post in posts_of_category %}
|
||||
{% assign second_category = post.categories[1] %}
|
||||
{% if second_category %}
|
||||
{% unless sub_categories contains second_category %}
|
||||
{% assign sub_categories = sub_categories | push: second_category %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign sub_categories = sub_categories | sort %}
|
||||
{% assign sub_categories_size = sub_categories | size %}
|
||||
|
||||
<div class="card categories">
|
||||
<!-- top-category -->
|
||||
<div class="card-header d-flex justify-content-between hide-border-bottom"
|
||||
id="{{ HEAD_PREFIX }}{{ group_index }}">
|
||||
<span>
|
||||
{% if sub_categories_size > 0 %}
|
||||
<i class="far fa-folder-open fa-fw"></i>
|
||||
{% else %}
|
||||
<i class="far fa-folder fa-fw"></i>
|
||||
{% endif %}
|
||||
<a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
|
||||
class="ml-1 mr-2">
|
||||
{{ category_name }}
|
||||
</a>
|
||||
|
||||
<!-- content count -->
|
||||
{% assign top_posts_size = site.categories[category_name] | size %}
|
||||
<span class="text-muted small font-weight-light">
|
||||
{% if sub_categories_size > 0 %}
|
||||
{{ sub_categories_size }}
|
||||
{% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
|
||||
{% endif %}
|
||||
{{ top_posts_size }}
|
||||
post{% if top_posts_size > 1 %}s{% endif %}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- arrow -->
|
||||
{% if sub_categories_size > 0%}
|
||||
<a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse"
|
||||
aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
|
||||
class="category-trigger hide-border-bottom">
|
||||
<i class="fas fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
|
||||
<i class="fas fa-fw fa-angle-right"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- .card-header -->
|
||||
|
||||
<!-- Sub-categories -->
|
||||
{% if sub_categories_size > 0 %}
|
||||
<div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
|
||||
<ul class="list-group">
|
||||
{% for sub_category in sub_categories %}
|
||||
<li class="list-group-item">
|
||||
<i class="far fa-folder fa-fw"></i>
|
||||
<a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase | url_encode }}/"
|
||||
class="ml-1 mr-2">{{ sub_category }}</a>
|
||||
{% assign posts_size = site.categories[sub_category] | size %}
|
||||
<span class="text-muted small font-weight-light">{{ posts_size }}
|
||||
post{% if posts_size > 1 %}s{% endif %}
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- .card -->
|
||||
|
||||
{% assign group_index = group_index | plus: 1 %}
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
26
_layouts/tags.html
Normal file
26
_layouts/tags.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
layout: page
|
||||
|
||||
# All the Tags of posts.
|
||||
# v2.0
|
||||
# https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
# © 2017-2019 Cotes Chung
|
||||
# MIT License
|
||||
---
|
||||
|
||||
<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
|
||||
|
||||
{% assign tags = "" | split: "" %}
|
||||
{% for t in site.tags %}
|
||||
{% assign tags = tags | push: t[0] %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign sorted_tags = tags | sort_natural %}
|
||||
|
||||
{% for t in sorted_tags %}
|
||||
<div>
|
||||
<a class="tag" href="{{ site.baseurl }}/tags/{{ t | replace: ' ', '-' | downcase | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
|
@ -1,42 +1,6 @@
|
|||
---
|
||||
title: Archives
|
||||
layout: archives
|
||||
icon: fas fa-archive
|
||||
order: 3
|
||||
|
||||
# The Archives of posts.
|
||||
# v2.0
|
||||
# https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
# © 2017-2019 Cotes Chung
|
||||
# MIT License
|
||||
---
|
||||
|
||||
<div id="archives" class="pl-xl-2">
|
||||
{% for post in site.posts %}
|
||||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||
{% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
|
||||
{% if forloop.first %}
|
||||
{% assign last_day = "" %}
|
||||
{% assign last_month = "" %}
|
||||
<span class="lead">{{this_year}}</span>
|
||||
<ul class="list-unstyled">
|
||||
{% endif %}
|
||||
<li>
|
||||
<div>
|
||||
{% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
|
||||
{% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
|
||||
<span class="date day">{{ this_day }}</span>
|
||||
<span class="date month small text-muted">{{ this_month }}</span>
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
</div>
|
||||
</li>
|
||||
{% if forloop.last %}
|
||||
</ul>
|
||||
{% elsif this_year != pre_year %}
|
||||
</ul>
|
||||
<span class="lead">{{pre_year}}</span>
|
||||
<ul class="list-unstyled">
|
||||
{% assign last_day = "" %}
|
||||
{% assign last_month = "" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,106 +1,6 @@
|
|||
---
|
||||
layout: categories
|
||||
title: Categories
|
||||
icon: fas fa-stream
|
||||
order: 1
|
||||
|
||||
# All the Categories of posts
|
||||
# v2.0
|
||||
# https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
# © 2017-2019 Cotes Chung
|
||||
# MIT License
|
||||
---
|
||||
|
||||
{% assign HEAD_PREFIX = "h_" %}
|
||||
{% assign LIST_PREFIX = "l_" %}
|
||||
|
||||
{% assign group_index = 0 %}
|
||||
|
||||
{% assign sort_categories = site.categories | sort %}
|
||||
|
||||
{% for category in sort_categories %}
|
||||
{% assign category_name = category | first %}
|
||||
{% assign posts_of_category = category | last %}
|
||||
{% assign first_post = posts_of_category | first %}
|
||||
|
||||
{% if category_name == first_post.categories[0] %}
|
||||
{% assign sub_categories = "" | split: "" %}
|
||||
|
||||
{% for post in posts_of_category %}
|
||||
{% assign second_category = post.categories[1] %}
|
||||
{% if second_category %}
|
||||
{% unless sub_categories contains second_category %}
|
||||
{% assign sub_categories = sub_categories | push: second_category %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign sub_categories = sub_categories | sort %}
|
||||
{% assign sub_categories_size = sub_categories | size %}
|
||||
|
||||
<div class="card categories">
|
||||
<!-- top-category -->
|
||||
<div class="card-header d-flex justify-content-between hide-border-bottom"
|
||||
id="{{ HEAD_PREFIX }}{{ group_index }}">
|
||||
<span>
|
||||
{% if sub_categories_size > 0 %}
|
||||
<i class="far fa-folder-open fa-fw"></i>
|
||||
{% else %}
|
||||
<i class="far fa-folder fa-fw"></i>
|
||||
{% endif %}
|
||||
<a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
|
||||
class="ml-1 mr-2">
|
||||
{{ category_name }}
|
||||
</a>
|
||||
|
||||
<!-- content count -->
|
||||
{% assign top_posts_size = site.categories[category_name] | size %}
|
||||
<span class="text-muted small font-weight-light">
|
||||
{% if sub_categories_size > 0 %}
|
||||
{{ sub_categories_size }}
|
||||
{% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
|
||||
{% endif %}
|
||||
{{ top_posts_size }}
|
||||
post{% if top_posts_size > 1 %}s{% endif %}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- arrow -->
|
||||
{% if sub_categories_size > 0%}
|
||||
<a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse"
|
||||
aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
|
||||
class="category-trigger hide-border-bottom">
|
||||
<i class="fas fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
|
||||
<i class="fas fa-fw fa-angle-right"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- .card-header -->
|
||||
|
||||
<!-- Sub-categories -->
|
||||
{% if sub_categories_size > 0 %}
|
||||
<div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
|
||||
<ul class="list-group">
|
||||
{% for sub_category in sub_categories %}
|
||||
<li class="list-group-item">
|
||||
<i class="far fa-folder fa-fw"></i>
|
||||
<a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase | url_encode }}/"
|
||||
class="ml-1 mr-2">{{ sub_category }}</a>
|
||||
{% assign posts_size = site.categories[sub_category] | size %}
|
||||
<span class="text-muted small font-weight-light">{{ posts_size }}
|
||||
post{% if posts_size > 1 %}s{% endif %}
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- .card -->
|
||||
|
||||
{% assign group_index = group_index | plus: 1 %}
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,6 @@
|
|||
---
|
||||
layout: tags
|
||||
title: Tags
|
||||
icon: fas fa-tags
|
||||
order: 2
|
||||
|
||||
# All the Tags of posts.
|
||||
# v2.0
|
||||
# https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
# © 2017-2019 Cotes Chung
|
||||
# MIT License
|
||||
---
|
||||
|
||||
{% comment %}
|
||||
'site.tags' looks like a Map, e.g. site.tags.MyTag.[ Post0, Post1, ... ]
|
||||
Print the {{ site.tags }} will help you to understand it.
|
||||
{% endcomment %}
|
||||
<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
|
||||
{% assign tags = "" | split: "" %}
|
||||
{% for t in site.tags %}
|
||||
{% assign tags = tags | push: t[0] %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign sorted_tags = tags | sort_natural %}
|
||||
|
||||
{% for t in sorted_tags %}
|
||||
<div>
|
||||
<a class="tag" href="{{ site.baseurl }}/tags/{{ t | replace: ' ', '-' | downcase | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue