Improved post loading speed.
Also improved the layout for Home page.
This commit is contained in:
Cotes Chung
parent
31cacb7278
commit
15a2a98e05
8 changed files with 64 additions and 69 deletions
|
|
@ -6,11 +6,11 @@
|
|||
|
||||
<head>
|
||||
<title>
|
||||
{%- if page.layout == "home" -%}
|
||||
{{- site.title -}}
|
||||
{%- else -%}
|
||||
{{ page.title }} | {{ site.title }}
|
||||
{%- endif -%}
|
||||
{%- if page.layout == "home" -%}
|
||||
{{- site.title -}}
|
||||
{%- else -%}
|
||||
{{ page.title }} | {{ site.title }}
|
||||
{%- endif -%}
|
||||
</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
|
@ -50,4 +50,18 @@
|
|||
{% include google-analytics.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.layout == 'home' or page.layout == 'post' %}
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
|
||||
{% if site.google_analytics.pv %}
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.layout == 'post' and site.toc and page.toc %}
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
|
||||
<script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/toc.min.js"></script>
|
||||
{% endif %}
|
||||
|
||||
</head>
|
||||
|
|
@ -4,8 +4,9 @@
|
|||
MIT License
|
||||
-->
|
||||
|
||||
<div class="panel-group">
|
||||
<div id="panel-wrap" class="col-xl-3 pl-2 topbar-down">
|
||||
|
||||
<div class="access">
|
||||
{% assign lastmod_list = "" | split: "" %}
|
||||
{% assign index = 0 %}
|
||||
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
{% endfor %}
|
||||
|
||||
{% if lastmod_list.size > 0 %}
|
||||
<div id="panel-update" class="post mb-4"">
|
||||
<div id="access-lastmod" class="post mb-4"">
|
||||
<h3 data-toc-skip>
|
||||
{{ site.data.label.panel.lastmod }}
|
||||
</h3>
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
</div><!-- #panel-update -->
|
||||
{% endif %}
|
||||
|
||||
<div id="panel-tags">
|
||||
<div id="access-tags">
|
||||
<h3 data-toc-skip>
|
||||
{{ site.data.label.panel.trending_tags }}
|
||||
</h3>
|
||||
|
|
@ -69,5 +70,15 @@
|
|||
|
||||
</div>
|
||||
</div><!-- #panel-tags -->
|
||||
|
||||
</div>
|
||||
|
||||
{% if page.layout == 'post' and site.toc and page.toc %}
|
||||
<div id="toc-wrap" class="pl-0 pr-4">
|
||||
<h3 data-toc-skip class="pl-3 pt-2">
|
||||
{{- site.data.label.panel.toc -}}
|
||||
</h3>
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- #panel-wrap -->
|
||||
|
|
@ -119,10 +119,3 @@ layout: page
|
|||
|
||||
</ul> <!-- .pagination -->
|
||||
{% endif %}
|
||||
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
|
||||
|
||||
{% if site.google_analytics.pv %}
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,4 @@ layout: default
|
|||
</div> <!-- #page -->
|
||||
</div><!-- end .col-12 -->
|
||||
|
||||
<div id="panel-wrap" class="col-xl-3 pl-2">
|
||||
{% include panel.html %}
|
||||
</div>
|
||||
{% include panel.html %}
|
||||
|
|
|
|||
|
|
@ -96,24 +96,4 @@ layout: default
|
|||
</div> <!-- #post-wrap -->
|
||||
</div> <!-- div.col-12..col-lg-11.col-xl-8 -->
|
||||
|
||||
<div id="post-panel" class="col-xl-3 pl-2">
|
||||
{% include panel.html %}
|
||||
{% if site.toc and page.toc %}
|
||||
<div id="toc-wrap" class="topbar-down pr-4">
|
||||
<h3 data-toc-skip class="pl-3 pt-2">
|
||||
{{- site.data.label.panel.toc -}}
|
||||
</h3>
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
</div>
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
|
||||
<script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/toc.min.js"></script>
|
||||
{% endif %}
|
||||
</div> <!-- #post-panel -->
|
||||
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
|
||||
|
||||
{% if site.google_analytics.pv %}
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
|
||||
{% endif %}
|
||||
{% include panel.html %}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
assets/js/dist/_commons/topbar-switch.min.js
vendored
2
assets/js/dist/_commons/topbar-switch.min.js
vendored
|
|
@ -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}});
|
||||
$(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}});
|
||||
Loading…
Reference in a new issue