Hugo 主题
色彩你的世界
- 实时演示(在 Netlify 上)
- 演示仓库
色彩你的世界是一个 Hugo 主题,围绕着一个简单的实验而开发的,它把我带到了这里
它是一个 HTML 颜色选择器。结合一些原生 JS,它允许任何人更改我在这里称之为...强调色,一种主要用于交互元素的颜色。
我非常喜欢这个结果,所以我决定在我的主站点上使用它,但我也想分享它,以防有人想尝试一下。
它大量使用了 Hugo Pipes,我强烈建议在构建时使用 --minify
!
我已经在这个主题上工作了很长时间,以至于有些功能我已经不记得了... 但这里是一些
- 可自定义的深色/浅色模式;
- 可自定义的“强调色”(在用户级别);
- 键盘友好;
- 在某种程度上注重隐私(没有 Google Analytics/Fonts,Disqus 等);
- 包括集中式和去中心化平台的社交 shortcode;
- 联系表单 shortcode(通过 Formspree);
- Open Graph、Twitter Cards 和结构化数据 (Schema.org) 元标签;
- 通过图像处理实现的响应式图像;
- 通过 Pagefind 实现的基本搜索功能;
- 图像懒加载;
- noscript 在某种程度上是可用的(KaTeX 和搜索功能除外)。
截图
要求
- Hugo Extended
- 最低版本:0.128.0
安装
如果你安装了 git,你可以在 Hugo 目录中的 CLI 中执行以下操作
git clone https://gitlab.com/rmaguiar/hugo-theme-color-your-world.git themes/color-your-world
有关更多信息,请阅读 Hugo 官方设置指南。
自定义
深色/浅色模式颜色
两种颜色调色板都可以在 assets/scss/colors/variables.scss
中找到。
强调色
默认情况下,有 2 个强调色,加上演示站点上的 10 个,分布成对。
您可以在配置中更改默认模式和强调色
[params.style]
# Dark mode as default
# User preferences (site/system settings) will still have priority over it
# The default is false
isDark = true
# Accent colors for dark and light mode respectively
darkAccent = "#1dbc91" # Default is "#1dbc91"
lightAccent = "#1f676b" # Default is "#1f676b"
# More colors, pick as many as you want (not really sure if there's a limit)
# Apparently these may not show up on every modern browser (ie.: Firefox)
# There's no default value. Used here just as example
presets = [ "#1f676b", "#f3a530", "#902b37", "#1dbc91", "#754e85", "#7fc121", "#a8314a", "#ff7433", "#3e6728", "#c063bd" ]
字体
默认情况下,此主题使用 Oswald 和 Open Sans 字体。仅限拉丁字符集和 woff2
格式,大多数现代浏览器都支持这种格式。
如果这不足以满足您的用例,您必须自己生成一组新的字体。
幸运的是,借助这个工具:google-webfonts-helper,这相当容易。
在您的项目文件夹中,将字体文件添加到名为 /assets/fonts
的文件夹,并将 CSS 内容添加到名为 /assets/scss/fonts/font-face.scss
的文件中。
另请确保将文件 /assets/scss/fonts/variables.scss
复制到您的项目文件夹中,并相应地更改字体名称。
语法高亮
此主题带有两种 chroma 样式,分别用于深色和浅色模式。深色模式为 Monokai,浅色模式为 Solarized Dark。
值得注意的是,我没有使用原始样式表,而是使用了基于 pygments-high-contrast-stylesheets(又名“WCAG AA 通过 Pygments 样式表”)的修改样式表。
如果您想更改它,可以在 assets/scss/colors/chroma
中找到,分别为 dark.scss
和 light.scss
。
以下行在您的配置文件中是必需的,才能使用此功能
[markup.highlight]
noClasses = false
要禁用它,您可以删除 noClasses = false
(因为它的默认值为 true
)并添加以下行
[params]
[params.style]
useCustomChroma = false
图像处理
默认情况下,图像是响应式的。这是通过图像处理实现的,图像会根据其宽度进行调整大小。
例如,宽度等于或大于 1280 像素的图像将被处理(调整大小)为 3 种尺寸:1280x
、960x
和 640x
。
如果使用 Hugo v0.83 或更高版本,还会生成一组 WEBP 文件。
封面图像也将调整大小(使用填充方法)用于 Open Graph(1200x630
)和 Twitter Cards(1280x640
)。
您可以通过配置更改此行为。下面您可以找到默认参数
[imageProcessing]
# Enable auto resize
# Includes "img" and "figure" shortcodes
autoResize = true
# Convert "tiff" files to the format below
# since the most used browsers don't support it
fallbackOptions = "jpeg"
# Fill options for Open Graph and Twitter card images
# These images are also used in the Schema.org structured data
openGraphFillOptions = "1200x630"
twitterFillOptions = "1280x640"
# Extra formats (along JPEG/PNG)
[[imageProcessing.extraFormats]]
formatOptions = "webp"
mediaType = "image/webp"
minVersion = "0.83"
# Sizes at which images are resized
# Keep the sizes in descending order
# The smallest size will be used as the default image
[[imageProcessing.sizes]]
resizeOptions = "1280x"
descriptor = "1280w"
minWidth = 1280
[[imageProcessing.sizes]]
resizeOptions = "960x"
descriptor = "960w"
minWidth = 960
[[imageProcessing.sizes]]
resizeOptions = "640x q90"
descriptor = "640w"
minWidth = 640
当使用 shortcode img
和 figure
时,也可以通过将 resize
参数设置为 false
来禁用图像处理。
Shortcode
这里最复杂的 shortcode 是 social
和 contact-form
。它们可以分别用于注入社交平台链接列表和联系表单。
社交
在这里,我区分了集中式和去中心化平台。
由于去中心化平台引入了“实例”的概念。一个人在同一平台上的多个实例中拥有多个帐户并不罕见。
这种区分应该使设置更容易。
以下是配置文件示例
[params.social.centralized]
facebook = [ "<username>", "Zuckerburg" ]
flickr = [ "<username>" ]
github = [ "<username>" ]
gitlab = [ "<username>" ]
instagram = [ "<username>" ]
keybase = [ "<username>" ]
linkedin = [ "<username>" ]
medium = [ "<username>" ]
reddit = [ "<username>" ]
snapchat = [ "<username>" ]
soundcloud = [ "<username>" ]
stackOverflow = [ "<username>" ]
strava = [ "<username>" ]
telegram = [ "<username>" ]
twitch = [ "<username>" ]
vimeo = [ "<username>" ]
whatsapp = [ "<number>" ]
x = [ "<username>", "@birb" ]
xing = [ "<username>" ]
youtube = [ "<username>" ]
#entry = [ "username", "label (optional)" ]
# The "entry" here IS important. It's used to load the data.
[params.social.decentralized]
[params.social.decentralized.bsky]
1 = [ "https://bsky.app/profile/<username>.bsky.social", "bsky.social" ]
#entry = [ "full url", "label (required)" ]
[params.social.decentralized.element]
1 = [ "https://app.element.io/#/user/<username>:matrix.org", "matrix.org" ]
[params.social.decentralized.funkwhale]
1 = [ "https://open.audio/<username>", "open.audio" ]
[params.social.decentralized.mastodon]
1 = [ "https://mastodon.social/<username>", "mastodon.social" ]
2 = [ "https://mastodon.too/<username>", "mastodon.too" ]
3 = [ "https://yet.another.one/<username>", "yet.another.one" ]
[params.social.decentralized.matrix]
1 = [ "https://matrix.to/#/<username>:matrix.org", "matrix.org" ]
2 = [ "https://matrix.to/#/<username>:other.org", "other.org" ]
[params.social.decentralized.peertube]
1 = [ "https://peertube.something/accounts/<username>", "peertube.something" ]
[params.social.decentralized.pixelfed]
1 = [ "https://pixelfed.social/<username>", "pixelfed.social" ]
# The "entry" here ISN'T important. It's used for nothing.
此信息还将用于生成社交元标签(例如:rel=“me” 和 Schema.org)。
联系表单
# Contact form shortcode
[params.contact]
# formspree.io Form ID
formspreeFormId = "example"
# Autocomplete [on/off] and min character length for message
autoComplete = false # Default is false
messageMinLength = 140 # Default is 140
# Subject
# You can set a single value below (and it will cease to be a dropdown),
# BUT KEEP IT AS AN ARRAY
# It can also be disabled entirely (and it will turn into a text field)
subject = [ 'Just saying "hi"', "I know what you did last winter", "... Is that a sloth?", "お前はもう死んでいる。" ]
# Text placeholders. As usual, comment the lines if you don't want use them
# The "subject" below will only be used if the "subject" above doesn't exist (ie.: commented/deleted)
[params.contact.placeholder]
name = "Jane Doe"
email = "janedoe@example.com"
subject = 'Just saying "hi"'
message = "Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla nullam quis risus."
杂项
富文本内容
由于我没有使用此功能,所以这里只是做了最简单的处理。我建议您创建自己的 assets/scss/rich-content.scss
。
404
可以通过配置文件使用以下方式生成一个非常基础的 404 页面
[params.notFound]
title = "Page not found"
description = "This page was not found."
paragraph = "Nothing to see here, buddy."
自定义 front matter 参数
mainTitle
(字符串): 如果您希望它与<h1>
(仍然使用title
参数)不同,则可以使用它来替换<title>
meta 标签;sitemapExclude
(true|false): 可用于从站点地图中排除页面/部分;noindex
(true|false): 与上述类似。可用于排除页面/部分被索引(通过机器人或您自己的站点)。它会将 meta 标签robots
更改为noindex
,并且该页面将不会被添加到站点的搜索索引中。
自定义局部模板
- 可以通过创建一个名为
layouts/partials/custom/site-title.html
的文件来替换站点标题; - 可以通过创建一个名为
layouts/partials/custom/head-append.html
的文件来使用自定义网站图标; - 可以通过创建一个名为
static/css/custom.css
或assets/scss/custom.scss
的文件,将自定义 CSS 导入到主 CSS 文件中; - 可以通过创建一个名为
layouts/partials/custom/footer-text.html
的文件来替换footerText
参数。
更多参数
您的配置文件(或 front matter)的更多可能参数
# Used only in the RSS file
copyright = "Copyright © 2008–2021, Steve Francia and the Hugo Authors; All rights reserved."
[params]
# Site description
description = "John Doe's personal website"
# Author
author = "John Doe"
authorDesc = "Some indescribable horror."
# Footer text
# Each value will become a paragraph
# Keep it as an array
footerText = [ "Generated with [Hugo](https://gohugo.com.cn) using the [Color Your World](https://gitlab.com/rmaguiar/hugo-theme-color-your-world) theme." ]
# Site cover, for Open Graph, Twitter Cards and Schema.org
# It will be used if the current page doesn't have an image cover
# File will be picked from the "assets" directory
# Comment the lines if you don't want to use it
cover = "img/cover.jpg"
coverAlt = "A placeholder that doesn't deserve to be described."
# Shows a message in the footer about JavaScript being disabled
# The default is false
hasNoscriptNotice = true
# Default path for images in posts
# ie.: "content/some-post/img"
# Can also be set PER PAGE
# It can be used to reduce repetition
# There's no default value
imgPath = "img"
# Default classes for markup image
# Modifies the default behavior of images placed via markdown
# Can also be set PER PAGE via front matter
# Available classes are: border and borderless
# There's no default value
markupImgClass = "borderless"
# This will append a separator (of your choice) along the site title to your <title>
# ie.: | ❚ - – — • ⚫
# You can disabled it PER PAGE by using "disableTitleSeparator" at front
# matter or disable it entirely by commenting the line below
titleSeparator = "|"
[params.search]
# Enable search form (at the post list)
# The default value is false
enable = true
# Limit search results
# The default value is 30
maxResults = 15
# Limit seach field input and pattern matching
minLength = 2 # Default is 3
maxLength = 42 # Default is 32
# Optional placeholder for search field
placeholder = "ie.: lorem ipsum"
# Results per page
pageResults = 3
[params.style]
# Disable the use of system settings (prefers-color-scheme)
# Can be used as a workaround for Chrome on Linux
# (Issue 998903: Dark Gtk theme does not affect prefers-color-scheme media query)
# The default is false
ignoreSystemSettings = false
# Use an icon or text for footnote return links
# The default is false
hasIconAsFootnoteReturnLink = true
# For the social shortcode
# Use flexbox (with flex-grow) or grid (equal width)
# The default is false
socialIsFlex = false
# Keep anchor links hidden until it's focused/hovered
# They will always be visible in mobile devices, regardless the option
# The default is false
hideAnchors = true
# CSS animation transition when changing colors
# The default is ".5s ease"
changeTransition = ".3s ease"
贡献
欢迎翻译。我只要求字体文件保持不变。如果拉丁字符集不够用,则由用户选择他们可能需要的字符集。
如果您有任何问题或建议,请随时提出 issue。
机密问题将被忽略。
致谢
- Font Awesome 和 Fork Awesome 用于图标;
- @nickpunt 和 @regpaq 提出了深色/浅色模式切换器的想法;
- Glenn McComb 及其关于使用 Hugo 进行自定义分页的文章;
- JeffProd 及其关于为 Hugo 构建自定义搜索引擎的文章;
- 这个 fork 的 gist 上的许多人提供了关于 Fuse.js + Hugo 的见解;
- Philip Walton 及其使用 Flexbox 实现粘性页脚的解决方案;
- Fuse.js (现在已替换为 Pagefind);
- Pagefind;
- KaTeX;
- @britonad 进行了乌克兰语翻译;
- @moanos 进行了德语翻译;
- Hugo 及其社区。
赞助
如果此仓库对您有任何用处或帮助,请考虑给我买杯咖啡