Hugo 主题

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

介绍

为 Hugo 设计的极简单页平滑滚动主题。

下载
Introduction

Hugo 的 Introduction 主题

Netlify Status Test Hugo versions Latest Release

Introduction 是一款极简主义、高度通用的 Hugo 主题。它可以配置为单页，也可以配置为具有多个部分的完整站点。它是多语言的、响应式的，并且包含浅色和深色主题。

Hugo 静态站点生成器的新手？在这里学习基本知识。

Device mockups

功能

  • 多语言 - 支持不同语言版本的并排内容
  • 来自 Markdown 文件的自定义索引页部分
  • 项目和博客部分
  • 页面加载淡入 CSS 效果和平滑滚动到锚链接
  • 通过 config.toml 进行直接自定义
  • 整个过程中都使用样式化的 Markdown，包括帖子标题
  • 语法高亮

对开发者友好

  • 包含 Sass 文件，借助 Hugo Pipes 和 PostCSS，可以即时编译为 CSS
  • Sass 变量的深思熟虑的使用使得创建新的配色方案变得容易

入门

需要 Hugo 的扩展版本。您可以在这里找到安装说明（建议使用最新版本）。这是一个用于下载特定 Hugo 版本的方便的 Bash 函数。

要更改主题 CSS，扩展的 Hugo 的 PostCSS 需要 JavaScript 包来编译样式。您将需要 postcss、postcss-cli 和 autoprefixer。使用 npm 全局安装这些。

npm i -g postcss postcss-cli autoprefixer

在此处了解如何安装和使用 npm。

注意：如果您将 Hugo 用作 snap 应用程序，则上述 Node.js 包必须在 exampleSite 中本地安装。

cd exampleSite/
npm i postcss postcss-cli autoprefixer

如果您看到类似以下的错误消息

Error: Error building site: POSTCSS: failed to transform "css/main.css" (text/css): resource "sass/sass/style..." not found in file cache

有关更多信息，请参见问题 #210。

获取主题

从您的 Hugo 站点的根目录运行

git clone https://github.com/victoriadrake/hugo-theme-introduction.git themes/introduction

或者，您可以将此存储库作为 git 子模块包含在内。如果您也以 git 管理 Hugo 站点，这将使其更容易更新此主题

git submodule add https://github.com/victoriadrake/hugo-theme-introduction.git themes/introduction

预览主题

Introduction 附带一个完全配置的示例站点。快速预览

cd exampleSite && HUGO_THEME="hugo-theme-introduction" hugo server --themesDir ../..

然后在您的浏览器中访问 https://127.0.0.1:1313/ 以查看示例站点。

添加内容

以下说明了如何将内容添加到您的 Hugo 站点。您可以在 exampleSite/ 文件夹中找到示例内容。

介绍部分

创建 index.md

hugo new home/index.md

title 前置信息将是第一个大标题。

index.md 的内容将显示为副标题行。

您可能需要在前置信息中将 headless 设置为 true。有关更多信息，请参见无头捆绑包。

主页

主页的内容位于 content/home/ 下。您可以添加任意数量的 markdown 格式文件。

每个 markdown 文件都将显示为主页上的一个部分，并且可以通过文件的前置信息中的 weight 值进行排序。您可以设置 image 以在部分的左侧显示图像。图像文件必须位于 content/home/ 文件夹中。

您可以通过创建 contact.md 添加联系方式部分

hugo new home/contact.md

这始终显示为主页上的最后一部分。

项目部分

Introduction 提供了一种轻松展示您项目的方式。每个项目甚至可以有自己的画廊，显示为图像轮播。

首先为项目部分创建一个索引文件

hugo new projects/_index.md

向文件添加一个 title 和一些可选内容。为排序项目部分添加一个可选的 weight。

要创建项目，请运行

hugo new projects/YourProjectName/index.md

您的新文件的前置信息包含一些注释，以帮助您配置项目。

您可以设置 external_link 使项目链接到另一个网站。

通过将图像文件放置在 YourProjectName/ 文件夹中，将图像添加到您的项目。如果您添加多张照片，它们将显示为轮播画廊。图像将按文件名排序。第一张图像将显示为项目预览图像。您可以通过向该资源的参数添加 weight 来更改图像的顺序

resources:
    - src: NameOfYourImage.jpg
      params:
          weight: -100
project_timeframe: "June-December"

您可以在项目的前置信息中添加一个 project_timeframe 参数，以选择在主页和模态框中显示任意字符串。

博客部分

为博客创建索引文件

hugo new blog/_index.md

为在您的主页上排序博客部分添加一个可选的 weight

使用以下命令创建一个新的博客文章

hugo new blog/YourEntryTitle.md

帖子也将显示在主页的“博客”部分。

配置您的站点

从 exampleSite/，将 config.toml 复制到您的 Hugo 站点的根文件夹，并根据需要更改字段。提供了有用的注释。

多语言

Introduction 目前支持多种语言。欢迎为其他语言翻译做出贡献。

要创建新的语言翻译，请将 .toml 文件添加到 i18n/ 文件夹。有关必要的字段，请参阅现有文件。

有关更多详细信息，请参阅 Hugo 文档。

Introduction 包含一个默认菜单。如果您想覆盖此菜单，可以通过在 config.toml 中定义 menu.main 来实现。

或者，您可以通过在 config.toml 中将 showMenu 设置为 false 来禁用此菜单。

联系方式部分时钟

Introduction 可以选择在您的联系方式部分显示您当前的本地时间。这使用 vanilla JS 和您提供的变量。您可以通过复制示例站点 config.toml 中 localTime、timeZone 和 timeFormat 的设置来设置此项。

Plausible

您可以通过在 config.toml 中设置 plausible = true 来轻松使用 Plausible.io 进行分析。Plausible 提供了 Google Analytics 的隐私友好替代方案。您需要拥有自己的 Plausible 帐户 - 更多信息请访问 plausible.io。

Google Analytics

在 config.toml 中设置 googleAnalytics 可以激活 Hugo 的内部 Google Analytics 模板。这支持 Google Analytics 3（通用分析）和 Google Analytics 4。Google Analytics 3 的跟踪 ID 格式为 ‘UA-PROPERTY_ID’，而 Google Analytics 4 的跟踪 ID 格式为 ‘G-MEASUREMENT_ID’。

Disqus

在 config.toml 中设置 disqusshortname 可以激活 Hugo 的内部 Disqus 模板。

自定义 CSS

您可以通过将自定义 CSS 文件放置在 assets/ 下，并将文件路径添加到 config.toml 中的 customCSS 列表中来添加自定义 CSS 文件。

自定义 JavaScript

您可以通过将自定义 JavaScript 文件放置在 assets/ 下，并将文件路径添加到 config.toml 中的 customJS 列表中来添加自定义 JavaScript 文件。

问题

如果您有问题或遇到困难，请提出问题以寻求帮助，并帮助后来者。您提供的详细信息越多越好！

贡献

欢迎对新翻译、修复和功能做出贡献。

如果没有其出色的开源贡献者社区，这个主题就不会如此出色。非常感谢！❤

许可证

版权所有 (C) 2017-2025 Victoria Drake

本作品依据 Apache License, Version 2.0 （“许可证”）授权；除非遵守许可证的条款，否则您不得使用此文件。您可以在 https://apache.ac.cn/licenses/LICENSE-2.0 获取许可证的副本。

除非适用法律要求或书面同意，根据本许可证分发的软件按“原样”分发，不附带任何明示或暗示的保证或条件。请参阅许可证，了解管辖权限和限制的具体语言。

另请参阅