PaperMod主题最新修改记录

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/* 悬浮动画 */
/* 左上角logo悬浮动画 */
.logo a:hover {
    transition: 0.15s;
    color: grey;
  }

/* 首页icon悬浮动画 */
svg:hover {
    transition: 0.15s;
    transform: scaleX(1.1) scaleY(1.1);
}

.social-icons a svg:hover{
    color: #ffbb3d !important;

}
/* 模式切换按钮悬浮动画 */
#moon:hover {
    transition: 0.15s;
    color: deepskyblue;
}

#sun:hover {
    transition: 0.15s;
    color: gold;
}
/* 菜单栏文字悬浮动画 */
#menu a:hover {
    transition: 0.15s;
    color: grey;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 首页信息居中 */
.first-entry .entry-header {
    align-self: center;
}
.home-info .entry-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.first-entry .entry-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

1
2
3
4
5

{{/*  字体引入  */}}
<link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
<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=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

1
2
3
4
5
6
7

body {
    font-family: Nunito, HarmonyOS_Regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.post-content pre, code {
    font-family: consolas, sans-serif;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* Allocate a single column when the width of the page is small. */
.post-entry {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px 0px;
}

/* Allocate two columns when there is enough width. *
 * The thumbnail is placed in the first column, while the rest of
 * the children are placed in the second column. */
@media (min-width: 700px) {
    .post-entry {
        grid-template-columns: 2fr 3fr;
        grid-gap: 0px 10px;
    }
}

.post-entry .entry-cover {
    max-width: fit-content;
    margin: auto;
    grid-row: span 3;
}

.post-entry .entry-header {
    align-self: center;
}

.post-entry .entry-content {
    align-self: center;
}

.post-entry .entry-footer {
    align-self: end;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/* Allocate a single column when the width of the page is small. */
.post-entry {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px 0px;
}

/* Allocate two columns when there is enough width. */
/* The thumbnail is placed in the second column, while the rest of */
/* the children are placed in the first column. */
@media (min-width: 700px) {
    .post-entry {
        grid-template-columns: 3fr 2fr;
        grid-gap: 0px 10px;
    }
    .post-entry .entry-cover {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

.post-entry .entry-cover {
    max-width: fit-content;
    margin: auto;
}

.post-entry .entry-header {
    align-self: center;
}

.post-entry .entry-content {
    align-self: center;
}

.post-entry .entry-footer {
    align-self: end;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<article class="{{ $class }}{{ if and .Site.Params.homeCoverPosition .Params.cover.image }} cover-{{ .Site.Params.homeCoverPosition }}{{ end }}">
  {{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }}
  {{- if and (not $isHidden) .Params.cover.image }}
  <div class="post-content-wrapper">
    <div class="post-cover">
      {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
    </div>
    <div class="post-info">
  {{- else }}
  <div class="post-content-wrapper">
    <div class="post-info">
  {{- end }}
      <header class="entry-header">
        <h2 class="entry-hint-parent">
          {{- .Title }}
          {{- if .Draft }}
          <span class="entry-hint" title="Draft">
            <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" fill="currentColor">
              <path d="M160-410v-60h300v60H160Zm0-165v-60h470v60H160Zm0-165v-60h470v60H160Zm360 580v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862.09-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" />
            </svg>
          </span>
          {{- end }}
        </h2>
      </header>
      {{- if (ne (.Param "hideSummary") true) }}
      <div class="entry-content">
        <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
      </div>
      {{- end }}
      {{- if not (.Param "hideMeta") }}
      <footer class="entry-footer">
        {{- partial "post_meta.html" . -}}
      </footer>
      {{- end }}
    </div>
  </div>
  <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
</article>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

.post-entry {
  overflow: hidden;
}

.post-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cover-right .post-content-wrapper .post-cover .entry-cover,
.cover-left .post-content-wrapper .post-cover .entry-cover 
{
  margin-bottom: unset;
  margin-top: unset;
}

.entry-cover {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--gap);
}

.cover-left .post-content-wrapper,
.cover-right .post-content-wrapper {
  flex-direction: row;
  align-items: center;
}

.cover-left .post-cover,
.cover-right .post-cover {
  width: 40%;
  margin-bottom: 0;
  margin-right: 20px;
}

.cover-right .post-content-wrapper {
  flex-direction: row-reverse;
}

.cover-right .post-cover {
  margin-right: 0;
  margin-left: 20px;
}

.cover-left .post-info,
.cover-right .post-info {
  width: 60%;
}

/* 修复文章详情页图片描述位置 */
.post-single .entry-cover {
  flex-direction: column;
  margin-bottom: 10px;
}


/* 移动设备默认上方 */
@media (max-width: 768px) {
  .cover-left .post-content-wrapper,
  .cover-right .post-content-wrapper {
    flex-direction: column;
  }

  .cover-left .post-cover,
  .cover-right .post-cover,
  .cover-left .post-info,
  .cover-right .post-info {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .entry-cover {
    margin-bottom: var(--gap) !important;
  }
}

1
2

params:
  homeCoverPosition: right # left/right/top

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247

{{- if (and (eq .Kind "page") (ne .Layout "archives") (ne .Layout "search") (or (.Param "ShowCodeCopyButtons") (.Param "ShowMacDots") (.Param "ShowCodeLang") (.Param "ShowExpandButton"))) }}
<style>
    .code-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        {{/*  background: var(--code-block-bg);  */}}
        background: #232323;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 0.8em;
        position: relative;
    }
    .mac-dots {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ff5f56;
        box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
        margin-right: 5px;
    }
    .lang-label {
        flex-grow: 1;
        text-align: center;
        margin: 0 5px;
        color: rgba(255,255,255,.8);
    }
    .toolbar-group {
        display: flex;
        align-items: center;
    }
    .expand-button, .copy-code {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 5px;
    }
    .highlight {
        position: relative;
    }
    .highlight.collapsible {
        max-height: {{ .Site.Params.codeMaxHeight | default "300px" }};
        overflow: hidden;
    }
    .highlight.expanded {
        max-height: none;
    }
    .highlight pre {
        margin-bottom: 0;
    }
    .expand-button {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        padding: 5px 10px;
        border-radius: 5px 5px 0 0;
        display: none;
        height: 30px;
        &:hover {
            background: rgba(255,255,255,.1);
            color: #fff;
        }
    }
    .highlight.collapsible .expand-button {
        display: block;
    }
    .highlight table {
        margin-bottom: 0;
    }
    .post-content pre code {
        overflow-x: auto;
        overflow-y: hidden;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const codeBlocks = document.querySelectorAll('.highlight');
        const maxHeight = parseInt('{{ .Site.Params.codeMaxHeight | default "300" }}');
        
        codeBlocks.forEach((block) => {
            const pre = block.querySelector('pre');
            const code = pre.querySelector('code');

            // Determine if a toolbar is needed
            let toolbarNeeded = false;
            if ({{ .Param "ShowMacDots" }} || {{ .Param "ShowCodeLang" }}) {
                toolbarNeeded = true;
            }

            if (toolbarNeeded) {
                const toolbar = document.createElement('div');
                toolbar.classList.add('code-toolbar');
                block.insertBefore(toolbar, block.firstChild);

                const leftGroup = document.createElement('div');
                leftGroup.classList.add('toolbar-group');
                toolbar.appendChild(leftGroup);

                const rightGroup = document.createElement('div');
                rightGroup.classList.add('toolbar-group');
                toolbar.appendChild(rightGroup);

                if ({{ .Param "ShowMacDots" }}) {
                    const macDots = document.createElement('div');
                    macDots.classList.add('mac-dots');
                    leftGroup.appendChild(macDots);
                }

                if ({{ .Param "ShowCodeLang" }}) {
                    let language = '';
                    const possibleElements = [
                        block,
                        block.querySelector('code'),
                        block.querySelector('pre > code'),
                        block.querySelector('pre'),
                        block.querySelector('td:nth-child(2) code')
                    ];

                    for (const element of possibleElements) {
                        if (element && element.className) {
                            const elementLanguageClass = element.className.split(' ').find(cls => cls.startsWith('language-'));
                            if (elementLanguageClass) {
                                language = elementLanguageClass.replace('language-', '');
                                break;
                            }
                        }
                    }

                    if (language) {
                        const langLabel = document.createElement('div');
                        langLabel.classList.add('lang-label');
                        langLabel.textContent = language;
                        toolbar.insertBefore(langLabel, rightGroup);
                    }
                }

                if ({{ .Param "ShowCodeCopyButtons" }}) {
                    const copyButton = document.createElement('button');
                    copyButton.classList.add('copy-code');
                    copyButton.innerHTML = '{{- i18n "code_copy" | default "copy" }}';
                    rightGroup.appendChild(copyButton);

                    copyButton.addEventListener('click', () => {
                        let textToCopy = code.textContent;
                        if (code.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
                            textToCopy = Array.from(code.parentNode.parentNode.parentNode.querySelectorAll('td:nth-child(2)'))
                                .map(td => td.textContent)
                                .join('\n');
                        }
                        
                        if ('clipboard' in navigator) {
                            navigator.clipboard.writeText(textToCopy);
                            copyingDone();
                            return;
                        }

                        const textArea = document.createElement('textarea');
                        textArea.value = textToCopy;
                        document.body.appendChild(textArea);
                        textArea.select();
                        try {
                            document.execCommand('copy');
                            copyingDone();
                        } catch (e) { };
                        document.body.removeChild(textArea);
                    });

                    function copyingDone() {
                        copyButton.innerHTML = '{{- i18n "code_copied" | default "copied!" }}';
                        setTimeout(() => {
                            copyButton.innerHTML = '{{- i18n "code_copy" | default "copy" }}';
                        }, 2000);
                    }
                }
            } else if ({{ .Param "ShowCodeCopyButtons" }}) {
                const copyButton = document.createElement('button');
                copyButton.classList.add('copy-code');
                copyButton.innerHTML = '{{- i18n "code_copy" | default "copy" }}';
                if (block.classList.contains("highlight")) {
                    block.appendChild(copyButton);
                } else if (block.parentNode.firstChild == block) {
                    // td containing LineNos
                } else if (code.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
                    // table containing LineNos and code
                    code.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copyButton);
                } else {
                    // code blocks not having highlight as parent class
                    code.parentNode.appendChild(copyButton);
                }

                copyButton.addEventListener('click', () => {
                    let textToCopy = code.textContent;
                    if (code.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
                        textToCopy = Array.from(code.parentNode.parentNode.parentNode.querySelectorAll('td:nth-child(2)'))
                            .map(td => td.textContent)
                            .join('\n');
                    }
                    
                    if ('clipboard' in navigator) {
                        navigator.clipboard.writeText(textToCopy);
                        copyingDone();
                        return;
                    }

                    const textArea = document.createElement('textarea');
                    textArea.value = textToCopy;
                    document.body.appendChild(textArea);
                    textArea.select();
                    try {
                        document.execCommand('copy');
                        copyingDone();
                    } catch (e) { };
                    document.body.removeChild(textArea);
                });

                function copyingDone() {
                    copyButton.innerHTML = '{{- i18n "code_copied" | default "copied!" }}';
                    setTimeout(() => {
                        copyButton.innerHTML = '{{- i18n "code_copy" | default "copy" }}';
                    }, 2000);
                }
            }

            if ({{ .Param "ShowExpandButton" }}) {
                const expandButton = document.createElement('button');
                expandButton.classList.add('expand-button');
                expandButton.innerHTML = '&#9660;'; // Down arrow
                block.appendChild(expandButton);

                if (pre.offsetHeight > maxHeight) {
                    block.classList.add('collapsible');
                    expandButton.style.display = 'block';

                    expandButton.addEventListener('click', () => {
                        block.classList.toggle('expanded');
                        expandButton.innerHTML = block.classList.contains('expanded') ? '&#9650;' : '&#9660;';
                    });
                }
            }
        });
    });
</script>
{{- end }}

1
2
3
4
5
6
7

params:
# 代码块功能
  ShowMacDots: true # Mac色块
  ShowCodeLang: true # 语言显示
  ShowExpandButton: true # 代码块折叠
  ShowCodeCopyButtons: true # 代码块复制按钮
  codeMaxHeight: "300px" # 代码块最大折叠高度

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{{ if .Site.Params.walineServer }}
<div id="waline"></div>
<script>
    Waline.init({
        el: '#waline',
        //path: location.pathname,
        dark: "body.dark",
        serverURL: "{{.Site.Params.walineServer}}",
    });
    
    </script>
{{ end }}

1
2
3
4
5
6
7
8

{{/*  Waline评论引入  */}}
{{ if and (.Site.Params.walineServer) (.IsPage) }}
<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"
  />
{{ end }}

1
2
3

params:
  comments: true
  walineServer: https://waline.vercel.app

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.toc {
    padding: 14px;
    border: solid 1px lightgray;
    font-size: 12px;
}


@media (min-width: 1280px) {
    .toc {
        position: sticky;
        float: left;
        --toc-left: calc(100vw / 50);
        left: var(--toc-left); /* _minimum_ distance from left screen border */
        top: 100px;
        margin-left: -1000px; /* overruled by left */

        width: calc((100vw - var(--main-width) - 2 * var(--gap)) / 2 - 2 * var(--toc-left));
        padding: 14px;
        border: solid 1px lightgray;
        font-size: 12px;
    }

    .toc .inner {
        padding: 0;
    }

    .toc details summary {
        margin-inline-start: 0;
        margin-bottom: 10px;
    }

}



summary {
    cursor: pointer !important;
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
{{- $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">
                {{- $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 -}}
                        {{- $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>
                    {{- 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>
                {{- else }}
                </ul>
                </li>
                {{- end -}}
                {{- end }}
                </ul>
            </div>
        </details>
    </div>
</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 }}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

:root {
    --nav-width: 1380px;
    --article-width: 650px;
    --toc-width: 300px;
}

.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;

    /*目录显示高度*/
    max-height: 83vh;
    overflow-y: auto;
}

.toc .inner::-webkit-scrollbar-thumb {  /*滚动条*/
    background: var(--border);
    border: 7px solid var(--theme);
    border-radius: var(--radius);
}

.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);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

{{ $alertTypes := dict
    "note" "<path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path>"
    "tip" "<path d=\"M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z\"></path>"
    "important" "<path d=\"M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path>"
    "warning" "<path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path>"
    "caution" "<path d=\"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"></path>"
  }}
  {{ if eq .Type "alert" }}
    <blockquote class="alert-blockquote alert-{{ .AlertType }}">
      <p class="alert-heading">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
          {{ index $alertTypes .AlertType | safeHTML }}
        </svg>
        <span>{{ or (i18n .AlertType) (title .AlertType) }}</span>
      </p>
      {{ .Text | safeHTML }}
    </blockquote>
  {{ else }}
    <blockquote>
      {{ .Text | safeHTML }}
    </blockquote>
  {{ end }}


<style>
  :root {
    --alert-title-color: #fff;
    --alert-content-color: inherit;
  }
  
  .post-content .alert-blockquote {
    --title-background-color: #166dd0;
    --content-background-color: #e7f2fa;
    padding: 0;
    margin: 1rem 0;
    border-radius: 4px;
    color: var(--alert-content-color);
    border-inline-start: none;
  }
  
  .alert-blockquote * {
    color: inherit;
  }
  
  .alert-blockquote .alert-heading {
    padding: 4px 18px;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
    color: var(--alert-title-color);
    display: flex;
    align-items: center;
    background: var(--title-background-color);
    margin-bottom: 0;
  }
  
  .alert-heading svg {
    width: 1em;
    height: 1em;
    margin-right: 0.5rem;
    fill: currentColor;
  }
  
  .alert-blockquote > :not(.alert-heading) {
    padding: 18px;
    background-color: var(--content-background-color);
  }
  
  .alert-blockquote p:last-child {
    text-align: justify;
    margin-bottom: 0;
  }
  
  .alert-blockquote.alert-tip { --title-background-color: #1a7f37; --content-background-color: #efe; }
  .alert-blockquote.alert-important { --title-background-color: #8250df; --content-background-color: #f5f0ff; }
  .alert-blockquote.alert-warning { --title-background-color: #9a6700; --content-background-color: #fff8c5; }
  .alert-blockquote.alert-caution { --title-background-color: #cf222e; --content-background-color: #ffebe9; }
  
  body.dark {
    :root {
      --alert-content-color: #d0d7dd;
    }
  
    .post-content .alert-blockquote {
      --title-background-color: #58a6ff;
      --content-background-color: #0d1d30;
    }
  
    .alert-blockquote.alert-tip { --title-background-color: #3fb950; --content-background-color: #0f2a1b; }
    .alert-blockquote.alert-important { --title-background-color: #a371f7; --content-background-color: #2a1d3f; }
    .alert-blockquote.alert-warning { --title-background-color: #d29922; --content-background-color: #3b2300; }
    .alert-blockquote.alert-caution { --title-background-color: #f85149; --content-background-color: #3d0c0c; }
  }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<style>
    .post-content .alert-blockquote {
      border-left: 4px solid;
      border-radius: 5px;
    }
    
    .alert-blockquote .alert-heading {
      display: flex;
      align-items: center;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    
    .alert-blockquote .alert-heading svg {
      margin-right: 0.5rem;
      fill: currentColor;
    }

    /* 左侧border颜色 */
    .post-content .alert-note { border-left-color: #0969da; }
    .post-content .alert-tip { border-left-color: #1a7f37; }
    .post-content .alert-important { border-left-color: #8250df; }
    .post-content .alert-warning { border-left-color: #9a6700; }
    .post-content .alert-caution { border-left-color: #cf222e; }

    /* 标题颜色 */
    .alert-note .alert-heading { color: #0969da; }
    .alert-tip .alert-heading { color: #1a7f37; }
    .alert-important .alert-heading { color: #8250df; }
    .alert-warning .alert-heading { color: #9a6700; }
    .alert-caution .alert-heading { color: #cf222e; }
    
    body.dark .alert-note .alert-heading { color: #58a6ff; }
    body.dark .alert-tip .alert-heading { color: #3fb950; }
    body.dark .alert-important .alert-heading { color: #a371f7; }
    body.dark .alert-warning .alert-heading { color: #d29922; }
    body.dark .alert-caution .alert-heading { color: #f85149; }
</style>