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

Improved post loading speed.

Browse source 
Also improved the layout for Home page.
This commit is contained in:
Cotes Chung 2019-10-29 14:09:58 +08:00
parent 31cacb7278
commit 15a2a98e05
8 changed files with 64 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
_includes/head.html
View file

@ -6,11 +6,11 @@
<head> <head>
<title> <title>
{%- if page.layout == "home" -%} {%- if page.layout == "home" -%}
{{- site.title -}} {{- site.title -}}
{%- else -%} {%- else -%}
{{ page.title }} | {{ site.title }} {{ page.title }} | {{ site.title }}
{%- endif -%} {%- endif -%}
</title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@ -50,4 +50,18 @@
{% include google-analytics.html %} {% include google-analytics.html %}
{% endif %} {% 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> </head>

19
_includes/panel.html
View file

@ -4,8 +4,9 @@
MIT License 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 lastmod_list = "" | split: "" %}
{% assign index = 0 %} {% assign index = 0 %}
@ -20,7 +21,7 @@
{% endfor %} {% endfor %}
{% if lastmod_list.size > 0 %} {% 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> <h3 data-toc-skip>
{{ site.data.label.panel.lastmod }} {{ site.data.label.panel.lastmod }}
</h3> </h3>
@ -41,7 +42,7 @@
</div><!-- #panel-update --> </div><!-- #panel-update -->
{% endif %} {% endif %}
<div id="panel-tags"> <div id="access-tags">
<h3 data-toc-skip> <h3 data-toc-skip>
{{ site.data.label.panel.trending_tags }} {{ site.data.label.panel.trending_tags }}
</h3> </h3>
@ -69,5 +70,15 @@
</div> </div>
</div><!-- #panel-tags --> </div><!-- #panel-tags -->
</div>
</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 -->

7
_layouts/home.html
View file

@ -119,10 +119,3 @@ layout: page
</ul> <!-- .pagination --> </ul> <!-- .pagination -->
{% endif %} {% 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 %}

4
_layouts/page.html
View file

@ -24,6 +24,4 @@ layout: default
</div> <!-- #page --> </div> <!-- #page -->
</div><!-- end .col-12 --> </div><!-- end .col-12 -->
<div id="panel-wrap" class="col-xl-3 pl-2"> {% include panel.html %}
{% include panel.html %}
</div>

22
_layouts/post.html
View file

@ -96,24 +96,4 @@ layout: default
</div> <!-- #post-wrap --> </div> <!-- #post-wrap -->
</div> <!-- div.col-12..col-lg-11.col-xl-8 --> </div> <!-- div.col-12..col-lg-11.col-xl-8 -->
<div id="post-panel" class="col-xl-3 pl-2"> {% include panel.html %}
{% 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 %}

47
assets/css/_src/main.scss
View file

@ -378,9 +378,7 @@ footer .license a {
/*--- Panels ---*/ /*--- Panels ---*/
.panel-group { .access {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 2rem; top: 2rem;
transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;
margin-right: 1.5rem; margin-right: 1.5rem;
@ -389,20 +387,25 @@ footer .license a {
color: #6c757d; color: #6c757d;
} }
.panel-group.topbar-down { .access:only-child {
position: -webkit-sticky; /* Safari */
position: sticky;
}
.access.topbar-down {
top: 6rem; top: 6rem;
} }
.panel-group>div { .access>div {
padding-left: 1rem; padding-left: 1rem;
border-left: 1px solid rgba(158, 158, 158, 0.17); border-left: 1px solid rgba(158, 158, 158, 0.17);
} }
.panel-group>div:not(:first-child) { .access>div:not(:first-child) {
margin-top: 4rem; margin-top: 4rem;
} }
.panel-group h3 { .access h3 {
padding-top: .5rem; padding-top: .5rem;
padding-bottom: .5rem; padding-bottom: .5rem;
margin-top: 0; margin-top: 0;
@ -412,15 +415,15 @@ footer .license a {
font-family: 'Oswald', sans-serif; font-family: 'Oswald', sans-serif;
} }
.panel-group .post-content { .access .post-content {
font-size: .9rem; font-size: .9rem;
} }
#panel-tags>div.post-content>div { #access-tags>div.post-content>div {
max-width: 80%; max-width: 80%;
} }
#panel-tags .post-tag { #access-tags .post-tag {
display: inline-block; display: inline-block;
line-height: 1rem; line-height: 1rem;
font-size: 0.85rem; font-size: 0.85rem;
@ -431,14 +434,14 @@ footer .license a {
margin-bottom: .3rem; margin-bottom: .3rem;
} }
#panel-tags .post-tag:hover { #access-tags .post-tag:hover {
background-color: #2a408e; background-color: #2a408e;
border-color: #2a408e; border-color: #2a408e;
color: #fff; color: #fff;
transition: none; transition: none;
} }
#panel-update ul>li { #access-lastmod ul>li {
height: 1.8rem; height: 1.8rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -448,7 +451,7 @@ footer .license a {
list-style: none; list-style: none;
} }
#panel-update ul a { #access-lastmod ul a {
color: #6c757d; color: #6c757d;
} }
@ -585,7 +588,7 @@ p>a, span>a,
} }
.categories a, .categories a,
.panel-group a, .access a,
#archives a, #archives a,
#page-tag a, #page-tag a,
#page-category a, #page-category a,
@ -606,7 +609,7 @@ p>a, span>a,
footer a:hover, footer a:hover,
#post-wrap .post-content a:hover, #post-wrap .post-content a:hover,
#page .post-content a:hover, #page .post-content a:hover,
#panel-update a:hover { #access-lastmod a:hover {
color: #d2603a; color: #d2603a;
border-bottom: 1px solid #d2603a; border-bottom: 1px solid #d2603a;
text-decoration: none; text-decoration: none;
@ -819,10 +822,6 @@ table tbody td {
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08)); filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
} }
#post-panel .panel-group {
position: static;
}
#toc-wrap { #toc-wrap {
border-left: 1px solid rgba(158, 158, 158, 0.17); border-left: 1px solid rgba(158, 158, 158, 0.17);
position: -webkit-sticky; position: -webkit-sticky;
@ -1164,7 +1163,7 @@ a.tag:hover {
#page-category a:hover, #page-category a:hover,
#page-tag a:hover, #page-tag a:hover,
#panel-update a:hover { #access-lastmod a:hover {
margin-bottom: -1px; // Avoid jumping margin-bottom: -1px; // Avoid jumping
} }
@ -1497,12 +1496,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
/* Pannel hidden */ /* Pannel hidden */
@media all and (max-width: 1200px) { @media all and (max-width: 1200px) {
#post-list { #panel-wrap {
padding-right: 0; display: none;
} }
#panel-wrap, #post-panel { #post-list {
display: none; padding-right: 0;
} }
.pagination { .pagination {

8
assets/js/_src/_commons/topbar-switch.js
View file

@ -38,8 +38,8 @@ $(function() {
$('#toc-wrap').removeClass('topbar-down'); $('#toc-wrap').removeClass('topbar-down');
} }
if ( $('.panel-group').length > 0) { if ( $('.access').length > 0) {
$('.panel-group').removeClass('topbar-down'); $('.access').removeClass('topbar-down');
} }
if ($('#search-input').is(':focus')) { if ($('#search-input').is(':focus')) {
@ -53,8 +53,8 @@ $(function() {
if ( $('#toc-wrap').length > 0) { if ( $('#toc-wrap').length > 0) {
$('#toc-wrap').addClass('topbar-down'); $('#toc-wrap').addClass('topbar-down');
} }
if ( $('.panel-group').length > 0) { if ( $('.access').length > 0) {
$('.panel-group').addClass('topbar-down'); $('.access').addClass('topbar-down');
} }
} }
} }

2
assets/js/dist/_commons/topbar-switch.min.js vendored
View file

@ -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}});