Hugo PaperMod 安装与配置

1

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

1
2
3
4

git submodule deinit -f themes/old-theme
rm -rf .git/modules/themes/old-theme
git rm -f themes/old-theme
git commit -m "Remove old theme"

1
2

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive

1

theme = "PaperMod"

1

git submodule update --remote --merge

1

WARN  found no layout file for "html" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

1

git submodule update --init --recursive

1
2

cd themes/PaperMod/
git describe --tags

 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

.(site root)
├── assets
│   └── css
│       └── extended
│           └── blank.css
├── content
│   ├── posts
│   │   ├── _index.md
│   │   ├── emoji-support.md
│   │   ├── markdown-syntax.md
│   │   └── math-typesetting.md
│   ├── archives.md
│   └── search.md
├── i18n
│   └── en.yaml
├── layouts
│   ├── _default
│   │   ├── _markup
│   │   |   └── render-link.html
│   │   ├── archives.html
│   │   └── terms.html
│   └── partials
│       └── toc.html
├── static
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   └── papermod-cover.png
├── themes
|   └── PaperMod
├── hugo.toml.bak
└── config.yml

1

hugo.toml.bak

  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

baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

minify:
  disableXML: true
  minifyOutput: true

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: ExampleSite
  description: "ExampleSite description"
  keywords: [Blog, Portfolio, PaperMod]
  author: Me
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "<link / abs url>"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "Home"
    icon: /apple-touch-icon.png
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Hi there \U0001F44B"
    Content: Welcome to my blog

  socialIcons:
    - name: x
      url: "https://x.com/"
    - name: stackoverflow
      url: "https://stackoverflow.com"
    - name: github
      url: "https://github.com/"

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: categories
      name: categories
      url: /categories/
      weight: 10
    - identifier: tags
      name: tags
      url: /tags/
      weight: 20
    - identifier: example
      name: example.org
      url: https://example.org
      weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    noClasses: false
    # anchorLineNos: true
    # codeFences: true
    # guessSyntax: true
    # lineNos: true
    # style: monokai

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

params:
  profileMode:
    enabled: true
    title: "<Title>" # optional default will be site title
    subtitle: "This is subtitle"
    imageUrl: "<image link>" # optional
    imageTitle: "<title of image as alt>" # optional
    imageWidth: 120 # custom size
    imageHeight: 120 # custom size
    buttons:
      - name: Archive
        url: "/archive"
      - name: Github
        url: "https://github.com/"

  socialIcons: # optional
    - name: "<platform>"
      url: "<link>"
    - name: "<platform 2>"
      url: "<link2>"

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

menu:
  main:
    - identifier: archives
      name: archives
      url: archives/
      weight: 10
    - identifier: categories
      name: categories
      url: categories/
      weight: 20
    - identifier: tags
      name: tags
      url: tags/
      weight: 30
    - identifier: search
      name: search
      url: search/
      weight: 40

1
2
3
4

.(site root)
└── content
    ├── archives.md
    └── search.md

1
2
3
4
5
6

---
title: "存档"
layout: "archives"
url: "/archives"
summary: "archives"
---

1
2
3
4
5

---
title: "搜索"
layout: "search"
placeholder: 输入关键字，然后回车 ...
---

1
2
3
4
5
6

.(site root)
└── content
    └── posts
        ├── emoji-support.md
        ├── markdown-syntax.md
        └── math-typesetting.md

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

menu:
  main:
    - identifier: archives
      name: 归档
      url: archives/
      weight: 10
    - identifier: categories
      name: 分类
      url: categories/
      weight: 20
    - identifier: tags
      name: 标签
      url: tags/
      weight: 30
    - identifier: search
      name: 搜索
      url: search/
      weight: 40

 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

{{- define "main" }}

{{- if .Title }}
<header class="page-header">
    {{- if eq .Title "Categories" }}
    <h1>{{ "分类" }}</h1>
    {{- end }}
    {{- if eq .Title "Tags" }}
        <h1>{{ "标签" }}</h1>
        <!-- <h1>🔖{{ .Title }}</h1> -->
    {{- end }}
    <!-- <h1>{{ .Title }}</h1> -->
    {{- if .Description }}
    <div class="post-description">
        {{ .Description }}
    </div>
    {{- end }}
</header>
{{- end }}

<!-- 原始 -->

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with $.Site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup> </a>
    </li>
    {{- end }}
    {{- end }}
</ul>

{{- end }}{{/* end main */ -}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# 语言设置
defaultContentLanguage: "zh"

# 单语言，必须在此处，以下设置之前
languages:
  zh:
    # RFC 5646 语言标记, Hugo 使用此值填充内置 RSS 模板中的语言元素和内置别名模板中 html 元素的 lang 属性
    languageCode: "zh-CN"
    # 语言名称，通常在渲染语言切换器时使用
    languageName: "中文"

1
2
3

---
title: "文章"
---

1
2
3
4

params:
  # ...
  showtoc: true  # 显示目录
  tocopen: true  # 自动展开目录

1
2
3
4
5
6
7
8

.(site root)
├── assets
│   └── css
│       └── extended
│           └── toc.css
└── layouts
    └── partials
        └── toc.html

  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

{{- $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;
    
    document.addEventListener('DOMContentLoaded', function (event) {
        checkTocPosition();
    
        elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
        if (elements.length > 0) {
            // 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');
        }
    
        // Add event listener for the "back to top" link
        const topLink = document.getElementById('top-link');
        if (topLink) {
            topLink.addEventListener('click', (event) => {
                // Prevent the default action
                event.preventDefault();
    
                // Smooth scroll to the top
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });
        }
    }, false);
    
    window.addEventListener('resize', function(event) {
        checkTocPosition();
    }, false);
    
    window.addEventListener('scroll', () => {
        // Get the current scroll position
        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    
        // Check if the scroll position is at the top of the page
        if (scrollPosition === 0) {
            return;
        }
    
        // Ensure elements is a valid NodeList
        if (elements && elements.length > 0) {
            // 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) - scrollPosition) > 0 && 
                    (getOffsetTop(element) - scrollPosition) < window.innerHeight / 2) {
                    return element;
                }
            }) || activeElement;
    
            elements.forEach(element => {
                const id = encodeURI(element.getAttribute('id')).toLowerCase();
                const tocLink = document.querySelector(`.inner ul li a[href="#${id}"]`);
                if (element === activeElement){
                    tocLink.classList.add('active');
    
                    // Ensure the active element is in view within the .inner container
                    const tocContainer = document.querySelector('.toc .inner');
                    const linkOffsetTop = tocLink.offsetTop;
                    const containerHeight = tocContainer.clientHeight;
                    const linkHeight = tocLink.clientHeight;
    
                    // Calculate the scroll position to center the active link
                    const scrollPosition = linkOffsetTop - (containerHeight / 2) + (linkHeight / 2);
                    tocContainer.scrollTo({ top: scrollPosition, behavior: 'smooth' });
                } else {
                    tocLink.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

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

1
2
3

[title](/foo/bar/)
↓ 会被简单解析为： ↓
<a href="/foo/bar/">title</a>

 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

{{- /* Comments area start */ -}}
{{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}

<!-- layouts/partials/comments.html -->
{{- if .Site.Params.comments }}
    <!-- 评论容器 -->
    <div class="waline-container" data-path="{{ .Permalink | relURL }}"></div>
    <link href="https://unpkg.com/@waline/client@v3/dist/waline.css" rel="stylesheet" />

    <!-- 调整评论框宽度与文章宽度一致 -->
    <style>
        .waline-container {
            max-width: 100% !important; /* 强制占满父容器宽度 */
            margin-top: 40px;           /* 保持与上方内容的间距 */
            padding: 0 !important;      /* 移除多余内边距 */
        }
        /* 针对 Waline 内部可能存在的最大宽度限制进行覆盖 */
        .wl-panel {
            margin: 0 !important;
            width: 100% !important;
        }
    </style>

    <!-- 初始化 Waline 的脚本 -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {

            // 初始化 Waline
            const walineInit = () => {
                import('https://unpkg.com/@waline/client@v3/dist/waline.js').then(({ init }) => {
                    const walineContainers = document.querySelectorAll('.waline-container[data-path]');
                    walineContainers.forEach(container => {
                        if (!container.__waline__) {
                            const path = container.getAttribute('data-path');
                            container.__waline__ = init({
                                el: container,
                                serverURL: '{{ .Site.Params.waline.serverURL }}',
                                lang: '{{ .Site.Params.waline.lang }}',
                                meta: [],  // 隐藏昵称、邮箱、网址输入框
                                login: 'force',  // 强制登录模式：未登录时只显示登录入口，登录后才允许提交
                                visitor: '{{ .Site.Params.waline.visitor | default "匿名者" }}',
                                emoji: [
                                    {{- range .Site.Params.waline.emoji }}
                                        '{{ . }}',
                                    {{- end }}
                                ],
                                requiredMeta: [
                                    {{- range .Site.Params.waline.requiredMeta }}
                                        '{{ . }}',
                                    {{- end }}
                                ],
                                locale: {
                                    admin: '{{ .Site.Params.waline.locale.admin }}',
                                    placeholder: '{{ .Site.Params.waline.locale.placeholder }}',
                                },
                                path: path,
                                dark: '{{ .Site.Params.waline.dark | default "body.dark" }}',

                                // 个性化显示
                                commentSorting: 'hottest',  // 评论列表排序方式
                                wordLimit: 500,             // 评论字数限制
                                search: false,              // 自定义搜索功能
                                reaction: false,            // 文章表情互动功能
                                imageUploader: false,       // 自定义图片上传
                            });
                        }
                    });
                }).catch(error => {
                    console.error("Waline 初始化失败：", error);
                });
            };

            walineInit();
        });
    </script>
{{- end }}

{{- /* Comments area end */ -}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

params:
	# ......
	comments: true  # 启用评论功能
  # ......
  waline:
    serverURL: "https://comments.example.com" # 绑定为你自己的 Waline 服务端地址
    lang: "zh-CN"
    # visitor: "访客"
    # 适配 PaperMod 的深色模式
    dark: "html[data-theme='dark']"
    emoji:
      - "https://unpkg.com/@waline/emojis@1.4.0/weibo"
      # - "https://unpkg.com/@waline/emojis@1.4.0/qq"
    requiredMeta: []  # 强制登录模式
      # 选择必填项，包括 nick|mail|link
      # - "nick"
    locale:
      # 作者标签文案
      admin: "博主"
      # 评论输入框占位文案内容
      placeholder: "请留言（填写邮箱可在被回复时收到邮件提醒）"

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

<div class="pe-copyright">
    <img src="/imgs/cc/cc.svg" width="75" height="75" align="right" />
    <!-- <hr> -->
    <blockquote>
    {{ if .Param "reposted" }}
        <p><strong>本文为转载内容，原文信息如下：</strong></p>
        <p><strong>原文标题：</strong>{{- .Param "repostedTitle" -}}</p>
        <p><strong>原文作者：</strong>{{- .Param "repostedAuthor" -}}</p>
        <p><strong>原文链接：</strong><a href="{{- .Param "repostedLink" -}}" target="_blank">{{- .Param "repostedLink" -}}</a></p>
        <p><strong>版权声明：</strong>如有侵权，请<a href="mailto://{{ .Param "contactEmail" }}">联系本站</a>删除。</p>
    {{ else }}
        <p><strong>文章标题：</strong>{{ .Title }}</p>
        <p><strong>本文作者：</strong>{{ .Param "author" }}</p>
        <p><strong>本文链接：</strong><a href="{{ .Permalink }}" target="_blank">{{ .Permalink }}</a></p>
        <p><strong>版权声明：</strong>本网站所有文章除特别声明外，均采用 <a href="{{- .Param "licenseLink" -}}" target="_blank">{{- .Param "licenseName" -}}</a> 许可协议。转载请注明出处！</p>
    {{ end }}
    </blockquote>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.pe-copyright {
    margin-top: 50px;  /* 上边距 */
    font-size: 14px;
    border: 3px solid #4A4A4A;
}

.pe-copyright hr {
    border-style: dashed;
    color: #e26c56;
}

.pe-copyright blockquote {
    margin: 10px 0;  /* 外边距：上下边距为 10px，左右为 0 */
    padding: 10px 10px;  /* 内边距：上下边距为 20px，左右为 10px */
}

.pe-copyright a {
    box-shadow: 0 1px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

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

<article class="post-single">
    {{- if .Content }}
    <div class="post-content">
        ...
    </div>
    {{- end }}    

    <!-- 加入版权声明 -->
    {{ if .Param "enableCopyright" }}
    {{ partial "copyright.html" . }}
    {{ end }}

    <footer class="post-footer">
        ...
    </footer>
</article>

1
2
3

params:
	# ...
	enableCopyright: true  # 启用版权声明

1
2
3
4
5

---
author: <Author>
licenseLink: "https://creativecommons.org/licenses/by-nc/4.0/"
licenseName: "CC BY-NC 4.0"
---

1
2
3
4
5
6

params:
	# ...
	author: <Author>
    licenseLink: "https://creativecommons.org/licenses/by-nc/4.0/deed.zh-hans"
    licenseName: "CC BY-NC-SA"
    contactEmail: <userName@example.com>

1
2
3
4
5
6
7

---
reposted: true
repostedTitle: "修改为原文章标题"
repostedAuthor: "修改为原文章作者名"
repostedLink: "修改为原文章链接"
contactEmail: your email
---

1
2
3

params:
	# ...
	contactEmail: <Your Email>

 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

params:
  # ...
  assets:
    disableHLJS: true # to disable highlight.js

# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: false 
markup:
  goldmark:
    renderer:
      unsafe: true
  highlight:
    noClasses: false  # 启用主题 CSS 样式
    anchorLineNos: false
    codeFences: true
    guessSyntax: true
    lineNos: true
    lineNumbersInTable: true  # 表格模式，物理分离行号和代码

    # 参数说明：https://gohugo.io/functions/transform/highlight/
    # lineNos：是否在每行开头显示数字。 默认为 false
    # hl_Lines：以空格分隔的列表，用于强调高亮代码中的行。 要强调第 2、3、4 和 7 行，请将该值设为 2-4 7。 该选项独立于行无起始选项。
    # lineNoStart=1：第一行开头要显示的数字。 如果 lineNos 为 false 则与此无关。 默认值为 1
    # anchorLineNos：是否将每个行号渲染为 HTML 锚点元素，并将周围 span 元素的 id 属性设置为行号。 如果 lineNos 为 false，则与此无关。 默认为 false
    # lineAnchors：在将行号作为 HTML 锚点元素呈现时，将此值预置到周围 span 元素的 id 属性中。 当页面包含两个或多个代码块时，这将提供唯一的 id 属性。 如果 lineNos 或 anchorLineNos 为 false，则与此无关。
    # hl_inline：是否在没有包装容器的情况下渲染突出显示的代码。默认为 false
    # codeFences：是否高亮显示有栅栏的代码块。 默认为 true
    # guessSyntax：如果 LANG 参数为空或设置为没有相应词法的语言，是否自动检测语言。 如果无法自动检测语言，则退回到纯文本词法。 默认为 false
    # lineNumbersInTable：是否在 HTML 表格的两个单元格中显示高亮显示的代码。 左侧表格单元格包含行号，右侧表格单元格包含代码。 如果 lineNos 为 false 则无关。 默认为 true
    # noClasses：是否使用内联 CSS 样式而不是外部 CSS 文件。 要使用外部 CSS 文件，请将此值设为 false，并使用 hugo gen chromastyles 命令生成 CSS 文件。 默认值为 true

1
2
3

params:
  # ...
  ShowCodeCopyButtons: true

  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

{{- if not (.Param "hideFooter") }}
<footer class="footer">
    {{- if not site.Params.footer.hideCopyright }}
        {{- if site.Copyright }}
        <span>{{ site.Copyright | markdownify }}</span>
        {{- else }}
        <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
        {{- end }}
        {{- print " · "}}
    {{- end }}

    {{- with site.Params.footer.text }}
        {{ . | markdownify }}
        {{- print " · "}}
    {{- end }}

    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
{{- end }}

{{- if (not site.Params.disableScrollToTop) }}
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>
{{- end }}

{{- partial "extend_footer.html" . }}

<script>
    let menu = document.getElementById('menu');
    if (menu) {
        const scrollPosition = localStorage.getItem("menu-scroll-position");
        if (scrollPosition) {
            menu.scrollLeft = parseInt(scrollPosition, 10);
        }

        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>

{{- if (not site.Params.disableScrollToTop) }}
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
{{- end }}

{{- if (not site.Params.disableThemeToggle) }}
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        const html = document.querySelector("html");
        if (html.dataset.theme === "dark") {
            html.dataset.theme = 'light';
            localStorage.setItem("pref-theme", 'light');
        } else {
            html.dataset.theme = 'dark';
            localStorage.setItem("pref-theme", 'dark');
        }
    })
</script>
{{- end }}

{{- /* --- 核心优化区域：代码块增强功能 --- */ -}}
{{- if (and (eq .Kind "page") (ne .Layout "archives") (ne .Layout "search") (.Param "ShowCodeCopyButtons")) }}
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        // --- 1. 复制按钮逻辑 ---
        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = '{{- i18n "code_copy" | default "copy" }}';

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

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                // 获取内容：依赖 lineNumbersInTable: true，此时 textContent 不含行号
                let text = codeblock.textContent;
                
                // 核心修复：移除末尾换行符
                navigator.clipboard.writeText(text.replace(/\n$/, ""));
                
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        // 智能插入复制按钮
        // 判断是否是行号区域 (在表格模式下，行号通常是 tr 的第一个子元素)
        if (container.parentNode.firstChild == container) {
            // 是行号，跳过，不加复制按钮
        } else {
             // 尝试找到外层的 .highlight 容器，以便将按钮绝对定位在右上角
             const highlightDiv = codeblock.closest('.highlight');
             if (highlightDiv) {
                 // 防止重复添加
                 if (!highlightDiv.querySelector('.copy-code')) {
                     highlightDiv.appendChild(copybutton);
                 }
             } else {
                 // 回退：如果没找到 highlight 容器，加在当前代码块父级
                 codeblock.parentNode.appendChild(copybutton);
             }
        }

        // --- 2. 折叠按钮逻辑 ---
        // 检查代码高度是否超过 200px (需与 CSS 中的 max-height 一致)
        if (codeblock.scrollHeight > 200) {
            const buttonContainer = codeblock.closest('.highlight');

            // 确保找到了容器且没有添加过折叠按钮
            if (buttonContainer && !buttonContainer.querySelector('.unfoldbtn')) {
                const unfoldbtn = document.createElement('button');
                unfoldbtn.classList.add('unfoldbtn');
                unfoldbtn.innerHTML = '展开';

                // 【重要】添加此 class，CSS 会识别并自动将复制按钮左移，避免重叠
                buttonContainer.classList.add('has-unfold');

                unfoldbtn.addEventListener('click', () => {
                    // 表格模式下，需同时操作行号区和代码区的 code 元素
                    const codes = buttonContainer.querySelectorAll('code');
                    let isUnfolded = false;
                    
                    codes.forEach(c => {
                        // 切换 CSS 类名实现展开/折叠动画
                        if (c.classList.contains('unfold')) {
                            c.classList.remove('unfold');
                            isUnfolded = false;
                        } else {
                            c.classList.add('unfold');
                            isUnfolded = true;
                        }
                    });
                    
                    unfoldbtn.innerHTML = isUnfolded ? '折叠' : '展开';
                });

                buttonContainer.appendChild(unfoldbtn);
            }
        }
    });
</script>
{{- end }}

{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></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
87
88

/*
This is just a placeholder blank stylesheet so as to support adding custom styles budled with theme's default styles
Read https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#bundling-custom-css-with-themes-assets for more info
*/

/* 1. 容器相对定位，为绝对定位的按钮提供锚点 */
.highlight {
    position: relative;
}

/* 2. 按钮通用样式：右上角悬浮、默认透明 */
.copy-code, .unfoldbtn {
    position: absolute;
    top: 5px;  /* 距离顶部 5px */
    z-index: 20; /* 保证在最上层 */

    /* 样式：使用主题变量，半透明背景防止文字看不清 */
    background: var(--entry);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;

    /* 核心交互：默认隐藏，平滑渐变 */
    opacity: 0;
    pointer-events: none; /* 隐藏时鼠标可穿透（方便选中文本） */
    transition: opacity 0.3s ease, right 0.3s ease; /* 同时处理透明度和位置动画 */
}

/* 3. 交互逻辑：鼠标悬停在代码块时显示按钮 */
.highlight:hover .copy-code,
.highlight:hover .unfoldbtn {
    opacity: 1;
    pointer-events: auto; /* 显示时恢复点击 */
}

/* (可选) 移动端优化：触摸屏设备始终显示，或点击后显示 */
@media (hover: none) {
    .copy-code, .unfoldbtn {
        opacity: 1;
        pointer-events: auto;
    }
}

/* 4. 按钮位置控制 */

/* 展开按钮：始终固定在最右侧 */
.unfoldbtn {
    right: 5px;
}

/* 复制按钮：默认在最右侧 (当没有展开按钮时) */
.copy-code {
    right: 5px;
}

/* 智能避让：当存在展开按钮时(JS添加了 .has-unfold 类)，复制按钮向左移动 */
/* 计算：5px(右边距) + 45px(按钮宽度) + 5px(间隙) ≈ 55px */
.has-unfold .copy-code {
    right: 55px;
}

/* 5. 按钮悬停反馈：鼠标放在按钮上时加深背景 */
.copy-code:hover, .unfoldbtn:hover {
    background: var(--tertiary);
}

/* 6. 折叠/展开功能区 (严格限定在代码块内，不影响行内代码) */
.highlight pre > code {
    display: block;
    overflow-y: hidden;
    width: 100%;
    /* 高度切换动画 */
    transition: max-height 0.3s ease-in-out;
}

/* 默认折叠状态高度 */
.highlight pre > code {
    max-height: 200px;
}

/* 展开状态 (由 JS 切换类名控制) */
.unfold {
    max-height: 5000px !important;
}