Question

我想知道如何通过以下方式修改简单的test.md文件的内容以用hugo生成.html-每个h3（###）和所有前面放入的代码，直到下一个h3。简而言之，我想将每个h3部分拆分为单独的标签，标题与h3标签相同。

test.md文件如下：

---
title: "Some title"
layout: test
---


## Title

### some content
lorem ipsum 1

### some content 2
lorem ipsum 2

### some content 3
lorem ipsum 3

所需的雨果输出如下：

<h2 id="title">Title</h1>
<div class="tabs">
  <div class="tab" id="some content">
    <h3 id="some-content">some content</h2>
    <p>lorem ipsum 1</p>
  </div>
  <div class="tab" id="some content">
    <h3 id="some-content-2">some content 2</h2>
    <p>lorem ipsum 2</p>
  </div>
  <div class="tab" id="some content">
    <h3 id="some-content-3">some content 3</h2>
    <p>lorem ipsum 3</p>
  </div>
</div>

如果可能的话，我想使用Hugo模板创建它，但是也可以使用一些JavaScript技巧。感谢您提供任何线索。

Answer 1

我有一个类似的功能要实现（仅使用Hugo，没有javascript），我必须在主题中定义一个Hugo partial template：

在themes/mytheme/layouts/partials/boxtext.html中：

{{ $paragraphs := split .Content "<h2 " }}

{{ range $index, $p := $paragraphs }}
    {{ $pp := trim $p " \n" }}
    {{ if (eq $index 0) }}
        {{ printf "%s\n" $pp | safeHTML }}
    {{ end }}
    {{ if and (ne $pp "") (gt $index 0) }}
    <div class="boxtext">
        {{ printf "<h2 %s\n" $pp | safeHTML }}
    </div>
    {{ end }}
{{end}}

（这不会产生您想要的输出：以split .Content "<h3 "而不是h2开头，以适应您的情况！）

实际上，要确定是否不会产生多余的行并保持紧凑，我必须将其重写为：

{{ $paragraphs := split .Content "<h2 " }}{{ range $index, $p := $paragraphs }}{{ $pp := trim $p " \n" }}{{ if (eq $index 0) }}{{ printf "%s\n" $pp | safeHTML }}{{ end }}{{ if and (ne $pp "") (gt $index 0) }}    <div class="boxtext">
        {{ printf "<h2 %s\n" $pp | safeHTML }}
    </div>{{ end }}{{end}}

然后，我的single.html模板页面的网站相关部分可以包装由{{ partial "boxtext.html" . }}产生的HTML代码

如：

> cat "themes/mytheme/layouts/mysection/single.html"
{{ define "main" }}

<body id="id1">
    <div id="top">
        <ul class="menu">
        </ul>
    </div>
    <div>
        <div id="header">
            <h1>{{.Title}}</h1>
        </div>
    </div>
    <div>{{ range .Resources }}{{ if .RelPermalink }}
      <li>azza2<a href="{{ .RelPermalink }}">{{ .ResourceType | title }}</a></li>{{ else }}
      <li>{{ .ResourceType | title }} (no link, only embedded in page)</li>{{ end }}{{ end }}
    </div>
    {{ partial "boxtext.html" . }}
</body>

雨果布局将H3内容拆分为div

1 个答案: