使用 bootstrap v4.6 在 hugo 中创建模态答案

【问题标题】：Create a modal in hugo with bootstrap v4.6使用 bootstrap v4.6 在 hugo 中创建模态
【发布时间】：2021-12-29 18:44:27
【问题描述】：

我声明我不太熟悉网络编程，尤其是 Hugo 模板的工作原理，如果我使用了错误的术语，请见谅。我正在基于 Hugo 主题创建我的网站，我想做一些自定义。

确切地说，我想更改此主题的一部分的布局，使其成为灯箱样式，默认情况下，只有图像显示为画廊，在我的情况下，这将代表我想分享的单个项目在线，然后创建一个模式，当用户单击该部分中的一个图像时应该激活该模式。此模式应在左侧显示相同的图像，在右侧显示一些文本（项目标题、摘要和按钮链接）。

研究我发现这个主题使用 bootstrap v4.6.0，所以尽管我缺乏知识，但我创建了一个可重现的页面行为示例。

我无法分享我感兴趣的主题页面的代码，因为它是通过 hugo 代码呈现的列表页面，用于从保存在不同文件夹和不同 .md 的不同项目的 Yalm 中提取参数文件，所以它不会给出任何输出，除非我共享整个网站或主题，而且很遗憾我还没有在任何托管服务上部署我的网站。

下面是示例代码。目前我忽略了定义一种样式来制作我想要的模态布局，因为最重要的是让它与 hugo 代码一起工作。

<!DOCTYPE html>
<html>
<head>
    <title>Gallery Modal</title>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style type="text/css">

.img-responsive{
    margin: 8px;
    transition: 0.5s ease;
}   

.img-responsive:hover{
    box-shadow: 4px 5px 5px 4px #888888;
    border-radius: 10px;
}

.heading{
    text-align: center;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
   
}

.btn-info{
    transition: 0.5s ease-in-out;
    letter-spacing: 2px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 15px;
  bottom: 0;
}
p{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-align: left;
  margin-top: 1rem;
}

.modal-body img {
  max-width: 100%;
  height: auto;
}

.modal-body button {
  margin-top: auto;
}



</style>

<body>

  <div class="container">
    <h2 class="heading">Portfolio</h2>  
    <div class="row">

      <div class="col-md-4">
        <a href=""  data-toggle="modal" data-target="#myModal-1">
          <div>
            <img src="https://images.unsplash.com/photo-1497206365907-f5e630693df0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" class="img-responsive img-rounded" width="100%" height="100%">
          </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="myModal-1" role="dialog">
          <div class="modal-dialog modal-lg">
          
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header" style="border-bottom: none; height: 1rem;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body" style="display: flex; flex-wrap: wrap;">

                <div style="max-width: 50%;">
                  <img src="https://images.unsplash.com/photo-1497206365907-f5e630693df0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80">
                </div>
                
                <div style="display: flex; flex-direction: column; width: 50%; padding-left: 2rem; align-items: center;">
                  <h2 class="modal-title">Project Title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                  <button type="button" class="btn btn-info" data-dismiss="modal">View Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <a href=""  data-toggle="modal" data-target="#myModal-2">
          <div>
            <img src="https://images.unsplash.com/photo-1589656966895-2f33e7653819?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="img-responsive img-rounded" width="100%" height="100%">
          </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="myModal-2" role="dialog">
          <div class="modal-dialog modal-lg">
          
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header" style="border-bottom: none; height: 1rem;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body" style="display: flex; flex-wrap: wrap;">

                <div style="max-width: 50%;">
                  <img src="https://images.unsplash.com/photo-1589656966895-2f33e7653819?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
                </div>
                
                <div style="display: flex; flex-direction: column; width: 50%; padding-left: 2rem; align-items: center;">
                  <h2 class="modal-title">Project Title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                  <button type="button" class="btn btn-info" data-dismiss="modal">View Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <a href=""  data-toggle="modal" data-target="#myModal-3">
          <div>
            <img src="https://images.unsplash.com/photo-1591824438708-ce405f36ba3d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" class="img-responsive img-rounded" width="100%" height="100%">
          </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="myModal-3" role="dialog">
          <div class="modal-dialog modal-lg">
          
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header" style="border-bottom: none; height: 1rem;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body" style="display: flex; flex-wrap: wrap;">

                <div style="max-width: 50%;">
                  <img src="https://images.unsplash.com/photo-1591824438708-ce405f36ba3d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
                </div>
                
                <div style="display: flex; flex-direction: column; width: 50%; padding-left: 2rem; align-items: center;">
                  <h2 class="modal-title">Project Title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                  <button type="button" class="btn btn-info" data-dismiss="modal">View Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <a href=""  data-toggle="modal" data-target="#myModal-4">
          <div>
            <img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" class="img-responsive img-rounded" width="100%" height="100%">
          </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="myModal-4" role="dialog">
          <div class="modal-dialog modal-lg">
          
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header" style="border-bottom: none; height: 1rem;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body" style="display: flex; flex-wrap: wrap;">

                <div style="max-width: 50%;">
                  <img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
                </div>
                
                <div style="display: flex; flex-direction: column; width: 50%; padding-left: 2rem; align-items: center;">
                  <h2 class="modal-title">Project Title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                  <button type="button" class="btn btn-info" data-dismiss="modal">View Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="col-md-4">
        <a href=""  data-toggle="modal" data-target="#myModal-5">
          <div>
            <img src="https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" class="img-responsive img-rounded" width="100%" height="100%">
          </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="myModal-5" role="dialog">
          <div class="modal-dialog modal-lg">
          
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header" style="border-bottom: none; height: 1rem;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body" style="display: flex; flex-wrap: wrap;">

                <div style="max-width: 50%;">
                  <img src="https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80">
                </div>
                
                <div style="display: flex; flex-direction: column; width: 50%; padding-left: 2rem; align-items: center;">
                  <h2 class="modal-title">Project Title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                  <button type="button" class="btn btn-info" data-dismiss="modal">View Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="col-md-4">
        <a href=""  data-toggle="modal" data-target="#myModal-6">
          <div>
            <img src="https://images.unsplash.com/photo-1484406566174-9da000fda645?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80" class="img-responsive img-rounded" width="100%" height="100%">
          </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="myModal-6" role="dialog">
          <div class="modal-dialog modal-lg">
          
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header" style="border-bottom: none; height: 1rem;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body" style="display: flex; flex-wrap: wrap;">

                <div style="max-width: 50%;">
                  <img src="https://images.unsplash.com/photo-1484406566174-9da000fda645?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80">
                </div>
                
                <div style="display: flex; flex-direction: column; width: 50%; padding-left: 2rem; align-items: center;">
                  <h2 class="modal-title">Project Title</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                  <button type="button" class="btn btn-info" data-dismiss="modal">View Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>






      </div>
    </div>
  </div>
</body>
</html>

如您所见，仅使用 html 您需要为每个图像创建一个模态，但在 Hugo 模板中这应该迭代完成。我不知道如何告诉 Hugo，对于每张图片，点击后出现的 modal 必须显示该相关项目的信息（图片、标题、摘要和按钮的链接）。

到目前为止，我已经设法通过使用使图像正常工作

{{ $item := .item }}
{{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
    
{{ with $resource }}
{{ $image := .Resize "600x" }}
<img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}">
{{ end }}

但我不能对文本做同样的事情。

我知道我可以直接询问主题的创建者，正如他们在之前的 cmets 中所建议的那样，但是如果有人可以帮助我，即使是一个笼统的例子，我也会很高兴。

编辑：

网站结构如下：

.
├── assets
├── config
├── content/
│   ├── home/
│   │   ├── index.md
│   │   ├── widget1.md
│   │   ├── portfolio.md
│   │   └── other-widjets.md
│   └── project/
│       ├── project1/
│       │   ├── index.md
│       │   └── featured.png
│       ├── project2/
│       │   ├── index.md
│       │   └── featured.jpg
│       └── other-projects
├── data
├── layouts/ (to override the layout of themes)
│   ├── _default
│   ├── partials/
│   │   ├── widgets/
│   │   │   └── portfolio.html (it uses view/masonry.html to list projects)
│   │   └── views/
│   │       ├── masonry.html (for potfolio.html, I'M CUSTOMIZING IT)
│   │       └── other-views.html
│   ├── project/
│   │   └── single.html (layout for project/index.md)
│   └── other-folders-and-files
├── other-folders
└── themes

如果有帮助，这些是主题中默认使用的 html 文件的布局：

在portfolio.md 文件的yalm/frontmatter 中定义了参数view: '3'，它调用了布局views/masonry.html

相反，为单个项目考虑的参数，然后显示在砌体中，是

---
title: Project Title
summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

# Featured image
# To use, add an image named `featured.jpg/png` to your page's folder.
image:
   caption: example of a caption

# Button
links:
- name: View Project
  url: http://example.org
---

Project contents ...

我认为，为了使模式工作，有必要通过 Hugo 代码指定使用标签内的 data-target 和 id 属性的引用 <a href="" data-toggle="modal" data-target="#myModal-1"> 和 @分别为987654333@

例如，考虑到第一张图片和各自的模态，它们有共同的参考myModal-1：

      <div class="col-md-4">
        <a href=""  data-toggle="modal" data-target="#myModal-1">
          <div>
            <img src="..." class="img-responsive img-rounded" width="100%" height="100%">
          </div>
        </a>

        <!-- Modal -->
        <div class="modal fade" id="myModal-1" role="dialog">
          <div class="modal-dialog modal-lg">
          
            <!-- Modal content-->
            <div class="modal-content">

            </div>
          </div>
        </div>
      </div>

【问题讨论】：

所以，这本身不是雨果问题。您正在大量编辑主题以添加功能。问题是在他们的问题/讨论板上的主题创建者。 IE。 “我想要你的主题中的这个功能，我该怎么做/你能做到吗？”有道理？回答您的问题的唯一方法是下载 Academic 并按照您所说的去做，然后想出一个解决方案来添加它。由于您措辞和请求帮助的方式（即调试您的代码），您可能无法得到答案......我并不是说这是粗鲁的，而是为了帮助提出更好的问题，不是吗？
感谢您的回答，如果我写得这么晚，我深表歉意。正如您正确地向我指出的那样，最好直接向主题开发人员提出问题。我认为没有必要下载模板来解决我的问题，并且我得到的输出只是在定义标签内的属性时对雨果代码的错误/疏忽，因此不会使 javascript 工作。无论如何感谢您的建议。
啊，Kechiring...我可以提个建议吗？您为什么不编辑您的问题以询问您在此评论中的内容？这是一个可以回答的问题......即在标签内定义属性（我的意思是，让它比这更清楚......）但是你可以得到帮助......
我希望现在还不算晚，但是我尝试编辑我的帖子，提供可重现的示例代码并更好地解释问题。这几天我做了一些更详细的研究，我发现学术主题使用引导程序，默认情况下它提供了一个我可以使用的模态组件，而不是从头开始创建一个并犯错误......我很抱歉不是很清楚。

标签： html jquery css hugo

【解决方案1】：

需要更多信息，但为了对话，我将把你的帖子提炼成这个问题： “如您所见，仅使用 html 您需要为每个图像创建一个模态，但是在 Hugo 模板中，这应该迭代地完成。我不知道如何告诉 Hugo 对于每个图像，模态出现在点击必须显示该相关项目的信息（图片、标题、摘要和按钮的链接）。"

我知道的三种方法：

数据文件
markdown 前端问题 2a。每个图像都有自己的降价文件。或 2b。如果它们是其他层次结构，那么就是 Markdown 文件中的图像层次结构。

对于数据文件，创建一个 json/toml/yaml 文件 - 但它在 Hugo 的 Data 文件夹中。

然后，您可以使用标准语法对图像进行范围：
（文档中的示例）
data/jazz/bass/jacopastorius.toml （文件内容示例：

{  
  "discography": [  
      "1974 - Jaco",  
   ]  
}

data/jazz/bass/johnpatitucci.toml 如何访问 toml 文件中的信息

{{ range $.Site.Data.jazz.bass }}  
   {{ partial "artist.html" . }} <- Takes the info from your TOML and makes it accesible to your partial  
{{ end }}

因此，您将拥有图像路径及其元数据，而不是爵士音乐家。
该部分内容将包含您提到的关于引导程序的代码。
如果这成为您的下一个问题：“点”“。”最后通过上下文。这意味着在您的部分中，您可以访问您所在的任何上下文的上下文。因此在上面的示例中，您可以从部分访问 .discography。明白了吗？

你会在前面做类似的事情，但你可以从文档中弄清楚。

如果有帮助，请告诉我。

如果您想要我认为非常有用的文档页面（比我的解释更重要）：https://gohugo.io/templates/data-templates/

您也可以通过页面或其他方法执行此操作，但我会，嗯，我不知道这些图像与其他事物或您的站点层次结构有何关系，但如果您尝试使用上述方法，则上述方法是可行的，将有助于更多地了解 Hugo，我相信您可以提出更具体的解决方案。

注意：如果您要为各种降价页面获取此图像，则设置 .Site.Pages 变量的范围，并使用 where 语句来获取所需的特定降价页面。

阿拉：

{{ range where .Site.Pages ".Params.images" "WHATEVER VALUE HERE" }}
  {{.items }} <- just an example, I'm unsure of what specific front matter you would need.
{{ end }}

【讨论】：

感谢您的回答和耐心等待。我已经考虑过您从单个项目的前端提取数据的建议，但我认为要使模态正常工作，您需要在标签属性data-target 和`id` 中使用合适的ugo 代码。没错，我重新编辑了我的帖子，以提供有关主题结构的更多信息，并解释了我忘记提及的标签属性中的引用问题。