1<div class="comments-title" id="tw-comment-title">
 2    <p class="x-comments-title">{{- .Param "giscus.discussionTitle" }}</p>
 3    <p style="font-size: 1rem">{{- .Param "giscus.discussionSubtitle" }} </p>
 4</div>
 5<div id="tw-comment"></div>
 6<script>
 7    const getStoredTheme = () => localStorage.getItem("pref-theme") === "dark" ? "{{ .Site.Params.giscus.darkTheme }}" : "{{ .Site.Params.giscus.lightTheme }}";
 8    const setGiscusTheme = () => {
 9        const sendMessage = (message) => {
10            const iframe = document.querySelector('iframe.giscus-frame');
11            if (iframe) {
12                iframe.contentWindow.postMessage({giscus: message}, 'https://giscus.app');
13            }
14        }
15        sendMessage({setConfig: {theme: getStoredTheme()}})
16    }
17
18    document.addEventListener("DOMContentLoaded", () => {
19        const giscusAttributes = {
20            "src": "https://giscus.app/client.js",
21            "data-repo": "{{ .Site.Params.giscus.repo }}",
22            "data-repo-id": "{{ .Site.Params.giscus.repoId }}",
23            "data-category": "{{ .Site.Params.giscus.category }}",
24            "data-category-id": "{{ .Site.Params.giscus.categoryId }}",
25            "data-mapping": "{{ .Site.Params.giscus.mapping  }}",
26            "data-strict": "{{ .Site.Params.giscus.strict  }}",
27            "data-reactions-enabled": "{{ .Site.Params.giscus.reactionsEnabled}}",
28            "data-emit-metadata": "{{ .Site.Params.giscus.emitMetadata  }}",
29            "data-input-position": "{{ .Site.Params.giscus.inputPosition }}",
30            "data-theme": getStoredTheme(),
31            "data-lang": "{{ .Site.Params.giscus.lang }}",
32            "data-loading": "lazy",
33            "crossorigin": "anonymous",
34            "async": "",
35        };
36
37        // 动态创建 giscus script
38        const giscusScript = document.createElement("script");
39        Object.entries(giscusAttributes).forEach(
40                ([key, value]) => giscusScript.setAttribute(key, value));
41        document.querySelector("#tw-comment").appendChild(giscusScript);
42
43        // 页面主题变更后，变更 giscus 主题
44        const themeSwitcher = document.querySelector("#theme-toggle");
45        if (themeSwitcher) {
46            themeSwitcher.addEventListener("click", setGiscusTheme);
47        }
48        const themeFloatSwitcher = document.querySelector("#theme-toggle-float");
49        if (themeFloatSwitcher) {
50            themeFloatSwitcher.addEventListener("click", setGiscusTheme);
51        }
52    });
53</script>

 1/* giscus 评论组件 */
 2.comments-title {
 3    margin-top: 2rem;
 4    margin-bottom: 2rem;
 5    display: block;
 6    text-align: center;
 7}
 8
 9.x-comments-title {
10    display: block;
11    font-size: 1.25em;
12    font-weight: 700;
13    padding: 1.5rem 0 .5rem;
14}

 1  giscus:
 2    repo: "{{ REPO }}"
 3    repoId: "{ REPO_ID }"
 4    category: "Announcements"
 5    categoryId: "{{ CATEGORYID }}"
 6    mapping: "pathname"
 7    strict: "0"
 8    reactionsEnabled: "1"
 9    emitMetadata: "0"
10    inputPosition: "bottom"
11    lightTheme: "light"
12    darkTheme: "dark"
13    lang: "zh-CN"
14    discussionTitle: 欢迎来到评论区
15    discussionSubtitle: 感谢您的耐心阅读！如需交流，请留个评论吧！

1<div id="tcomment"></div>
2<script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.40/dist/twikoo.all.min.js"></script>
3<script>
4twikoo.init({
5  envId: 'https://xxx.netlify.app/.netlify/functions/twikoo', 
6  el: '#tcomment', // 容器元素
7})
8</script>

  1{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
  2{{- $has_headers := ge (len $headers) 1 -}}
  3{{- if $has_headers -}}
  4<aside id="toc-container" class="toc-container wide">
  5    <div class="toc">
  6        <details {{if (.Param "TocOpen") }} open{{ end }}>
  7            <summary accesskey="c" title="(Alt + C)">
  8                <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
  9            </summary>
 10
 11            <div class="inner">
 12                {{- $largest := 6 -}}
 13                {{- range $headers -}}
 14                {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
 15                {{- $headerLevel := len (seq $headerLevel) -}}
 16                {{- if lt $headerLevel $largest -}}
 17                {{- $largest = $headerLevel -}}
 18                {{- end -}}
 19                {{- end -}}
 20
 21                {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
 22
 23                {{- $.Scratch.Set "bareul" slice -}}
 24                <ul>
 25                    {{- range seq (sub $firstHeaderLevel $largest) -}}
 26                    <ul>
 27                        {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
 28                        {{- end -}}
 29                        {{- range $i, $header := $headers -}}
 30                        {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
 31                        {{- $headerLevel := len (seq $headerLevel) -}}
 32
 33                        {{/* get id="xyz" */}}
 34                        {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
 35
 36                        {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
 37                        {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
 38                        {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
 39
 40                        {{- if ne $i 0 -}}
 41                        {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
 42                        {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
 43                        {{- if gt $headerLevel $prevHeaderLevel -}}
 44                        {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
 45                        <ul>
 46                            {{/* the first should not be recorded */}}
 47                            {{- if ne $prevHeaderLevel . -}}
 48                            {{- $.Scratch.Add "bareul" . -}}
 49                            {{- end -}}
 50                            {{- end -}}
 51                            {{- else -}}
 52                            </li>
 53                            {{- if lt $headerLevel $prevHeaderLevel -}}
 54                            {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
 55                            {{- if in ($.Scratch.Get "bareul") . -}}
 56                        </ul>
 57                        {{/* manually do pop item */}}
 58                        {{- $tmp := $.Scratch.Get "bareul" -}}
 59                        {{- $.Scratch.Delete "bareul" -}}
 60                        {{- $.Scratch.Set "bareul" slice}}
 61                        {{- range seq (sub (len $tmp) 1) -}}
 62                        {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
 63                        {{- end -}}
 64                        {{- else -}}
 65                    </ul>
 66                    </li>
 67                    {{- end -}}
 68                    {{- end -}}
 69                    {{- end -}}
 70                    {{- end }}
 71                    <li>
 72                        <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
 73                        {{- else }}
 74                    <li>
 75                        <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
 76                        {{- end -}}
 77                        {{- end -}}
 78                        <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
 79                        {{- $firstHeaderLevel := $largest }}
 80                        {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
 81                    </li>
 82                    {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
 83                    {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
 84                </ul>
 85                {{- else }}
 86                </ul>
 87                </li>
 88                {{- end -}}
 89                {{- end }}
 90                </ul>
 91            </div>
 92        </details>
 93    </div>
 94</aside>
 95<script>
 96    let activeElement;
 97    let elements;
 98    
 99    document.addEventListener('DOMContentLoaded', function (event) {
100        checkTocPosition();
101    
102        elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
103        if (elements.length > 0) {
104            // Make the first header active
105            activeElement = elements[0];
106            const id = encodeURI(activeElement.getAttribute('id')).toLowerCase();
107            document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
108        }
109    
110        // Add event listener for the "back to top" link
111        const topLink = document.getElementById('top-link');
112        if (topLink) {
113            topLink.addEventListener('click', (event) => {
114                // Prevent the default action
115                event.preventDefault();
116    
117                // Smooth scroll to the top
118                window.scrollTo({ top: 0, behavior: 'smooth' });
119            });
120        }
121    }, false);
122    
123    window.addEventListener('resize', function(event) {
124        checkTocPosition();
125    }, false);
126    
127    window.addEventListener('scroll', () => {
128        // Get the current scroll position
129        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
130    
131        // Check if the scroll position is at the top of the page
132        if (scrollPosition === 0) {
133            return;
134        }
135    
136        // Ensure elements is a valid NodeList
137        if (elements && elements.length > 0) {
138            // Check if there is an object in the top half of the screen or keep the last item active
139            activeElement = Array.from(elements).find((element) => {
140                if ((getOffsetTop(element) - scrollPosition) > 0 && 
141                    (getOffsetTop(element) - scrollPosition) < window.innerHeight / 2) {
142                    return element;
143                }
144            }) || activeElement;
145    
146            elements.forEach(element => {
147                const id = encodeURI(element.getAttribute('id')).toLowerCase();
148                const tocLink = document.querySelector(`.inner ul li a[href="#${id}"]`);
149                if (element === activeElement){
150                    tocLink.classList.add('active');
151    
152                    // Ensure the active element is in view within the .inner container
153                    const tocContainer = document.querySelector('.toc .inner');
154                    const linkOffsetTop = tocLink.offsetTop;
155                    const containerHeight = tocContainer.clientHeight;
156                    const linkHeight = tocLink.clientHeight;
157    
158                    // Calculate the scroll position to center the active link
159                    const scrollPosition = linkOffsetTop - (containerHeight / 2) + (linkHeight / 2);
160                    tocContainer.scrollTo({ top: scrollPosition, behavior: 'smooth' });
161                } else {
162                    tocLink.classList.remove('active');
163                }
164            });
165        }
166    }, false);
167    
168    const main = parseInt(getComputedStyle(document.body).getPropertyValue('--article-width'), 10);
169    const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
170    const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);
171    
172    function checkTocPosition() {
173        const width = document.body.scrollWidth;
174    
175        if (width - main - (toc * 2) - (gap * 4) > 0) {
176            document.getElementById("toc-container").classList.add("wide");
177        } else {
178            document.getElementById("toc-container").classList.remove("wide");
179        }
180    }
181    
182    function getOffsetTop(element) {
183        if (!element.getClientRects().length) {
184            return 0;
185        }
186        let rect = element.getBoundingClientRect();
187        let win = element.ownerDocument.defaultView;
188        return rect.top + win.pageYOffset;   
189    }
190    
191</script>
192{{- end }}

 1:root {
 2    --nav-width: 1380px;
 3    --article-width: 650px;
 4    --toc-width: 300px;
 5}
 6
 7.toc {
 8    margin: 0 2px 40px 2px;
 9    border: 1px solid var(--border);
10    background: var(--entry);
11    border-radius: var(--radius);
12    padding: 0.4em;
13}
14
15.toc-container.wide {
16    position: absolute;
17    height: 100%;
18    border-right: 1px solid var(--border);
19    left: calc((var(--toc-width) + var(--gap)) * -1);
20    top: calc(var(--gap) * 2);
21    width: var(--toc-width);
22}
23
24.wide .toc {
25    position: sticky;
26    top: var(--gap);
27    border: unset;
28    background: unset;
29    border-radius: unset;
30    width: 100%;
31    margin: 0 2px 40px 2px;
32}
33
34.toc details summary {
35    cursor: zoom-in;
36    margin-inline-start: 20px;
37    padding: 12px 0;
38}
39
40.toc details[open] summary {
41    font-weight: 500;
42}
43
44.toc-container.wide .toc .inner {
45    margin: 0;
46}
47
48.active {
49    font-size: 110%;
50    font-weight: 600;
51}
52
53.toc ul {
54    list-style-type: circle;
55}
56
57.toc .inner {
58    margin: 0 0 0 20px;
59    padding: 0px 15px 15px 20px;
60    font-size: 16px;
61
62    /*目录显示高度*/
63    max-height: 83vh;
64    overflow-y: auto;
65}
66
67.toc .inner::-webkit-scrollbar-thumb {  /*滚动条*/
68    background: var(--border);
69    border: 7px solid var(--theme);
70    border-radius: var(--radius);
71}
72
73.toc li ul {
74    margin-inline-start: calc(var(--gap) * 0.5);
75    list-style-type: none;
76}
77
78.toc li {
79    list-style: none;
80    font-size: 0.95rem;
81    padding-bottom: 5px;
82}
83
84.toc li a:hover {
85    color: var(--secondary);
86}

1showToc: true # 显示目录
2TocOpen: true # 打开目录

 1...
 2{{- if site.Params.analytics.naver.SiteVerificationTag }}
 3<meta name="naver-site-verification" content="{{ site.Params.analytics.naver.SiteVerificationTag }}">
 4{{- end }}
 5
 6<!-- 以下If块为新增内容 -->
 7{{- if .Site.Params.busuanzi.enable -}}
 8  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 9  <meta name="referrer" content="no-referrer-when-downgrade">
10{{- end -}}
11
12{{- /* Styles */}}
13...

 1...
 2{{- if not (.Param "hideFooter") }}
 3<footer class="footer">
 4    {{- if not site.Params.footer.hideCopyright }}
 5    {{- if site.Copyright }}
 6    <span>{{ site.Copyright | markdownify }}</span>
 7    {{- else }}
 8    <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
 9    {{- end }}
10    {{- print " · "}}
11    {{- end }}
12
13    {{- with site.Params.footer.text }}
14    {{ . | markdownify }}
15    {{- print " · "}}
16    {{- end }}
17
18    <!-- 以下IF块为新增内容 -->
19    {{ if .Site.Params.busuanzi.enable -}}
20    <div class="busuanzi-footer">
21        <span id="busuanzi_container_site_pv">
22            本站总访问量<span id="busuanzi_value_site_pv"></span>次
23        </span>
24        <span id="busuanzi_container_site_uv">
25            本站访客数<span id="busuanzi_value_site_uv"></span>人次
26        </span>
27    </div>
28    {{- end -}}
29
30
31    <span>
32        Powered by
33        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
34        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
35    </span>
36</footer>
37...
38{{- end }}

 1...
 2    <div class="post-meta">
 3      {{- partial "post_meta.html" . -}}
 4      {{- partial "translation_list.html" . -}}
 5      {{- partial "edit_post.html" . -}}
 6      {{- partial "post_canonical.html" . -}}
 7
 8      <!-- 以下If块为新增内容 -->
 9      {{ if .Site.Params.busuanzi.enable -}}
10      <div class="meta-item">&nbsp·&nbsp
11        <span id="busuanzi_container_page_pv">本文阅读量<span id="busuanzi_value_page_pv"></span>次</span>
12      </div>
13      {{- end }}
14
15    </div>
16...

1params:
2  busuanzi:
3      enable: true

1services:
2    googleAnalytics:
3        id: "G-XXXXXXXXXX"

1---
2title: ""
3layout: "archives"
4url: "/archives/"
5summary: archives
6---

1    - identifier: archive
2      name: 时间轴
3      url: /archives/
4      weight: 11

 1{{- define "main" }}
 2<article class="post-single">
 3  <header class="post-header">
 4    <h1 class="post-title entry-hint-parent">
 5      <div style="margin-left: auto;margin-right: auto;">
 6        {{ .Title }}
 7      </div>
 8    </h1>
 9  </header>
10
11  {{- if .Content }}
12  <div class="post-content">
13    {{ .Content }}
14  </div>
15  {{- end }}
16
17  <footer class="post-footer">
18    <div id="tcomment"></div>
19    <script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.40/dist/twikoo.all.min.js"></script>
20    <script>
21      twikoo.init({
22        envId: 'xxx',
23        el: '#tcomment',
24      })
25    </script>
26  </footer>
27</article>
28{{- end }}

1---
2title: "💬 留言板"
3date: '2024-12-13T21:14:22+08:00'
4draft: false # 默认为草稿模式
5layout: "message"
6comments: true # 评论
7---

1    - identifier: message
2      name: 💬 留言板
3      url: /message/
4      weight: 21

 1{{- $scratch := newScratch }}
 2
 3{{- if not .Date.IsZero -}}
 4  {{- $dateStr := .Date.Format (default "January 2, 2006" site.Params.DateFormat) -}}
 5  {{- $translatedPublished := i18n "published" -}}
 6  {{- $dateHTML := printf "<span title='%s'>%s</span>" (.Date) $dateStr -}}
 7  {{- $scratch.Add "meta" (slice (printf "%s %s" $translatedPublished $dateHTML)) }}
 8{{- end }}
 9
10{{- if not .Lastmod.IsZero -}}
11  {{- $lastmodStr := .Lastmod.Format (default "January 2, 2006" site.Params.DateFormat) -}}
12  {{- $translatedLastModified := i18n "last_modified" -}}
13  {{- $lastmodHTML := printf "<span title='%s'>%s</span>" (.Lastmod) $lastmodStr -}}
14  {{- $scratch.Add "meta" (slice (printf "%s %s" $translatedLastModified $lastmodHTML)) }}
15{{- end }}
16
17{{- if (.Param "ShowReadingTime") -}}
18{{- $scratch.Add "meta" (slice (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime))) }}
19{{- end }}
20
21{{- if (.Param "ShowWordCount") -}}
22{{- $scratch.Add "meta" (slice (i18n "words" .WordCount | default (printf "%d words" .WordCount))) }}
23{{- end }}
24
25{{- if not (.Param "hideAuthor") -}}
26{{- with (partial "author.html" .) }}
27{{- $scratch.Add "meta" (slice .) }}
28{{- end }}
29{{- end }}
30
31{{- with ($scratch.Get "meta") }}
32{{- delimit . "&nbsp;·&nbsp;" | safeHTML -}}
33{{- end -}}

 1<style type="text/css">
 2    .friends {
 3        --link-count-per-row: 1;
 4    }
 5
 6    @media screen and (min-width: 576px) {
 7        .friends {
 8            --link-count-per-row: 2;
 9        }
10    }
11
12    @media screen and (min-width: 768px) {
13        .friends {
14            --link-count-per-row: 3;
15        }
16    }
17
18    .friends {
19        display: grid;
20        grid-template-columns: repeat(var(--link-count-per-row), 1fr);
21        grid-gap: 16px;
22    }
23
24    /* 空间占位 */
25    .friend-skeleton {
26        height: 280px;
27        display: inline-block;
28        position: relative;
29    }
30
31    .friend {
32        height: 100%;
33        width: 100%;
34        position: absolute;
35        top: 0;
36        left: 0;
37        transition: 0.67s cubic-bezier(0.19, 1, 0.22, 1);
38        border-radius: var(--radius);
39        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
40            0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
41        overflow: hidden;
42        display: flex;
43        flex-direction: column;
44        justify-content: flex-start;
45        align-items: center;
46    }
47
48    .friend:hover {
49        transform: translateY(-8px);
50        box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
51            0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12) !important;
52    }
53
54    .friend-avatar {
55        object-fit: cover;
56        width: 100%;
57        height: 180px;
58        margin: 0 !important;
59        border-radius: 0 !important;
60    }
61    .friend-content {
62        text-align: center;
63        flex: 1;
64        width: 100%;
65        padding: 16px;
66        background: var(--entry);
67        transform: translate3d(0, 0, 0);
68    }
69
70    .friend-name {
71        font-size: 1.2rem;
72        font-weight: bold;
73        transform: inherit;
74    }
75
76    .friend-description {
77        font-size: 0.8rem;
78        color: var(--secondary);
79        transform: translate3d(0, 0, 0);
80    }
81</style>
82<div class="friends">
83    {{ range .Site.Data.friends }}
84    <div class="friend-skeleton">
85        <a href="{{ .link }}" target="_blank">
86            <div class="friend">
87                <img class="friend-avatar" src="{{ .image }}" />
88                <div class="friend-content">
89                    <div class="friend-name">{{ .title }}</div>
90                    <div class="friend-description">{{ .intro }}</div>
91                </div>
92            </div>
93        </a>
94    </div>
95    {{ end }}
96</div>
97<!-- style code by https://github.com/fissssssh -->
98<!-- view https://github.com/fissssssh/fissssssh.github.io for more detail -->

 1{{- define "main" }}
 2<article class="post-single">
 3  <header class="post-header">
 4    {{ partial "breadcrumbs.html" . }}
 5    <h1 class="post-title entry-hint-parent">
 6      {{ .Title }}
 7    </h1>
 8  </header>
 9  {{- $isHidden := (.Param "cover.hiddenInSingle") | default (.Param "cover.hidden") | default false }}
10  {{- partial "cover.html" (dict "cxt" . "IsSingle" true "isHidden" $isHidden) }}
11  {{- if (.Param "ShowToc") }}
12  {{- partial "toc.html" . }}
13  {{- end }}
14  <div style="height: 40px;"></div>
15  {{ .Content }}
16  <div style="height: 40px;"></div>
17  {{ partial "friends.html" . }}
18  <div style="height: 40px;"></div>
19  {{- if (.Param "comments") }}
20  {{- partial "comments.html" . }}
21  {{- end }}
22</article>
23{{- end }}{{/* end main */}}

1---
2title: "🧑‍🤝‍🧑 Zanks的朋友们 🧑‍🤝‍🧑"
3date: '2024-01-01T00:00:00+08:00'
4author: "Zanks"
5layout: "friends"
6comments: true # 评论
7---
8
9排名不分先后，按时间顺序添加。如需新增请留言，或通过其他方式联系我。

1- title: "伞"
2  intro: "一只咸鱼的学习记录"
3  link: "https://umb.ink/"
4  image: "https://avatars.githubusercontent.com/u/53655863?v=4"
5- title: "HelloWorld的小博客"
6  intro: "这里是一个小白的博客"
7  link: "https://mzdluo123.github.io/"
8  image: "https://avatars.githubusercontent.com/u/23146087?v=4"

 1{{$scratch := newScratch}}
 2{{ range (where .Site.RegularPages "Section" "posts" )}}
 3{{$scratch.Add "total" .WordCount}}
 4{{ end }}
 5<div>
 6	<div>
 7	  📚 文章数:
 8	</div>
 9	<div>
10	  {{ len (where .Site.RegularPages "Section" "posts") }}
11	</div>
12  </div>
13  <div>
14	<div>
15	  ✍️ 总字数:
16	</div>
17	<div>
18	  {{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}K
19	</div>
20</div>

 1// go-comment.js
 2document.addEventListener('scroll', function () {
 3    const comment = document.getElementById("comments-title");
 4    const bottomToComment = document.getElementById("comments-link")
 5    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
 6    const offsetTop = comment.offsetTop
 7    const scrollTop = document.documentElement.scrollTop
 8    const top = offsetTop - scrollTop
 9    if (top <= viewPortHeight + 100) {
10        bottomToComment.style.visibility = "hidden";
11        bottomToComment.style.opacity = "0";
12    } else {
13        bottomToComment.style.visibility = "visible";
14        bottomToComment.style.opacity = "1";
15    }
16})

 1// go-top.js
 2let menu = document.getElementById('menu')
 3if (menu) {
 4    menu.scrollLeft = Number(localStorage.getItem("menu-scroll-position"));
 5    menu.onscroll = function () {
 6        localStorage.setItem("menu-scroll-position", menu.scrollLeft.toString());
 7    }
 8}
 9
10  
11
12window.onscroll = function () {
13    const goTopButton = document.getElementById("top-link");
14    if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
15        goTopButton.style.visibility = "visible";
16        goTopButton.style.opacity = "1";
17    } else {
18        goTopButton.style.visibility = "hidden";
19        goTopButton.style.opacity = "0";
20    }
21};
22
23document.addEventListener('scroll', function (e) {
24    const readProgress = document.getElementById("pe-read-progress");
25    const scrollHeight = document.documentElement.scrollHeight;
26    const clientHeight = document.documentElement.clientHeight;
27    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
28    readProgress.innerText = ((scrollTop / (scrollHeight - clientHeight)).toFixed(2) * 100).toFixed(0);
29})

 1<aside>
 2 <!--右侧按钮-->
 3    <div class="right-side-btns">
 4        {{- /* Scroll To Comment */ -}}
 5        <script src="/js/go-comment.js"></script>
 6        <a href="#comments-title" class="right-side-btn" id="comments-link"
 7            style="visibility: visible; opacity: 1;padding: 0.6rem;">
 8            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.338 29.338" fill="currentColor">
 9                <path d="M27.184,1.605H2.156C0.967,1.605,0,2.572,0,3.76v17.572c0,1.188,0.967,2.155,2.156,2.155h13.543
10        l5.057,3.777c0.414,0.31,0.842,0.468,1.268,0.468c0.789,0,1.639-0.602,1.637-1.923v-2.322h3.523c1.188,0,2.154-0.967,2.154-2.155
11        V3.76C29.338,2.572,28.371,1.605,27.184,1.605z M27.34,21.332c0,0.085-0.068,0.155-0.154,0.155h-5.523v3.955l-5.297-3.956H2.156
12        c-0.086,0-0.154-0.07-0.154-0.155V3.759c0-0.085,0.068-0.155,0.154-0.155v0.001h25.029c0.086,0,0.154,0.07,0.154,0.155
13        L27.34,21.332L27.34,21.332z M5.505,10.792h4.334v4.333H5.505C5.505,15.125,5.505,10.792,5.505,10.792z M12.505,10.792h4.334v4.333
14        h-4.334V10.792z M19.505,10.792h4.334v4.333h-4.334V10.792z" />
15            </svg>
16        </a>
17        <script src="/js/go-top.js"></script>
18        <a href="#top" class="right-side-btn" id="top-link" style="text-align: center;">
19            <span id="pe-read-progress"></span>
20        </a>
21    </div>
22</aside>

 1:root {
 2    --text-color: #bdbdbd;
 3    --text-hover-color: #373737ac;
 4    --right-side-width: 300px;
 5}
 6.dark {
 7    --text-color: #bdbdbd;
 8    --text-hover-color: #373737ac;
 9}
10.right-side-btns,
11.right-side-btn {
12    display: flex;
13    flex-direction: column;
14    align-items: center;
15    justify-content: center;
16}
17.right-side-btns {
18    position: fixed;
19    right: 1rem;
20    z-index: 999;
21    bottom: 2rem;
22    gap: 1rem;
23}
24.right-side-btn {
25    width: 2.4rem;
26    height: 2.4rem;
27    padding: 0.3rem;
28    border-radius: 50%;
29    background: var(--tertiary);
30    color: var(--secondary);
31    transition: all 0.3s ease;
32    font-size: 0.9rem;
33}
34.right-side-btn:hover {
35    background-color: var(--text-color);
36    color: var(--text-hover-color);
37    outline: 0;
38}

 1    <div class="author-info">
 2        <!-- 头像 -->
 3        <img src="/homepage.jpg" class="author-avatar" />
 4        <!-- 社交信息 -->
 5        <div>
 6            <div class="social-icons">
 7                {{- range site.Params.socialIcons }}
 8                <a href="{{ trim .url " " | safeURL }}" target="_blank" rel="noopener noreferrer me"
 9                    title="{{ (.title | default .name) | title }}">
10                    {{ partial "svg.html" . }}
11                </a>
12                {{- end }}
13            </div>
14         </div>
15        <!-- 最近更新的文章 -->
16        <div class="last-mod">
17            <div>
18                <div class="custom-divider"></div>
19                <div class="last-mod-title">最近更新</div>
20                <div class="custom-divider"></div>
21            </div>
22            <div class="last-mod-table">
23                {{ range first 3 (where .Site.RegularPages "Section" "posts").ByDate.Reverse }}
24                <a class="last-mod-item" href="{{ .RelPermalink }}">
25                    <div class="last-mod-item-tile">{{ .Title }} </div>
26                    <div class="last-mod-item-time"> ----- 于 {{.Lastmod.Format (default "January 2, 2006"
27                        site.Params.DateFormat)}} 由 {{ .Params.author }} 更新</div>
28                </a>
29                {{ end }}
30            </div>
31        </div>
32    </div>

 1.right-side {
 2    position: absolute;
 3    height: 100%;
 4    width: 25%;
 5    border-left: 1px solid var(--border);
 6    right: calc((var(--right-side-width) + var(--gap)) * -1);
 7    top: calc(var(--gap) * 2);
 8    width: var(--right-side-width);
 9}
10.author-info {
11    display: flex;
12    flex-direction: column; /* 设置主轴方向为纵向 */
13    justify-content: center; /* 在主轴上居中对齐 */
14    align-items: center; /* 在交叉轴上居中对齐 */
15    margin-top: 0px;
16    margin-left: 25px;
17    margin-right: 10px;
18    position: sticky;
19    top: var(--gap);
20    border: 2px solid var(--text-hover-color); /* 边框宽度为2px，样式为实线，颜色为黑色 */
21    box-shadow: 0 2px 4px var(--text-hover-color); /* 水平偏移0px，垂直偏移4px，模糊半径8px，颜色为黑色且透明度为0.1 */
22}
23
24
25.author-avatar {
26    height: 128px;
27    width: 128px;
28    margin-top: 20px;
29    border-radius: 50%;
30}
31
32.last-mod {
33    width: 90%;
34    margin-top: 10px;
35}
36
37.last-mod-table {
38    display: flex;
39    flex-direction: column;
40    align-items: center;
41    justify-content: center;
42    margin-top: 5px;
43}
44
45.last-mod-title {
46    text-align: center;
47    font-weight: bold;
48}
49.last-mod-item {
50    width: 100%;
51    display: 1;
52    font-size: 0.9rem;
53    border: 2px solid var(--text-hover-color);
54    border-radius: 10px;
55    padding: 4px;
56    padding-left: 7px;
57    padding-right: 7px;
58    margin-bottom: 10px ;
59    transition: transform 0.5s ease;
60}
61.last-mod-item:hover {
62    border: 2px solid var(--text-color);
63}
64.last-mod-item-time {
65    font-size: 0.7rem;
66    text-align: right;
67}
68.custom-divider {
69    width: 100%;
70    height: 1px;
71    background: repeating-linear-gradient(
72      to right,
73      #e0e0e0,
74      #e0e0e0 33%,
75      transparent 0,
76      transparent 67%,
77      #e0e0e0 0,
78      #e0e0e0 100%
79    );
80  }

 1{{ $defaultFoldMod := .Page.Param "codeBlockFoldMode" | default false }}
 2
 3{{- $lang := .Type | default "text" }}
 4{{- $title := .Attributes.title | default "" }}
 5{{- $u_lang := .Attributes.lang | default ""  }}
 6{{- $hideLang := .Attributes.hide | default false  }}
 7{{ $foldMode := .Attributes.fold | default $defaultFoldMod }}
 8
 9{{- if and (.Attributes.force) (ne $u_lang "")  }}
10{{- $lang = $u_lang }}
11{{- end }}
12
13
14<div class="pe-code-block-wrap {{ if ne $foldMode "disable" }} pe-code-details {{ end }} {{ if not $foldMode }} open {{ end }} scrollable">
15    <div class="pe-code-block-header pe-code-details-summary">
16        <div class="pe-code-block-header-left">
17            {{ if ne $foldMode "disable" }}
18            <i class="arrow fas fa-chevron-right fa-fw pe-code-details-icon" aria-hidden="true"></i>
19            {{ end }}
20            {{ if not $hideLang }}
21            <span>
22            {{- if ne $u_lang "" }}
23            {{- $u_lang -}}
24            {{- else }}{{- $lang -}}{{- end }}
25            </span>
26            {{ end }}
27        </div>
28        <div class="pe-code-block-header-center">
29            <span>
30            {{- if ne $title "" }}
31            {{- $title }}
32            {{ end }}
33            </span>
34        </div>
35        <div class="pe-code-block-header-right">
36            {{ if ne $foldMode "disable" }}
37            <i class="fas fa-ellipsis-h fa-fw" aria-hidden="true"></i>
38            {{ end }}
39            <button class="pe-code-copy-button">
40                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="pe-icon"><path fill="currentColor" fill-rule="evenodd" d="M7 5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3h2zm2 2h5a3 3 0 0 1 3 3v5h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1zM5 9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1z" clip-rule="evenodd"></path></svg>
41            </button>
42        </div>
43    </div>
44    <div class="pe-code-details-content scrollable">
45        {{ highlight .Inner $lang .Options }}
46    </div>
47</div>

1<pre class="mermaid">
2    {{- .Inner | safeHTML }}
3  </pre>
4  {{ .Page.Store.Set "hasMermaid" true }}

  1:root {
  2    --pe-primary-hover-color: #777777;
  3    /* 代码块标题色 */
  4    --pe-code-block-header-color: var(--primary);
  5    /* 代码块标题背景色 */
  6    --pe-code-block-header-bg-color: #ededed;
  7    /* 代码块文本颜色 */
  8    --pe-code-block-color: #979797;
  9    /* 代码块背景色 */
 10    --pe-code-block-bg-color: #f5f5f5;
 11    /* 代码块复制按钮字体颜色 */
 12    --pe-copy-code-color: #fff;
 13    /* 代码块复制按钮背景色 */
 14    --pe-copy-code-bg-color: #979797;
 15    --pe-scrollbar-bg-color: rgb(163, 163, 165);
 16    --pe-scrollbar-hover-bg-color: rgb(113, 113, 117);
 17    --copy-btn-hover-color: #4489f9;
 18    --code-color: #ff8a8a;
 19}
 20
 21.dark {
 22    /* 代码块标题色 */
 23    --pe-code-block-header-color: var(--primary);
 24    /* 代码块标题背景色 */
 25    --pe-code-block-header-bg-color: #20252B;
 26    /* 代码块文本颜色 */
 27    --pe-code-block-color: rgba(255, 255, 255, 0.7);
 28    /* 代码块背景色 */
 29    --pe-code-block-bg-color: #272C34;
 30
 31    --pe-copy-code-color: rgba(255, 255, 255, 0.7);
 32    --pe-copy-code-bg-color: #414244;
 33
 34    --pe-scrollbar-bg-color: rgb(113, 113, 117);
 35    --pe-scrollbar-hover-bg-color: rgb(163, 163, 165);
 36    --copy-btn-hover-color: #b3d0ff;
 37}
 38
 39.post-content a:hover {
 40    color: var(--copy-btn-hover-color);
 41}
 42
 43/* 代码样式 */
 44.post-content code {
 45    margin: unset;
 46    padding: .3rem .4rem;
 47    line-height: 1.5;
 48    background: var(--code-bg);
 49    border-radius: .5rem;
 50    font-size: 0.875em;
 51    font-family: Consolas, sans-serif;
 52    color: var(--code-color);
 53}
 54
 55/* 代码块样式 */
 56.pe-code-block-wrap {
 57    border-radius: var(--radius);
 58    margin: var(--content-gap) auto;
 59    background-color: var(--pe-code-block-header-bg-color);
 60    font-family: Consolas, sans-serif;
 61    overflow: hidden;
 62}
 63
 64.pe-code-block-header {
 65    display: flex;
 66    width: 100%;
 67    align-items: center;
 68    color: var(--pe-code-block-header-color);
 69    justify-content: space-between;
 70    padding: .4rem 1rem;
 71    font-size: 0.875rem;
 72}
 73
 74.pe-code-block-header-left {
 75    text-align: left;
 76    display: flex;
 77    align-items: baseline;
 78    gap: .2rem;
 79}
 80
 81.pe-code-block-header-center {
 82    text-align: center;
 83}
 84
 85.pe-code-block-header-right {
 86    line-height: 1rem;
 87    text-align: right;
 88    width: 2rem;
 89    display: flex;
 90    justify-content: flex-end;
 91}
 92
 93.post-content .highlight:not(table) {
 94    margin: unset;
 95    background: var(--pe-code-block-bg-color) !important;
 96    border-radius: unset;
 97}
 98
 99.post-content pre code {
100    background-color: var(--pe-code-block-bg-color) !important;
101    font-size: 0.875rem;
102    color: var(--pe-code-block-color);
103    border-radius: unset;
104}
105
106.pe-icon {
107    width: 1.6rem;
108    height: 1.6rem;
109}
110
111.copy-code:hover {
112    background: var(--pe-primary-hover-color);
113}
114
115.chroma .lnt {
116    padding: 0 0 0 1.2rem !important;
117}
118
119/* 滚动条 */
120.post-content :not(table) ::-webkit-scrollbar-thumb {
121    border: .2rem solid var(--pe-code-block-bg-color);
122    background: var(--pe-scrollbar-bg-color);
123}
124
125.post-content :not(table) ::-webkit-scrollbar-thumb:hover {
126    background: var(--pe-scrollbar-hover-bg-color);
127}
128
129.pe-code-details-content::-webkit-scrollbar {
130    width: .8rem;
131}
132
133.pe-code-details-content::-webkit-scrollbar-track {
134    background: var(--pe-code-block-bg-color); /* Background of the scrollbar track */
135}
136
137.pe-code-details-content::-webkit-scrollbar-thumb {
138    border: .2rem solid var(--pe-code-block-bg-color);
139    background: var(--pe-scrollbar-bg-color);
140}
141
142.pe-code-details-content::-webkit-scrollbar-thumb:hover {
143    background: var(--pe-scrollbar-hover-bg-color);
144}
145
146.pe-code-details-content::-webkit-scrollbar-corner {
147    background: var(--pe-code-block-bg-color);
148}
149
150table.lntable {
151    overflow-x: unset;
152}
153
154.pe-code-block-container pre {
155    margin: unset;
156}
157
158.pe-code-details .pe-code-details-summary:hover {
159    cursor: pointer;
160}
161
162.pe-code-details i.pe-code-details-icon {
163    color: var(--content);
164    -webkit-transition: transform 0.2s ease;
165    -moz-transition: transform 0.2s ease;
166    -o-transition: transform 0.2s ease;
167    transition: transform 0.2s ease;
168}
169
170.dark .pe-code-details i.pe-code-details-icon {
171    color: var(--content);
172}
173
174.pe-code-details .pe-code-details-content {
175    max-height: 0;
176    overflow-y: hidden;
177    -webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
178    -moz-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
179    -o-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
180    transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s;
181}
182
183.pe-code-details.open i.pe-code-details-icon {
184    -webkit-transform: rotate(90deg);
185    -moz-transform: rotate(90deg);
186    -ms-transform: rotate(90deg);
187    -o-transform: rotate(90deg);
188    transform: rotate(90deg);
189}
190
191.pe-code-details.open .pe-code-details-content {
192    max-height: 80vh;
193    -webkit-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
194    -moz-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
195    -o-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
196    transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
197}
198
199.pe-code-details.scrollable .pe-code-details-content{
200    overflow: auto;
201}
202
203.scrollable {
204    overflow: auto;
205}
206
207.pe-code-details .fa-chevron-right:before {
208    content: "\f105";
209}
210
211.pe-code-details .fa-ellipsis-h:before {
212    content: "\f141";
213}
214
215.pe-code-details.open .fa-ellipsis-h:before {
216    content: "";
217}
218
219.pe-code-details .pe-code-copy-button {
220    display: none;
221}
222
223.pe-code-details.open .pe-code-copy-button {
224    display: inherit;
225}
226
227.pe-code-copy-button:hover {
228    color: var(--copy-btn-hover-color);
229}