Split the CSS selection from head tag.

_includes/css-selector.html

@@ -0,0 +1,54 @@
+<!--
+  CSS selector for site.
+  Chirpy v2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  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.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 }}">
+
+  {% 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 }}">
+
+  {% 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 %}

_includes/head.html

@@ -44,7 +44,6 @@
   <link rel="dns-prefetch" href="cdn.jsdelivr.net">
 
   <!-- Bootstrap -->
-
   <link rel="preload" as="style"
     href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin>
@@ -54,56 +53,12 @@
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
 
   <!-- Font Awesome -->
-
-  <link rel="preload" as="style"
-    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
-    integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
-    crossorigin="anonymous">
-
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
     integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
     crossorigin="anonymous">
 
-
+  {% include css-selector.html %}
-  {% if page.layout == 'home' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/home.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/home.css">
-
-  {% elsif page.layout == 'page' %}
-
-    {% if page.title == 'Categories' %}
-      <link rel="preload" href="{{ site.baseurl }}/assets/css/categories.css" as="style">
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/categories.css">
-
-    {% elsif page.title == 'Tags' %}
-      <link rel="preload" href="{{ site.baseurl }}/assets/css/tags.css" as="style">
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tags.css">
-
-    {% elsif page.title == 'Archives' %}
-      <link rel="preload" href="{{ site.baseurl }}/assets/css/archives.css" as="style">
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/archives.css">
-
-    {% else %}
-      <link rel="preload" href="{{ site.baseurl }}/assets/css/page.css" as="style">
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/page.css">
-
-    {% endif %}
-
-  {% elsif page.layout == 'category' or page.layout == 'tag' %}
-      <link rel="preload" href="{{ site.baseurl }}/assets/css/category-tag.css" as="style">
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/category-tag.css">
-
-  {% elsif page.layout == 'post' %}
-    <link rel="preload" as="style" href="{{ site.baseurl }}/assets/css/post.css">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css">
-
-    {% if site.toc and page.toc %}
-      <link rel="preload" as="style" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css">
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
-    {% endif %}
-
-  {% endif %}
 
   <!-- JavaScripts -->