博客

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

  • Post author:
  • Post category:其他


转载翻译自: 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)

以下是默认启用的



默认主题亮/暗/自动

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

时启用



推特卡片支持

译者注: 此特性会在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"
---