[译]Hugo-Theme-PaperMod主题文档特性

最新推荐文章于 2024-08-31 08:23:17 发布

恐咖兵糖

最新推荐文章于 2024-08-31 08:23:17 发布

阅读量1.6k

点赞数 1

分类专栏： Hugo 文章标签：其他

原文链接：https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/

版权

Hugo 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

本文详细介绍了Hugo主题-PaperMod的各种特性，包括资产处理、主题切换、归档布局、主页模式、搜索页、文章封面、分享按钮、阅读时间、目录显示、面包屑导航、编辑链接、多语言支持以及SEO优化等，旨在帮助用户更好地定制和使用该主题。

摘要由CSDN通过智能技术生成

转载翻译自: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/
作者：PaperMod Authors
已获得作者授权

中文demo

https://note.ftls.xyz/papermod/

介绍

我们将在下面的所有示例中使用 yml/yaml 格式，我建议使用 yml 而不是 toml，因为它更易于阅读。
如果你需要，你可以找 YML to TOML 这类转换器。

Assets (js/css)

以下是默认启用的

minification - makes the assets size smallest as possible.
bundling - bundles all the styles in one single asset
fingerprint/integrity check.

默认主题亮/暗/自动

params:
    # defaultTheme: light
    # defaultTheme: dark
    defaultTheme: auto # to switch between dark or light according to browser theme

主题切换切换（默认启用）

在页面标题之外显示图标以更改主题

禁用方法：

disableThemeToggle: true

您可以参考下表以更好地理解…

`defaultTheme`	`disableThemeToggle`	checks local storage?	checks system theme?	Info
`auto`	true	No	Yes	only system theme
	false	Yes (if not->2)	Yes (2)	switch present
`dark`	true	No	No	force dark only
	false	Yes	No	switch present
`light`	true	No	No	force light only
	false	Yes	No	switch present

归档布局 Archives Layout

在content目录中创建一个带有archive.md的页面，内容如下

.
├── config.yml
├── content/
│   ├── archives.md   <--- Create archive.md here
│   └── posts/
├── static/
└── themes/
    └── PaperMod/

并添加以下内容

---
title: "Archive"
layout: "archives"
url: "/archives/"
summary: archives
---

注意： Archives Layout不支持多语言月份翻译。

如: archives.md

主页模式 Regular Mode (default-mode)

在这里插入图片描述

主页模式 Home-Info Mode

在这里插入图片描述

使用第一个条目作为一些显示信息

将以下内容添加到配置文件中

params:
    homeInfoParams:
        Title: Hi there wave
        Content: Can be Info, links, about...

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

如. config.yml#L106

主页模式 Profile Mode

在这里插入图片描述

将索引/主页显示为带有社交链接和图像的整页

将以下内容添加到配置文件中

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>"

搜索页 Search Page

PaperMod 使用Fuse.js Basic for seach functionality

将以下内容添加到站点配置，config.yml

outputs:
    home:
        - HTML
        - RSS
        - JSON # is necessary

在content目录下创建一个带有search.md的页面，内容如下

---
title: "Search" # in any language you want
layout: "search" # is necessary
# url: "/archive"
# description: "Description for Search"
summary: "search"
---

要隐藏特定页面不被搜索，请将其添加到帖子的前面

---
searchHidden: true

如: search.md

搜索页面也有键绑定：

向上/向下移动列表的箭头键
Enter 键（返回）或右箭头键转到突出显示的页面
清除搜索框和结果的退出键

对于多语言使用 search.<lang>.md 例如。 search.es.md。

注意： 搜索仅适用于当前语言，用户当前使用的语言 !

自定义 Fusejs 选项

有关选项，请参阅 https://fusejs.io/api/options.html，添加如下所示的选项。

params:
    fuseOpts:
        isCaseSensitive: false
        shouldSort: true
        location: 0
        distance: 1000
        threshold: 0.4
        minMatchCharLength: 0
        keys: ["title", "permalink", "summary", "content"]

Draft Page indication

添加[draft] 标记以指示草稿页面。

文章封面

在帖子的页面变量中添加：

cover:
    image: "<image path/url>"
    # can also paste direct link from external site
    # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png
    alt: "<alt text>"
    caption: "<text>"
    relative: false # To use relative path for cover image, used in hugo Page-bundles

当您在 Page Bundle 中包含图像时，将使用 HTML5 srcset 字段自动提供多种尺寸的图像。

为了减少站点的生成时间和大小，您可以使用禁用此功能

params:
    cover:
        responsiveImages: false

要在帖子页面上启用指向完整图像大小的超链接，请使用

params:
    cover:
        linkFullImages: true

文章分享按钮

在每个帖子的底部显示分享按钮

要显示共享按钮添加

params:
    ShowShareButtons: true

显示文章阅读时间

显示阅读时间（阅读内容所需的估计时间，以分钟为单位。）

要显示阅读时间添加

Params:
    ShowReadingTime: true

在博客文章中显示目录 (Toc)

在博客页面上显示 ToC

要显示 ToC，请在页面变量中添加以下内容

ShowToc: true

要在帖子中保持 Toc Open 默认，请在页面变量中添加以下内容：

TocOpen: true

面包屑导航

在帖子标题上方添加面包屑导航以显示小节和导航到主页

params:
    ShowBreadCrumbs: true

可以禁用特定页面的front-matter

---
ShowBreadCrumbs: false
---

编辑帖子链接

添加一个按钮，通过使用帖子的文件路径链接到编辑目标来建议更改。

对于站点配置使用：

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

可以为单个页面修改

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

上面的示例将生成帖子文件“posts/post-name.md”的以下链接：
https://github.com/<path_to_repo>/content/posts/post-name.md

Parameter	Required	Default Value
editPost.URL	true	-
editPost.appendFilePath	false	false
editPost.Text	false	“Edit”

由于生成的链接是一个普通的 HTML 锚标签 <a href=...>，你可以
还可以使用其他 URL 模式，例如 mailto://，例如
URL: "mailto://mail@example.com?subject=Suggesting changes for "

帖子下方的其他帖子建议

在单个帖子下添加上一个/下一个帖子建议

params:
    ShowPostNavLinks: true

多个作者

要在帖子中使用多个作者，在帖子变量中：

---
author: ["Me", "You"]
---

要在站点范围内使用多作者，请在 config.yml 中配置：

params:
    author: ["Me", "You"]

注释

要添加评论，请创建一个 html 文件

layouts/partials/comments.html

并粘贴您的评论提供者提供的代码

也在配置中添加这个

params:
    comments: true

阅读更多关于这个问题hugo-comments

访问密钥AccessKeys

c - ToC Open/Close
g - Go To Top
h - Home (according to current lang)
t - Theme toggle
/ - Jumps to search page if in menu

What’s AccessKeys ?

SEO优化

仅在 env: production 时启用

Rich Results/Snippets Support

推特卡片支持

译者注: 此特性会在html的head中生成meta name="twitter:card"等。此举方便分享到推特上。推特能获取该网站的基本信息，包含图片。

The Twitter Cards metadata, except twitter:image should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).
The twitter:image uses the Post Cover Image, if present.
In the absence of a cover images, the first image from the images
frontmatter (a list) is used.
```
images:
  - image_01.png
  - image_02.png
```
Finally, if neither of those are provided, twitter:image comes from the first
Page Bundle
image with feature in the name, with a fallback to the first image with
cover or thumbnail in the name.

开放内容协议 OpenGraph support

译者注: 微博翻译为：兴趣图谱。也称开放图谱。此特性会在html的head中生成meta property="og:title"等。此举方便分享到支持OpenGraph的社交媒体上，也能更好的帮助百度等搜索引擎抓取和呈现。

OpenGraph样例（Telegram中）

The OpenGraph metadata, except og:image should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).
The og:image uses the Post Cover Image, if present.
In the absence of a cover images, the first image from the images
frontmatter (a list) is used.
```
images:
  - image_01.png
  - image_02.png
```
Finally, if neither of those are provided, og:image comes from the first
Page Bundle
image with feature in the name, with a fallback to the first image with
cover or thumbnail in the name.
For pages, you can also add audio (using frontmatter audio: filename.ext) and/or
videos.
```
videos:
  - filename01.mov
  - filename02.avi
```

多语言支持

杂项

滚动条主题（默认）

在页内链接之间平滑滚动（默认情况下）

滚动到顶部按钮（默认情况下）

Displays a Scroll-to-Top button in right-bottom corner

谷歌分析集成

语法高亮

RSS订阅

---
title: "[译]特性"
summary: 了解 PaperMod 的所有功能
date: 2021-01-20
weight: 2
aliases: ["/papermod-features"]
tags: ["PaperMod"]
author: "Aditya Telange"
---