Wagtail单页面站点

Question

我用静态HTML制作了一个单页面站点，它具有闪亮的屏幕高度div，以及导航栏中平滑的滚动功能。该网站预计将有一个简单的正文，几个图像，和一个卡片组的混合。一切都很顺利，我很高兴。

虽然我过去在非常简单的网站上使用过wagtail，但我想不出一种方法来制作一个单页面网站，即首页在顶部，所有的子页面都按顺序排列。使用Wagtail的页面模型可以做到这一点吗？

Answer 1

不久前，我在此HomePage上将我的HomePage类的子页呈现为部分，从而完成了类似的操作。在不同的地方有一些小的定制(见下文)。也许最困难的部分是重写“部分页面”的页面urls，使其指向此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获取其他页面数据。如果它不能完全满足你的需求，你仍然可以用Django Rest Framework来构建你自己的应用程序接口。