Hugo + Papermod主题 – 文章底部添加文档信息

我是看到阮一峰老师的文章底部也加有 “文档信息”,所以把它模仿过来,效果可看本文底部的文档信息

1. 添加文档信息页面

layouts/partials 添加 doc_info.html

HTML
{{ $lang := .Site.Language.Lang }}
<div class="doc-info-container">
  <div class="doc-info-meta-info">
    {{ if eq $lang "zh" }}
    <h4>文档信息</h4>
    <p>版权声明 : 自由转载-非商用-非衍生-保持署名 (<a href="{{- .Param "licenseLink" -}}" target="_blank">{{- .Param "licenseName" -}})</a></p>
    <p>发表日期 : {{ .Date | time.Format "2006-01-02" }}</p>
    {{ with .Params.UpdateDate }}
    <p>更新日期 : {{ . | time.Format "2006-01-02" }}</p>
    {{ end }}
    {{ else }}
    <h4>Document Information</h4>
    <p>License : <a href="{{- .Param "licenseLink" -}}" target="_blank">{{- .Param "licenseName" -}}</a></p>
    <p>Published Date : {{ .Date | time.Format "2006-01-02" }}</p>
    {{ with .Params.UpdateDate }}
    <p>Last Updated Date : {{ . | time.Format "2006-01-02" }}</p>
    {{ end }}
    {{ end }}
  </div>
</div>
点击展开查看更多

2. 添加CSS样式

assets/css/extended 下创建文件 doc_info.css

CSS
.doc-info-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--code-custom-block-bg);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .doc-info-meta-info {
    line-height: 1.5;
  }
  
  .doc-info-meta-info h4{
    padding-bottom: 10px;
    border-bottom: 2px solid var(--custom-border-color);
  }

  .doc-info-meta-info p {
    margin: 5px 0;
  }

  .doc-info-meta-info p::before {
    content: "▪";  /* 使用小方块 */
    color: #666;    /* 可修改颜色 */
    margin-right: 8px; /* 文字与方块之间的间距 */
    font-size: 20px; /* 控制方块大小 */
}
点击展开查看更多

3. 调整 single.html

调整 themes/PaperMod/layouts/_default 下的 single.html

HTML
1  {{ if .Param "showDocInfo" }}
2  {{ partial "doc_info.html" . }}
3  {{ end }}
4
5  <footer class="post-footer">
点击展开查看更多

4. 调整 hugo.yaml

params 下添加

  1. showDocInfo: true
  2. licenseLink
  3. licenseName
YAML
params:
  showDocInfo: true # 默认显示 "文档信息"
  licenseLink: "https://creativecommons.org/licenses/by-nc/4.0/"
  licenseName: "CC BY-NC 4.0"
点击展开查看更多

5. 关于使用

5.1 showDocInfo

文档信息默认是每篇文章(.md)结尾都会添加,如果不想显示,只需在 Front-MattershowDocInfo 设置为 false 即可

MARKDOWN
# 示例
showDocInfo: true
点击展开查看更多

5.2 updateDate

更新时间默认不显示,如果需要显示,只需在 Front-Matter 添加 updateDate: yyyy-mm-dd 即可

MARKDOWN
# 示例
updateDate: 2025-04-29
点击展开查看更多

版权声明

作者: Donghai

链接: https://mgrowup.com/posts/hugo-papermod/add-document-info-footer/

许可证: CC BY-NC-SA 4.0

文章已根据知识共享署名-非商业性使用-相同方式共享4.0国际许可协议授权。请注明来源,仅非商业使用,并保持相同的许可协议。

评论

开始搜索

输入关键词搜索文章内容

↑↓
ESC
⌘K 快捷键