从零搭建 Hugo + PaperMod 博客之四： 让文章显示修改日期和分类链接等个性化偏好配置

mkdir layouts\partials
notepad layouts\partials\post_meta.html

{{- $scratch := newScratch }}

{{- if not .Date.IsZero -}}
    {{- $scratch.Add "meta" (slice (printf "<span title='%s'>%s</span>" (.Date) (.Date | time.Format (default ":date_long" site.Params.DateFormat)))) }}
{{- end }}

{{- /* 仅在 front matter 手动声明了 lastmod 且与 date 不同时显示 */ -}}
{{- if and (not .Lastmod.IsZero) (ne .Lastmod .Date) -}}
    {{- $scratch.Add "meta" (slice (printf "<span title='%s'>更新于 %s</span>" (.Lastmod) (.Lastmod | time.Format (default ":date_long" site.Params.DateFormat)))) }}
{{- end }}

{{- if (.Param "ShowReadingTime") -}}
    {{- $scratch.Add "meta" (slice (printf "<span>%s</span>" (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime)))) }}
{{- end }}

{{- if (.Param "ShowWordCount") -}}
    {{- $scratch.Add "meta" (slice (printf "<span>%s</span>" (i18n "words" .WordCount | default (printf "%d words" .WordCount)))) }}
{{- end }}

{{- /* 分类链接 */ -}}
{{- with .GetTerms "categories" }}
    {{- $categoryLinks := slice }}
    {{- range . }}
        {{- $categoryLinks = $categoryLinks | append (printf "<a href='%s'>%s</a>" .RelPermalink .LinkTitle) }}
    {{- end }}
    {{- $scratch.Add "meta" (slice (printf "<span>%s</span>" (delimit $categoryLinks " · "))) }}
{{- end }}

{{- if not (.Param "hideAuthor") -}}
    {{- with (partial "author.html" .) }}
        {{- $scratch.Add "meta" (slice (printf "<span>%s</span>" .)) }}
    {{- end }}
{{- end }}

{{- with ($scratch.Get "meta") }}
    {{- delimit . "&nbsp;·&nbsp;" | safeHTML -}}
{{- end -}}

[params]
  # ... 其他配置
  customPostMeta = true

+++
title = '示例文章'
date = 2026-05-31T12:00:00+08:00
lastmod = 2026-06-01T10:00:00+08:00
categories = ['Tech Notes']
+++

mkdir i18n
notepad i18n\zh.yaml

- id: prev_post
  translation: "上一篇"
- id: next_post
  translation: "下一篇"
- id: prev_page
  translation: "上一页"
- id: next_page
  translation: "下一页"

notepad layouts\partials\post_nav_links.html

{{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
{{- if and (gt (len $pages) 1) (in $pages . ) }}
<nav class="paginav">
  {{- with $pages.Next . }}
  <a class="prev" href="{{ .Permalink }}">
    <span class="title">« {{ i18n "prev_post" }}</span>
    <span>{{- .Name -}}</span>
  </a>
  {{- end }}
  {{- with $pages.Prev . }}
  <a class="next" href="{{ .Permalink }}">
    <span class="title">{{ i18n "next_post" }} »</span>
    <span>{{- .Name -}}</span>
  </a>
  {{- end }}
</nav>
{{- end }}

{{- if (.Param "ShowPostNavLinks") }}
  {{- partial "post_nav_links.html" . }}
{{- end }}

mkdir assets\css\extended
notepad assets\css\extended\blank.css

/* 让代码块复制按钮始终可见 - 视障用户友好配置 */

/* 为绝对定位创建包含块 */
.post-content .highlight {
    position: relative;
}

/* 合并后的按钮常驻样式 */
.post-content .highlight .copy-code {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
}

/* 关键优化：为复制按钮留出顶部空间，避免遮挡代码第一行 */
.post-content .highlight pre {
    padding-top: 2.5rem !important;
}

/* 复制成功后的反馈文字 */
.copy-code.copied::after {
    content: " 已复制" !important;
}

mkdir layouts\_markup
notepad layouts\_markup\render-codeblock.html

<!-- 让代码块前面显示代码语言类型 -->

{{ $lang := .Type | default "text" }}
<div class="highlight" data-lang="{{ $lang }}">
    <div class="code-lang-label">{{ $lang }}</div>
    {{ transform.Highlight .Inner $lang .Options }}
</div>

/* 代码块语言标签样式 */
.highlight {
    position: relative;
}

.code-lang-label {
    position: absolute;
    top: 4px;
    left: 12px;
    font-size: 0.75rem;
    color: var(--secondary);
    opacity: 0.8;
    pointer-events: none;
    z-index: 5;
}

/* 确保语言标签不与复制按钮重叠 */
.copy-code {
    right: 8px !important;
    left: auto !important;
}

[cmd] ← 左上角语言标签
┌─────────────────
│ :: 命令内容
│ echo Hello
└─────────────────
[📋] ← 右上角常驻复制按钮

notepad layouts\_markup\render-image.html

<img src="{{ .Destination | safeURL }}"
     {{ with .Title }}alt="{{ . }}"{{ end }}
     loading="lazy"
     {{ with .Width }}width="{{ . }}"{{ end }}
     {{ with .Height }}height="{{ . }}"{{ end }}>

:: 清理缓存并强制重建
hugo --gc --minify --force

:: 启动预览（含草稿）
hugo server -D -F --disableFastRender