Hugo 主题：Console

一个受系统控制台启发的极简且响应式 Hugo 主题，专为最佳性能而打造，平均页面加载时间低于一秒。

该主题基于现代且极简的 Terminal CSS 框架。

特性

快速性能：针对速度优化，加载时间低于一秒
响应式设计：在桌面、平板和移动设备上完美运行
控制台风格：简洁、类似终端的美学风格，搭配现代排版
照片画廊支持：内置画廊功能，用于照片集合
博客就绪：全面支持带有元数据的博文
易于定制：简单的配置和可扩展的设计
兼容 Hugo v0.146.0+：已更新以适配最新的 Hugo 模板系统

Console

实时演示

https://mrmierzejewski.com/hugo-theme-console/

安装

将主题作为 Git 子模块添加

从您的 Hugo 站点根目录运行以下命令，将主题克隆到 themes/hugo-theme-console：

$ git submodule add https://github.com/mrmierzejewski/hugo-theme-console.git themes/hugo-theme-console

请参阅 Hugo 文档以获取更多信息。

将主题作为 Hugo 模块添加

从您的 Hugo 站点根目录开始，通过运行以下命令将您的站点转换为 Hugo 模块：

$ hugo mod init github.com/my-username/my-new-site

接下来，将 Console 主题模块声明为您网站的依赖项。

$ hugo mod get github.com/mrmierzejewski/hugo-theme-console

最后，将此部分添加到您的配置文件中 hugo.toml：

[[module.imports]]
  path = "github.com/mrmierzejewski/hugo-theme-console"

配置

在您的配置文件中设置主题参数：

theme = "hugo-theme-console"

基本配置

在您的 hugo.toml 文件中添加以下参数以进行基本自定义：

[params]
  description = "Your site description"
  animateStyle = "animate-fade-up" # Animation style for content

[[params.navlinks]]
  name = "About"
  url = "/about/"

[[params.navlinks]]
  name = "Posts"
  url = "/posts/"

[[params.navlinks]]
  name = "Photos"
  url = "/photos/"

自定义样式

在你的主目录中添加 assets/css/custom.css。现在你可以覆盖默认样式，例如：


:root {
    --global-font-size: 16px;
    --global-font-color: #444;
    --mono-font-stack: Roboto Mono, Menlo, Monaco, Lucida Console,
        Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
        Courier New, monospace, serif;
    --font-stack: Roboto Mono, Menlo, Monaco, Lucida Console, Liberation Mono,
        DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
        serif;
    --global-line-height: 1.6em;
    --page-width: 70em;
    --display-h1-decoration: 1;
}

@media (prefers-color-scheme: dark) {
    :root {
	--background-color: #222225;
	--page-width: 60em;
	--font-color: #e8e9ed;
	--invert-font-color: #222225;
	--secondary-color: #a3abba;
	--tertiary-color: #a3abba;
	--primary-color: #62c4ff;
	--error-color: #ff3c74;
	--progress-bar-background: #3f3f44;
	--progress-bar-fill: #62c4ff;
	--code-bg-color: #3f3f44;
    }
}

@media (prefers-color-scheme: light) {
    :root {
	--background-color:#fff;
	--font-color:#151515;
	--invert-font-color:#fff;
	--primary-color:#1a95e0;
	--secondary-color:#727578;
	--error-color:#d20962;
	--progress-bar-background:#727578;
	--progress-bar-fill:#151515;
	--code-bg-color:#e8eff2;
    }
}

@media only screen and (max-width: 850px) {
    :root {
        --global-font-size: 14px;
        --global-font-color: #444;
        --global-line-height: 1.6em;
        --page-width: 70em;
    }
}

快速入门

安装完成后，查看 exampleSite 文件夹。该目录包含一个示例配置文件以及演示内容。

exampleSite
├── hugo.toml
├── content
│   ├── about
│   │   └── index.md
│   ├── photos
│   │   └── arizona-us
│   │       ├── arizona-us.jpg
│   │       └── index.md
│   └── posts
│       └── introduction
│           └── index.md
├── layouts
└── static

至少将 hugo.toml 复制到网站根目录。如有必要，覆盖现有的配置文件。

开发服务器

Hugo 包含一个开发服务器，因此您可以在进行更改时查看效果——非常实用。使用以下命令启动它：

hugo serve

现在你可以访问 http://localhost:1313，主题应该已经可见。

构建生产环境

要为生产环境构建你的站点：

hugo --minify

这将创建一个 public/ 目录，其中包含已优化并准备好部署的网站。

示例站点

要运行示例站点，请输入以下命令。

make hugo-server

模板系统升级

此主题已更新以兼容 Hugo v0.146.0 及新的模板系统。有关所做更改的详细信息，请参阅 TEMPLATE_UPGRADE.md。