iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
Python

使用 Django 框架和 Wagtail,快速打造一個 CMS 網站系列 第 13

D13 - 在 footer 加上可以被編輯的區塊

  • 分享至 

  • xImage
  •  

在你的作品集頁腳中僅有社交媒體連結並不理想。你可以在頁腳中添加其他項目,如網站版權和版權通知。一種方法是使用 Wagtail 的 snippet 功能,在你的管理界面創建一個可編輯的頁腳文本,並在你網站的頁腳中顯示它。

要在管理界面添加一個頁腳文本 snippet,修改 base/models.py 文件成以下的樣子:

from django.db import models
from wagtail.admin.panels import (
    FieldPanel,
    MultiFieldPanel,

    # import PublishingPanel:
    PublishingPanel,
)

# import RichTextField:
from wagtail.fields import RichTextField

# import DraftStateMixin, PreviewableMixin, RevisionMixin, TranslatableMixin:
from wagtail.models import (
    DraftStateMixin,
    PreviewableMixin,
    RevisionMixin,
    TranslatableMixin,
)

from wagtail.contrib.settings.models import (
    BaseGenericSetting,
    register_setting,
)

# import register_snippet:
from wagtail.snippets.models import register_snippet

# ...keep the definition of the NavigationSettings model and add the FooterText model:
@register_snippet
class FooterText(
    DraftStateMixin,
    RevisionMixin,
    PreviewableMixin,
    TranslatableMixin,
    models.Model,
):

    body = RichTextField()

    panels = [
        FieldPanel("body"),
        PublishingPanel(),
    ]

    def __str__(self):
        return "Footer text"

    def get_preview_template(self, request, mode_name):
        return "base.html"

    def get_preview_context(self, request, mode_name):
        return {"footer_text": self.body}

    class Meta(TranslatableMixin.Meta):
        verbose_name_plural = "Footer Text"

在這個教程中,你將使用自定義模板標籤來顯示你的頁腳文本。

在你的 base 文件夾中,創建一個 templatetags 文件夾。在你新建的 templatetags 文件夾內,創建以下文件:

init.py

navigation_tags.py

讓你的 base/templatetags/init.py 文件保持空白,並在你的 base/templatetags/navigation_tags.py 文件中添加以下內容:

from django import template

from base.models import FooterText

register = template.Library()

@register.inclusion_tag("base/includes/footer_text.html", takes_context=True)
def get_footer_text(context):
    footer_text = context.get("footer_text", "")

    if not footer_text:
        instance = FooterText.objects.filter(live=True).first()
        footer_text = instance.body if instance else ""

    return {
        "footer_text": footer_text,
    }

在前面的代碼中,你導入了模板模組。你可以使用它來創建和渲染模板標籤和過濾器。此外,你從 base/models.py 文件中導入了 FooterText 模型。

register = template.Library() 創建了模板模組中 Library 類的一個實例。你可以使用這個實例來註冊自定義的模板標籤和過濾器。

@register.inclusion_tag("base/includes/footer_text.html", takes_context=True) 是一個裝飾器,註冊了一個名為 get_footer_text 的包含標籤。"base/includes/footer_text.html" 是你將用來渲染包含標籤的模板路徑。takes_context=True 表示你的 footer_text.html 模板的上下文將作為參數傳遞給你的包含標籤函數。

get_footer_text 包含標籤函數接受一個名為 context 的單一參數。context 代表你將使用標籤的模板上下文。

footer_text = context.get("footer_text", "") 嘗試使用鍵 footer_text 從上下文中檢索一個值。footer_text 變量存儲任何檢索到的值。如果上下文中沒有 footer_text 值,則變量存儲一個空字符串 ""。

get_footer_text 包含標籤函數中的 if 語句檢查上下文中是否存在 footer_text。如果不存在,if 語句將繼續從數據庫檢索 FooterText 的第一個已發布實例。如果找到了已發布的實例,語句將從中提取 body 內容。然而,如果沒有可用的已發布實例,它將默認為一個空字符串。

最後,函數返回一個包含 "footer_text" 鍵和檢索到的 footer_text 內容值的字典。在渲染你的 footer_text 模板時,你將使用這個字典作為上下文數據。

要使用返回的字典,請在你的 base 文件夾中創建一個 templates/base/includes 文件夾。然後在你的 base/templates/base/includes/ 文件夾中創建一個 footer_text.html 文件並添加以下內容:

{% load wagtailcore_tags %}

<div>
    {{ footer_text|richtext }}
</div>

將你的 footer_text 模板添加到頁腳中,通過修改你的 mysite/templates/includes/footer.html 文件來實現:

{# Load navigation_tags at the top of the file: #}
{% load navigation_tags %}

<footer>
    <p>Built with Wagtail</p>

    {% with twitter_url=settings.base.NavigationSettings.twitter_url github_url=settings.base.NavigationSettings.github_url mastodon_url=settings.base.NavigationSettings.mastodon_url %}
        {% if twitter_url or github_url or mastodon_url %}
            <p>
                Follow me on:
                {% if github_url %}
                    <a href="{{ github_url }}">GitHub</a>
                {% endif %}
                {% if twitter_url %}
                    <a href="{{ twitter_url }}">Twitter</a>
                {% endif %}
                {% if mastodon_url %}
                    <a href="{{ mastodon_url }}">Mastodon</a>
                {% endif %}
            </p>
        {% endif %}
    {% endwith %}

    {# Add footer_text: #}
    {% get_footer_text %}
</footer>

現在,重啟服務器並重新加載首頁。

👏 你的作品集網站現在在所有頁面上都有一個 footer。在下一部分,我們會寫如何設置一個網站 menu,用於連接到你的首頁和其他頁面


上一篇
D12 - 在頁面加上社交帳號連結 footer,並將 footer 擴展到所有頁面
下一篇
D14 - 網站導航欄 - 讓這些頁面都連結起來
系列文
使用 Django 框架和 Wagtail,快速打造一個 CMS 網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言