Hugo 主题

上一个/下一个： 所有主题

Beautiful Hugo

Beautiful Jekyll 主题的改编版本

下载
Beautiful Hugo

Beautiful Hugo - Beautiful Jekyll 主题的改编版本

Beautiful Hugo Theme Screenshot

在线演示

请访问 https://hugo-theme-beautifulhugo.netlify.app/

安装

安装 Hugo 并创建一个新站点。有关详细信息，请参阅 Hugo 文档。

Git 子模块

将 Beautifulhugo 添加为 git 子模块

$ git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

Hugo 模块

将您的站点初始化为 hugo 模块

$ hugo mod init github.com/USERNAME/SITENAME

将 Beautifulhugo 模块添加为您站点的依赖项

$ hugo mod get github.com/halogenica/beautifulhugo

站点预览

将 exampleSite 的内容复制到您的项目根目录

cp -r themes/beautifulhugo/exampleSite/* . -iv

如果您将 Beautifulhugo 作为 hugo 模块安装，请在您的配置文件 (hugo.toml) 中设置您的主题

[[module.imports]]
  path = "github.com/halogenica/beautifulhugo"

启动 Hugo

hugo serve

额外功能

响应式

此主题旨在在大屏幕和小屏幕（移动设备）上都看起来很棒。

语法高亮

此主题支持 Hugo 的闪电般快速的 Chroma，或者同时支持服务器端和客户端高亮。有关更多信息，请参阅 Hugo 文档。

Chroma - 新的服务器端语法高亮

要启用 Chroma，请将以下内容添加到您的站点参数中

pygmentsCodeFences = true
pygmentsUseClasses = true

然后，您可以通过运行以下命令生成不同的样式

hugo gen chromastyles --style=trac > static/css/syntax.css

Pygments - 旧的服务器端语法高亮

要使用此功能，请安装 Pygments (pip install Pygments) 并将以下内容添加到您的站点参数中

pygmentsStyle = "trac"
pygmentsUseClassic = true

Pygments 大部分与较新的 Chroma 兼容。它速度较慢，但有一些额外的样式选项。我建议使用 Chroma 而不是 Pygments。Pygments 将使用 syntax.css 进行高亮显示，除非您还设置配置 pygmentsUseClasses = false，这会将样式代码直接生成到 HTML 文件中。

Highlight.js - 客户端语法高亮 

[Params]
    useHLJS = true

客户端高亮不需要安装 pygments。这将使用 highlight.min.css 而不是 syntax.css 进行高亮显示（实际上禁用 Chroma）。Highlight.js 对语言和主题有更广泛的支持，并且是一个替代的高亮引擎。

Disqus 支持

要使用此功能，请将您的 disqus 短名称添加到 hugo.toml 文件中，如下所示

[services]
  [services.disqus]
    shortname = ''

有关更多参考，请参阅 hugo 配置

Staticman 支持

在 hugo.toml 或 hugo.yaml 中添加 Staticman 配置部分

示例 hugo.toml 配置

[Params.staticman]
  api = "https://<API-ENDPOINT>/v3/entry/{GIT-HOST}/<USERNAME>/<REPOSITORY-BLOGNAME>/master/comments"
[Params.staticman.recaptcha]
      sitekey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
      secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="

注意：公共 API-ENDPOINT https://staticman.net 目前正在达到其 API 限制，因此可以使用其他 API 实例来提供 Staticman 评论服务。

[Params.staticman.recaptcha] 部分是可选的。要将 reCAPTCHA 添加到您的站点，您必须将默认值替换为您自己的值（从 Google 获取）。站点 secret 必须使用以下方式加密

https://<API-ENDPOINT>/v3/encrypt/<SITE-SECRET>

您还必须在您的博客网站中配置 staticman.yml。

comments:
  allowedFields: ["name", "email", "website", "comment"]
  branch            : "master"
  commitMessage     : "New comment in {options.slug}"
  path: "data/comments/{options.slug}"
  filename          : "comment-{@timestamp}"
  format            : "yaml"
  moderation        : true
  requiredFields    : ['name', 'email', 'comment']
  transforms:
    email           : md5
  generatedFields:
    date:
      type          : "date"
      options:
        format      : "iso8601"
  reCaptcha:
    enabled: true
    siteKey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
    secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="

如果您在 hugo.toml 中没有 [Params.staticman] 部分，则您不需要 staticman.yml 中的 reCaptcha 部分

网站免责声明

如果您需要在您的网站上添加免责声明（例如“我的观点是我自己的，而不是我雇主的”），您可以通过以下方式执行此操作

  • 取消注释并编辑 hugo.toml 中的 disclaimerText 参数。
  • 如果您需要调整免责声明的样式，请修改 static/css/main.css 中 footer div.disclaimer 选择器内的声明。

免责声明文本的代码位于 layouts/partials/footer.html 中。将此代码块移动到另一个部分文件（或将其重新定位在 footer.html 中）将需要更改 main.css 中的 css 选择器。

Google Analytics

注册 Google Analytics 以获取您的 Google 跟踪 ID。

要使用此功能，请将您的 Google Analytics ID 添加到 hugo.toml 文件中，如下所示：

[services]
  [services.googleAnalytics]
    id = ''

请注意，只有当网站不是在 Hugo 的内置服务器上提供时，Google Analytics 跟踪代码才会被插入到页面中，以防止本地测试环境的跟踪。

如果您的网站源代码位于 Git 仓库中，则可以在页脚上显示构建该网站的 commit 对应的 SHA 值。为此，必须在配置文件 hugo.toml 中定义两个站点参数 commit。

enableGitInfo = true
[Params]
  commit = "https://github.com/<username>/<siterepo>/tree/"

有关如何将其添加到持续集成系统的示例，请参阅 vincenttam/vincenttam.gitlab.io。

多语言

要使 Beautiful Hugo 支持多语言，您需要在 hugo.toml 文件中的 languages 参数内定义要使用的语言，同时为每种语言重新定义内容目录。 请查看 i18n/ 文件夹以查看所有可用的语言。

[languages]
  [languages.en] 
    contentDir = "content/en" # English
  [languages.ja]
    contentDir = "content/ja" # Japanese
  [languages.br]
    contentDir = "content/br" # Brazilian Portuguese

现在，您只需在 content/ 文件夹中为每种语言创建一个子目录，并将内容放在 page/ 和 post/ 常规目录中。

content/      content/      content/  
└── en/       └── br/       └── ja/ 
    ├── page/     ├── page/     ├── page/
    └── post/     └── post/     └── post/

符合 GDPR / EU-DSGVO 的自托管资源

使用默认设置，访问使用 Beautifulhugo 的网站还会连接到 Google Fonts 或 jsdelivr 等远程服务，以嵌入字体、js 和其他资源。

为了避免这种情况，请在 hugo.toml 中设置以下参数：

[Params]
  selfHosted = true

额外的短代码

提供了两个额外的短代码（以及自定义的 figure 短代码）：

详情

这只是简单地添加了 html5 的 detail 属性，该属性在所有现代浏览器上都受支持。 像这样使用它：

{{< details "This is the details title (click to expand)" >}}
This is the content (hidden until clicked).
{{< /details >}}

拆分

这将添加一个两列并排环境（对于窄设备，将变为 1 列）。

{{< columns >}}
This is column 1.
{{< column >}}
This is column 2.
{{< endcolumns >}}

社交媒体图标

为了在页脚中显示社交媒体图标，请在您的 hugo.yaml 或 hugo.toml 中添加如下部分。 您可以在 data/beautifulhugo/social.toml 中查看支持的社交媒体网站的完整列表。

author: 
  name: "Author Name"
  website: "https://example.com"
  github: halogenica/beautifulhugo
  twitter: username
  discord: 96VAXXvjCB
  ...

[Params.author]
    name = "Author Name"
    website = "https://example.com"
    github = "halogenica/beautifulhugo"
    twitter = "username"
    discord = "96VAXXvjCB"
    ...

关于

这是 Dean Attali 的 Jekyll 主题 Beautiful Jekyll 的改编版。 它支持原始主题的大部分功能以及许多新功能。 随着时间的推移，它与 Jekyll 主题有所不同，经过多年的社区更新。

许可

MIT 许可，请参阅 LICENSE。

另请参阅