你好，我是新来的w头，到目前为止真的很棒。但是，我在尝试创建formbuilder的模式版本时遇到问题。我的意图是在base.html中创建一个操作按钮，用户可以随时在该按钮上单击并输入模式弹出窗口以留下反馈。有没有办法做到这一点？
这非常可行，您需要通过找到合适的模态库来确定模态的外观和工作方式。
一旦有了，您将需要确定管理界面将如何提供在基础模板上使用哪个FormPage来呈现模态的设置。 g的site settings是个不错的选择。
从这里，您需要获取链接的表单并使用它的get_form()方法（所有扩展AbstractForm或AbstractEmailForm的页面都具有此形式）。如果您想了解表单的处理方式，可以查看代码here。
处理表单提交的最简单方法是将POST张贴到原始表单，这种方式无需在其他地方进行任何其他处理。您还可以按照正常方式获得“成功”页面，而无需在模态内部进行渲染。
下面是一个入门的基本代码示例。
# settings.py
INSTALLED_APPS += [
'wagtail.contrib.settings',
]
FormPage的关系，您将需要单独创建form page。makemigrations和migratefrom django.db import models
from wagtail.contrib.settings.models import BaseSetting, register_setting
from wagtail.admin.edit_handlers PageChooserPanel
# ... other models & imports
@register_setting
class MyAppSettings(BaseSetting):
# relationship to a single form page (one per site)
modal_form_page = models.ForeignKey(
'wagtailcore.Page',
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name='+',
verbose_name='Modal Form'
)
panels = [
# note the kwarg - this will only allow form pages to be selected (replace base with your app)
PageChooserPanel('modal_form_page', page_type='base.FormPage')
]
3a。将css添加到您的静态文件夹（例如my-app / static / css / micromodal.css）中，然后将其导入到中央标题或布局模板中。
<head>
<!-- ALL OTHER ITEMS -->
<!-- Modal CSS -->
<link href="{% static 'css/micromodal.css' %}" rel="stylesheet" type="text/css">
</head>
3b。在基本模板中添加JS＆init调用，最好将其作为关闭body标签
<!-- Modal JS -->
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
MicroModal.init();
});
</script>
base.html模板具有一种方便的方式来放置模态和模态触发器。 Django的template tags是执行此操作的好方法。# e.g. my-app/templatetags/modal_tags.py
from django import template
from bakerydemo.base.models import MyAppSettings
register = template.Library()
# reminder - you will need to restart Django when adding a template tag
@register.inclusion_tag('tags/form_modal.html', takes_context=True)
def form_modal(context):
request = context['request'] # important - you must have the request in context
settings = MyAppSettings.for_request(request)
form_page = settings.modal_form_page.specific
# this will provide the parts needed to render the form
# this does NOT handle the submission of the form - that still goes to the form page
# this does NOT handle anything to do with rendering the 'thank you' message
context['page'] = form_page
context['form'] = form_page.get_form(page=form_page, user=request.user)
return context
{% comment %} e.g. my-app/templates/tags/form_modal.html {% endcomment %}
{% load wagtailcore_tags %}
<button data-micromodal-trigger="modal-1">Open {{ page.title }} Modal</button>
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header class="modal__header">
<h2 class="modal__title" id="modal-1-title">
{{ page.title }}
</h2>
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
</header>
<form action="{% pageurl page %}" method="POST" role="form">
<main class="modal__content" id="modal-1-content">
{% csrf_token %}
{{ form.as_p }}
</main>
<footer class="modal__footer">
<input class="modal__btn modal__btn-primary" type="submit">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer>
{% form_modal %}
{% include "includes/footer.html" %}
</footer>