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

Optimize performance.

Browse source
This commit is contained in:
Cotes Chung 2019-11-25 20:56:50 +08:00
parent 0e6edb0d1a
commit bec924ed4c
7 changed files with 142 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_config.yml
View file

@ -42,11 +42,13 @@ google_site_verification: google_meta_tag_verification # change to your verifica
timezone: Asia/Shanghai timezone: Asia/Shanghai
google_analytics: google_analytics:
# Change to your Google Analytics ID # Fill with your Google Analytics ID
id: 'UA-*********-*' id: ''
# The Google Analytics pageviews switch. # The Google Analytics pageviews switch.
# DO NOT enable it unless you know how to deploy the Google Analytics superProxy. # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
pv: false pv: false
# superProxy Url, only valid when `google_analytics.pv` is set to 'true'
proxy_url: ''
disqus: disqus:
shortname: 'disqus' # Change to your Disqus shortname. shortname: 'disqus' # Change to your Disqus shortname.

33
_includes/head.html
View file

@ -19,6 +19,27 @@
{% include favicons.html %} {% include favicons.html %}
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<!-- ga -->
{% if jekyll.environment == 'production' %}
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
{% if site.google_analytics.proxy_url and site.google_analytics.pv %}
<link rel="preconnect" href="{{ site.google_analytics.proxy_url }}" crossorigin="use-credentials">
<link rel="dns-prefetch" href="{{ site.google_analytics.proxy_url }}">
{% endif %}
{% endif %}
<link rel="preconnect" href="cdn.jsdelivr.net">
<link rel="dns-prefetch" href="cdn.jsdelivr.net">
<link rel="stylesheet" <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous"> integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
@ -55,25 +76,21 @@
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script> <script>
document.jQuery || document.write('<script src="{{ site.baseurl }}/assets/lib/jquery-3.4.1.min.js"><\/script>'); document.jQuery || document.write("<script src=\"{{ site.baseurl }}/assets/lib/jquery-3.4.1.min.js\"><\/script>");
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js" <script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous"></script> integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous" async></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous"></script> integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous" async></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script src="{{ site.baseurl }}/assets/js/dist/commons.js" async></script> <script src="{{ site.baseurl }}/assets/js/dist/commons.js" async></script>
{% if jekyll.environment == 'production' %}
{% include google-analytics.html %}
{% endif %}
{% if page.layout == 'home' or page.layout == 'post' %} {% if page.layout == 'home' or page.layout == 'post' %}
<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script> <script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js" async></script>
{% if site.google_analytics.pv %} {% if site.google_analytics.pv %}
<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script> <script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script> <script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>

11
_layouts/default.html
View file

@ -17,7 +17,6 @@ layout: compress
<div id="main-wrap"> <div id="main-wrap">
{% include topbar.html %} {% include topbar.html %}
<div id="main"> <div id="main">
<div class="row justify-content-center bg-white">
{% capture _content %} {% capture _content %}
{{ content }} {{ content }}
@ -26,7 +25,6 @@ layout: compress
{% include fixlinenos.html %} {% include fixlinenos.html %}
{{ _content }} {{ _content }}
</div>
{% include footer.html %} {% include footer.html %}
</div> </div>
{% include search-results.html %} {% include search-results.html %}
@ -34,11 +32,16 @@ layout: compress
<div id="mask"></div> <div id="mask"></div>
{% include search.html %}
<a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button"> <a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
<i class="fas fa-angle-up"></i> <i class="fas fa-angle-up"></i>
</a> </a>
{% if jekyll.environment == 'production' %}
{% include google-analytics.html %}
{% endif %}
{% include search.html %}
</body> </body>
</html> </html>

29
_layouts/page.html
View file

@ -5,23 +5,22 @@ layout: default
# MIT License # MIT License
--- ---
<div class="col-12 col-lg-11 col-xl-8"> <div class="row d-flex justify-content-center bg-white">
<div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3"> <div class="col-12 col-lg-11 col-xl-8">
<div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
{% if page.dynamic_title %} {% if page.dynamic_title %}
<h1 class="dynamic-title">{{ page.title }}</h1>
<h1 class="dynamic-title">{{ page.title }}</h1> <div class="post-content">
<div class="post-content"> {{ content }}
</div>
{% else %}
{{ content }} {{ content }}
</div> {% endif %}
{% else %} </div> <!-- #page -->
{{ content }} </div><!-- .col-12 -->
{% endif %} {% include panel.html %}
</div> <!-- #page --> </div>
</div><!-- end .col-12 -->
{% include panel.html %}

81
_layouts/post.html
View file

@ -5,11 +5,11 @@ layout: default
# MIT Licensed # MIT Licensed
--- ---
{% include date-format.html %} <div class="row d-flex justify-content-center bg-white">
{% include date-format.html %}
<div class="col-12 col-lg-11 col-xl-8"> <div id="post-wrap" class="col-12 col-lg-11 col-xl-8">
<div id="post-wrap" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3"> <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
<div class="post">
<h1 data-toc-skip>{{ page.title }}</h1> <h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted d-flex flex-column"> <div class="post-meta text-muted d-flex flex-column">
<!-- Published Date and Categoreis --> <!-- Published Date and Categoreis -->
@ -18,12 +18,13 @@ layout: default
{{ page.date | date: POST_DATE }} {{ page.date | date: POST_DATE }}
<i class="hidden">{{ page.date | date_to_xmlschema }}</i> <i class="hidden">{{ page.date | date_to_xmlschema }}</i>
</span> </span>
{% if page.categories.size > 0 %}on{% endif %} {% if page.categories.size > 0 %}on{% endif %}
{% for category in page.categories %} {% for category in page.categories %}
<a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase }}/'>{{ category }}</a> <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase }}/'>{{ category }}</a>
{%- unless forloop.last -%}, {%- endunless -%} {%- unless forloop.last -%}, {%- endunless -%}
{% endfor %} {% endfor %}
</div> </div>
<!-- lastmod --> <!-- lastmod -->
{% if page.seo.date_modified > page.date %} {% if page.seo.date_modified > page.date %}
<div> <div>
@ -34,12 +35,14 @@ layout: default
</span> </span>
</div> </div>
{% endif %} {% endif %}
<!-- page views --> <!-- page views -->
{% if site.google_analytics.pv %} {% if site.google_analytics.pv %}
<div> <div>
<span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin"></i></span> views <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin"></i></span> views
</div> </div>
{% endif %} {% endif %}
</div> <!-- .post-meta --> </div> <!-- .post-meta -->
{% capture post_content %} {% capture post_content %}
@ -68,44 +71,46 @@ layout: default
{{- tag -}} {{- tag -}}
</a>{%- if forloop.last != true -%}&ensp;{%- endif -%} </a>{%- if forloop.last != true -%}&ensp;{%- endif -%}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
</div><!-- endof .post-tail --> </div><!-- div.post-tail -->
{% include related-posts.html %}
<div class="post-pager d-flex justify-content-between">
{% if page.previous.url %}
<a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
{% endif %}
<i class="fas fa-angle-left mr-1"></i>
OLDER POST
</a>
{% if page.next.url %}
<a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
{% endif %}
NEWER POST
<i class="fas fa-angle-right ml-1"></i>
</a>
</div> <!-- div.post-pager -->
</div> <!-- .post --> </div> <!-- .post -->
</div> <!-- #post-wrap -->
{% include related-posts.html %} {% include panel.html %}
<div class="post-pager d-flex justify-content-between">
{% if page.previous.url %}
<a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
{% endif %}
<i class="fas fa-angle-left mr-1"></i>
OLDER POST
</a>
{% if page.next.url %}
<a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
{% else %}
<a href="javascript:;" class="btn btn-outline-primary disabled">
{% endif %}
NEWER POST
<i class="fas fa-angle-right ml-1"></i>
</a>
</div> <!-- end .post-pager -->
<div id="comment-wrap" class="col-12 col-lg-11 col-xl-8">
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
{% if site.disqus.comments and page.comments %} {% if site.disqus.comments and page.comments %}
{% include disqus.html %} {% include disqus.html %}
{% else %}
<br>
{% endif %} {% endif %}
</div>
</div>
</div> <!-- #post-wrap --> </div> <!-- .row -->
</div> <!-- div.col-12..col-lg-11.col-xl-8 -->
{% include panel.html %}
<!-- image lazy load --> <!-- image lazy load -->
<script type="text/javascript"> <script type="text/javascript">

31
assets/css/main.scss
View file

@ -352,7 +352,8 @@ body {
-webkit-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease;
} }
#main>div.row>div { #main>div.row>div:nth-child(1),
#main>div.row>div:nth-child(2) {
margin-top: 3rem; /* same as the height of topbar */ margin-top: 3rem; /* same as the height of topbar */
} }
@ -360,10 +361,6 @@ body {
min-height: calc(100vh - 3rem - 6rem); /* 3rem for topbar, 6rem for footer */ min-height: calc(100vh - 3rem - 6rem); /* 3rem for topbar, 6rem for footer */
} }
#main-wrap .col-xl-3 {
max-width: 300px;
}
#topbar.row, #topbar.row,
#main>.row, #main>.row,
#search-result-wrap>.row { #search-result-wrap>.row {
@ -972,7 +969,8 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
top: 0 !important; top: 0 !important;
} }
#main>div.row>div { #main>div.row>div:nth-child(1),
#main>div.row>div:nth-child(2) {
margin-top: 0; margin-top: 0;
} }
@ -1083,10 +1081,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
} }
/*--- Large screens ---*/ /*--- Large screens, both sidebar and panel are visable ---*/
@media all and (min-width: 1200px) {
#main>div.row .col-xl-8 { @media all and (min-width: 1201px) {
#main>div.row>div.col-xl-8 {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 75%; -ms-flex: 0 0 75%;
flex: 0 0 75%; flex: 0 0 75%;
@ -1094,7 +1093,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
padding-left: 3%; padding-left: 3%;
} }
#breadcrumb { padding-left: 0; } #panel-wrap {
max-width: 300px;
}
#breadcrumb {
padding-left: 0;
}
#topbar-main { #topbar-main {
padding: 0 calc((100% - 1150px) / 2)!important; padding: 0 calc((100% - 1150px) / 2)!important;
@ -1120,7 +1125,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
@media all and (min-width: 1650px) { @media all and (min-width: 1650px) {
#main>div.row .col-xl-8 { #main>div.row>div.col-xl-8 {
padding-left: 0px; padding-left: 0px;
max-width: 850px; max-width: 850px;
} }
@ -1129,7 +1134,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
margin-left: 350px; margin-left: 350px;
} }
#main-wrap .col-xl-3 { #panel-wrap {
margin-left: calc((100% - 1150px) / 10); margin-left: calc((100% - 1150px) / 10);
} }
@ -1258,7 +1263,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
padding-right: calc(100% - 1570px); /* 100% - (1920px - 350px) */ padding-right: calc(100% - 1570px); /* 100% - (1920px - 350px) */
} }
#main-wrap .col-xl-3 { #panel-wrap {
margin-left: calc((100% - 1150px) / 8); margin-left: calc((100% - 1150px) / 8);
} }

31
assets/css/post.scss
View file

@ -107,3 +107,34 @@
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
} }
#comment-wrap {
min-height: 2rem;
}
/*
The following resposive design aim to make #comment-wrap margin-right same as pannel's width
*/
@media all and (min-width: 1201px) {
#comment-wrap {
margin-right: 25%;
}
}
@media all and (min-width: 1460px) {
#comment-wrap {
margin-right: 300px;
}
}
@media all and (min-width: 1650px) {
#comment-wrap {
margin-right: calc((100% - 1150px) / 10 + 300px);
}
}
@media all and (min-width: 1700px) {
#comment-wrap {
margin-right: calc((100% - 1150px) / 8 + 300px);
}
}