Javascript Hugo版面将h3内容拆分为div_Javascript_Hugo

Javascript Hugo版面将h3内容拆分为div

javascript

Javascript Hugo版面将h3内容拆分为div,javascript,hugo,Javascript,Hugo,我想知道如何通过以下方式修改simple 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 ### so

我想知道如何通过以下方式修改simple 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

所需的hugo输出如下所示：

<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>

标题
一些内容
同侧眼底1
部分内容2
同侧视野2
部分内容3
同侧视野3

如果可能的话，我想使用Hugo模板创建这个，但是一些javascript技巧也是可以接受的。谢谢你提供的线索。

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

在

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}}

然后，我的

single.html

模板页面我的站点的相关部分可以包装生成的html代码：

{{partial“boxtext.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>

>cat“themes/myteme/layouts/mysection/single.html”
{{define“main”}


{{.Title}
{{range.Resources}{{if.RelPermalink}}
azza2{else}
{{.ResourceType | title}（无链接，仅嵌入页面）{{end}}{{end}}
{{partial“boxtext.html”。}

我也有类似的问题。我只想为一个子页面将我的内容分成两部分，并在两部分之间插入一些javascript计算器。我设法在底部或{.Content}之前插入计算器，但不在两者之间。感谢您的帮助！：）

> 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>