mirror of
https://github.com/Colin-XKL/Colinx-Blog.git
synced 2026-01-11 18:21:28 +08:00
refactor: better load performance
This commit is contained in:
Colin
@@ -1,12 +1,31 @@
|
|||||||
<div id="gitalk-container" style="
|
<div id="gitalk-container"></div>
|
||||||
margin: 20px auto;
|
<div class='js-toc'></div>
|
||||||
max-width: 800px;
|
|
||||||
padding: 20px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
"></div>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
|
let meta = document.querySelectorAll('.post:not(.on-list) .post-meta')[0];
|
||||||
|
const visitors = `<span id="busuanzi_container_page_pv" style='display:none'> 浏览：<span id="busuanzi_value_page_pv"></span>次</span>`
|
||||||
|
if (meta) meta.innerHTML = meta.innerHTML + visitors
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
|
||||||
|
<script >
|
||||||
|
tocbot.init({
|
||||||
|
// Where to render the table of contents.
|
||||||
|
tocSelector: '.js-toc',
|
||||||
|
// Where to grab the headings to build the table of contents.
|
||||||
|
contentSelector: '.post-content',
|
||||||
|
// Which headings to grab inside of the contentSelector element.
|
||||||
|
headingSelector: 'h1, h2, h3',
|
||||||
|
// For headings inside relative or absolute positioned containers within content.
|
||||||
|
hasInnerContainers: true,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
|
||||||
|
|
||||||
|
<script defer src="{{ "assets/prism.js" | absURL }}"></script>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
|
||||||
|
<script >
|
||||||
const gitalk = new Gitalk({
|
const gitalk = new Gitalk({
|
||||||
clientID: '94eae56b89dcc480bf4d',
|
clientID: '94eae56b89dcc480bf4d',
|
||||||
clientSecret: '1e4218c0293a998a9483ab09ba9ace46cabc76b3',
|
clientSecret: '1e4218c0293a998a9483ab09ba9ace46cabc76b3',
|
||||||
|
|||||||
@@ -1,51 +1,12 @@
|
|||||||
<!-- link style -->
|
<script src="{{ "assets/main.js" | absURL }}"></script>
|
||||||
<!-- <style>
|
|
||||||
.post-content a {
|
|
||||||
transition: background-size 0.1s ease;
|
|
||||||
background: linear-gradient(to bottom, transparent 62%, #fff56644 0) center center/0% 75% no-repeat;
|
|
||||||
color: #52c41a;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content a:hover {
|
<script src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
|
||||||
background-size: 100% 100%;
|
<script >
|
||||||
color: #389e0d;
|
pangu.spacingElementByClassName('post');
|
||||||
}
|
pangu.spacingElementByTagName('p');
|
||||||
|
|
||||||
.post-content a:active {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
background-size: 80% 100%;
|
// listen to any DOM change and automatically perform spacing via MutationObserver()
|
||||||
}
|
pangu.autoSpacingPage();
|
||||||
</style> -->
|
|
||||||
|
|
||||||
<!-- toc -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tocbot.init({
|
|
||||||
// Where to render the table of contents.
|
|
||||||
tocSelector: '.js-toc',
|
|
||||||
// Where to grab the headings to build the table of contents.
|
|
||||||
contentSelector: '.post-content',
|
|
||||||
// Which headings to grab inside of the contentSelector element.
|
|
||||||
headingSelector: 'h1, h2, h3',
|
|
||||||
// For headings inside relative or absolute positioned containers within content.
|
|
||||||
hasInnerContainers: true,
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
::selection {
|
|
||||||
background: #b5b5b5;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background: #b5b5b5;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-selection {
|
|
||||||
background: #b5b5b5;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,9 +1,4 @@
|
|||||||
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
<script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
||||||
<style type="text/css">body {font-weight: unset !important;font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif!important;}</style>
|
|
||||||
<style type="text/css">.framed{width: 100%;} .framed .h-anchor{display: none;}</style>
|
|
||||||
<meta http-equiv="x-dns-prefetch-control" content="on">
|
|
||||||
<link rel="dns-prefetch" href="//api.github.com" />
|
|
||||||
<link rel="dns-prefetch" href="//avatars.githubusercontent.com" />
|
|
||||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
|
||||||
<text y=%22.9em%22 font-size=%2290%22>👋</text></svg>">
|
<text y=%22.9em%22 font-size=%2290%22>👋</text></svg>">
|
||||||
<script src="https://cdn-go.cn/aegis/aegis-sdk/latest/aegis.min.js"></script>
|
<script src="https://cdn-go.cn/aegis/aegis-sdk/latest/aegis.min.js"></script>
|
||||||
@@ -15,4 +10,12 @@
|
|||||||
reportAssetSpeed: true, // 静态资源测速
|
reportAssetSpeed: true, // 静态资源测速
|
||||||
spa: true // spa 应用页面跳转的时候开启 pv 计算
|
spa: true // spa 应用页面跳转的时候开启 pv 计算
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
|
||||||
|
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||||||
|
<meta http-equiv="x-dns-prefetch-control" content="on">
|
||||||
|
<link rel="dns-prefetch" href="//api.github.com" />
|
||||||
|
<link rel="dns-prefetch" href="//avatars.githubusercontent.com" />
|
||||||
|
|
||||||
|
<style type="text/css">body {font-weight: unset !important;font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif!important;}</style>
|
||||||
|
<style type="text/css">.framed{width: 100%;} .framed .h-anchor{display: none;}</style>
|
||||||
@@ -1,91 +1,3 @@
|
|||||||
<div id="gitalk-container" style="
|
|
||||||
margin: 20px auto;
|
|
||||||
max-width: 800px;
|
|
||||||
padding: 20px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
"></div>
|
|
||||||
<div class='js-toc'></div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@media (min-width: 1560px) {
|
|
||||||
.js-toc {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-toc {
|
|
||||||
display: none;
|
|
||||||
/* IE and Edge */
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
/* Firefox */
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-toc::-webkit-scrollbar {
|
|
||||||
/* Chrome, Safari and Opera */
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-toc {
|
|
||||||
position: fixed;
|
|
||||||
width: 20%;
|
|
||||||
max-width: 400px;
|
|
||||||
right: 3rem;
|
|
||||||
top: 10em;
|
|
||||||
text-align: left;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 1rem 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.toc-list>li>a:hover {
|
|
||||||
text-underline-position: under;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-list a {
|
|
||||||
text-decoration: none;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: inline-block;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-active-link::before {
|
|
||||||
background-color: #d71a1b !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo__cursor {
|
|
||||||
background: #d71a1b;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- 超链接样式 -->
|
|
||||||
<style>
|
|
||||||
.post-tags a,
|
|
||||||
.post-content a {
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px dashed #d71a1b;
|
|
||||||
-webkit-transition: all .2s;
|
|
||||||
transition: all .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-tags a:hover,
|
|
||||||
.post-content a:hover,
|
|
||||||
nav a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 2px solid #d71a1b;
|
|
||||||
-webkit-transition: all .1s ease;
|
|
||||||
transition: all .1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<span id="busuanzi_container_site_pv" style='display:none'>
|
<span id="busuanzi_container_site_pv" style='display:none'>
|
||||||
嗨，第<span id="busuanzi_value_site_pv"></span>位小伙伴 : )
|
嗨，第<span id="busuanzi_value_site_pv"></span>位小伙伴 : )
|
||||||
@@ -106,23 +18,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script async src="{{ "assets/prism.js" | absURL }}"></script>
|
|
||||||
<script src="{{ "assets/main.js" | absURL }}"></script>
|
|
||||||
<script>
|
|
||||||
let meta = document.querySelectorAll('.post:not(.on-list) .post-meta')[0];
|
|
||||||
const visitors = `<span id="busuanzi_container_page_pv" style='display:none'> 浏览：<span id="busuanzi_value_page_pv"></span>次</span>`
|
|
||||||
if (meta) meta.innerHTML = meta.innerHTML + visitors
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
|
|
||||||
<script>
|
|
||||||
pangu.spacingElementByClassName('post');
|
|
||||||
pangu.spacingElementByTagName('p');
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// listen to any DOM change and automatically perform spacing via MutationObserver()
|
|
||||||
pangu.autoSpacingPage();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{{- partial "extended_footer.html" . }}
|
{{- partial "extended_footer.html" . }}
|
||||||
118
static/style.css
Normal file
118
static/style.css
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
/* gittalk comment style */
|
||||||
|
#gitalk-container {
|
||||||
|
margin: 20px auto;
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 20px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* toc style */
|
||||||
|
@media (min-width: 1560px) {
|
||||||
|
.js-toc {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-toc {
|
||||||
|
display: none;
|
||||||
|
/* IE and Edge */
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
/* Firefox */
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-toc::-webkit-scrollbar {
|
||||||
|
/* Chrome, Safari and Opera */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-toc {
|
||||||
|
position: fixed;
|
||||||
|
width: 20%;
|
||||||
|
max-width: 400px;
|
||||||
|
right: 3rem;
|
||||||
|
top: 10em;
|
||||||
|
text-align: left;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 1rem 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol.toc-list > li > a:hover {
|
||||||
|
text-underline-position: under;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-list a {
|
||||||
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-active-link::before {
|
||||||
|
background-color: #d71a1b !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo__cursor {
|
||||||
|
background: #d71a1b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超链接样式 */
|
||||||
|
|
||||||
|
.post-tags a,
|
||||||
|
.post-content a {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dashed #d71a1b;
|
||||||
|
-webkit-transition: all 0.2s;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-tags a:hover,
|
||||||
|
.post-content a:hover,
|
||||||
|
nav a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 2px solid #d71a1b;
|
||||||
|
-webkit-transition: all 0.1s ease;
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* custom ::selection */
|
||||||
|
::selection {
|
||||||
|
background: #b5b5b5;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background: #b5b5b5;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-selection {
|
||||||
|
background: #b5b5b5;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* abandoned link style */
|
||||||
|
|
||||||
|
/* .post-content a {
|
||||||
|
transition: background-size 0.1s ease;
|
||||||
|
background: linear-gradient(to bottom, transparent 62%, #fff56644 0) center center/0% 75% no-repeat;
|
||||||
|
color: #52c41a;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content a:hover {
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #389e0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content a:active {
|
||||||
|
background-size: 80% 100%;
|
||||||
|
} */
|
||||||
Reference in New Issue
Block a user