From 15a2a98e05d3a32502b135dc177e008b39ddbbad Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 29 Oct 2019 14:09:58 +0800 Subject: [PATCH] Improved post loading speed. Also improved the layout for Home page. --- _includes/head.html | 24 +++++++--- _includes/panel.html | 19 ++++++-- _layouts/home.html | 7 --- _layouts/page.html | 4 +- _layouts/post.html | 22 +-------- assets/css/_src/main.scss | 47 ++++++++++---------- assets/js/_src/_commons/topbar-switch.js | 8 ++-- assets/js/dist/_commons/topbar-switch.min.js | 2 +- 8 files changed, 64 insertions(+), 69 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index b81ce0b..f6c9fcd 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -6,11 +6,11 @@ - {%- if page.layout == "home" -%} - {{- site.title -}} - {%- else -%} - {{ page.title }} | {{ site.title }} - {%- endif -%} + {%- if page.layout == "home" -%} + {{- site.title -}} + {%- else -%} + {{ page.title }} | {{ site.title }} + {%- endif -%} @@ -50,4 +50,18 @@ {% include google-analytics.html %} {% endif %} + {% if page.layout == 'home' or page.layout == 'post' %} + + {% if site.google_analytics.pv %} + + + {% endif %} + {% endif %} + + {% if page.layout == 'post' and site.toc and page.toc %} + + + + {% endif %} + \ No newline at end of file diff --git a/_includes/panel.html b/_includes/panel.html index 6d6ccf1..f495fe1 100644 --- a/_includes/panel.html +++ b/_includes/panel.html @@ -4,8 +4,9 @@ MIT License --> -
+
+
{% assign lastmod_list = "" | split: "" %} {% assign index = 0 %} @@ -20,7 +21,7 @@ {% endfor %} {% if lastmod_list.size > 0 %} -
+

{{ site.data.label.panel.lastmod }}

@@ -41,7 +42,7 @@
{% endif %} -
+

{{ site.data.label.panel.trending_tags }}

@@ -69,5 +70,15 @@
+
-
\ No newline at end of file +{% if page.layout == 'post' and site.toc and page.toc %} +
+

+ {{- site.data.label.panel.toc -}} +

+ +
+{% endif %} + +
\ No newline at end of file diff --git a/_layouts/home.html b/_layouts/home.html index 03d7d96..c98cfde 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -119,10 +119,3 @@ layout: page {% endif %} - - - -{% if site.google_analytics.pv %} - - -{% endif %} diff --git a/_layouts/page.html b/_layouts/page.html index 660c96e..c68eb70 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -24,6 +24,4 @@ layout: default
-
- {% include panel.html %} -
\ No newline at end of file +{% include panel.html %} diff --git a/_layouts/post.html b/_layouts/post.html index 8a5819c..8cd19d7 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -96,24 +96,4 @@ layout: default -
- {% include panel.html %} - {% if site.toc and page.toc %} -
-

- {{- site.data.label.panel.toc -}} -

- -
- - - - {% endif %} -
- - - -{% if site.google_analytics.pv %} - - -{% endif %} +{% include panel.html %} diff --git a/assets/css/_src/main.scss b/assets/css/_src/main.scss index a9ff109..f6213aa 100644 --- a/assets/css/_src/main.scss +++ b/assets/css/_src/main.scss @@ -378,9 +378,7 @@ footer .license a { /*--- Panels ---*/ -.panel-group { - position: -webkit-sticky; /* Safari */ - position: sticky; +.access { top: 2rem; transition: top 0.2s ease-in-out; margin-right: 1.5rem; @@ -389,20 +387,25 @@ footer .license a { color: #6c757d; } -.panel-group.topbar-down { +.access:only-child { + position: -webkit-sticky; /* Safari */ + position: sticky; +} + +.access.topbar-down { top: 6rem; } -.panel-group>div { +.access>div { padding-left: 1rem; border-left: 1px solid rgba(158, 158, 158, 0.17); } -.panel-group>div:not(:first-child) { +.access>div:not(:first-child) { margin-top: 4rem; } -.panel-group h3 { +.access h3 { padding-top: .5rem; padding-bottom: .5rem; margin-top: 0; @@ -412,15 +415,15 @@ footer .license a { font-family: 'Oswald', sans-serif; } -.panel-group .post-content { +.access .post-content { font-size: .9rem; } -#panel-tags>div.post-content>div { +#access-tags>div.post-content>div { max-width: 80%; } -#panel-tags .post-tag { +#access-tags .post-tag { display: inline-block; line-height: 1rem; font-size: 0.85rem; @@ -431,14 +434,14 @@ footer .license a { margin-bottom: .3rem; } -#panel-tags .post-tag:hover { +#access-tags .post-tag:hover { background-color: #2a408e; border-color: #2a408e; color: #fff; transition: none; } -#panel-update ul>li { +#access-lastmod ul>li { height: 1.8rem; overflow: hidden; text-overflow: ellipsis; @@ -448,7 +451,7 @@ footer .license a { list-style: none; } -#panel-update ul a { +#access-lastmod ul a { color: #6c757d; } @@ -585,7 +588,7 @@ p>a, span>a, } .categories a, -.panel-group a, +.access a, #archives a, #page-tag a, #page-category a, @@ -606,7 +609,7 @@ p>a, span>a, footer a:hover, #post-wrap .post-content a:hover, #page .post-content a:hover, -#panel-update a:hover { +#access-lastmod a:hover { color: #d2603a; border-bottom: 1px solid #d2603a; text-decoration: none; @@ -819,10 +822,6 @@ table tbody td { filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08)); } -#post-panel .panel-group { - position: static; -} - #toc-wrap { border-left: 1px solid rgba(158, 158, 158, 0.17); position: -webkit-sticky; @@ -1164,7 +1163,7 @@ a.tag:hover { #page-category a:hover, #page-tag a:hover, -#panel-update a:hover { +#access-lastmod a:hover { margin-bottom: -1px; // Avoid jumping } @@ -1497,12 +1496,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */ /* Pannel hidden */ @media all and (max-width: 1200px) { - #post-list { - padding-right: 0; + #panel-wrap { + display: none; } - #panel-wrap, #post-panel { - display: none; + #post-list { + padding-right: 0; } .pagination { diff --git a/assets/js/_src/_commons/topbar-switch.js b/assets/js/_src/_commons/topbar-switch.js index 8ce3a03..dee9701 100644 --- a/assets/js/_src/_commons/topbar-switch.js +++ b/assets/js/_src/_commons/topbar-switch.js @@ -38,8 +38,8 @@ $(function() { $('#toc-wrap').removeClass('topbar-down'); } - if ( $('.panel-group').length > 0) { - $('.panel-group').removeClass('topbar-down'); + if ( $('.access').length > 0) { + $('.access').removeClass('topbar-down'); } if ($('#search-input').is(':focus')) { @@ -53,8 +53,8 @@ $(function() { if ( $('#toc-wrap').length > 0) { $('#toc-wrap').addClass('topbar-down'); } - if ( $('.panel-group').length > 0) { - $('.panel-group').addClass('topbar-down'); + if ( $('.access').length > 0) { + $('.access').addClass('topbar-down'); } } } diff --git a/assets/js/dist/_commons/topbar-switch.min.js b/assets/js/dist/_commons/topbar-switch.min.js index 0d3bda5..619c911 100644 --- a/assets/js/dist/_commons/topbar-switch.min.js +++ b/assets/js/dist/_commons/topbar-switch.min.js @@ -1 +1 @@ -$(function(){var d;var c=0;var e=5;var b=$("#topbar").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrap").length>0){$("#toc-wrap").removeClass("topbar-down")}if($(".panel-group").length>0){$(".panel-group").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrap").length>0){$("#toc-wrap").addClass("topbar-down")}if($(".panel-group").length>0){$(".panel-group").addClass("topbar-down")}}}c=f}}); \ No newline at end of file +$(function(){var d;var c=0;var e=5;var b=$("#topbar").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrap").length>0){$("#toc-wrap").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrap").length>0){$("#toc-wrap").addClass("topbar-down")}if($(".access").length>0){$(".access").addClass("topbar-down")}}}c=f}}); \ No newline at end of file