Hugo 主题

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

Lotus 文档

一个轻量级的、现代的 Hugo 文档主题

下载
Lotus Docs

Lotus 文档

Lotus 文档是一个易于更新和自定义的 Hugo 主题，用于构建快速、安全且对 SEO 友好的文档站点。

Lotus Docs Banner

查看演示站点 https://lotusdocs.dev/docs/ (同时也是 Lotus 文档的文档指南 📖)

🚧 警告 🚧 - Lotus 文档目前处于预发布开发阶段，因此不建议此时在生产环境中使用。但请务必尝试一下😊。非常欢迎提出 Pull Requests 和反馈。

特性

  • 现代文档布局
  • 响应式设计/移动支持
  • 快速、可访问且对 SEO 友好 (在 Google Lighthouse 上获得 4 个 💯 分！)
  • 默认安全
  • 基于 Bootstrap 5 构建
  • 部署在 GitHub Pages、GitLab Pages、Vercel、Netlify 或 Cloudflare Pages 上
  • 多语言支持 (i18n)
  • 通过 Prism.js 实现强大的语法高亮
  • 深色模式
  • 自定义字体（通过 Google Fonts）
  • 自定义图标（通过 Google Material Symbols）
  • 包含着陆页模板
  • 文档侧边栏菜单（带有可选图标）
  • 每页上的目录菜单（可选）
  • 可自定义的主题强调色
  • 社交媒体链接（Github、Twitter、Instagram 等）
  • 静态搜索插件选项（由 FlexSearch 提供支持，默认启用）
  • 支持 DocSearch
  • 自定义短代码 (PrismJS、Alerts、Tabs、Tables)
  • 分析 (Google Analytics v4, Plausible Analytics)
  • 通过 BrowserStack 进行跨浏览器测试
  • 反馈小部件
  • 由 KaTeX 驱动的数学公式
  • Mermaid 支持
  • Open Graph

入门

要求

  • Hugo Extended (最低版本：0.117.0)
  • git
  • Go (最低版本 v1.20)

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

Lotus 文档主题使用了 Hugo Bootstrap 模块。因此，有必要将您的站点初始化为 Hugo 模块。如果您的站点尚未初始化，请使用 hugo mod init 命令将您的站点初始化为 Hugo 模块

hugo mod init github.com/<username>/<your-hugo-site-name>

安装选项

可以使用以下方法之一安装 Lotus 文档主题

  • 作为 Hugo 模块1 (推荐)
  • 作为 Git 子模块
  • 在本地克隆主题文件

编辑 hugo.toml 配置文件，将 Lotus 文档主题和 Hugo Bootstrap 模块作为模块包含在内

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

[module]
    [[module.imports]]
        path = "github.com/colinwilson/lotusdocs"
        disable = false
    [[module.imports]]
        path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
        disable = false

作为 Git 子模块安装

从您的项目根目录运行以下 git 命令

git init
git submodule add https://github.com/colinwilson/lotusdocs themes/lotusdocs

编辑 hugo.toml 配置文件

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

[module]
    # uncomment line below for temporary local development of module
    # or when using a 'theme' as a git submodule
    replacements = "github.com/colinwilson/lotusdocs -> lotusdocs"
    [[module.imports]]
        path = "github.com/colinwilson/lotusdocs"
        disable = false
    [[module.imports]]
        path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
        disable = false

在本地安装

在某些情况下，您可能更喜欢自定义和维护 Lotus 文档主题。在这种情况下，请使用 git 将主题克隆到 themes/lotusdocs 目录

git clone https://github.com/colinwilson/lotusdocs themes/lotusdocs

编辑 hugo.toml 配置文件

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

[module]
    # uncomment line below for temporary local development of module,
    # when using a 'theme' as a git submodule or git cloned files
    replacements = "github.com/colinwilson/lotusdocs -> lotusdocs"
    [[module.imports]]
        path = "github.com/colinwilson/lotusdocs"
        disable = false
    [[module.imports]]
        path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
        disable = false

创建新内容

导航到您的 Hugo 项目的根目录，并使用 hugo new 命令在 content/docs 目录中创建一个文件

hugo new docs/example-page.md

这将创建一个名为 example-page.md 的 markdown 文件，其中包含以下默认的前置信息

---
title: "Example Page"
description: ""
icon: "article"
date: "2023-05-22T00:27:57+01:00"
lastmod: "2023-05-22T00:27:57+01:00"
draft: false
toc: true
weight: 999
---

修改上述前置信息选项以满足您的需求。

在本地预览您的站点

现在您已经创建了一些示例内容，您可以使用 hugo server 命令预览您的新 Lotus 文档站点

hugo server -D

导航到 localhost:1313/docs/，您应该看到一个指向先前创建的示例页面的卡片链接

New Lotus Docs Site - Example Content

作者

Colin Wilson

版权所有 © 2022-2023 Colin Wilson

  1. Hugo 模块 ↩︎

另请参阅