转载自: 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
  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>"
    

    例如:

    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: falsepygmentsUseClasses: 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");

参考