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
google_analytics:
# Change to your Google Analytics ID
id: 'UA-*********-*'
# Fill with your Google Analytics ID
id: ''
# The Google Analytics pageviews switch.
# DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
pv: false
# superProxy Url, only valid when `google_analytics.pv` is set to 'true'
proxy_url: ''
disqus:
shortname: 'disqus' # Change to your Disqus shortname.

33
_includes/head.html
View file

@ -19,6 +19,27 @@
{% 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"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
@ -55,25 +76,21 @@
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></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 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"
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 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' %}
<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 %}
<script src="{{ site.baseurl }}/assets/js/dist/countUp.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">
{% include topbar.html %}
<div id="main">
<div class="row justify-content-center bg-white">
{% capture _content %}
{{ content }}
@ -26,7 +25,6 @@ layout: compress
{% include fixlinenos.html %}
{{ _content }}
</div>
{% include footer.html %}
</div>
{% include search-results.html %}
@ -34,11 +32,16 @@ layout: compress
<div id="mask"></div>
{% include search.html %}
<a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
<i class="fas fa-angle-up"></i>
</a>
{% if jekyll.environment == 'production' %}
{% include google-analytics.html %}
{% endif %}
{% include search.html %}
</body>
</html>

29
_layouts/page.html
View file

@ -5,23 +5,22 @@ layout: default
# MIT License
---
<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 %}
<h1 class="dynamic-title">{{ page.title }}</h1>
<div class="post-content">
<div class="row d-flex justify-content-center bg-white">
<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 %}
<h1 class="dynamic-title">{{ page.title }}</h1>
<div class="post-content">
{{ content }}
</div>
{% else %}
{{ content }}
</div>
{% endif %}
{% else %}
</div> <!-- #page -->
{{ content }}
</div><!-- .col-12 -->
{% endif %}
{% include panel.html %}
</div> <!-- #page -->
</div><!-- end .col-12 -->
{% include panel.html %}
</div>

81
_layouts/post.html
View file

@ -5,11 +5,11 @@ layout: default
# 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="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
<div class="post">
<div id="post-wrap" class="col-12 col-lg-11 col-xl-8">
<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
<h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted d-flex flex-column">
<!-- Published Date and Categoreis -->
@ -18,12 +18,13 @@ layout: default
{{ page.date | date: POST_DATE }}
<i class="hidden">{{ page.date | date_to_xmlschema }}</i>
</span>
{% if page.categories.size > 0 %}on{% endif %}
{% for category in page.categories %}
<a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase }}/'>{{ category }}</a>
{%- unless forloop.last -%}, {%- endunless -%}
{% endfor %}
{% if page.categories.size > 0 %}on{% endif %}
{% for category in page.categories %}
<a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase }}/'>{{ category }}</a>
{%- unless forloop.last -%}, {%- endunless -%}
{% endfor %}
</div>
<!-- lastmod -->
{% if page.seo.date_modified > page.date %}
<div>
@ -34,12 +35,14 @@ layout: default
</span>
</div>
{% endif %}
<!-- page views -->
{% if site.google_analytics.pv %}
<div>
<span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin"></i></span> views
</div>
{% endif %}
</div> <!-- .post-meta -->
{% capture post_content %}
@ -68,44 +71,46 @@ layout: default
{{- tag -}}
</a>{%- if forloop.last != true -%}&ensp;{%- endif -%}
{% endfor %}
</div>
</div>
{% 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-wrap -->
{% 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> <!-- end .post-pager -->
{% include panel.html %}
<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 %}
{% include disqus.html %}
{% else %}
<br>
{% endif %}
</div>
</div>
</div> <!-- #post-wrap -->
</div> <!-- div.col-12..col-lg-11.col-xl-8 -->
{% include panel.html %}
</div> <!-- .row -->
<!-- image lazy load -->
<script type="text/javascript">

31
assets/css/main.scss
View file

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

31
assets/css/post.scss
View file

@ -106,4 +106,35 @@
position: relative;
top: 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);
}
}