[译]Hugo-Theme-PaperMod主题文档 FAQs

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

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

中文demo

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

介绍

• 我们将在下面的所有示例中使用 yml/yaml 格式，我建议使用 yml 而不是 toml，因为它更易于阅读。

• 如果你需要，你可以找 YML to TOML 这类转换器。

---

重写主题模板

借助 Hugo的寻找规则，您可以重写您想要的主题的任何部分。 以下是一个快速示例。

假设您希望 list 有所不同。 你所要做的就是复制list模板：

your-site/themes/papermod/layouts/_defaults/list.html

并将其粘贴到您自己的 layouts 文件夹下：

your-site/layouts/_defaults/list.html

然后您可以自由地对list进行任何您想要的更改。
当 Hugo 构建您的站点时，您的 list.html 副本将被使用而不是主题的 list.html。

---

启用社交网络和 SEO

其中包括 OpenGraph、Twitter Cards 和 Schema。

params:
    env: production

或在系统 env-vars 中将 HUGO_ENV 设置为“production”

---

Failed to find a valid digest in the ‘integrity’ attribute for resource … ?

阅读子资源完整性帮助（Read about How Subresource Integrity helps）: Subresource_Integrity

为什么asset没有加载 ? : How_browsers_handle_Subresource_Integrity

解决方案 :

在config.yml中设置以下内容

params:
    assets:
        disableFingerprinting: true

相关问题：

• https://stackoverflow.com/questions/65056585/hugo-theme-not-loading
• https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource
• https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/

---

借助主题的assets使用自定义 css

• For adding custom css to be bundled inside one minimized css

在您的项目目录中创建文件夹就像

.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── assets/
    └── css/
        └── extended/  <---
            ├── custom_css1.css <---
            └── any_name.css   <---

All css files inside assets/css/extended will be bundled !
assets/css/extended 中的所有 css 文件都将被bundled ！

注意: blank.css 只是占位符，这样当 assets/css/extended 下没有文件时它不会改变主题

相关问题：

• Papermod Theme: How to add custom CSS?

---

自定义页眉/页脚

自定义 css/js 可以按下面的方式添加。

.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── layouts
    ├── partials
    │   ├── comments.html
    │   ├── extend_footer.html <---
    │   └── extend_head.html   <---
    └── robots.txt

在如上所示的目录结构中创建一个 html 页面。

extend_head.html 的内容将被添加到页面的 head 中。

并且 extend_footer.html 的内容将被添加到页面底部。

---

站点菜单添加

你添加的菜单项将出现在每个页面的标题中。

为此，请在站点的config.yml中添加menu部分：

menu:
    main:
        - identifier: categories
          name: categories
          url: /categories/
          weight: 10
        - identifier: tags
          name: tags
          url: /tags/
          weight: 20
        - identifier: example
          name: example.org
          url: https://example.org
          weight: 30

name 控制菜单项的显示内容。
url 设置入口指向的 URL。
weight 用于控制条目的定位。

有关菜单的更多信息，请参阅 Hugo wiki page.

---

置顶文章

通过向页面变量添加 weight=<num> ，帖子可以固定/显示在列表的顶部

例：

---
title: "My Important post"
date: 2020-09-15T11:30:03+00:00
weight: 1
---

---
title: "My 2nd Important post"
date: 2020-09-15T11:30:03+00:00
weight: 2
---

---

添加自定义网站图标

我们支持/static目录下的以下路径，从而添加网站图标。需要以下文件

• favicon.ico
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png
• safari-pinned-tab.svg

1. 图标可以由 Favicon.io生成

   并且将生成的文件放在/static文件夹中就可以了。

2. 另一种方法是添加不在/static文件夹中的图标。

   在站点配置中添加以下内容：

   params:
   assets:
       favicon: "<link / absolute url>"
       favicon16x16:  "<link / absolute url>"
       favicon32x32:  "<link / absolute url>"
       apple_touch_icon:  "<link / absolute url>"
       safari_pinned_tab:  "<link / absolute url>"
   

   • absolute url 表示直接链接到外部资源：例如。 https://web.site/someimage.png

   例如：

   params:
   assets:
       favicon: "/favicon.ico"
       favicon16x16:  "/favicon-16x16.png"
       favicon32x32:  "/favicon-32x32.png"
       apple_touch_icon:  "/apple-touch-icon.png"
       safari_pinned_tab:  "/safari-pinned-tab.svg"
   

---

在Markdown中居中图像

在图像后添加#center 使图像居中对齐

![name](path/to/image.png#center)

使用figure 简码（shortcode）时

使用 align=center 将带有标题的图像居中

例如：

{{</* figure align=center src="image.jpg" */>}}

---

使用 Hugo 的语法高亮工具“chroma”

1. 在站点config.yml中禁用Highlight.js

   params:
       assets:
           disableHLJS: true
   

2. 在站点config.yml中设置hugo的markdown样式

   markup:
       highlight:
           # anchorLineNos: true
           codeFences: true
           guessSyntax: true
           lineNos: true
           # noClasses: false
           style: monokai
   

3. 如果你想要lineNos: true，背景就不合适。
   这仅适用于 noClasses: false 或 pygmentsUseClasses: true。
   阅读 Generate Syntax Highlighter CSS

   将以下内容添加到 assets/css/extended/custom.css

   .chroma {
       background-color: unset;
   }
   

   更多信息 : Configure Markup - Highlight

---

搜索不工作？

如果您使用 CDN 来服务器来自不同域（domain）的资源，搜索将中断

为什么？ 请看 fastsearch.js#L35.

我们需要获取托管在网站“search.min.js”上一级的“index.json”（搜索功能在其中查找键入的关键字）。

我们使用它而不是指定baseURL，以便与多语言网站一起工作，例如。 example.com/fr/ 和网站被放置在一个子目录下。 example.com/blog/。

要确定从 CDN 托管资源的 single 语言网站，您可以override fastsearch.js#L35 并放置适当的 URL，如

xhr.open("GET", "https://example.com/index.json");

---

参考

• Override a Hugo theme

---
title: "[译]FAQs"
summary: 经常问的问题
date: 2021-01-20
aliases: ["/papermod-how-to-guide"]
tags: ["PaperMod"]
author: "Aditya Telange"
draft: true
aliases: [/posts/papermod/papermod-how-to]
weight: 3
---