HUGO静态网站内容页面分栏布局实现方案咨询

选型建议 #

不用硬编码全量HTML，即使是无定期更新的静态站，用Hugo模板统一管理布局后续改起来更省事，仅需1次模板调整即可同步所有内容页，比逐个修改HTML效率高很多。

实现步骤 #

1. 新建专属内容页布局模板 #

在Hugo项目的layouts/_default/目录下新建single.html文件，作为所有内容页的通用模板，公共的头部、hero区域、页脚直接用Hugo的partial引入，避免重复代码：

<!-- 引入公共头部 -->
{{ partial "header.html" . }}
<!-- 引入公共hero区域 -->
{{ partial "hero.html" . }}

<!-- 主内容区开始 -->
<main class="content-container">
  <!-- 通栏标题区 -->
  <div class="page-title-wrap">
    <h1>{{ .Params.main_title }}</h1>
    <p class="subtitle">{{ .Params.subtitle }}</p>
  </div>

  <!-- 两栏布局区 -->
  <div class="two-column-wrap">
    <!-- 左侧正文区 65%宽 -->
    <div class="main-content">
      {{ .Content }}
    </div>
    <!-- 右侧侧边栏 30%宽 -->
    <div class="sidebar">
      {{ .Params.sidebar_content | safeHTML }}
    </div>
  </div>

  <!-- 可选的跨栏总结区，判断有内容才显示 -->
  {{ if .Params.summary }}
  <div class="full-width-summary">
    {{ .Params.summary | safeHTML }}
  </div>
  {{ end }}
</main>

<!-- 引入公共页脚 -->
{{ partial "footer.html" . }}

2. 补充基础布局CSS #

在你的全局CSS文件中添加以下样式，直接实现你需要的布局比例：

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-title-wrap {
  margin-bottom: 30px;
}
.subtitle {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}
.two-column-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 5%; /* 两栏间距5% */
}
.main-content {
  width: 65%;
}
.sidebar {
  width: 30%;
}
.full-width-summary {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

3. 编写内容页Markdown文件 #

在content/目录下新建对应页面的.md文件，注意Front Matter格式要正确，你之前报错大概率是Front Matter分隔符写错、语法不规范导致的，示例格式如下（用YAML格式更易上手，不容易写错）：

---
main_title: 页面大标题
subtitle: 这里是页面副标题
sidebar_content: |
  <img src="/images/xxx.jpg" alt="相关图片">
  <p><a href="/files/xxx.zip">下载资源</a></p>
  <p><a href="order链接">order</a></p>
summary: 这里是可选的跨栏总结内容，没有就删掉这行即可
---
这里是正文内容，直接用Markdown语法编写即可，会自动渲染到左侧65%宽度的正文区。

常见报错排查 #

之前拆分变量触发报错可优先检查3点：

• Front Matter的前后分隔符---必须单独占一行，前后不能有其他内容
• 模板里调用的变量名（比如.Params.main_title）要和.md文件里的变量名完全一致，区分大小写
• 如果变量内容里有HTML标签，调用时必须加| safeHTML过滤器，否则Hugo会自动转义HTML标签，也可能引发渲染异常

内容的提问来源于stack exchange，提问作者user16309325