I was to see Mr Ruan Yifeng’s article also added at the bottom of the ‘document information’, so it imitated it, the effect can be seen at the bottom of this article document information.
1. Add Document Information Page
Add doc_info.html
in layouts/partials
{{ $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. Add CSS style
Add doc_info.css
in assets/css/extended
.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. Adjust single.html
Adjust single.html
under themes/PaperMod/layouts/_default
.
4. Adjust hugo.yaml
Under params
add
showDocInfo: true
licenseLink
licenseName
params:
showDocInfo: true # The default display is "Document Information"
licenseLink: "https://creativecommons.org/licenses/by-nc/4.0/"
licenseName: "CC BY-NC 4.0"
5. About use
5.1 showDocInfo
DocInfo is added at the end of each article (.md) by default, if you don’t want to show it, just set showDocInfo
to false
in Front-Matter
.
# Example
showDocInfo: true
5.2 updateDate
Update date is not shown by default, if you want to show it, just add updateDate: yyyy-mm-dd
to Front-Matter
.
# Example
updateDate: 2025-04-29
Thank you for your patience in reading! Come pick an emoji or leave a comment!