diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
index 9e1f4a6..96e8a54 100644
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@@ -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',
diff --git a/layouts/partials/extended_footer.html b/layouts/partials/extended_footer.html
index cd52d66..666c1d3 100644
--- a/layouts/partials/extended_footer.html
+++ b/layouts/partials/extended_footer.html
@@ -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>
\ No newline at end of file
diff --git a/layouts/partials/extended_head.html b/layouts/partials/extended_head.html
index c05e0af..704a9b0 100644
--- a/layouts/partials/extended_head.html
+++ b/layouts/partials/extended_head.html
@@ -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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 8ed5cd5..dda4819 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -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" . }}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..2fcf54d
--- /dev/null
+++ b/static/style.css
@@ -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%;
+} */