Use collections to improve the tabs

This commit is contained in:
Cotes Chung 2020-11-22 04:24:09 +08:00
parent 1f2ed3db60
commit 270d3ba499
11 changed files with 65 additions and 88 deletions

View file

@ -17,8 +17,8 @@ description: >- # used by seo meta and the atom feed
bootstrap Jekyll theme with responsive web design bootstrap Jekyll theme with responsive web design
and focuses on text presentation. and focuses on text presentation.
# Replace with the website url, e.g. 'https://username.github.io' # fill in the base hostname & protocol for your site, e.g., 'https://username.github.io'
url: 'protocol://domain' url: ''
author: your_full_name # change to your full name author: your_full_name # change to your full name
@ -80,7 +80,7 @@ disqus:
# #
theme_mode: dual theme_mode: dual
# boolean type, global switch for ToC in posts. # boolean type, the global switch for ToC in posts.
toc: true toc: true
paginate: 10 paginate: 10
@ -105,16 +105,21 @@ kramdown:
# or you think you're smart enough to change other relevant URLs within this template. # or you think you're smart enough to change other relevant URLs within this template.
permalink: /posts/:title/ permalink: /posts/:title/
collections:
tabs:
output: true
sort_by: order
defaults: defaults:
- -
scope: scope:
path: "" # An empty string here means all files in the project path: '' # An empty string here means all files in the project
type: posts type: posts
values: values:
layout: post layout: post
comments: true # Enable comments in posts. comments: true # Enable comments in posts.
toc: true # Display TOC column in posts. toc: true # Display TOC column in posts.
location: Post
breadcrumb: breadcrumb:
- -
label: Posts label: Posts
@ -128,8 +133,6 @@ defaults:
scope: scope:
path: tags path: tags
values: values:
tab_active: Tags
location: Tag
breadcrumb: breadcrumb:
- -
label: Home label: Home
@ -141,8 +144,6 @@ defaults:
scope: scope:
path: categories path: categories
values: values:
tab_active: Categories
location: Category
breadcrumb: breadcrumb:
- -
label: Home label: Home
@ -152,7 +153,8 @@ defaults:
url: /tabs/categories/ url: /tabs/categories/
- -
scope: scope:
path: tabs path: ''
type: tabs # see `site.collections`
values: values:
layout: page layout: page
dynamic_title: true # Hide title in mobile screens. dynamic_title: true # Hide title in mobile screens.

View file

@ -1,30 +0,0 @@
# The tab data.
# v2.1
# https://github.com/cotes2020/jekyll-theme-chirpy
# © 2020 Cotes Chung
# MIT Licensed
-
name: Home
icon: "fas fa-home"
-
name: Categories
icon: "fas fa-stream"
path: tabs
url: categories
-
name: "Tags"
icon: "fas fa-tags"
path: tabs
url: tags
-
name: "Archives"
path: tabs
url: archives
icon: "fas fa-archive"
-
name: "About"
icon: "fas fa-info"
path: tabs
url: about

View file

@ -12,20 +12,21 @@
{% elsif page.layout == 'page' %} {% elsif page.layout == 'page' %}
{% if page.type == 'categories' %} {% if page.collection == 'tabs' and page.title != 'About' %}
<link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style"> {% if page.title == 'Categories' %}
<link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}"> <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
<link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
{% elsif page.type == 'tags' %}
{% elsif page.title == 'Tags' %}
<link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style"> <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
<link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}"> <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
{% elsif page.type == 'archives' %} {% elsif page.title == 'Archives'%}
<link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
<link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style"> <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
{% endif %}
{% else %} {% else %}

View file

@ -22,7 +22,7 @@
{% elsif page.layout == 'page' %} {% elsif page.layout == 'page' %}
{% if page.type == 'categories' %} {% if page.title == 'Categories' and page.collection == 'tabs' %}
<script async src="{{ '/assets/js/categories.min.js' | relative_url }}"></script> <script async src="{{ '/assets/js/categories.min.js' | relative_url }}"></script>
{% else %} {% else %}
<script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script> <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>

View file

@ -7,6 +7,7 @@
--> -->
<div id="nav-wrapper"> <div id="nav-wrapper">
<div id="profile-wrapper" class="d-flex flex-column"> <div id="profile-wrapper" class="d-flex flex-column">
<div id="avatar" class="d-flex justify-content-center"> <div id="avatar" class="d-flex justify-content-center">
<a href="{{ site.baseurl }}/" alt="avatar"> <a href="{{ site.baseurl }}/" alt="avatar">
@ -25,31 +26,25 @@
</div> </div>
<div class="site-subtitle font-italic">{{- site.tagline -}}</div> <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
</div> </div>
</div> </div><!-- #profile-wrapper -->
<ul class="nav flex-column"> <ul class="nav flex-column">
{% assign page_urls = page.url | split: "/" %} <!-- home -->
<li class="nav-item d-flex justify-content-center {% if page.layout == 'home' %}active{% endif %}">
{% for item in site.data.tabs %} <a href="/" class="nav-link d-flex justify-content-center align-items-center w-100">
{% assign ref = site.baseurl | append: "/" %} <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
<span>{{ "HOME" }}</span>
{% if item.path %} </a>
{% assign ref = ref | append: item.path | append: "/" %} </li>
{% if item.url %} <!-- the real tabs -->
{% assign ref = ref | append: item.url | append: "/" %} {% for tab in site.tabs %}
{% endif %} <li class="nav-item d-flex justify-content-center {% if tab.url == page.url %}active{% endif %}">
{% endif %} <a href="{{ tab.url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
<i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
<li class="nav-item d-flex justify-content-center <span>{{ tab.title | upcase }}</span>
{% if item.url == page_urls.last
or item.name == page.tab_active
or item.name == "Home" and page.layout == "home" %}active{% endif %}">
<a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
<i class="fa-fw {{ item.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
<span>{{ item.name | upcase }}</span>
</a> </a>
</li> <!-- .nav-item --> </li> <!-- .nav-item -->
{% endfor %} {% endfor %}
</ul> <!-- ul.nav.flex-column --> </ul> <!-- ul.nav.flex-column -->

View file

@ -29,13 +29,13 @@
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i> <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
<div id="topbar-title"> <div id="topbar-title">
{% if page.location %} {% if page.layout == 'home' %}
{{- page.location -}} {{- site.title -}}
{% elsif page.layout == "home" %} {% elsif page.collection == 'tabs' %}
{{- site.title -}} {{- page.title -}}
{% else %} {% else %}
{{- page.title -}} {{- page.layout | capitalize -}}
{% endif %} {% endif %}
</div> </div>
<i id="search-trigger" class="fas fa-search fa-fw"></i> <i id="search-trigger" class="fas fa-search fa-fw"></i>

View file

@ -1,5 +1,7 @@
--- ---
title: About title: About
icon: fas fa-info
order: 4
# The About page # The About page
# v2.0 # v2.0
@ -8,4 +10,5 @@ title: About
# MIT License # MIT License
--- ---
> **Note**: Add Markdown syntax content to file `tabs/about.md` and it will show up on this page.
> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.

View file

@ -1,6 +1,8 @@
--- ---
title: Archives title: Archives
type: archives icon: fas fa-archive
order: 3
# The Archives of posts. # The Archives of posts.
# v2.0 # v2.0
# https://github.com/cotes2020/jekyll-theme-chirpy # https://github.com/cotes2020/jekyll-theme-chirpy
@ -37,4 +39,4 @@ type: archives
{% assign last_month = "" %} {% assign last_month = "" %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>

View file

@ -1,6 +1,8 @@
--- ---
title: Categories title: Categories
type: categories icon: fas fa-stream
order: 1
# All the Categories of posts # All the Categories of posts
# v2.0 # v2.0
# https://github.com/cotes2020/jekyll-theme-chirpy # https://github.com/cotes2020/jekyll-theme-chirpy

View file

@ -1,6 +1,8 @@
--- ---
title: Tags title: Tags
type: tags icon: fas fa-tags
order: 2
# All the Tags of posts. # All the Tags of posts.
# v2.0 # v2.0
# https://github.com/cotes2020/jekyll-theme-chirpy # https://github.com/cotes2020/jekyll-theme-chirpy

View file

@ -64,7 +64,7 @@ body {
/*--- sidebar layout ---*/ /*--- sidebar layout ---*/
$tab-count: {{ site.data.tabs | size }}; $tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
$sidebar-display: "sidebar-display"; $sidebar-display: "sidebar-display";