Hugo 主题

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

Dot-Org

这个现代、易访问、高性能的主题非常适合为小型组织的网站提供支持

下载
Dot-Org

用于 Hugo 的 Dot-Org 主题

这款 Hugo 主题非常适合为小型组织的网站提供支持。它最初是为 TODO Group 构建的，具有以下优点

  • 现代 - 简洁而有效的现代设计
  • 易访问 - 设计和标记符合 WCAG 2.1 AA 指南
  • 高性能 - 从头开始编写 HTML/CSS/JS，使其尽可能快，而不依赖于框架或库
  • 多语言 - 准备支持多种语言的内容
  • 大型菜单 - 带有下拉部分的大型菜单
  • FAQ 手风琴 - 带有手风琴结构的 FAQ 页面
  • 搜索 - 已集成 PageFind 搜索

查看演示站点

安装

有两种主要方法可以将此主题安装到现有的 Hugo 站点

1) 下载它

在您的 Hugo 站点的文件夹中，运行

git clone https://github.com/cncf/dot-org-hugo-theme themes/dot-org-hugo-theme

这会从 GitHub 下载存储库，并将内容放入您的主题文件夹中。

要将您的主题更新到未来的版本

cd themes/dot-org-hugo-theme
git pull

2) 使用 git 子模块

在您的 Hugo 站点的文件夹中，运行

git submodule add https://github.com/cncf/dot-org-hugo-theme.git themes/dot-org-hugo-theme

这会从 GitHub 下载存储库，并将内容作为 git 子模块放入您的主题文件夹中。

要将您的主题更新到未来的版本

git submodule update --remote --merge

安装依赖项

将（至少）以下文件从主题的 exampleSite 复制到项目的根文件夹。

  • themes/dot-org-hugo-theme/exampleSite/package.json
  • themes/dot-org-hugo-theme/exampleSite/postcss.config.js

为了方便起见，您可以从命令行运行

cp themes/dot-org-hugo-theme/exampleSite/package.json .
cp themes/dot-org-hugo-theme/exampleSite/postcss.config.js .

我们建议使用配置目录方法来替换您的 config.toml 或 hugo.toml 文件。要快速使用默认配置启动并运行，您可以将以下文件夹复制到站点的根目录

  • themes/dot-org-hugo-theme/exampleSite/config/

从项目根目录中的命令行，您可以运行以下命令将主题的 exampleSite 配置复制到您的项目

cp -r themes/dot-org-hugo-theme/exampleSite/config ./config

之后，运行此命令以安装依赖项（需要 node.js）。

npm install

然后，您可以使用以下命令运行本地服务器

npm run start

或者您可以使用以下命令构建您的站点

npm run build

配置文件

有关示例配置文件，请参阅 /exampleSite/config/。

您应该复制这些文件或将它们与您现有的配置合并。

自定义 front matter

我们创建了自定义 front matter，以便在 markdown 文件中使用

隐藏页面标题/文章标题 

showHeader: false

向页面添加 noindex 

noindex: true

搜索索引

Pagefind 可用于搜索您站点的内容。我们在主题中包含一个已设置好的 search.html。也可以使用短代码将搜索和结果 UI 插入到任何页面中。要使 Pagefind 工作，必须从 public 目录中的文件构建 pagefind 索引。首先，请确保您的站点已构建，然后安装 pagefind 并为站点编制索引

npm run build
npx -y pagefind --site public

每次更新内容时，都需要再次运行 npx -y pagefind --site public 来更新搜索索引，因此这应该是您部署过程的一部分。

自定义短代码

您可以使用我们的自定义短代码在 markdown 中快速设置网站的样式。由于 Hugo 处理嵌套内容（尤其是嵌套短代码）的方式，您可能会发现作为其他短代码子元素的短代码无法按预期呈现。如果您的站点发生这种情况，通常可以通过允许 Hugo 呈现“不安全”的 HTML 来解决。将以下内容添加到您的配置 YAML 文件中

markup:
  goldmark:
    renderer:
      unsafe: true

按钮

有一个按钮可以随时插入 markdown 文件中

{{< button link="/path/to/page" text="Default Button" >}}

{{< button link="/path/to/page" style="secondary" text="Secondary Button" >}}

{{< button link="/path/to/page" style="tertiary" text="Tertiary Button" >}}

选项

  • link # (必需) 按钮链接
  • text # (必需) 按钮文本
  • style # (可选) secondary、tertiary

卡片

一个带边框的框，可用于突出显示信息或用于包装列表元素。

{{< cards count=2 >}}
{{< card >}}
## Special Feature 1
Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo
{{< spacer >}}
[Download](#)
{{< /card >}}
{{< card >}}
## Special Feature 2
Lorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo
{{< spacer >}}
[About us](#)
{{< /card >}}
{{< /cards >}}

选项

  • count # (可选) 桌面上的列数；2,3,4。默认值：3。

列

响应式列结构。

{{< columns >}}
{{< column >}}
Column 1
{{< /column >}}
{{< column >}}
Column 2
{{< /column >}}
{{< /columns >}}

选项

  • count # (可选) 桌面上的列数；2,3,4。默认值：3。

当前年份

使用此短代码轻松插入当前年份

{{< current_year >}}

适用于版权声明和常青博客内容。

iFrame

插入带有您所需内容的 iFrame。

{{< iframe title="My slides" src="https://www.slideshare.net/slideshow/embed_code/key/vTNvkwIXN4pmr8" >}}

选项

  • src # (必需) 要显示的页面
  • width # (可选)
  • height # (可选)
  • title # (可选) iframe 的标题，以便于访问
  • loading # (可选) 默认为 lazy

图片

插入比标准 Hugo 语法更高级的图像格式。

{{< img src="/img/blog/image-name.png" >}}

选项

  • src # (必需) 图像链接
  • alt # (可选) 描述图像，默认为文件名
  • width # (可选) 推荐
  • height # (可选) 推荐
  • caption # (可选) 接受 Markdown 语法
  • loading # (可选) 默认为 lazy，首屏使用 eager

简介

将段落格式化为更大的文本，适合作为页面顶部的介绍段落。

{{< intro >}}
Paragraph text...
{{< /intro >}}

换行

有时 Markdown 会将段落堆积在一起。您可以使用换行 shortcode 强制换行。

{{< br >}}

响应式表格

使用此 shortcode 包裹您的较大表格，以便它们在移动设备上溢出

{{< responsive_table >}}
| Option | Option | Description |
| ------ | ------ | ----------- |
| one    | data   | path to data files to supply the data that will be passed into templates. |
| two    | engine | engine to be used for processing templates. Handlebars is the default. |
| three  | ext    | extension to be used for dest files. |
{{< /responsive_table >}}

搜索表单

用于查询 pagefind 索引并显示结果的搜索表单。

{{< search_form >}}

间隔

间隔对于在页面上分隔内容很有用。默认情况下，我们的间隔会插入一个 50px 高度的空间。我们的间隔是响应式的，因此在移动设备上，该值会减少 50%（即 50px 的空间变为 25px 的空间）。

{{< spacer >}}

{{< spacer 100 >}}

目录 (TOC)

自动在页面中插入目录。会获取页面上所有 H2 元素。

{{< toc >}}

增强型 YouTube

一个隐私友好且快速的 YouTube 嵌入。

{{< youtube_enhanced id="9oVr7rrNZVI" >}}

对于嵌入播放列表，必须提及单个视频 ID，因为播放列表没有缩略图。

{{< youtube_enhanced id="xPSXtoJNGLs" title="Play Videos from Kubecon" playlistid="PLj6h78yzYM2PyrvCoOii4rAopBswfz1p7" >}}

选项

  • id # (必需)
  • title # (可选) 默认为“播放视频”
  • playlistid # (可选) 您的播放列表 ID
  • autoload # (可选) 默认为 false
  • start # (可选) 以秒为单位的开始时间，默认为 0

设置本地实例以改进此主题

如果您想为此主题为每个人创建改进，请按照这些说明启动 exampleSite。

git clone https://github.com/cncf/dot-org-hugo-theme.git
cd dot-org-hugo-theme/exampleSite
npm install
npm run dev:start

用于使用本地实例的其他 npm 命令

  • npm run dev:start - 使用 exampleSite 启动本地开发环境
  • npm run dev:start:with-pagefind - 使用带有可用 pagefind 搜索的 exampleSite 启动本地开发环境
  • npm run dev:build - 使用 exampleSite 构建站点

展示

查看一些正在使用 Dot-Org for Hugo 主题的主题

  • 待办事项组
  • DeepCausality
  • ModSecurity
  • 东北大学网络防御联盟
  • OWASP® CRS
  • 硬件城
  • k8up

另请参阅