Kyxie's version init

2022-05-23 19:39:43 -04:00 · 2022-05-23 19:39:43 -04:00 · aad3f4c48f
commit aad3f4c48f
parent c5d31c778b
17 changed files with 6017 additions and 162 deletions
--- a/assets/css/common/header.css
+++ b/assets/css/common/header.css
@ -27,6 +27,11 @@
    font-weight: 700;
 }

+.logo a:hover {
+    transition: 0.15s;
+    color: grey;
+}
+
 .logo a img {
    display: inline;
    vertical-align: middle;
@ -40,6 +45,42 @@
    height: 18px;
 }

+svg:hover {
+    transition: 0.15s;
+}
+
+.social-icons a:nth-child(1) svg:hover {
+    color: #C84370 !important;
+}
+
+.social-icons a:nth-child(2) svg:hover {
+    color: grey !important;
+}
+
+.social-icons a:nth-child(3) svg:hover {
+    color: #0A66C2 !important;
+}
+
+.social-icons a:nth-child(4) svg:hover {
+    color: #2DC100 !important;
+}
+
+.social-icons a:nth-child(5) svg:hover {
+    color: #EA8011 !important;
+}
+
+.social-icons a:nth-child(6) svg:hover {
+    color: #FB7299 !important;
+    /* color: #1e88e5 !important; */
+}
+
+.social-icons a:nth-child(7) svg:hover {
+    color: #FD4C06 !important;
+}
+
+.social-icons a:nth-child(8) svg:hover {
+    color: #FD003A !important;
+}
 button#theme-toggle {
    font-size: 26px;
    margin: auto 4px;
@ -50,10 +91,20 @@ body.dark #moon {
    display: none;
 }

+#moon:hover {
+    transition: 0.15s;
+    color: deepskyblue;
+}
+
 body:not(.dark) #sun {
    display: none;
 }

+#sun:hover {
+    transition: 0.15s;
+    color: gold;
+}
+
 #menu {
    list-style: none;
    word-break: keep-all;
@ -69,6 +120,11 @@ body:not(.dark) #sun {
    font-size: 16px;
 }

+#menu a:hover {
+    transition: 0.15s;
+    color: grey;
+}
+
 #menu .active {
    font-weight: 500;
    border-bottom: 2px solid currentColor;
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@ -15,6 +15,7 @@

 .post-meta,
 .breadcrumbs {
+    /* author color */
    color: var(--secondary);
    font-size: 14px;
    display: flex;
@ -82,7 +83,8 @@

 .post-content del {
    text-decoration: none;
-    background: linear-gradient(to right, var(--primary) 100%, transparent 0) 0 50%/1px 1px repeat-x;
+    background: linear-gradient(to right, var(--primary) 100%, transparent 0) 0
+        50%/1px 1px repeat-x;
 }

 .post-content dl,
@ -133,7 +135,9 @@
 }

 .post-content table th,
-.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
+.post-content
+    table:not(.highlighttable, .highlight table, .gist .highlight)
+    td {
    min-width: 80px;
    padding: 12px 8px;
    line-height: 1.5;
@ -168,6 +172,7 @@
 }

 .post-content .highlight pre {
+    background-color: var(--theme) !important;
    margin: 0;
 }

@ -198,16 +203,16 @@
    font-size: 0.78em;
    line-height: 1.5;
    background: var(--code-bg);
-    border-radius: 2px;
+    border-radius: 10px;
 }

 .post-content pre code {
    display: block;
    margin: auto 0;
    padding: 10px;
-    color: rgb(213, 213, 214);
-    background: var(--hljs-bg) !important;
-    border-radius: var(--radius);
+    /* 主要代码颜色 */
+    color: #abb2bf;
+    font-weight: 200;
    overflow-x: auto;
    word-break: break-all;
 }
--- a/assets/css/common/profile-mode.css
+++ b/assets/css/common/profile-mode.css
@ -34,6 +34,15 @@
    transition: transform 0.1s;
 }

+.button:hover {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    /* box-shadow: 0 0 0 1px grey; */
+    transform: scale(1.1) translateZ(0) translate3d(0, 0, 0) rotate(0.01deg);
+}
+
 .button-inner {
    padding: 0 8px;
 }
--- a/assets/css/core/theme-vars.css
+++ b/assets/css/core/theme-vars.css
@ -18,6 +18,7 @@
 }

 .dark {
+    transition: background-color 0.3s;
    --theme: rgb(29, 30, 32);
    --entry: rgb(46, 46, 51);
    --primary: rgb(218, 218, 219);
@ -30,6 +31,7 @@
 }

 .list {
+    transition:  background-color 0.3s;
    background: var(--code-bg);
 }

--- a/assets/css/extended/blank.css
+++ b/assets/css/extended/blank.css
@ -1,5 +1,201 @@
-/*
-This is just a placeholder blank stylesheet so as to support adding custom styles budled with theme's default styles
+:root {
+    --nav-width: 1380px;
+    --article-width: 650px;
+    --toc-width: 300px;
+}

-Read https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#bundling-custom-css-with-themes-assets for more info
-*/
+.toc {
+    margin: 0 2px 40px 2px;
+    border: 1px solid var(--border);
+    background: var(--entry);
+    border-radius: var(--radius);
+    padding: 0.4em;
+}
+
+.toc-container.wide {
+    position: absolute;
+    height: 100%;
+    border-right: 1px solid var(--border);
+    left: calc((var(--toc-width) + var(--gap)) * -1);
+    top: calc(var(--gap) * 2);
+    width: var(--toc-width);
+}
+
+.wide .toc {
+    position: sticky;
+    top: var(--gap);
+    border: unset;
+    background: unset;
+    border-radius: unset;
+    width: 100%;
+    margin: 0 2px 40px 2px;
+}
+
+.toc details summary {
+    cursor: zoom-in;
+    margin-inline-start: 20px;
+    padding: 12px 0;
+}
+
+.toc details[open] summary {
+    font-weight: 500;
+}
+
+.toc-container.wide .toc .inner {
+    margin: 0;
+}
+
+.active {
+    font-size: 110%;
+    font-weight: 600;
+}
+
+.toc ul {
+    list-style-type: circle;
+}
+
+.toc .inner {
+    margin: 0 0 0 20px;
+    padding: 0px 15px 15px 20px;
+    font-size: 16px;
+}
+
+.toc li ul {
+    margin-inline-start: calc(var(--gap) * 0.5);
+    list-style-type: none;
+}
+
+.toc li {
+    list-style: none;
+    font-size: 0.95rem;
+    padding-bottom: 5px;
+}
+
+.toc li a:hover {
+    color: var(--secondary);
+}
+
+/* code font */
+.post-content pre,
+code {
+    font-family: "Ubuntu Mono", monospace;
+    max-height: 40rem;
+}
+
+/* link */
+.post-content a {
+    color: #409eff;
+    box-shadow: none;
+    text-decoration: none;
+}
+.post-content a:hover {
+    text-decoration: underline;
+}
+
+body {
+    font-family: "Josefin Sans", sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0;
+}
+
+.friendurl {
+    text-decoration: none !important;
+    color: black;
+    box-shadow: none !important;
+}
+
+.myfriend {
+    width: 56px !important;
+    height: 56px !important;
+    border-radius: 50% !important;
+    padding: 2px;
+    margin-top: 20px !important;
+    margin-left: 14px !important;
+    background-color: #fff;
+}
+
+.frienddiv {
+    overflow: auto;
+    height: 100px;
+    width: 49%;
+    display: inline-block !important;
+    border-radius: 5px;
+    background: none;
+
+    -webkit-transition: all ease-out 0.3s;
+    -moz-transition: all ease-out 0.3s;
+    -o-transition: all ease-out 0.3s;
+    transition: all ease-out 0.3s;
+}
+
+.dark .frienddiv:hover {
+    background: var(--code-bg);
+}
+
+.frienddiv:hover {
+    background: var(--theme);
+    transition: transform 0.5s;
+    webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+}
+
+/* .frienddiv:hover .frienddivleft img {
+    transition: 0.9s !important;
+    -webkit-transition: 0.9s !important;
+    -moz-transition: 0.9s !important;
+    -o-transition: 0.9s !important;
+    -ms-transition: 0.9s !important;
+    transform: rotate(360deg) !important;
+    -webkit-transform: rotate(360deg) !important;
+    -moz-transform: rotate(360deg) !important;
+    -o-transform: rotate(360deg) !important;
+    -ms-transform: rotate(360deg) !important;
+} */
+
+.frienddivleft {
+    width: 92px;
+    float: left;
+    margin-right: -5px;
+}
+
+.frienddivright {
+    margin-top: 18px;
+    margin-right: 18px;
+}
+
+.friendname {
+    text-overflow: ellipsis;
+    font-size: 100%;
+    margin-bottom: 5px;
+    color: var(--primary);
+}
+
+.friendinfo {
+    text-overflow: ellipsis;
+    font-size: 70%;
+    color: var(--primary);
+}
+
+@media screen and (max-width: 600px) {
+    .friendinfo {
+        display: none;
+    }
+    .frienddivleft {
+        width: 84px;
+        margin: auto;
+    }
+    .frienddivright {
+        height: 100%;
+        margin: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .friendname {
+        font-size: 18px;
+    }
+}
--- a/assets/css/hljs/an-old-hope.min.css
+++ b/assets/css/hljs/an-old-hope.min.css
@ -1,49 +1,84 @@
+/* 注释 */
 .hljs-comment,
 .hljs-quote {
-    color: #b6b18b;
+    font-weight: 200;
+    color: #7f848e;
 }

 .hljs-deletion,
+/* html标签 */
 .hljs-name,
 .hljs-regexp,
-.hljs-selector-class,
-.hljs-selector-id,
-.hljs-tag,
+.hljs-tag {
+    font-weight: 200;
+    color: #e06c75;
+}
+
+/* html属性 */
+.hljs-tag {
+    font-weight: 200;
+    color: #d19a66;
+}
+
+/* css类名 */
 .hljs-template-variable,
-.hljs-variable {
-    color: #eb3c54;
+.hljs-variable,
+.hljs-selector-class,
+.hljs-selector-id {
+    font-weight: 200;
+    color: #ffd709;
 }

+/* 内置函数 */
 .hljs-built_in,
-.hljs-builtin-name,
-.hljs-link,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-params,
-.hljs-type {
-    color: #e7ce56;
+.hljs-builtin-name {
+    font-weight: 200;
+    color: #56b6c2;
 }

+/* 函数输入 */
+.hljs-params {
+    font-weight: 200;
+    color: #e5c07b;
+}
+
+/* 数字 */
+.hljs-number {
+    font-weight: 200;
+    color: #d19a66;
+}
+
+/* css属性 */
 .hljs-attribute {
+    font-weight: 200;
    color: #ee7c2b;
 }

+/* 字符串 */
 .hljs-addition,
 .hljs-bullet,
-.hljs-string,
-.hljs-symbol {
-    color: #4fb4d7;
+.hljs-symbol,
+.hljs-string {
+    font-weight: 200;
+    color: #98c379;
 }

+/* 函数名称 */
 .hljs-section,
 .hljs-title {
-    color: #78bb65;
+    font-weight: 200;
+    color: #56b6c2;
 }

+/* 关键字 */
 .hljs-keyword,
-.hljs-selector-tag {
-    color: #b45ea4;
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-link,
+.hljs-meta,
+.hljs-type {
+    font-weight: 200;
+    color: #c678dd;
 }

 .hljs {
@ -51,7 +86,7 @@
    overflow-x: auto;
    background: #1c1d21;
    color: #c0c5ce;
-    padding: .5em;
+    padding: 0.5em;
 }

 .hljs-emphasis {
@ -61,3 +96,9 @@
 .hljs-strong {
    font-weight: 700;
 }
+
+/* 选中时的背景颜色 */
+.hljs ::selection,
+.hljs::selection {
+    background-color: #3d4556;
+}
--- a/assets/js/highlight.min.js
+++ b/assets/js/highlight.min.js
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@ -1,3 +1,26 @@
+<!--
+ * @Date: 2022-04-13 12:22:30
+ * @LastEditors: Kunyang Xie
+ * @LastEditTime: 2022-05-14 15:35:51
+-->
 {{- /* Comments area start */ -}}
 {{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
+<!-- Twikoo -->
+<div>
+    <div class="pagination__title">
+        <span class="pagination__title-h" style="font-size: 20px;">Tell me something...</span>
+        <hr />
+    </div>
+    <div id="tcomment"></div>
+    <script src="https://cdn.jsdelivr.net/npm/twikoo@1.5.10/dist/twikoo.all.min.js"></script>
+    <script>
+        twikoo.init({
+            envId: "https://twikoo-kyxie.vercel.app/",  //这里填写自己的envId
+            el: "#tcomment",
+            lang: 'en-US',
+            region: '',  //默认是ap-shanghai
+            path: window.TWIKOO_MAGIC_PATH || window.location.pathname,
+        });
+    </script>
+</div>
 {{- /* Comments area end */ -}}
--- a/layouts/partials/extend_head.html
+++ b/layouts/partials/extend_head.html
@ -1,4 +1,23 @@
+<!--
+ * @Date: 2022-04-13 12:22:30
+ * @LastEditors: Kunyang Xie
+ * @LastEditTime: 2022-05-02 10:52:07
+-->
+
 {{- /* Head custom content area start */ -}}
 {{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
 {{- /*     Can be overwritten by partial with the same name in the global layouts. */ -}}
+<!-- require APlayer -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
+<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
+<!-- require MetingJS -->
+<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">
 {{- /* Head custom content area end */ -}}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -5,10 +5,11 @@
    {{- else }}
    <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
    {{- end }}
-    <span>
-        Powered by
-        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
-        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
+    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+    <span id="busuanzi_container">
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+        Visitors: <span id="busuanzi_value_site_uv"></span>
+        Views: <span id="busuanzi_value_site_pv"></span>
    </span>
 </footer>
 {{- end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -150,4 +150,4 @@
 {{- template "partials/templates/opengraph.html" . }}
 {{- template "partials/templates/twitter_cards.html" . }}
 {{- template "partials/templates/schema_json.html" . }}
-{{- end -}}
+{{- end -}}
--- a/layouts/partials/share_icons.html
+++ b/layouts/partials/share_icons.html
@ -13,7 +13,7 @@
 {{- $ShareButtons := (.Param "ShareButtons")}}
 {{- with $ShareButtons }}{{ $custom = true }}{{ end }}

-<div class="share-buttons">
+<!-- <div class="share-buttons">
    {{- if (cond ($custom) (in $ShareButtons "twitter") (true)) }}
    <a target="_blank" rel="noopener noreferrer" aria-label="share {{ $title | plainify }} on twitter"
        href="https://twitter.com/intent/tweet/?text={{ $title }}&amp;url={{ $pageurl }}&amp;hashtags={{- $.Scratch.Get "tags" -}}">
@ -68,4 +68,4 @@
        </svg>
    </a>
    {{- end }}
-</div>
+</div> -->
--- a/layouts/partials/svg.html
+++ b/layouts/partials/svg.html
@ -513,6 +513,28 @@
    </path>
    <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
 </svg>
+{{- else if (eq $icon_name "wechat") -}}
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 50 50">
+    <g fill="currentColor" stroke="currentColor" stroke-width="2">
+        <path
+            d="M 19 6 C 9.746094 6 2 12.359375 2 20.5 C 2 24.894531 4.292969 28.679688 7.835938 31.324219 L 5.179688 39.304688 L 13.472656 34.167969 C 15.1875 34.707031 17.082031 35 19 35 C 19.746094 35 20.472656 34.945313 21.195313 34.863281 C 23.378906 39.105469 28.328125 42 34 42 C 35.722656 42 37.316406 41.675781 38.796875 41.234375 L 45.644531 45.066406 L 43.734375 38.515625 C 46.3125 36.375 48 33.394531 48 30 C 48 23.789063 42.597656 18.835938 35.75 18.105469 C 34.398438 11.125 27.324219 6 19 6 Z M 19 8 C 26.308594 8 32.328125 12.351563 33.703125 18.011719 C 26.183594 18.148438 20 23.355469 20 30 C 20 31.019531 20.160156 32.003906 20.4375 32.941406 C 19.964844 32.980469 19.484375 33 19 33 C 17.101563 33 15.199219 32.710938 13.632813 32.15625 L 13.183594 32 L 8.820313 34.699219 L 10.1875 30.59375 L 9.5625 30.171875 C 6.082031 27.820313 4 24.445313 4 20.5 C 4 13.640625 10.65625 8 19 8 Z M 13 14 C 11.898438 14 11 14.898438 11 16 C 11 17.101563 11.898438 18 13 18 C 14.101563 18 15 17.101563 15 16 C 15 14.898438 14.101563 14 13 14 Z M 25 14 C 23.898438 14 23 14.898438 23 16 C 23 17.101563 23.898438 18 25 18 C 26.101563 18 27 17.101563 27 16 C 27 14.898438 26.101563 14 25 14 Z M 34 20 C 40.746094 20 46 24.535156 46 30 C 46 32.957031 44.492188 35.550781 42.003906 37.394531 L 41.445313 37.8125 L 42.355469 40.933594 L 39.105469 39.109375 L 38.683594 39.25 C 37.285156 39.71875 35.6875 40 34 40 C 27.253906 40 22 35.464844 22 30 C 22 24.535156 27.253906 20 34 20 Z M 29.5 26 C 28.699219 26 28 26.699219 28 27.5 C 28 28.300781 28.699219 29 29.5 29 C 30.300781 29 31 28.300781 31 27.5 C 31 26.699219 30.300781 26 29.5 26 Z M 38.5 26 C 37.699219 26 37 26.699219 37 27.5 C 37 28.300781 37.699219 29 38.5 29 C 39.300781 29 40 28.300781 40 27.5 C 40 26.699219 39.300781 26 38.5 26 Z">
+        </path>
+    </g>
+</svg>
+{{- else if (eq $icon_name "weibo") -}}
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 172 172">
+    <g fill="currentColor" stroke="currentColor" stroke-width="4">
+        <path
+            d="M120.4,20.64c-2.67406,0 -5.25406,0.26875 -7.74,0.71219c-1.86781,0.3225 -3.1175,2.10969 -2.795,3.9775c0.3225,1.88125 2.10969,3.13094 3.9775,2.80844c2.17688,-0.38969 4.35375,-0.61813 6.5575,-0.61813c20.93563,0 37.84,16.90438 37.84,37.84c0,4.52844 -0.83312,8.85531 -2.31125,12.91344c-0.45687,1.16906 -0.25531,2.48594 0.5375,3.45344c0.80625,0.9675 2.05594,1.42437 3.29219,1.19594c1.23625,-0.22844 2.24406,-1.11531 2.63375,-2.29781c1.73344,-4.75687 2.72781,-9.87656 2.72781,-15.265c0,-24.65781 -20.06219,-44.72 -44.72,-44.72zM120.4,41.28c-1.46469,0 -2.84875,0.14781 -4.16562,0.37625c-1.86781,0.33594 -3.13094,2.10969 -2.795,3.99094c0.3225,1.86781 2.10969,3.1175 3.9775,2.795c1.00781,-0.17469 2.00219,-0.28219 2.98312,-0.28219c9.54063,0 17.2,7.65938 17.2,17.2c0,2.05594 -0.37625,4.01781 -1.06156,5.87219c-0.645,1.78719 0.28219,3.7625 2.06938,4.4075c1.78719,0.645 3.7625,-0.26875 4.4075,-2.05594c0.92719,-2.55312 1.46469,-5.32125 1.46469,-8.22375c0,-13.26281 -10.81719,-24.08 -24.08,-24.08zM72.46844,42.6775c-11.04562,0 -27.50656,8.66719 -42.18031,23.07219c-14.76781,14.76781 -23.40813,30.24781 -23.40813,43.57781c0,25.9075 33.12344,41.3875 65.88406,41.3875c42.47594,0 70.90969,-24.46969 70.90969,-43.91375c0,-11.87875 -10.07812,-18.35562 -19.08125,-21.23125c-2.15,-0.72562 -3.60125,-1.08844 -2.52625,-3.96406c0.72563,-1.73344 1.77375,-5.01219 1.77375,-9.36594c0,-4.945 -3.44,-9.23156 -10.32,-9.9975c-0.79281,-0.08062 -2.13656,-0.14781 -3.82969,-0.14781c-5.6975,0 -15.48,0.71219 -22.52125,3.66844c0,0 -1.38406,0.57781 -2.49938,0.57781c-1.00781,0 -1.80062,-0.48375 -1.11531,-2.37844c2.52625,-7.91469 2.16344,-14.39156 -1.80063,-18.00625c-2.23062,-2.23062 -5.42875,-3.27875 -9.28531,-3.27875zM72.46844,49.5575c1.43781,0 3.37281,0.215 4.43438,1.26313l0.1075,0.12094l0.12094,0.1075c1.54531,1.41094 1.51844,5.61687 -0.09406,10.72312c-1.38406,3.99094 -0.09406,6.75906 0.81969,8.04906c1.51844,2.16344 4.00437,3.39969 6.81281,3.39969c2.28438,0 4.39406,-0.79281 5.14656,-1.11531c5.50938,-2.31125 13.88094,-3.13094 19.87406,-3.13094c1.53187,0 2.60687,0.05375 3.07719,0.1075c2.78156,0.30906 4.1925,1.37063 4.1925,3.15781c0,3.23844 -0.77937,5.61688 -1.23625,6.73219l-0.05375,0.1075l-0.04031,0.09406c-1.075,2.88906 -1.06156,5.50938 0.04031,7.80719c1.62594,3.39969 4.82406,4.46125 6.54406,5.03906l0.28219,0.09406c5.34813,1.70656 14.2975,5.88562 14.2975,14.68719c0,7.90125 -6.81281,17.65688 -18.90656,25.16844c4.77031,-5.54969 7.47125,-12.05344 7.47125,-19.05437c0,-21.01625 -24.37562,-37.47719 -55.48344,-37.47719c-31.10781,0 -55.47,16.46094 -55.47,37.47719c0,0.645 0.01344,1.27656 0.05375,1.90812c-0.45687,-1.76031 -0.69875,-3.60125 -0.69875,-5.49594c0,-11.16656 7.59219,-24.91312 21.33875,-38.65969c14.86188,-14.59313 29.48188,-21.11031 37.36969,-21.11031zM69.875,82.33156c26.84813,0 48.60344,13.69281 48.60344,30.59719c0,16.89094 -21.75531,30.58375 -48.60344,30.58375c-26.83469,0 -48.59,-13.69281 -48.59,-30.58375c0,-16.90437 21.75531,-30.59719 48.59,-30.59719zM66.27375,89.52063c-10.38719,0.08062 -20.47875,5.76469 -24.85937,14.52594c-5.40188,11.13969 -0.36281,23.38125 12.59094,27.33187c12.95375,4.31344 28.42031,-2.16344 33.82219,-14.02875c5.38844,-11.5025 -1.43781,-23.73062 -14.39156,-26.95562c-2.365,-0.61813 -4.77031,-0.88688 -7.16219,-0.87344zM71.63531,104.06c1.98875,0 3.60125,1.59906 3.60125,3.58781c0,1.98875 -1.6125,3.60125 -3.60125,3.60125c-1.98875,0 -3.60125,-1.6125 -3.60125,-3.60125c0,-1.98875 1.6125,-3.58781 3.60125,-3.58781zM56.47781,107.64781c1.12875,0.01344 2.2575,0.18812 3.31906,0.55094c4.60906,1.46469 6.02,5.83188 3.18469,9.47344c-2.4725,3.64156 -8.12969,5.45563 -12.38938,3.64156c-4.23281,-1.81406 -5.29437,-6.19469 -2.82187,-9.46c1.85437,-2.74125 5.30781,-4.24625 8.7075,-4.20594z">
+        </path>
+    </g>
+    <path d="" fill="none"></path>
+</svg>
+{{- else if (eq $icon_name "strava") -}}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke-width="2">
+    <path
+        d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169" />
+</svg>
 {{- else if $icon_name -}}
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round">
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@ -1,97 +1,157 @@
 {{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
-{{- $has_headers := ge (len $headers) 1 -}}
-{{- if $has_headers -}}
-<div class="toc">
-    <details {{if (.Param "TocOpen") }} open{{ end }}>
-        <summary accesskey="c" title="(Alt + C)">
-            <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
-        </summary>
+    {{- $has_headers := ge (len $headers) 1 -}}
+    {{- if $has_headers -}}
+    <aside id="toc-container" class="toc-container wide">
+        <div class="toc">
+            <details {{if (.Param "TocOpen" ) }} open{{ end }}>
+                <summary accesskey="c" title="(Alt + C)">
+                    <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
+                </summary>

-        <div class="inner">
-            {{- if (.Param "UseHugoToc") }}
-            {{- .TableOfContents -}}
-            {{- else }}
-            {{- $largest := 6 -}}
-            {{- range $headers -}}
-            {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
-            {{- $headerLevel := len (seq $headerLevel) -}}
-            {{- if lt $headerLevel $largest -}}
-            {{- $largest = $headerLevel -}}
-            {{- end -}}
-            {{- end -}}
-
-            {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
-
-            {{- $.Scratch.Set "bareul" slice -}}
-            <ul>
-                {{- range seq (sub $firstHeaderLevel $largest) -}}
-                <ul>
-                    {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
-                    {{- end -}}
-                    {{- range $i, $header := $headers -}}
+                <div class="inner">
+                    {{- $largest := 6 -}}
+                    {{- range $headers -}}
                    {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
                    {{- $headerLevel := len (seq $headerLevel) -}}
+                    {{- if lt $headerLevel $largest -}}
+                    {{- $largest = $headerLevel -}}
+                    {{- end -}}
+                    {{- end -}}

-                    {{/* get id="xyz" */}}
-                    {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
+                    {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}

-                    {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
-                    {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
-                    {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
-
-                    {{- if ne $i 0 -}}
-                    {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
-                    {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
-                    {{- if gt $headerLevel $prevHeaderLevel -}}
-                    {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
+                    {{- $.Scratch.Set "bareul" slice -}}
                    <ul>
-                        {{/* the first should not be recorded */}}
-                        {{- if ne $prevHeaderLevel . -}}
-                        {{- $.Scratch.Add "bareul" . -}}
-                        {{- end -}}
-                        {{- end -}}
-                        {{- else -}}
+                        {{- range seq (sub $firstHeaderLevel $largest) -}}
+                        <ul>
+                            {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
+                            {{- end -}}
+                            {{- range $i, $header := $headers -}}
+                            {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
+                            {{- $headerLevel := len (seq $headerLevel) -}}
+
+                            {{/* get id="xyz" */}}
+                            {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
+
+                            {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
+                            {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
+                            {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
+
+                                {{- if ne $i 0 -}}
+                                {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
+                                {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
+                                {{- if gt $headerLevel $prevHeaderLevel -}}
+                                {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
+                                <ul>
+                                    {{/* the first should not be recorded */}}
+                                    {{- if ne $prevHeaderLevel . -}}
+                                    {{- $.Scratch.Add "bareul" . -}}
+                                    {{- end -}}
+                                    {{- end -}}
+                                    {{- else -}}
+                                    </li>
+                                    {{- if lt $headerLevel $prevHeaderLevel -}}
+                                    {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
+                                    {{- if in ($.Scratch.Get "bareul") . -}}
+                                </ul>
+                                {{/* manually do pop item */}}
+                                {{- $tmp := $.Scratch.Get "bareul" -}}
+                                {{- $.Scratch.Delete "bareul" -}}
+                                {{- $.Scratch.Set "bareul" slice}}
+                                {{- range seq (sub (len $tmp) 1) -}}
+                                {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
+                                {{- end -}}
+                                {{- else -}}
+                        </ul>
                        </li>
-                        {{- if lt $headerLevel $prevHeaderLevel -}}
-                        {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
-                        {{- if in ($.Scratch.Get "bareul") . -}}
+                        {{- end -}}
+                        {{- end -}}
+                        {{- end -}}
+                        {{- end }}
+                        <li>
+                            <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML
+                                -}}</a>
+                            {{- else }}
+                        <li>
+                            <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML
+                                -}}</a>
+                            {{- end -}}
+                            {{- end -}}
+                            <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
+                            {{- $firstHeaderLevel := $largest }}
+                            {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers)
+                            1)) 1) 0)) }}
+                        </li>
+                        {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
+                        {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
                    </ul>
-                    {{/* manually do pop item */}}
-                    {{- $tmp := $.Scratch.Get "bareul" -}}
-                    {{- $.Scratch.Delete "bareul" -}}
-                    {{- $.Scratch.Set "bareul" slice}}
-                    {{- range seq (sub (len $tmp) 1) -}}
-                    {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
-                    {{- end -}}
-                    {{- else -}}
-                </ul>
-                </li>
-                {{- end -}}
-                {{- end -}}
-                {{- end -}}
-                {{- end }}
-                <li>
-                    <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
                    {{- else }}
-                <li>
-                    <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
+                    </ul>
+                    </li>
                    {{- end -}}
-                    {{- end -}}
-                    <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
-                    {{- $firstHeaderLevel := $largest }}
-                    {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
-                </li>
-                {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
-                {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
-            </ul>
-            {{- else }}
-            </ul>
-            </li>
-            {{- end -}}
-            {{- end }}
-            </ul>
-            {{- end }}
+                    {{- end }}
+                    </ul>
+                </div>
+            </details>
        </div>
-    </details>
-</div>
-{{- end }}
+    </aside>
+    <script>
+        let activeElement;
+        let elements;
+        window.addEventListener('DOMContentLoaded', function (event) {
+            checkTocPosition();
+
+            elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
+            // Make the first header active
+            activeElement = elements[0];
+            const id = encodeURI(activeElement.getAttribute('id')).toLowerCase();
+            document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
+        }, false);
+
+        window.addEventListener('resize', function (event) {
+            checkTocPosition();
+        }, false);
+
+        window.addEventListener('scroll', () => {
+            // Check if there is an object in the top half of the screen or keep the last item active
+            activeElement = Array.from(elements).find((element) => {
+                if ((getOffsetTop(element) - window.pageYOffset) > 0 &&
+                    (getOffsetTop(element) - window.pageYOffset) < window.innerHeight / 2) {
+                    return element;
+                }
+            }) || activeElement
+
+            elements.forEach(element => {
+                const id = encodeURI(element.getAttribute('id')).toLowerCase();
+                if (element === activeElement) {
+                    document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
+                } else {
+                    document.querySelector(`.inner ul li a[href="#${id}"]`).classList.remove('active');
+                }
+            })
+        }, false);
+
+        const main = parseInt(getComputedStyle(document.body).getPropertyValue('--article-width'), 10);
+        const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
+        const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);
+
+        function checkTocPosition() {
+            const width = document.body.scrollWidth;
+
+            if (width - main - (toc * 2) - (gap * 4) > 0) {
+                document.getElementById("toc-container").classList.add("wide");
+            } else {
+                document.getElementById("toc-container").classList.remove("wide");
+            }
+        }
+
+        function getOffsetTop(element) {
+            if (!element.getClientRects().length) {
+                return 0;
+            }
+            let rect = element.getBoundingClientRect();
+            let win = element.ownerDocument.defaultView;
+            return rect.top + win.pageYOffset;
+        }
+    </script>
+    {{- end }}
--- a/layouts/shortcodes/bilibili.html
+++ b/layouts/shortcodes/bilibili.html
@ -0,0 +1,42 @@
+<!--
+ * @Date: 2022-04-20 13:47:33
+ * @LastEditors: Kunyang Xie
+ * @LastEditTime: 2022-04-20 13:48:24
+ * @FilePath: \undefinedd:\kyxie\themes\PaperMod\layouts\shortcodes\bilibili.html
+-->
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+    <style type="text/css">
+        .bilibili_shortcodes {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 66%;
+            margin: auto;
+            overflow: hidden;
+            text-align: center;
+        }
+
+        .bilibili_shortcodes iframe {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+        }
+    </style>
+    <title></title>
+</head>
+
+<body>
+    <div class="bilibili_shortcodes">
+        <iframe
+            src="https://player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1&high_quality=1&danmaku=0&as_wide=0{{end}}"
+            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
+        </iframe>
+    </div>
+</body>
+
+</html>
--- a/layouts/shortcodes/friend.html
+++ b/layouts/shortcodes/friend.html
@ -0,0 +1,18 @@
+<!--
+ * @Date: 2022-05-21 21:47:12
+ * @LastEditors: Kunyang Xie
+ * @LastEditTime: 2022-05-21 21:47:40
+-->
+{{- if .IsNamedParams -}}
+<a target="_blank" href={{ .Get "url" }} title={{ .Get "name" }} class="friendurl">
+    <div class="frienddiv">
+        <div class="frienddivleft">
+            <img class="myfriend" src={{ .Get "logo" }} />
+        </div>
+        <div class="frienddivright">
+            <div class="friendname">{{- .Get "name" -}}</div>
+            <div class="friendinfo">{{- .Get "word" -}}</div>
+        </div>
+    </div>
+</a>
+{{- end }}
--- a/layouts/shortcodes/ppt.html
+++ b/layouts/shortcodes/ppt.html
@ -0,0 +1,37 @@
+<!--
+ * @Date: 2022-04-28 23:08:15
+ * @LastEditors: Kunyang Xie
+ * @LastEditTime: 2022-04-28 23:08:48
+ * @FilePath: \undefinedd:\kyxie\themes\PaperMod\layouts\shortcodes\ppt.html
+-->
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+    <style type="text/css">
+        #googleslides_shortcodes {
+            padding-bottom: 66%;
+            position: relative;
+            display: block;
+            width: 100%;
+            border-bottom: 5px solid;
+        }
+
+        #googleslides_shortcodes iframe {
+            position: absolute;
+            top: 0;
+            left: 0
+        }
+    </style>
+    <title></title>
+</head>
+
+<body>
+    <div id="googleslides_shortcodes">
+        <iframe id="googleSlideIframe" width="100%" height="100%" src="{{ .Get " src" }}" frameborder="0"
+            allowfullscreen="">
+        </iframe>
+    </div>
+</body>
+
+</html>