Hugo 主题
Paige
强大、灵活、像素级的完美。一款高级 Hugo 主题。
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://127.0.0.1
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://utteranc.es
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 = "[email protected]"
# name = "John Doe"
# url = "https://github.com/account/project"
icon = "" # Example: "/icon.webp"
logo = "" # Example: "/logo.webp"
[paige.feed.rss]
managing_editor = "" # Example: "[email protected] (John Doe)"
web_master = "" # Example: "[email protected] (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。