Hello,Hugo!

Posted on May 20, 2025

阅读 | 共240字，阅读约 2 分钟

创建新的站点

在cmd中（如果没有配置全局路径，在hugo.exe目录下使用该命令）使用命令

hugo new site yoursitename #yoursitename 是你的站点文件夹名称， 可以使用dev或自己起个名字

本地运行

hugo server -D
  • 常用参数
    • -D：包含处于草稿状态的文章（draft: true）。
    • -w：监听文件变化并自动刷新浏览器。
    • -b：指定基础 URL（如：-b http://localhost:8080）。

缓存清除

hugo -F --cleanDestinationDir

生成静态文件

hugo

  • 作用：将 Markdown 内容编译为静态 HTML 文件，输出到public/目录。

  • 常用参数

    • -d：指定输出目录（如：-d ./dist）。
    • -e：指定环境（如：-e production，影响配置文件加载）。
    • --minify：压缩 HTML、CSS、JS 等资源。

头文件

  • title：文章标题
  • description：副标题，简介
  • date：编写日期
  • image：文章最上方的图片
  • categories：分类
  • tags：标签
  • 分类和标签的内容可以是中文，可以多个，但需要采用[“xx”,“xx”]的格式

摘要

</!--more-->

置顶

weight: -100 # 权重越小越靠前

每页文章显示

[pagination]
	pagerSize = 5  # 全局每页显示5篇文章

Config Options 主题配置

Custom CSS 自定义CSS

可以通过 customcss config参数包含自定义CSS文件。

Note: CSS files should be placed under the assets directory e.g. assets/css/first.css.

注意：CSS文件应该放在 assets 目录下，例如 assets/css/first.css

[params]
	customcss = ["css/first.css", "css/second.css"]

提示标注

有五种不同类型的标注，包括这个主题的原始标注和自定义标注。这些标注与浅色和深色主题模式兼容。

Original 原始

This setup is to ensure backwards compatibility for previous callouts.这个步骤是为了确保对以前的标注的向后兼容性。

{/{< callout emoji="⚡️" text="Original callout." >}}
Alert 警报
{/{< callout type="alert" text="This is an alert callout." >}}
Custom 自定义

This include the ability to set your own callout emoji, title, and css style element.这包括设置自己的标注表情符号、标题和css样式元素的能力。

{/{< callout type="custom" emoji="⚡️" title="Custom callout" text="This is custom text for a custom callout." style="background-color: transparent; border: 3px solid #d340e0;" >}}
Tip 提示
{/{< callout type="tip" text="This is a tip callout." >}}
Warning 警告
{/{< callout type="warning" text="This is a warning callout." >}}

魔改

归类菜单标题匹配

terms.html

{{ define "main" }}
{{ if eq .Data.Plural "categories" }}
  <h1 class="page-title">Categories</h1>
{{ else }}
  <h1 class="page-title">All tags</h1>
{{ end }}

single.html

        <div class="title">
          <h1 class="title">{{ .Title }}</h1>
          <div class="meta">Posted on {{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
          <p>阅读&ensp;| <span class="post-date">共{{ .WordCount  }}字</span>，阅读约<span class="more-meta"> {{ .ReadingTime  }} 分钟</span></p>
        </div>