asandikci.com/web
1
0
Fork 0
Code Issues 10 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

14
_includes/head.html
View file

@ -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>

19
_includes/panel.html
View file

@ -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 -->

7
_layouts/home.html
View file

@ -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 %}

4
_layouts/page.html
View file

@ -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 %}

22
_layouts/post.html
View file

@ -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 %}

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

@ -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 {

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

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