[译]FAQs

转载自: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/

介绍

我们将在下面的所有示例中使用 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

借助主题的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 下没有文件时它不会改变主题

自定义页眉/页脚

自定义 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

图标可以由 Favicon.io生成。或者 WebsitePlanet - Generator Favicon 生成 ( 由 Romano 提供 )

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

另一种方法是添加不在/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”

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

params:
    assets:
        disableHLJS: true

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

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

如果你想要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

介绍#

重写主题模板#

启用社交网络和 SEO#

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

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

自定义页眉/页脚#

站点菜单添加#

置顶文章#

添加自定义网站图标#

在Markdown中居中图像#

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

搜索不工作？#

参考#

介绍