Hugo 主题

Paige

强大、灵活、像素级的完美。一款高级 Hugo 主题。

作者：Will Faught
GitHub Stars：251
更新时间：2024-08-26
许可证：MIT
标签：存档博客 Bootstrap 公司联系深色深色模式文档图库英雄着陆页浅色简约多语言个人播客作品集响应式

下载

Paige

强大、灵活、像素级的完美。一款高级 Hugo 主题。试试看。

Paige 的设计理念是将您的内容置于最重要位置，避免典型的混乱。外观无缝流畅，可伸缩且可读，便携高效。布局简洁且响应迅速，使用垂直空间和留白来界定和突出页面的每个部分。实现方式灵活且可扩展。这是一个多功能的画布，可以满足大多数 Web 需求。

特性

辅助功能
分析
Atom feed
作者
博客
Bootstrap 样式和图标
分类
代码短代码
评论
可自定义
深色配色方案
电子邮件短代码
Facebook 分享
图例短代码
图库短代码
标题链接
图标短代码
图像像素密度
图像短代码
图像大小断点
图像缩略图
着陆页
语言
浅色配色方案
数学排版
菜单
简约设计
引用短代码
响应式
从右到左的语言
RSS feed
Safari 和 Firefox 阅读器视图支持
搜索
章节
SEO
系列
单列
社交链接
目录
标签短代码
标签
Twitter 分享
通过 PageSpeed 和 Validator 验证
Vimeo 短代码
YouTube 短代码

社区

通过 star 并关注项目开始。

如果您发现问题或有任何建议，请通过创建 issue 分享。

如果您有修复或改进，请通过创建 pull request 分享。

如果您进行自定义或更改，请通过发布代码或截图分享。

如果您部署了站点，请通过发布链接分享。

设置

安装 Hugo（扩展版本，且至少为 0.123.0）。
对于 Mac 上的 Homebrew
```
$ brew install hugo
```
对于 Windows 上的 Chocolatey
```
$ choco install hugo-extended
```
对于 Linux 上的 Snap
```
$ sudo snap install hugo
```
安装 Dart Sass。
对于 Mac 上的 Homebrew
```
$ brew install sass/sass/sass
```
对于 Windows 上的 Chocolatey
```
$ choco install sass
```
对于 Linux 上的 Snap
```
$ sudo snap install dart-sass
```
创建一个站点
```
$ hugo new site yoursite
```
创建一篇帖子
```
$ cd yoursite
$ hugo new yourpost.md
```

安装 Paige 模块

$ cd yoursite
$ hugo mod init github.com/youraccount/yoursite
$ hugo mod get github.com/willfaught/paige@latest

导入 Paige 模块

$ cd yoursite
$ cat >>hugo.toml <<EOF
[[module.imports]]
path = "github.com/willfaught/paige"
EOF

构建并运行站点
```
$ cd yoursite
$ hugo server -D
```

更新 Paige 模块

$ cd yoursite
$ hugo mod get github.com/willfaught/paige@latest

有关更多信息，请参阅 Hugo 的安装、入门和模块指南。

有关常见自定义项，请参阅简约外观、窄外观、窄宽外观和仅菜单导航部分。

配置

参数

有一个具有合理默认值的单个参数对象，可以在站点或页面参数中被覆盖

[paige]
color = "#0d6efd" # Bootstrap primary color and theme color for Safari and Windows
color_scheme = "auto" # Must be "auto", "dark", or "light"
credit = '<a class="link-secondary text-decoration-none" href="https://github.com/willfaught/paige">Paige Theme</a>'
date_format = ":date_long" # Hugo date format
description = "" # Site description. Appears above the menu, below the site title, if set.
edit = "" # File edit URL. Example: "https://github.com/account/project/edit/master/content/%s".
external_link_new_tab = false # Open external links in new tabs
history = "" # File history URL. Example: "https://github.com/account/project/commits/master/content/%s".
keyword_style = "text" # Must be "text" or "pills"
license = "" # Example: "CC BY 4.0 License", "CC BY-NC 4.0 License", "MIT License"
math = false # Enable math typesetting
menu_style = "links" # Must be "links", "pills", "tabs", or "underline"
title = "" # Site title. Appears above the menu, above the site description, if set.
style = "" # CSS included at the end of the stylesheet, before style-last.css

[paige.alert]
message = "Alert!" # Markdown displayed before the page body
type = "primary" # Bootstrap alert class

[paige.analytics]
disable = false # Disable all analytics

[paige.analytics.beam] # See https://beamanalytics.io
token = ""

[paige.analytics.chartbeat] # See https://chartbeat.com
account_id = ""
domain = ""

[paige.analytics.clarity] # See https://clarity.microsoft.com
account_id = ""

[paige.analytics.clicky] # See https://clicky.com
account_id = ""

[paige.analytics.counter] # See https://counter.dev
account_id = ""
utc_offset = ""

[paige.analytics.fathom] # See https://usefathom.com
account_id = ""

[paige.analytics.finteza] # See https://finteza.com
account_id = ""
script_url = ""

[paige.analytics.hotjar] # See https://hotjar.com
account_id = ""

[paige.analytics.matomo] # See https://matomo.org
account_id = ""
host_url = ""

[paige.analytics.mixpanel] # See https://mixpanel.com
token = ""

[paige.analytics.pirsch] # See https://pirsch.io
identification_code = ""

[paige.analytics.plausible] # See https://#
account_id = ""

[paige.analytics.woopra] # See https://woopra.com
domain = ""

[paige.analytics.yandex] # See https://metrica.yandex.com
account_id = ""

[paige.comments]
disable = false # Disable all comments
disable_kinds = [] # Page kinds to disable comments for. Examples: ["list"], ["page", "term"].

[paige.comments.cactus] # See https://cactus.chat
site_name = ""

[paige.comments.commento] # See https://commento.io
script_url = ""

[paige.comments.cusdis] # See https://cusdis.com
app_id = ""
host_url = ""

[paige.comments.graphcomment] # See https://graphcomment.com
account_id = ""

[paige.comments.hyvor] # See https://hyvor.com
website = ""

[paige.comments.intensedebate] # See https://intensedebate.com
account_id = ""

[paige.comments.isso] # See https://isso-comments.de
script_url = ""

[paige.comments.remark42] # See https://remark42.com
host_url = ""
site_id = ""

[paige.comments.replybox] # See https://getreplybox.com
site = ""

[paige.comments.utterances] # See https://#
repo = ""
theme = ""

[paige.feed]
disable = false # Exclude the page from feeds
link_to_page = false # Link to the page instead of the front matter link, if present
page_link = "⏎" # If a front matter link is present, and link_to_page is false, then link to the page with this text

[paige.feed.atom]
authors = []
# Example:
# [[paige.feed.atom.authors]]
# email = "example@example.com"
# name = "John Doe"
# url = "https://github.com/account/project"
icon = "" # Example: "/icon.webp"
logo = "" # Example: "/logo.webp"

[paige.feed.rss]
managing_editor = "" # Example: "example@example.com (John Doe)"
web_master = "" # Example: "example@example.com (John Doe)"

[params.paige.list_page]
disable_authors = false
disable_collections = false
disable_date = false
disable_description = false
disable_keywords = false
disable_pages = false
disable_reading_time = false
disable_sections = false
disable_series = false
disable_summary = false
disable_title = false

[params.paige.page]
disable_alert = false
disable_authors = false
disable_date = false
disable_description = false
disable_edit = false
disable_history = false
disable_keywords = false
disable_next = false
disable_prev = false
disable_reading_time = false
disable_series = false
disable_title = false
disable_toc = false

[params.paige.site]
disable_breadcrumbs = false
disable_copyright = false
disable_credit = false
disable_description = false
disable_license = false
disable_menu = false
disable_title = false

[paige.search]
disable = false # Exclude the page from search

参数对象在站点参数中以 [params.paige] 访问，在页面参数中以 [paige] 访问。

显示的赋值是默认值。

特定于页面的参数

link = "" # The reference for an anchor around the title. Example: "https://youtu.be/dQw4w9WgXcQ".

显示的赋值是默认值。

特定于菜单的参数

[paige]
disabled = false
divider_above = false
divider_below = false
header_above = ""
header_below = ""

显示的赋值是默认值。

可以使用 main 菜单配置菜单。活动菜单项的 URL 是当前页面路径的前缀。URL 为 / 的菜单项仅匹配 / 路径。

如果您希望菜单足以满足所有导航需求，请参阅如何隐藏其他导航功能。

分类

内置支持作者、类别、系列和标签分类。

在作者术语页面的 front matter 中将 default 设置为 true，以便在没有 authors 参数的常规页面中将该作者归功。默认作者必须在常规页面中至少显式引用一次。

要禁用作者页面的渲染，请将其添加到 yoursite/hugo.toml

[[cascade]]
[cascade._target]
path = "{/authors,/authors/**}"
[cascade.build]
render = "never"

如果存在，作者术语页面的 front matter 中的 email 和 url 参数将用于 feed。

布局

云

paige/cloud 布局为子页面提供链接云。

yoursite/content/tags/_index.md 中的示例配置

layout = "paige/cloud"

搜索

paige/search 布局提供搜索页面。

yoursite/hugo.toml 中的示例配置

[outputs]
home = ["atom", "html", "paige-search", "rss"]

yoursite/content/search.md 中的示例配置

layout = "paige/search"
title = "Search"

短代码

代码

paige/code 短代码提供突出显示的代码。

{{< paige/code
    lang=""
    options=""
    unescape=false >}}

{{< /paige/code >}}

参数

lang: 可选。位置 0。字符串。Chroma 语言代码。默认值为 plaintext。
options: 可选。字符串。Hugo highlight 选项。
unescape: 可选。布尔值。是否反转正文中的 HTML 转义。当在正文中使用请求短代码时很有用。

正文：必需。字符串。代码。

电子邮件

paige/email 短代码隐藏了机器人程序的电子邮件地址。

{{< paige/email
    address="" >}}

{{< /paige/email >}}

参数

地址: 必需。位置 0。字符串。电子邮件地址。

正文：必需。字符串。Markdown 格式。内容。

图表

paige/figure 短代码提供一个图表。

{{< paige/figure
    caption=""
    float=""
    height=""
    horizontal=""
    maxwidth=""
    number=0
    numbered=false
    vertical=""
    width="" >}}

{{< /paige/figure >}}

参数

标题: 可选。位置 0。字符串。Markdown 格式。内容下方的描述性文字。
浮动: 可选。字符串。浮动到其容器的一侧。必须为 start 或 end。
高度: 可选。字符串。CSS 值。总高度。
水平: 可选。字符串。水平对齐方式。必须为 start、center 或 end。默认为 center。
最大宽度: 可选。字符串。CSS 值。最大总宽度。
编号: 可选。整数或字符串。图表编号。与标题一起显示。
已编号: 可选。布尔值。自动对图表进行编号。与标题一起显示。
垂直: 可选。字符串。垂直对齐方式。必须为 start、center 或 end。默认为 center。
宽度: 可选。字符串。CSS 值。总宽度。

正文：必需。字符串。Markdown 格式。内容。

图库

paige/gallery 短代码提供图像的排列方式。

{{< paige/gallery
    align=""
    breakpoints=false
    class=""
    densities=""
    fetchpriority=""
    height=""
    images=""
    justify=""
    linked=""
    loading=""
    maxheight=""
    maxwidth=""
    process=""
    style=""
    type=""
    width="" >}}

{{< /paige/gallery >}}

参数

对齐: 可选。字符串。交叉轴对齐方式。必须为 baseline、center、end、start 或 stretch。
断点: 可选。布尔值。是否生成调整为每个 Bootstrap 断点大小的图像副本。不得与 densities 一起使用。
类: 可选。字符串。图像类。与实现合并。
密度: 可选。字符串。以空格分隔的带有 "x" 后缀的浮点数。要生成的图像像素密度。必须至少有两个。最大的密度与原始图像匹配。示例为 1x 2x、1x 1.5x 2x 2.5x 3x 和 0.5x 1.33x 6x 10x。不得与 breakpoints 一起使用。
提取优先级: 可选。字符串。必须为 high 或 low。
高度: 可选。字符串。CSS 值。图像高度。
图像: 可选。位置 0。字符串。页面、站点或远程图像 glob。默认为所有图像页面资源。
对齐方式: 可选。字符串。主轴空间分布。必须为 around、between、center、end、evenly 或 start。
已链接: 可选。字符串。Hugo 图像处理方法和选项混合在一起，用于链接的图像。如果未指定方法，则使用调整大小。如果未指定图像尺寸，则使用原始尺寸。如果它是 unprocessed，则表示未处理。如果它是 default，则使用默认选项。
加载: 可选。字符串。必须为 eager (默认) 或 lazy。
最大高度: 可选。字符串。CSS 值。最大图像高度。
最大宽度: 可选。字符串。CSS 值。最大图像宽度。
处理: 可选。字符串。Hugo 图像处理方法和选项混合在一起，用于显示的图像。如果未指定方法，则使用调整大小。如果未指定图像尺寸，则使用原始尺寸。如果它是 default，则使用默认选项。
样式: 可选。字符串。CSS。图像样式。与实现合并。
类型: 可选。字符串。布局类型。必须为 grid 或 rows (默认)。
宽度: 可选。字符串。CSS 值。图像宽度。

正文：可选。字符串。HTML。图像。

图标

paige/icon 短代码提供 Web 字体图标。

{{< paige/icon
    class=""
    title=""
    url="" >}}

参数

类: 必需。位置 0。字符串。<i> 类。示例：bi bi-github。
标题: 可选。字符串。屏幕阅读器描述和锚点标题。示例：GitHub。
网址: 可选。字符串。URL。示例：https://github.com/account/project。URL 中带有 mailto: 方案的电子邮件将受到网络爬虫的保护。

正文：无。

图像

paige/image 短代码提供一个图像。

{{< paige/image
    alt=""
    breakpoints=false
    class=""
    densities=""
    fetchpriority=""
    height=""
    link=""
    linked=""
    loading=""
    maxheight=""
    maxwidth=""
    process=""
    sizes=""
    src=""
    srcset=""
    style=""
    title=""
    width="" >}}

参数

alt: 可选。字符串。纯文本。图像 alt。
断点: 可选。布尔值。是否生成调整为每个 Bootstrap 断点大小的图像副本。不得与 densities、sizes 或 srcset 一起使用。
类: 可选。字符串。类属性值。
密度: 可选。字符串。以空格分隔的带有 "x" 后缀的浮点数。要生成的图像像素密度。必须至少有两个。最大的密度与原始图像匹配。示例为 1x 2x、1x 1.5x 2x 2.5x 3x 和 0.5x 1.33x 6x 10x。不得与 breakpoints、sizes 或 srcset 一起使用。
提取优先级: 可选。字符串。必须为 high 或 low。
高度: 可选。字符串。CSS 值。图像高度。
链接: 可选。字符串。URL。图像链接。不得与 linked 一起使用。
已链接: 可选。字符串。Hugo 图像处理方法和选项混合在一起，用于链接的图像。如果未指定方法，则使用调整大小。如果未指定图像尺寸，则使用原始尺寸。如果它是 unprocessed，则表示未处理。如果它是 default，则使用默认选项。不得与 link 一起使用。
加载: 可选。字符串。必须为 eager (默认) 或 lazy。
最大高度: 可选。字符串。CSS 值。图像最大高度。
最大宽度: 可选。字符串。CSS 值。图像最大宽度。
处理: 可选。字符串。Hugo 图像处理方法和选项混合在一起，用于显示的图像。如果未指定方法，则使用调整大小。如果未指定图像尺寸，则使用原始尺寸。如果它是 default，则使用默认选项。
尺寸: 可选。字符串。图像 sizes。不得与 breakpoints 或 densities 一起设置。
src: 必需。位置 0。字符串。URL。图像源。
srcset: 可选。字符串。图像 srcset。不得与 breakpoints 或 densities 一起设置。
样式: 可选。字符串。CSS。图像样式。与实现合并。
标题: 可选。字符串。纯文本。图像标题。
宽度: 可选。字符串。CSS 值。图像宽度。

正文：无。

引用

paige/quote 短代码提供引用。

{{< paige/quote
    cite="" >}}

{{< /paige/quote >}}

参数

引用: 可选。字符串。纯文本。引文。

正文：必需。字符串。Markdown 格式。引文。

请求

paige/request 短代码提供 URL 的内容。

{{< paige/request
    method=""
    url="" >}}

参数

方法: 可选。字符串。HTTP 方法。默认为 get。
网址: 必需。字符串。URL。

正文：无。

选项卡

paige/tabs 短代码提供选项卡按钮和选项卡窗格。它必须包含一个 paige/tabs/buttons 短代码，然后是一个 paige/tabs/panes 短代码。

{{< paige/tabs >}}

{{< /paige/tabs >}}

参数：无。

正文：必需。字符串。HTML。选项卡按钮和选项卡窗格。

paige/tabs/buttons 短代码提供选项卡按钮。它必须包含一个或多个 paige/tabs/button 短代码。每个 paige/tabs/button 短代码都对应于同一位置的 paige/tabs/pane 短代码。

{{< paige/tabs/buttons >}}

{{< /paige/tabs/buttons >}}

参数：无。

正文：必需。字符串。HTML。选项卡按钮。

paige/tabs/button 短代码提供一个选项卡按钮。

{{< paige/tabs/button >}}

{{< /paige/tabs/button >}}

参数：无。

正文：必需。字符串。Markdown 格式。选项卡按钮内容。

paige/tabs/panes 短代码提供选项卡窗格。它必须包含一个或多个 paige/tabs/pane 短代码。每个 paige/tabs/pane 短代码都对应于同一位置的 paige/tabs/button 短代码。

{{< paige/tabs/panes >}}

{{< /paige/tabs/panes >}}

参数：无。

正文：必需。字符串。HTML。选项卡窗格。

paige/tabs/pane 短代码提供一个选项卡窗格。

{{< paige/tabs/pane >}}

{{< /paige/tabs/pane >}}

参数：无。

正文：必需。字符串。Markdown 格式。选项卡窗格内容。

Vimeo

paige/vimeo 短代码提供 Vimeo 视频。

{{< paige/vimeo
    autopause=false
    autoplay=false
    background=false
    byline=false
    color=""
    controls=false
    description=""
    dnt=false
    fullscreen=false
    height=""
    keyboard=false
    loop=false
    maxheight=""
    maxwidth=""
    muted=false
    pip=false
    playsinline=false
    portrait=false
    quality=""
    speed=false
    texttrack=false
    time=""
    title=false
    transparent=false
    video=""
    width="" >}}

参数

自动暂停: 可选。布尔值。允许在同一页面上播放多个 Vimeo 视频。默认为 true。
自动播放: 可选。布尔值。自动播放视频。默认为 false。
背景: 可选。布尔值。自动播放视频。隐藏控件。循环播放视频。静音播放视频。默认为 false。
署名: 可选。布尔值。显示作者。默认情况下根据每个视频进行配置。
颜色: 可选。字符串。十六进制代码。控件颜色。默认为 00adef。
控件: 可选。布尔值。显示控件。默认为 true。
描述: 可选。字符串。纯文本。屏幕阅读器内容。默认为 Vimeo 视频。
dnt: 可选。布尔值。不跟踪会话数据。默认为 false。
全屏: 可选。布尔值。启用全屏模式。默认为 true。
高度: 可选。字符串。CSS 值。视频高度。
键盘: 可选。布尔值。启用键盘输入。默认为 true。
循环: 可选。布尔值。循环播放视频。默认为 false。
最大高度: 可选。字符串。CSS 值。视频最大高度。
最大宽度: 可选。字符串。CSS 值。视频最大宽度。
静音: 可选。布尔值。静音视频。默认为 false。
画中画: 可选。布尔值。显示画中画控制按钮。默认为 false。
内联播放: 可选。布尔值。在移动设备上以内联方式播放，而不是全屏播放。默认为 true。
头像: 可选。布尔值。显示作者的头像。默认值根据每个视频配置。
质量: 可选。字符串。分辨率。必须是 auto，240p，360p，540p，720p，1080p，2k 或 4k。默认为 auto。
速度: 可选。布尔值。显示速度控制按钮。默认为 false。
字幕轨道: 可选。字符串。语言代码，可以选择包含地区代码 (例如 en, en-US)。使用相应的字幕。默认为 false。
时间: 可选。字符串。持续时间（例如 0m, 1m2s）。开始时间。默认为 0m。
标题: 可选。布尔值。显示标题。默认值根据每个视频配置。
透明: 可选。布尔值。使用透明背景而不是黑色背景。默认为 true。
视频: 可选。位置 0。字符串。视频 ID。
宽度: 可选。字符串。CSS 值。视频宽度。

正文：无。

有关更多详细信息，请参阅 Vimeo 文档。

YouTube

paige/youtube 短代码提供一个 YouTube 视频。

{{< paige/youtube
    autoplay=false
    controls=false
    description=""
    end=0
    fullscreen=false
    height=""
    list=""
    loop=false
    maxheight=""
    maxwidth=""
    mute=false
    start=0
    video=""
    width="" >}}

参数

自动播放: 可选。布尔值。自动播放视频。
控件: 可选。布尔值。显示视频控件。默认为 true。
描述: 可选。字符串。纯文本。屏幕阅读器内容。默认为 YouTube video。
结束: 可选。整数。经过的秒数。在此处停止视频。
全屏: 可选。布尔值。启用全屏模式。默认为 true。
高度: 可选。字符串。CSS 值。视频高度。
列表: 可选。字符串。播放列表 ID。
循环: 可选。布尔值。循环播放视频。
最大高度: 可选。字符串。CSS 值。视频最大高度。
最大宽度: 可选。字符串。CSS 值。视频最大宽度。
静音: 可选。布尔值。静音视频。
开始: 可选。整数。经过的秒数。在此处开始视频。
视频: 可选。位置 0。字符串。视频 ID。
宽度: 可选。字符串。CSS 值。视频宽度。

正文：无。

自定义

包含

如果此文件存在	它将包含在
`yoursite/layouts/partials/paige/body-first.html`	body 标签的开头
`yoursite/layouts/partials/paige/body-last.html`	body 标签的末尾
`yoursite/layouts/partials/paige/head-first.html`	head 标签的开头
`yoursite/layouts/partials/paige/head-last.html`	head 标签的末尾
`yoursite/layouts/partials/paige/page-footer-first.html`	页面页脚标签的开头
`yoursite/layouts/partials/paige/page-footer-last.html`	页面页脚标签的末尾
`yoursite/layouts/partials/paige/page-header-first.html`	页面页眉标签的开头
`yoursite/layouts/partials/paige/page-header-last.html`	页面页眉标签的末尾
`yoursite/layouts/partials/paige/site-first.html`	main 标签的开头
`yoursite/layouts/partials/paige/site-last.html`	main 标签的末尾
`yoursite/layouts/partials/paige/site-footer-first.html`	站点页脚标签的开头
`yoursite/layouts/partials/paige/site-footer-last.html`	站点页脚标签的末尾
`yoursite/layouts/partials/paige/site-header-first.html`	站点页眉标签的开头
`yoursite/layouts/partials/paige/site-header-last.html`	站点页眉标签的末尾
`yoursite/layouts/partials/paige/style-first.css`	style 标签的开头
`yoursite/layouts/partials/paige/style-last.css`	style 标签的末尾

覆盖

大多数代码位于布局模板使用的部分模板中。通过覆盖相应的布局或部分模板，可以轻松添加、更改或删除代码。

例如，layouts/_default/list.html 和 layouts/_default/single.html 包含 layouts/partial/paige/page.html。layouts/partial/paige/page.html 包含 layouts/partial/paige/page-header.html。要更改这些布局模板的页面标题，请更改 layouts/partial/paige/page-header.html。

要仅更改 layouts/_default/single.html 的页面标题，请将 layouts/_default/single.html 中包含的 layouts/partial/paige/page.html 替换为其内容，然后在其中，将 layouts/partial/paige/page-header.html 的包含替换为其内容，然后在其中更改页面标题。

要更改网站图标，请覆盖以下文件

static/android-chrome-192x192.png
static/android-chrome-512x512.png
static/apple-touch-icon-114x114-precomposed.png
static/apple-touch-icon-114x114.png
static/apple-touch-icon-120x120-precomposed.png
static/apple-touch-icon-120x120.png
static/apple-touch-icon-144x144-precomposed.png
static/apple-touch-icon-144x144.png
static/apple-touch-icon-152x152-precomposed.png
static/apple-touch-icon-152x152.png
static/apple-touch-icon-180x180-precomposed.png
static/apple-touch-icon-180x180.png
static/apple-touch-icon-57x57-precomposed.png
static/apple-touch-icon-57x57.png
static/apple-touch-icon-60x60-precomposed.png
static/apple-touch-icon-60x60.png
static/apple-touch-icon-72x72-precomposed.png
static/apple-touch-icon-72x72.png
static/apple-touch-icon-76x76-precomposed.png
static/apple-touch-icon-76x76.png
static/apple-touch-icon-precomposed.png
static/apple-touch-icon.png
static/favicon-16x16.png
static/favicon-32x32.png
static/favicon.ico
static/favicon.png
static/favicon.svg
static/mstile-144x144.png
static/mstile-150x150.png
static/mstile-310x150.png
static/mstile-310x310.png
static/mstile-70x70.png
static/safari-pinned-tab.svg

你可以在这里生成这些网站图标文件。

要更改语法高亮样式，请用您自己的文件覆盖以下文件

layouts/partials/paige/dark.css
layouts/partials/paige/light.css

扩展

使用 CSS 选择器来扩展默认样式。

页面标识符

#paige-alert: 页面警告。
#paige-authors: 页面作者。
#paige-breadcrumbs: 站点面包屑导航。
#paige-collections: 站点集合页面。
#paige-collections-header: 站点集合页面标题。
#paige-comments: 页面评论。
#paige-content: 页面内容。
#paige-copyright: 站点版权。
#paige-credit: 站点署名。
#paige-date: 页面日期。
#paige-edit: 页面编辑链接。
#paige-file: 页面编辑和历史链接。
#paige-history: 页面历史链接。
#paige-keywords: 页面关键词。
#paige-license: 站点许可证。
#paige-menu: 站点菜单。
#paige-metadata: 页面元数据。
#paige-next: 下一个页面链接。
#paige-page-description: 页面描述。
#paige-page-footer: 包含页面编辑、历史、下一个和上一个链接的页面页脚。
#paige-page-header: 包含页面标题、描述、元数据和目录的页面页眉。
#paige-page-title: 页面标题。
#paige-pages: 页面子页面。
#paige-pages-header: 页面子页面标题。
#paige-pagination: 子页面的分页。
#paige-prev: 上一个页面链接。
#paige-reading-time: 页面阅读时间。
#paige-sections: 页面部分子页面。
#paige-sections-header: 页面部分子页面标题。
#paige-series: 页面系列。
#paige-siblings: 页面下一个和上一个链接。
#paige-site-description: 站点描述。
#paige-site-footer: 包含站点版权、许可证和署名的站点页脚。
#paige-site-header: 包含站点标题、描述、菜单和面包屑导航的站点页眉。
#paige-site-title: 站点标题。
#paige-toc: 目录。

页面类

.paige-keyword: 一个关键词。
.paige-keyword-category: 一个分类关键词。
.paige-keyword-tag: 一个标签关键词。
.paige-keywords: 关键词。

子页面类

.paige-authors: 作者。
.paige-date: 日期。
.paige-description: 描述。
.paige-metadata: 元数据。
.paige-page: 一个页面。
.paige-reading-time: 阅读时间。
.paige-series: 系列。
.paige-summary: 摘要。
.paige-title: 标题。

页面类型类

.paige-kind-home: 类型为“home”的页面的容器元素。
.paige-kind-section: 类型为“section”的页面的容器元素。
.paige-kind-page: 类型为“page”的页面的容器元素。
.paige-kind-taxonomy: 类型为“taxonomy”的页面的容器元素。
.paige-kind-term: 类型为“term”的页面的容器元素。

页面状态类

.paige-draft: 草稿页面的容器元素。
.paige-expired: 过期页面的容器元素。
.paige-future: 未来页面的容器元素。
.paige-modified: 已修改页面的容器元素。
.paige-published: 已发布页面的容器元素。
.paige-unpublished: 未发布页面的容器元素。

短代码类

.paige-code: paige/code 短代码的容器元素。
.paige-email: paige/email 短代码的容器元素。
.paige-figure: paige/figure 短代码的容器元素。
.paige-gallery: paige/gallery 短代码的容器元素。
.paige-icon: paige/icon 短代码的容器元素。
.paige-image: paige/image 短代码的容器元素。
.paige-quote: paige/quote 短代码的容器元素。
.paige-vimeo: paige/vimeo 短代码的容器元素。
.paige-youtube: paige/youtube 短代码的容器元素。

极简外观

默认情况下，所有内容都会显示。如果你想要更简洁的外观，请尝试在 yoursite/hugo.toml 中使用以下配置

[params.paige.list_page]
disable_authors = true
disable_date = true
disable_keywords = true
disable_reading_time = true
disable_series = true
disable_summary = true

[params.paige.page]
disable_authors = true
disable_date = true
disable_keywords = true
disable_next = true
disable_prev = true
disable_reading_time = true
disable_series = true
disable_toc = true

窄版外观

默认情况下，内容会扩展以填充整个窗口。这可能会导致非常长的行，具体取决于窗口宽度。要使用推荐的 66 个字符（40rem）的行长度，请尝试在 yoursite/hugo.toml 中使用以下配置

[params.paige]
style = """
#paige-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
"""

窄宽混合外观

默认情况下，内容会扩展以填充整个窗口。这可能会导致非常长的行，具体取决于窗口宽度。要对除媒体以外的所有内容使用推荐的 66 个字符（40rem）的行长度，请尝试在 yoursite/hugo.toml 中使用以下配置

[params.paige]
style = """
#paige-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
#paige-content > img,
#paige-content > .paige-image,
#paige-content > .paige-vimeo,
#paige-content > .paige-youtube { max-width: 100%; }
"""

如果您配置了菜单，并希望它足以满足所有导航需求，则应隐藏每个页面上的面包屑导航，如果您使用默认主页布局，则应隐藏主页上的集合、部分和页面列表。

要隐藏每个页面上的面包屑导航，请尝试在 yoursite/hugo.toml 中使用以下配置

[params.paige.site]
disable_breadcrumbs = true

要隐藏主页上的集合、部分和页面列表，请尝试在 yoursite/content/_index.md 中使用以下配置

[params.paige.list_page]
disable_collections = true
disable_pages = true
disable_sections = true

鸣谢

Lanty 拍摄的照片
Sergey Pesterev 拍摄的照片

项目

由 Will Faught 创建。在 MIT 许可证下发布。托管在 https://github.com/willfaught/paige。

Hugo 主题

Paige

Paige

特性

社区

设置

配置

参数

菜单

分类

布局

云

搜索

短代码

代码

电子邮件

图表

图库

图标

图像

引用

请求

选项卡

Vimeo

YouTube

自定义

包含

覆盖

扩展

极简外观

窄版外观

窄宽混合外观

仅菜单导航

鸣谢

项目

另请参阅