mirror of
https://github.com/Colin-XKL/Colinx-Blog.git
synced 2026-01-11 10:11:28 +08:00
refactor: better load performance
This commit is contained in:
Colin
@@ -1,12 +1,31 @@
|
||||
<div id="gitalk-container" style="
|
||||
margin: 20px auto;
|
||||
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>
|
||||
<div id="gitalk-container"></div>
|
||||
<div class='js-toc'></div>
|
||||
|
||||
<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({
|
||||
clientID: '94eae56b89dcc480bf4d',
|
||||
clientSecret: '1e4218c0293a998a9483ab09ba9ace46cabc76b3',
|
||||
|
||||
@@ -1,51 +1,12 @@
|
||||
<!-- link style -->
|
||||
<!-- <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;
|
||||
}
|
||||
<script src="{{ "assets/main.js" | absURL }}"></script>
|
||||
|
||||
.post-content a:hover {
|
||||
background-size: 100% 100%;
|
||||
color: #389e0d;
|
||||
}
|
||||
<script src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
|
||||
<script >
|
||||
pangu.spacingElementByClassName('post');
|
||||
pangu.spacingElementByTagName('p');
|
||||
|
||||
.post-content a:active {
|
||||
background-size: 80% 100%;
|
||||
}
|
||||
</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,
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// listen to any DOM change and automatically perform spacing via MutationObserver()
|
||||
pangu.autoSpacingPage();
|
||||
});
|
||||
</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>
|
||||
</script>
|
||||
@@ -1,9 +1,4 @@
|
||||
<script async 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" />
|
||||
<script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
||||
<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>">
|
||||
<script src="https://cdn-go.cn/aegis/aegis-sdk/latest/aegis.min.js"></script>
|
||||
@@ -15,4 +10,12 @@
|
||||
reportAssetSpeed: true, // 静态资源测速
|
||||
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">
|
||||
<span id="busuanzi_container_site_pv" style='display:none'>
|
||||
嗨，第<span id="busuanzi_value_site_pv"></span>位小伙伴 : )
|
||||
@@ -106,23 +18,4 @@
|
||||
</div>
|
||||
</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" . }}
|
||||
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