g单页网站 [英] Wagtail single-page site

问题描述

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

I made a single-page site in static HTML with shiny screen-height divs, and a smooth scrolling function from a navbar. The website is expected to have a mixture of simple body text, a few images, and a card-deck. It all worked nicely and I was happy.

虽然我过去在非常简单的网站上使用过wagtail，但我无法找到一种方法来制作单页网站，主页位于顶部，然后依次排列所有子页面。 Wagtail的页面模型可以做到这一点吗？

While I have used wagtail for very simple websites in the past, I cannot work out a way of making a single page site where the home page goes at the top followed by all the child pages in order. Is this possible with Wagtail's page models?

推荐答案

我前一阵子通过呈现 HomePage 类作为此 HomePage 的一部分。在涉及的各个位置进行了一些小的自定义（请参见下文）。也许最难的部分是重写节页面的页面URL，以指向 Home 和此 Home 上的正确锚点。 c $ c>（请参见以下 get_url_parts ）。

I've done something like this a while ago by rendering subpages of my HomePage class as section on this HomePage. There was some minor customization at various places involved (see below). Perhaps the hardest part was rewriting the page-urls of the "section pages" to point to the HomePage and the correct anchor on this HomePage (see below get_url_parts).

我已经回收了wagtail页面类的内置 in_menu 来生成带有/相关部分的导航栏。

I've recycled the wagtail page class build-in in_menu to generate a navbar with/to the relevant sections.

虽然我一直在尝试捕捉所有内容，但我希望没有任何相关的遗忘...

While I've been trying to catch everything, I hope nothing relevant has slipped my mind...

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

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):
    ...

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

The rest is done via the template layer: looping over all subsection on the homepage:

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

这篇关于g单页网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！