Golang新手求助：如何处理"Caption"标签的问题

Golang新手求助：如何处理"Caption"标签的问题 我正在使用Hugo构建一个网站。我使用了一个主题，但为了满足我的需求，我正尝试对这个主题进行一些微调。

我遇到的问题是为图片设置“标题”。

网站主题被分为两半，你可以在一边和另一边放置内容。在我的案例中，我想在左侧放置一张图片和文本，在右侧放置文本。然而，当我这样做时，本应作为标题的文本流向了右侧，而本应在右侧的文本则流到了图片下方（似乎是在另一个区域）。我想我可能遗漏了一个 <span> 标签或其他简单的东西，否则相关的代码应该能“继续”下去。

以下是相关的代码片段：

{{ with .GetPage "work-2" }}
{{.Params.custom_css | safeCSS}}

<div>
<div>
{{ with .Params.image }}
<div data-wow-duration="1.5s">
<img alt="about-me"> 
</div>
{{ end }}
<p>{{ with .Params.experience }}<br>
{{ if .enable }}</p>
<div data-wow-duration="1.5s">
<h6>{{ .caption }} </h6>
</div>
{{ end }}
{{ end }}
<p>{{ with .Params.skill }}<br>
{{ if .enable }}</p>
<div data-wow-duration="1.5s">
<h3>{{ .title }}</h3>
<h4>{{ .role | markdownify }}</h4>
<p>(code continues)</p>
</div>
</div>
</div>

更多关于Golang新手求助：如何处理"Caption"标签的问题的实战教程也可以访问 https://www.itying.com/category-94-b0.html

4 回复

不客气！ 微笑

更多关于Golang新手求助：如何处理"Caption"标签的问题的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


@christophberger 啊，谢谢。我发完帖子后意识到的另一件事是，我的问题出在HTML上，而不是Go上。不知何故，HTML在Index文件中需要以不同的方式格式化。

总之，感谢你提供的资源。

你好 @tc91，欢迎来到论坛。

Hugo 使用标准的 Go 模板，但模板的解析方式是 Hugo 特有的。因此，我认为你在 Hugo 论坛 更有可能得到答案。

从代码结构来看，问题确实是由HTML标签未正确闭合导致的。在Hugo模板中，.Params.image和.Params.experience的with块嵌套关系不明确，导致标题文本流向错误位置。以下是修正后的代码示例：

{{ with .GetPage "work-2" }}
{{.Params.custom_css | safeCSS}}

<div>
  <div>
    {{ with .Params.image }}
    <div data-wow-duration="1.5s">
      <img src="{{ . }}" alt="about-me">
      {{ with $.Params.experience }}
        {{ if .enable }}
        <div data-wow-duration="1.5s">
          <h6>{{ .caption }}</h6>
        </div>
        {{ end }}
      {{ end }}
    </div>
    {{ end }}
    
    {{ with .Params.skill }}
      {{ if .enable }}
      <div data-wow-duration="1.5s">
        <h3>{{ .title }}</h3>
        <h4>{{ .role | markdownify }}</h4>
        <p>(code continues)</p>
      </div>
      {{ end }}
    {{ end }}
  </div>
</div>
{{ end }}

关键修改：

  1. 将experience部分移到image的with块内部，确保标题与图片的关联
  2. 使用$.Params在嵌套的with块中访问上级变量
  3. 明确闭合所有div标签，确保布局结构正确

如果问题仍然存在，建议检查CSS样式表中对应容器的浮动（float）或弹性盒（flexbox）设置。

回到顶部