Hugo 主题
小熊崽
一个基于 Bear Blog 和 Hugo Bear Blog 的轻量级 Hugo 主题。它是免费的、多语言的、为搜索引擎优化、简洁、响应式、轻量且快速。真的非常快。
ᕦʕ •ᴥ•ʔᕤ 小熊崽
概述
🐻 一个基于 Bear Blog 和 Hugo Bear Blog 的轻量级 Hugo 主题。
小熊崽专注于速度和优化,因此您可以专注于编写好的内容。它是免费的、多语言的、为搜索引擎优化、简洁、响应式、轻量且快速。真的非常快。
安装
按照 Hugo 的快速入门创建一个空网站,然后将 小熊崽 克隆到 themes 目录中作为 Git 子模块
git submodule add https://github.com/clente/hugo-bearcub themes/hugo-bearcub
最后,在站点配置文件中附加一行
echo 'theme = "hugo-bearcub"' >> hugo.toml
功能
与 Bear Blog 一样,此主题
- 是免费且开源的
- 在任何设备上看起来都很棒
- 生成微小(~5kb)、优化和出色的页面
- 没有跟踪器、广告或脚本
- 自动生成 RSS 源
但这还不是全部!小熊崽 也是…
可访问的
与它的前辈相比,小熊崽 有一些可访问性升级。调色板已进行了全面修改,以确保视力障碍或色觉缺陷的用户可以阅读所有内容,并且一些交互元素被放大,以方便运动障碍的用户点击。
这些小的改动意味着 小熊崽 可以轻松通过 Google 的 PageSpeed 测试。
安全的
小熊崽 的演示托管在 GitHub 上,因此我无法控制其内容安全策略。但是,该主题本身在设计时就考虑了安全性:没有内联样式,并且完全不使用 JavaScript。
如果您想进一步提高 Mozilla Observatory 分数,您应该只需在托管服务的配置(例如 Netlify 或 Cloudflare Pages)中添加一些标头,而无需再考虑它。例如,我的 _headers
文件如下所示
/*
X-Content-Type-Options: nosniff
Strict-Transport-Security: "max-age=31536000; includeSubDomains; preload" env=HTTPS
Cache-Control: max-age=31536000, public
X-Frame-Options: deny
Referrer-Policy: no-referrer
Feature-Policy: microphone 'none'; payment 'none'; geolocation 'none'; midi 'none'; sync-xhr 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'
Content-Security-Policy: default-src 'none'; manifest-src 'self'; font-src 'self'; img-src 'self'; style-src 'self'; form-action 'none'; frame-ancestors 'none'; base-uri 'none'
X-XSS-Protection: 1; mode=block
多语言的
如果您需要编写一个支持多种语言的博客,小熊崽 可以满足您的需求!查看演示的 hugo.toml
文件,了解如何设置多语言支持的示例。
默认情况下,该主题会创建一个翻译按钮,当当前页面仅以其他语言提供时,该按钮将被禁用。您还可以通过设置 hideUntranslated = true
来选择隐藏此按钮(而不是禁用它)。
更多
时不时地,当我继续使用 小熊崽 时,我注意到缺少某些功能。目前,这些是我已经实现的“高级功能”
- 全文 RSS 源:一个增强的 RSS 源模板,其中包含源中帖子(经过适当编码)的完整内容。
- 静态内容:您可以通过在帖子的前言中包含
link: "{url}"
来创建充当静态文件链接的空博客条目。您还可以将render: false
添加到构建选项中,以避免呈现空白帖子。 - 跳过链接:一个“跳到主要内容”链接,该链接暂时不可见,但可以被需要键盘来浏览网页的人员聚焦(有关更多信息,请参见 @2kool4idkwhat 的 PR #5)。
- 通过电子邮件回复:如果您提供电子邮件地址,主题将在每个帖子的末尾创建一个“通过电子邮件回复此帖子”按钮(请参阅 Kev Quirk 的原始实现)。可以通过在帖子前言中设置
hideReply: true
来逐个取消此按钮(请参见 @chrsmutti 的 PR #18)。 absfigure
短代码:使用figure
短代码的快捷方式,该短代码还使用absURL
函数将相对 URL 转换为绝对 URL。- 单次使用 CSS(实验性):您可以通过在
assets/{custom_css}.css
中编写所需的 CSS,然后在所述页面的前言中包含style: "{custom_css}.css"
,将一些样式添加到单个页面。 - 条件 CSS(实验性):由于 小熊崽 在没有内联样式的情况下进行语法高亮显示(有关更多信息,请参见
hugo.toml
),因此它仅在当前页面中实际存在代码块时才加载其syntax.css
。 - 替代的“Herman”样式(实验性):如果您想查看更现代的 CSS 样式,可以将
themeStyle
参数更改为"herman"
以激活 Herman Martinus 的 Astro 版 Blogster Minimal 主题。 - 动态社交卡片生成(实验性):如果您没有向帖子添加预览图片,则此模板将根据标题生成一张图片。您可以在下面看到一个示例。
配置
可以使用 hugo.toml
文件自定义 小熊崽。有关更多信息,请查看演示的配置。
# Basic config
baseURL = "https://example.com"
theme = "hugo-bearcub"
copyright = "John Doe (CC BY 4.0)"
defaultContentLanguage = "en"
# Generate a nice robots.txt for SEO
enableRobotsTXT = true
# Setup syntax highlighting without inline styles. For more information about
# why you'd want to avoid inline styles, see
# https://mdn.org.cn/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles
[markup]
[markup.highlight]
lineNos = true
lineNumbersInTable = false
# This allows Bear Cub to use a variation of Dracula that is more accessible
# to people with poor eyesight. For more information about color contrast
# and accessibility, see https://web.dev/color-and-contrast-accessibility/
noClasses = false
# Multilingual mode config. More for information about how to setup translation,
# see https://gohugo.com.cn/content-management/multilingual/
[languages]
[languages.en]
title = "Bear Cub"
languageName = "en-US 🇺🇸"
LanguageCode = "en-US"
contentDir = "content"
[languages.en.params]
madeWith = "Made with [Bear Cub](https://github.com/clente/hugo-bearcub)"
[languages.pt]
title = "Bear Cub"
languageName = "pt-BR 🇧🇷"
LanguageCode = "pt-BR"
contentDir = "content.pt"
[languages.pt.params]
madeWith = "Feito com [Bear Cub](https://github.com/clente/hugo-bearcub)"
[params]
# The description of your website
description = "Bear Cub Demo"
# The path to your favicon
favicon = "images/favicon.png"
# These images will show up when services want to generate a preview of a link
# to your site. Ignored if `generateSocialCard = true`. For more information
# about previews, see https://gohugo.com.cn/templates/internal#twitter-cards and
# https://gohugo.com.cn/templates/internal#open-graph
images = ["images/share.webp"]
# This title is used as the site_name on the Hugo's internal opengraph
# structured data template
title = "Bear Cub"
# Dates are displayed following the format below. For more information about
# formatting, see https://gohugo.com.cn/functions/format/
dateFormat = "2006-01-02"
# If your blog is multilingual but you haven't translated a page, this theme
# will create a disabled link. By setting `hideUntranslated` to true, you can
# have the theme simply not show any link
hideUntranslated = false
# (EXPERIMENTAL) This theme has two options for its CSS styles: "original" and
# "herman". The former is what you see on Bear Cub's demo (an optimized
# version of Hugo Bear Blog), while the latter has a more modern look based on
# Herman Martinus's version of the Blogster Minimal theme for Astro.
themeStyle = "original"
# (EXPERIMENTAL) This theme is capable of dynamically generating social cards
# for posts that don't have `images` defined in their front matter; By setting
# `generateSocialCard` to false, you can prevent this behavior. For more
# information see layouts/partials/social_card.html
generateSocialCard = true
# Social media. Delete any item you aren't using to make sure it won't show up
# in your website's metadata.
[params.social]
twitter = "example" # Twitter handle (without '@')
facebook_admin = "0000000000" # Facebook Page Admin ID
# Author metadata. This is mostly used for the RSS feed of your site, but the
# email is also added to the footer of each post. You can hide the "reply to"
# link by using a `hideReply` param in front matter.
[params.author]
name = "John Doe" # Your name as shown in the RSS feed metadata
email = "me@example.com" # Added to the footer so readers can reply to posts
贡献
如果您在使用 小熊崽 时遇到任何问题,您可以提交问题或创建拉取请求。