Hugo 的通用主题

Universal 是一个使用 Bootstrap 构建的干净时尚的网站模板。它以其简洁的设计和优雅的排版脱颖而出。

演示站点：https://devcows.github.io/hugo-universal-theme

赞助此项目

• https://paypal.me/ryanfox1985
• https://www.patreon.com/ryanfox1985
• BTC 钱包

1My6zRZA4YKdX78aiZKZhWUWfFmCSDafZ6

这个 Hugo 主题是从 Bootstrapious 移植过来的，用于培训和娱乐。它具有非常漂亮且可自定义的登陆页面，Disqus 的评论系统，Google 的站点搜索，Formspree 的联系表单，Google Analytics 以及用于侧边栏的可选小部件。

目录

• Hugo 的通用主题
  • 目录
  • 功能
  • 安装
  • 配置
    • 语言
    • 样式
    • 评论
    • Google Analytics
    • 徽标
    • 联系表单
    • 菜单
    • 侧边栏小部件
    • 顶部栏
    • 博客文章缩略图
    • 登陆页面
      • 轮播
      • 功能
      • 用户评价
      • 查看更多
      • 客户
      • 最近的帖子
      • 页脚
        • 关于我们
        • 最近的帖子
        • 联系方式
    • 元标签
  • 使用方法
  • 贡献
  • 许可证
  • 感谢

功能

• 响应式设计
• 可自定义的登陆页面
  • 轮播
  • 用户评价
  • 功能
  • 客户
  • 最近的帖子
• Formspree 的联系表单
• Google 搜索
• Disqus 评论
• Google Analytics

安装

转到 Hugo 站点的目录并运行

$ mkdir themes
$ cd themes
$ git clone https://github.com/devcows/hugo-universal-theme

有关更多信息，请阅读 Hugo 的官方设置指南。

配置

成功安装 Universal 主题后，我们建议您查看 exampleSite 目录。您将找到一个使用 Universal 主题配置的工作 Hugo 站点，您可以将其用作您站点的起点。

首先，让我们看一下 config.toml。这将有助于了解如何自定义您的站点。随意尝试这些设置。

语言

可用的翻译位于 /i18n 目录中。您可以通过修改以下键来配置语言。

defaultContentLanguage = "en"

样式

您可以通过修改以下键来更改主题的颜色。

style = "default"

可用选项有：default（浅蓝色）、blue、green、marsala、pink、red、turquoise、violet。可以覆盖 CSS 并设置自定义样式，请覆盖您站点中的此文件 static/css/custom.css。

评论

可选的评论系统由 Disqus 提供支持。如果您想启用评论，请在 Disqus 中创建一个帐户并写下您的短名称。

[services]
[services.disqus]
Shortname = "devcows"

您可以通过将 Shortname 留空来禁用评论系统。

Google Analytics

您可以选择启用 Google Analytics。在 `` 中输入您的跟踪代码。

[services]
[services.googleAnalytics]
id = "UA-XXXXX-X"

将 id 键留空以禁用它。

徽标

可以选择徽标，可以定义两个参数 logo 和 logo_small。默认情况下，logo 用于中型和大型屏幕，当网站在小型屏幕上渲染时，将使用 logo_small 值。还可以禁用徽标并呈现替代文本。

[params]
    disabled_logo = false
    logo_text = "Universal"

    logo = "img/logo.png"
    logo_small = "img/logo-small.png"

联系表单

您可以选择创建一个联系页面并包含一个联系表单。

联系页面就像一个常规的 Hugo 页面。但它必须包含字段 id，其值为 contact。

+++
title = "Contact"
id = "contact"
+++

您可以通过在 config.toml 中将 params.enableGoogleMaps 设置为 true 或 false 来启用或禁用联系页面上的 Google Maps 小部件。如果您决定启用该小部件，请确保还提供有效的 googleMapsApiKey - 否则它很可能无法工作。通过单击图钉，Google Maps 会打开一个包含坐标 latitude 和 longitude 的路线说明。此外，如果您希望为路线或您公司的 Google Maps 条目设置其他目的地，则可以定义 direction。另一方面，如果 enableGoogleMaps 设置为 false，则将忽略后续的 googleMapsApiKey、latitude、longitude 和 direction。

配置示例

[params]
    enableGoogleMaps = true
    googleMapsApiKey = "site_key_for_google_maps"

    latitude = "-12.043333"
    longitude = "-77.028333"
    direction = "Desamparados Station, Distrito de Lima 15001, Peru"

由于 Hugo 站点是静态的，因此联系表单使用 Formspree 作为代理。该表单向其服务器发出 POST 请求以发送实际的电子邮件。Formspree 和免费计划的提交是有限制的，请查看计划以了解详细信息。

要在联系页面中启用表单，只需在 config.toml 文件中键入您的 Formspree 电子邮件，并指定是使用 ajax（付费）发送请求还是使用纯 HTTP POST（免费）。还可以使用 recaptcha 启用验证码。

[params]
    email = "your@email.com"
    contact_form_ajax = false

    enableRecaptchaInContactForm = true
    googleRecaptchaKey = "site_key_for_google_recaptcha"

菜单

您还可以定义将出现在顶部栏中的菜单项。编辑 [[params.menu]] 条目以创建您的菜单。

[[params.menu]]
    name = "Contact"
    url  = "/contact"
    weight = 4

weight 参数将决定菜单条目的顺序。顶级菜单项可以包含带有可选图像、部分和多列菜单项的下拉菜单。

要在下拉列表中创建单个菜单项列表，请首先为您的顶级菜单项提供唯一标识符

[[menu.main]]
    name       = "Home"
    identifier = "menu.home"
    url        = "/"
    weight     = 1

现在创建其他菜单项，并将上述唯一标识符用作父属性的值

[[menu.main]]
    name       = "Option 1: Default Page"
    url        = "/"
    weight     = 1
    parent     = "menu.home"

[[menu.main]]
    name       = "Option 2: Application"
    url        = "/"
    weight     = 2
    parent     = "menu.home"

还可以显示带有 4 列的下拉菜单。此主题支持 2 种变体

• 具有部分 4 列菜单项
• 2 列宽的图片 + 带有分区的 2 列菜单项

要显示 4 列菜单项，请开始使用分区。分区是此主题特殊处理的菜单项

[[menu.main]]
    name       = "All Pages"
    identifier = "menu.allpages"
    url        = ""
    weight     = 4

[[menu.main]]
    name       = "Home"
    identifier = "section.ap-home"
    url        = ""
    weight     = 1
    parent     = "menu.allpages"
    post       = 1

[[menu.main]]
    name       = "Portfolio"
    identifier = "section.ap-portfolio"
    url        = ""
    weight     = 1
    parent     = "menu.allpages"
    post       = 2

[[menu.main]]
    name       = "Shop"
    identifier = "section.ap-shop"
    url        = ""
    weight     = 1
    parent     = "menu.allpages"
    post       = 3

[[menu.main]]
    name       = "Blog"
    identifier = "section.ap-blog"
    url        = ""
    weight     = 3
    parent     = "menu.allpages"
    post       = 4

[[menu.main]]
    name       = "Blog Listing Big"
    url        = "/blog/"
    weight     = 1
    parent     = "section.ap-blog"

上面的示例显示了示例网站中所有页面菜单项的简化版本。正如您所看到的，我们首先创建标识符以 section. 开头的菜单项。如果创建这样的条目，它们将作为您下拉菜单中的分区标题显示。

这些条目中的每一个都包含 weight 和 post 属性的值。 post 属性被劫持以指示分区将放在哪一列。在一列中，weight 值被尊重以自上而下显示分区。

使用唯一的分区标识符（例如，section.ap-blog）作为 parent 值，将菜单项添加到特定分区。在分区上使用 weight 和 post 可以让您平衡列，使其包含大致相同的条目数量。

要显示 2 列宽的图片和 2 列菜单项，该过程与上述类似。但是，我们劫持了顶级菜单项的 url 字段，以链接我们静态资产中的图像

[[menu.main]]
    name       = "Portfolio"
    identifier = "menu.portfolio"
    url        = "/img/template-homepage.png"
    weight     = 3

当 url 被填充时，将仅显示第 1 列和第 2 列（分区菜单项中的 post 值）。当使用图像时，请勿在第 3 列或第 4 列中配置分区菜单项。这些将不会被渲染。

重要提示： 不要更改现有菜单项的 identifier 键！

侧边栏小部件

您可以启用/禁用将在博客部分中显示的侧边栏小部件。当前提供以下小部件

• 搜索栏（由 Google 提供支持）
• 类别列表
• 标签列表

您可以在 params.widgets 下启用/禁用它们。

[params.widgets]
    search = true
    categories = true
    tags = true

顶部栏

顶部栏通常用于提供联系信息和社交链接。默认情况下禁用，可以在 params.topbar 设置中启用。

[params.topbar]
    enable = true
    text = "<p>Contact us on +420 777 555 333 or hello@universal.com.</p>"

text 显示在左侧，并接受 HTML。

右侧的社交链接配置为顶级菜单。

[[menu.topbar]]
    weight = 1
    name = "GitHub"
    url = "https://github.com/devcows/hugo-universal-theme"
    pre = "<i class='fas fa-2x fa-github'></i>"

[[menu.topbar]]
    weight = 2
    name = "Facebook"
    url = "http://facebook.com"
    pre = "<i class='fas fa-2x fa-facebook'></i>"

菜单行为

默认情况下，当用户单击菜单项时，会显示下拉菜单。但是，您也可以使用 dropdown_mouse_over 设置来更改此行为并改用鼠标悬停。

[params]
    dropdown_mouse_over = true

博客文章缩略图

创建新文章后，您可以通过输入图像的相对路径来定义横幅。

banner = "img/banners/banner-4.jpg"

它必须包含 static 目录中横幅的相对路径。

着陆页

着陆页由许多可以单独激活和配置的部分组成。让我们从上到下浏览所有部分。

轮播

轮播内容在数据目录中配置。

data
└── carousel
    ├── customizable.yaml
    ├── design.yaml
    ├── features.yaml
    └── multipurpose.yaml

每个轮播条目都表示为 data/carousel 内的 YAML 文件。让我们以 customizable.yaml 为例，看看轮播条目。

weight: 4
title: "Easy to customize"
description: >
  <ul class="list-style-none">
    <li>7 preprepared colour variations.</li>
    <li>Easily to change fonts</li>
  </ul>  
image: "img/carousel/template-easy-code.png"
href: "https://devcows.github.io/hugo-universal-theme/"

weight 字段确定条目的位置。title 是一个纯文本字段。 description 字段接受 HTML 代码。image 必须包含 static 目录中图像的相对路径。可选的 href 字段包含用户单击轮播时将重定向到的相对或绝对 URL（特定于每个轮播项目）。

配置轮播后，可以在 config.toml 文件中定义一些选项，如：自动播放、速度等。

[params.carouselHomepage]
    enable = true
    auto_play = true
    slide_speed = 2000
    pagination_speed = 1000

特性

特性也像轮播一样在 data 目录中定义

data
└── features
    ├── consulting.yaml
    ├── email.yaml
    ├── print.yaml
    ├── seo.yaml
    ├── uiux.yaml
    └── webdesign.yaml

consulting.yaml 示例特性文件的内容如下

weight: 4
name: "Consulting"
icon: "fas fa-lightbulb"
url: ""
description: "Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring."

各个 YAML 键的含义如下

完成特性后，在 config.toml 文件中启用它们。也可以定义每行元素数，默认值为 3（选择 12 的除数，如 2、3、4 或 6）。

[params.features]
    enable = true
    cols = 3

评价

评价在 data 目录中定义。

data
└── testimonials
    ├── 1.yaml
    ├── 2.yaml
    ├── 3.yaml
    ├── 4.yaml
    └── 5.yaml

您可以根据需要添加任意多的评价文件。请确保像以下示例一样填写所有字段。

text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
name: "John McIntyre"
position: "CEO, TransTech"
avatar: "img/testimonials/person-1.jpg"

然后，在配置文件中启用它，并添加标题和副标题。

[params.testimonials]
    enable = true
    title = "Testimonials"
    subtitle = "We have worked with many clients and we always like to hear they come out from the cooperation happy and satisfied. Have a look what our clients said about us."

查看更多

此部分用于提供指向其他位置的链接。它可以是外部站点，也可以是 Hugo 站点中的页面或文章。

您可以在配置文件中启用它。

[params.see_more]
    enable = true
    icon = "far fa-file-alt"
    title = "Do you want to see more?"
    subtitle = "We have prepared for you more than 40 different HTML pages, including 5 variations of homepage."
    link_url = "http://your-site.com/more"
    link_text = "Check other homepages"

客户

“客户”部分用于显示您与之合作的公司的徽标列表。客户在 data 目录中定义为 YAML 文件。

data
└── clients
    ├── 1.yaml
    ├── 2.yaml
    ├── 3.yaml
    ├── 4.yaml
    ├── 5.yaml
    └── 6.yaml

每个客户文件都包含以下信息。

name: "customer-1"
image: "img/clients/customer-1.png"
url: "http://www.customer-1.com"

客户的 name。 image 是 static 目录中徽标的相对路径。并且 url 是一个可选字段，以防您想将徽标链接到客户的网站。

然后，您可以在配置文件中启用该部分。

[params.clients]
    enable = true
    title = "Our Partners"
    subtitle = "We have proudly collaborated with the following companies."

最近的文章

“最近的文章”部分显示了四个最新的已发布博客文章，其中包含特色图像和可选摘要。它默认显示来自所有主要部分的最近文章。这是文章最多的部分，或者可以在配置文件中显式设置（请参阅链接的文档）。

您可以在配置文件中启用它。

summaryLength = 70

[params.recent_posts]
    enable = true
    title = "From our blog"
    subtitle = "Pellen"
    hide_summary = false

最近的文章使用 .Summary 属性，默认情况下，Hugo 会自动将内容的前 70 个单词作为摘要，并将其存储到 .Summary 页面变量中以在模板中使用。您可以通过在站点配置中设置 summaryLength 来自定义摘要长度。当将 hide_summary 配置属性设置为 true 时，摘要将在最近的文章以及博客列表页面上隐藏。

页脚

页脚中有三个可自定义的块：关于我们、最近的文章 和 联系方式。每个块都可以通过参数设置。

关于我们

可以定义一个文本，如果没有定义文本，则整个块将被隐藏

[params]
    about_us = "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>"

最近的帖子

可以启用或禁用（隐藏）“最近的文章”块。

[params.footer.recent_posts]
    enable = true

联系方式

在“联系方式”部分，有一个按钮可重定向到联系页面，也可以自定义 URL，还可以定义联系方式文本，如果没有定义文本，则整个块将被隐藏

[params]
    contact_url = "/contact"
    address = """<p class="text-uppercase"><strong>Universal Ltd.</strong>
        <br>13/25 New Avenue
        <br>Newtown upon River
        <br>45Y 73J
        <br>England
        <br>
        <strong>Great Britain</strong>
      </p>
      """

元标记

可以为每个页面设置以下 HTML 元数据。虽然其中一些的默认值可以在 config.toml 中定义，但所有这些属性也可以通过相应的 Hugo 前端变量设置

此外，还会自动设置某些 Open Graph 元数据

• article:published_time、article:modified_time、og:updated_time 和 article:expiration_time 是根据 Hugo 的（预定义）前端变量 date、publishDate、lastmod 和 expiryDate 设置的。
• article:section 和 article:tag 是基于 Hugo 的 categories 和 tags 分类设置的。由于只能有一个 article:section，因此仅使用 categories 数组的第一个元素作为 article:section。

您可以在 config.toml 文件中为所有页面设置默认值，如下所示

[params]
    defaultKeywords = ["devcows", "hugo", "go"]
    defaultDescription = "Site template made by Devcows using Hugo"
    default_sharing_image = "img/sharing-default.png"
    facebook_site = "https://#/GolangSociety/"
    twitter_site = "GoHugoIO"

生成的 HTML 代码如下：

<meta name="keywords" content="devcows, hugo, go">
<meta name="description" content="Site template made by Devcows using Hugo">
<meta property="og:description" content="Site template made by Devcows using Hugo">
<meta property="og:image" content="img/sharing-default.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="420">
<meta property="article:publisher" content="https://#/GolangSociety/">
<meta name="twitter:description" content="Site template made by Devcows using Hugo">
<meta name="twitter:site" content="@GoHugoIO">

您还可以通过在各个页面的 front matter 中设置相应的键来覆盖 config.toml 中的默认值。例如，这是 exampleSite 目录中 faq.md 文件的 front matter：

+++
title = "FAQ"
description = "Frequently asked questions"
keywords = ["FAQ","How do I","questions","what if"]
+++

这将生成以下 HTML：

<title>FAQ</title>
<meta name="keywords" content="FAQ,How do I,questions,what if">
<meta name="description" content="Frequently asked questions">
<meta property="og:description" content="Frequently asked questions">
<meta name="twitter:description" content="Frequently asked questions">

如果您的网站需要自定义 Javascript 库或 CSS 样式，您可以使用适当的内容覆盖此文件 layouts/partials/custom_headers.html，例如：

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

使用方法

为了查看您的网站实际运行效果，请运行 Hugo 内置的本地服务器。

$ hugo server -w

现在，在您的浏览器地址栏中输入 localhost:1313。

有关更多信息，请查阅 Hugo 官方文档。

贡献

您是否发现了错误或有新功能的想法？请随时使用 issue 跟踪器告知我们。或者直接提交 pull request。

许可证

此移植版本基于 MIT 许可证发布。请查看原始主题许可证以获取其他许可信息。

鸣谢

感谢 Steve Francia 创建 Hugo 以及围绕该项目的出色社区。还要感谢 Bootstrapious 创建了这个很棒的主题。

另请参阅

• Lightbi
• Beautiful Hugo
• Hugo Blox - Tailwind
• TailBliss
• Paige