代码

Question

我用静态HTML创建了一个单页网站，并具有闪亮的屏幕高度div和导航栏上的平滑滚动功能。预计该网站将包含简单的正文，一些图像和卡片组。一切都很好，我很高兴。

尽管我过去曾在非常简单的网站上使用过wagtail，但我无法找到一种方法来制作一个页面页面，该页面的首页位于顶部，然后是所有子页面。 Wagtail的页面模型可以做到这一点吗？

Answer 1

前一段时间，我通过将HomePage类的子页面呈现为该HomePage的一部分来完成了类似的工作。在涉及的各个位置进行了一些小的自定义（请参见下文）。也许最困难的部分是重写“节页面”的页面URL，以指向HomePage和此HomePage上的正确锚点（请参见下面的get_url_parts）。

我已经回收了wagtail页面类的内置in_menu，以生成包含相关部分的导航栏。

虽然我一直想抓住一切，但我希望没有任何相关的遗忘...

代码

models / pages.py

class HomePage(Page):
    """
    We only have one frontend page, on which we render child pages as subsections.
    """

    parent_page_types = [
        'wagtailcore.Page',
    ]
    # The following page types (here named "sections") are standard wagtail 
    # page models, but rendered on this HomePage.
    subpage_types = [
        'TextSection',
        'WhereSection',
        'ContactSection',
        ...
    ]

    # fields...
    # panels...

    def get_subsections(self):
        """
        Return page queryset with sections to render on the HomePage.
        """
        return (
            self
            .get_children()
            .specific()
            .live()
            .public()
        )

    def get_context(self, request):
        context = super().get_context(request)
        context['subsections'] = self.get_subsections()
        context['nav_sections'] = self.get_subsections().in_menu()
        return context

models / sections.py


class BaseSection(models.Model):
    """
    BaseSection abstract base class. All HomePage sections should inherit
    from this class.
    """

    parent_page_types = ['HomePage']
    subpage_types = []

    fields...
    panels...

    class Meta:
        abstract = True

    def get_url_parts(self,  request=None, *args, **kwargs):
        """
        Customising URL patterns for a page model
        http://docs.wagtail.io/en/latest/topics/pages.html#customising-url-patterns-for-a-page-model
        Rewrite page path to corresponding anchor of this section on the 
        containing page.
        """
        url_parts = super().get_url_parts(request=request)

        if url_parts is None:
            return None
        else:
            site_id, root_url, page_path = url_parts
            _cust_page_path = '#section-{}'.format(page_path.replace('/', ''))
            return (site_id, root_url, _cust_page_path)


class TextSection(BaseSection, Page):
    template = 'sections/text_section.html'

    body = RichTextField()

    content_panels = BaseSection.content_panels + [
        FieldPanel('body'),
    ]

class FooSection(BaseSection, Page):
    ...

其余工作通过模板层完成：遍历主页上的所有小节：

# templates/home_page.html

{% extends 'base.html' %}

{% block navbar %}
  {% include 'includes/navbar.html' %}
{% endblock navbar %}

{% block page_content %}
    {% for subsection in subsections.all %}
       {% with subsection.specific as subsection %}
          {% include subsection.template with subsection=subsection %}
        {% endwith %}
    {% endfor %}
{% endblock %}


# templates/includes/navbar.html
{% load wagtailroutablepage_tags %}
<nav>
  {% for item in nav_sections %}
        <a 
          href="{% if not is_homepage %}{% routablepageurl page 'homepage' %}{% endif %}#section-{{ item.slug }}"
        >
          {{ item.title }}
        </a>
  {% endfor %}
</nav>


# templates/sections/section_base.html

<section id="section-{{ subsection.slug }}" class="{{ subsection.content_type|slugify }}">
  {{ subsection.title }}
  {% block content %}
  {% endblock content %}
</section>


# templates/sections/text_section.html

{% extends 'sections/section_base.html' %}

{% block content %}
  {{ subsection.body|richtext }}
{% endblock content %}

Answer 2

如果要使用Django模板构建一页，则应该能够使用get_context()方法将页面列表传递到模板。

如果是SPA，则可以使用AJAX请求从内置的Wagtail API获取其他页面数据。如果它不能完全满足您的需求，您仍然可以使用以下方法构建自己的API： Django Rest Framework。

g单页网站

2 个答案:

代码

models / pages.py

models / sections.py