asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Use collections to improve the tabs

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

22
_config.yml
View file

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

30
_data/tabs.yml
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

21
_includes/css-selector.html
View file

@ -12,20 +12,21 @@
{% 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">
<link rel="stylesheet" href="{{ '/assets/css/categories.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.type == 'tags' %}
{% 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 }}">
<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 }}">
{% elsif page.type == '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 %}

2
_includes/js-selector.html
View file

@ -22,7 +22,7 @@
{% 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>
{% else %}
<script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>

37
_includes/sidebar.html
View file

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

14
_includes/topbar.html
View file

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

5
tabs/about.md → _tabs/about.md
View file

@ -1,5 +1,7 @@
---
title: About
icon: fas fa-info
order: 4
# The About page
# v2.0
@ -8,4 +10,5 @@ title: About
# 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.

4
tabs/archives.md → _tabs/archives.md
View file

@ -1,6 +1,8 @@
---
title: Archives
type: archives
icon: fas fa-archive
order: 3
# The Archives of posts.
# v2.0
# https://github.com/cotes2020/jekyll-theme-chirpy

4
tabs/categories.md → _tabs/categories.md
View file

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

4
tabs/tags.md → _tabs/tags.md
View file

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

2
assets/css/_addon/main.scss
View file

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