Homeにブログリストを挿入したい

###やりたいこと
以下の写真のようなHomeにBlogListを挿入したいです。今のところ１ページずつ別でhtmlが存在しており、正常に動いています。blog_detail_pageというところからwagtailを使って、自動的にlisting_pageに反映しています。そこでlisting_page.htmlのコードをhome.htmlに転記した結果が以下の写真です。しかし、実際に反映されているのはテンプレートタグの影響がない部分のみで、影響がある部分については反映されていません。特にエラーも出ていないため、どう変えればいいのかわからず詰まってしまっています。解決のご協力お願いいたします。

###ためしたこと
modelのテンプレートHTMLをhomeにしたりしました。
ルーティングに問題があるのかと思い、そのあたりもいじりましたがこれといった変化はありませんでした。

###関係コード

python
1#blog/model.py
2
3from django.db import models
4from django.utils import timezone
5from django.contrib.auth.models import User
6from django.shortcuts import render
7from django import forms
8
9from wagtail.core.models import Page
10from wagtail.core.fields import RichTextField, StreamField, RichTextField
11from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel, MultiFieldPanel
12from wagtail.images.edit_handlers import ImageChooserPanel
13from wagtail.snippets.models import register_snippet
14from wagtail.contrib.routable_page.models import RoutablePageMixin, route
15
16from modelcluster.fields import ParentalKey, ParentalManyToManyField
17
18from streams import blocks
19
20class BlogListingPage(RoutablePageMixin,Page,models.Model):
21    template = "blog/blog_listing_page.html"
22    custom_title = models.CharField(
23        max_length=100,
24        blank=False,
25        null=False,
26        help_text="Overwrites the default title",
27    )
28    custom_subtitle = RichTextField(features=["bold", "italic"], default='test')
29    blog_image = models.ForeignKey(
30        "wagtailimages.Image",
31        null=True,
32        blank=False,
33        on_delete=models.SET_NULL,
34        related_name="+",
35    )
36    timestamp = models.DateTimeField(default=timezone.now)
37
38    content_panels = Page.content_panels + [
39        FieldPanel("custom_title"),
40        FieldPanel("custom_subtitle"),
41        ImageChooserPanel("blog_image"),
42        FieldPanel('timestamp')
43    ]
44
45    def get_context(self,request,*arg,**kwargs):
46        context=super().get_context(request,*arg,**kwargs)
47        context["posts"]=BlogDetailPage.objects.live().public()
48      #  context["categories"] = BlogCategory.objects.all()
49        return context
50
51    @route(r'^latest/?$', name="latest_posts")
52    def latest_blog_posts_only_shows_last_5(self, request, *args, **kwargs):
53        context = self.get_context(request, *args, **kwargs)
54        context["posts"] = context["posts"][:1]
55        return render(request, "blog/latest_posts.html", context)

python
1 from django.db import models
2
3from wagtail.core.models import Page, Orderable
4from wagtail.core.fields import RichTextField, StreamField
5
6from wagtail.admin.edit_handlers import (
7    FieldPanel,
8    MultiFieldPanel,
9    InlinePanel,
10    StreamFieldPanel,
11    PageChooserPanel,
12
13)
14from wagtail.images.edit_handlers import ImageChooserPanel
15from modelcluster.fields import ParentalKey
16
17from django.shortcuts import render
18from wagtail.contrib.routable_page.models import RoutablePageMixin, route
19from streams import blocks
20
21class HomePageCarouselImages(Orderable):
22    page = ParentalKey("home.HomePage", related_name="carousel_images")
23    carousel_image = models.ForeignKey(
24        "wagtailimages.Image",
25        null=True,
26        blank=False,
27        on_delete=models.SET_NULL,
28        related_name="+",
29    )
30
31
32    panels = [ImageChooserPanel("carousel_image")]
33
34class HomePage(RoutablePageMixin, Page):
35    """Home page model."""
36    template = "home/home_page.html"
37    max_count = 1
38    custom_title = models.CharField(max_length=100, blank=False, null=True)
39    custom_subtitle = RichTextField(features=["bold", "italic"])
40
41    content = StreamField(
42        [
43            ("title_and_text", blocks.TitleAndTextBlock()),
44            ("full_richtext", blocks.RichtextBlock()),
45            ("simple_richtext", blocks.SimpleRichtextBlock()),
46            ("cta", blocks.CTABlock()),
47        ],
48        null=True,
49        blank=True
50    )
51
52    content_panels = Page.content_panels + [
53        MultiFieldPanel(
54            [
55                FieldPanel("custom_title"),
56                FieldPanel("custom_subtitle"),
57            ],
58            heading="Banner Options",
59        ),
60        MultiFieldPanel(
61            [
62                InlinePanel("carousel_images", max_num=5, min_num=1, label="Image"),
63            ], heading="Carousel Images"
64        ),
65        MultiFieldPanel(
66            [
67                StreamFieldPanel("content"),
68            ], heading="Accordion text")
69        ]
70
71    @route(r'^subscribe/$')
72    def the_subscribe_page(self, request, *args, **kwargs):
73        context = self.get_context(request, *args, **kwargs)
74        return render(request, "home/subscribe.html", context)
75

html
1<!-- home_page.html -->
2
3 <div class id = "home-blog-list">
4                <div class="card-body text-center">
5                    <h4 class="card-title">News Updates</h4>
6                </div>
7                <ul class="list-style-none">
8                    {% for post in posts %}
9                    <div class="row mt-5 mb-5">
10                        <div class="post-preview">
11                            {% image post.blog_image fill-250x250 as blog_img %}
12                            <a href="{{ post.url }}">
13                                <img src="{{ blog_img.url }}" alt="{{ blog_img.alt }}">
14                            </a>
15                        </div>
16                        <li class="d-flex no-block card-body"> <i class="fa fa-check-circle w-30px m-t-5"></i>
17                            <div> <a href="{{ post.url }}" class="m-b-0 font-medium p-0" data-abc="true">{{ post.custom_title }}</a>
18                                <div class="text-muted">サマリー</div>
19                            </div>
20                            <div class="ml-auto">
21                                <div class="tetx-right">
22                                    <a href="{{ post.url }}" class="btn btn-primary mt-4">Read More</a>
23                                </div>
24                            </div>
25                        </li>
26                    {% endfor %}
27                        <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#blog-list">Older Posts →</a></div>
28                    </div>
29                </ul>
30        </div>

html
1<!-- blog_listing_page.html -->
2{% extends "base.html" %}
3
4{% load wagtailimages_tags wagtailroutablepage_tags%}
5
6{% block content %}
7 <a href="{% routablepageurl page "latest_posts" %}">View Latest Posts Only</a>
8<!--<h2>
9    Categories:
10    <small>
11        {% for cat in categories %}
12        <a href="?category={{ cat.slug }}">{{ cat.name }}</a>
13        {% if not forloop.last %}, {% endif %}
14        {% endfor %}
15    </small>
16</h2-->
17
18<div class="row d-flex justify-content-center mt-100 mb-100">
19    <div class="col-lg-6">
20        <div class="card-body text-center">
21            <h4 class="card-title m-b-0">News Updates</h4>
22        </div>
23        <ul class="list-style-none">
24            {% for post in posts %}
25            <div class="row mt-5 mb-5">
26                <div class="post-preview">
27                    {% image post.blog_image fill-250x250 as blog_img %}
28                    <a href="{{ post.url }}">
29                        <img src="{{ blog_img.url }}" alt="{{ blog_img.alt }}">
30                    </a>
31                </div>
32                <li class="d-flex no-block card-body"> <i class="fa fa-check-circle w-30px m-t-5"></i>
33                    <div> <a href="{{ post.url }}" class="m-b-0 font-medium p-0" data-abc="true">{{ post.custom_title }}</a>
34                        <div class="text-muted">サマリー</div>
35                    </div>
36                    {# @todo add a summary field to BlogDetailPage; make it a RichTextField with only Bold and Italic enabled. #}
37                    <div class="ml-auto">
38                        <div class="tetx-right">
39                            <a href="{{ post.url }}" class="btn btn-primary mt-4">Read More</a>
40                        </div>
41                    </div>
42                </li>
43                {% endfor %}
44                <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
45            </div>
46        </ul>
47    </div>
48</div>
49
50
51{% endblock content %}
52

###追記2
①home/modelsに以下を追加しました。
エラーは出ませんでしたが、特に変化もありませんでした。

python
1from blog.models import BlogDetailPage
2
3def news(request):
4        context = super().get_context(request, *arg, **kwargs)
5        context["posts"] = BlogDetailPage.objects.live().public()
6        return context

②以下を入れてみたりしましたが、エラーが出ました。

html
1{% include "blog_detail_page.html" %}

行動規範の内容に同意します

回答1件

自己解決

wagtailにブログのプラグインであるpuputをインストールによってこの問題を解決できるようですが、以下のような問題(Incorrect Padding)が発生いたしました。ご教授いただければ幸いです。

https://teratail.com/questions/345876

投稿2021/06/29 05:03

Kazuhiro-ch

総合スコア85

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Homeにブログリストを挿入したい

関連した質問