菜单中的 Django CMS 图标

Question

我正试图在导航中显示我上传的图标，但我想我走错了路。

这是我扩展的模型

class IconExtension(PageExtension):
    image = models.ImageField(upload_to='icons')


extension_pool.register(IconExtension)

这是我的 cms_toolbars.py 文件

@toolbar_pool.register
class IconExtensionToolbar(ExtensionToolbar):
    # defines the model for the current toolbar
    model = IconExtension

    def populate(self):
        # setup the extension toolbar with permissions and sanity checks
        current_page_menu = self._setup_extension_toolbar()

        # if it's all ok
        if current_page_menu:
            # retrieves the instance of the current extension (if any) and the toolbar item URL
            page_extension, url = self.get_page_extension_admin()
            if url:
                # adds a toolbar item in position 0 (at the top of the menu)
                current_page_menu.add_modal_item(_('Page Icon'), url=url,
                    disabled=not self.toolbar.edit_mode_active, position=0)

这是我的 menu.html 文件

{% load menu_tags %}

{% for child in children %}
<li class="child{% if child.selected %} selected{% endif %}{% if child.ancestor %} ancestor{% endif %}{% if child.sibling %} sibling{% endif %}{% if child.descendant %} descendant{% endif %}">
    <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}
    <img src="{{ child.image.url }}">
  </a>
    {% if child.children %}
    <ul>
        {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
    </ul>
    {% endif %}
</li>
{% endfor %}

我不明白为什么它不工作，我没有看到任何错误，即使我在这里没有看到任何图像 url，我的一切工作正常，只是遇到显示菜单图标的问题, 在这种情况下有人可以帮助我吗？

Answer 1

看起来您只是缺少页面中对象的引用，您将直接访问它的属性。

我有一个与页面关联的图像非常相似的设置；

class PageImage(PageExtension):
    """ Add images to pages """
    image = models.FileField(
        verbose_name=_("Image"),
        upload_to=upload_to('page_images')
    )

在我的模板中变成了；

{% if request.current_page.pageimage.image %}
    {{ request.current_page.pageimage.image.url }}
{% endif %}

因此，在您的示例中，如果您在模板中这样做，您会这样做；

{% if request.current_page.iconextension %}
    <img src="{{ request.current_page.iconextension.image.url }}">
{% endif %}

检查扩展名是否存在对于避免属性错误等很重要

在菜单中，child 不是 Page 对象，而是来自菜单系统的 NavigationNode。所以它没有你的扩展名。

我认为正确的解决方案是设置导航 Modifier。相关文档在这里； http://docs.django-cms.org/en/latest/how_to/menus.html#navigation-modifiers

或者你可以设置一个模板标签，你传递你的 child 然后可以使用 reverse_id 属性查询数据库中对应的 Page，并且 return 该页面的 iconextension。这个方法我用过

Answer 2

基于@markwalker_ 的回答。我通过 3 个步骤成功完成了这项工作

第 1 步 - 在页面扩展中添加 FontAwesomeField : https://docs.django-cms.org/en/latest/how_to/extending_page_title.html

记录在案的是我的代码：在models.py

from django.db import models

# Create your models here.
from cms.extensions import PageExtension
from cms.extensions.extension_pool import extension_pool


class IconExtension(PageExtension):
    image = models.ImageField(upload_to='icons', null=True, blank=True)
    fontawesomeicon = models.CharField(max_length=100, null=True, blank=True)


extension_pool.register(IconExtension)

在admin.py

from django.contrib import admin
from cms.extensions import PageExtensionAdmin

from .models import IconExtension


class IconExtensionAdmin(PageExtensionAdmin):
    pass

admin.site.register(IconExtension, IconExtensionAdmin)

在cms_toolbars.py

from cms.toolbar_pool import toolbar_pool
from cms.extensions.toolbar import ExtensionToolbar
from django.utils.translation import gettext_lazy as _
from .models import IconExtension


@toolbar_pool.register
class IconExtensionToolbar(ExtensionToolbar):
    # defines the model for the current toolbar
    model = IconExtension

    def populate(self):
        # setup the extension toolbar with permissions and sanity checks
        current_page_menu = self._setup_extension_toolbar()

        # if it's all ok
        if current_page_menu:
            # retrieves the instance of the current extension (if any) and the toolbar item URL
            page_extension, url = self.get_page_extension_admin()
            if url:
                # adds a toolbar item in position 0 (at the top of the menu)
                current_page_menu.add_modal_item(_('Page Icon'), url=url,
                    disabled=not self.toolbar.edit_mode_active, position=0)

第 2 步 - 实施导航修饰符 https://docs.django-cms.org/en/latest/how_to/menus.html#navigation-modifiers

在cms_menu.py

from menus.base import Modifier
from menus.menu_pool import menu_pool

from cms.models import Page


class AddIconModifier(Modifier):
    """
    This modifier makes the changed_by attribute of a page
    accessible for the menu system.
    """

    def modify(self, request, nodes, namespace, root_id, post_cut, breadcrumb):
        if breadcrumb:
            return nodes
        # Only on last iteration (Voir : https://docs.django-cms.org/en/latest/how_to/menus.html#navigation-modifiers)
        if not post_cut:
            return nodes
        # only consider nodes that refer to cms pages
        # and put them in a dict for efficient access
        page_nodes = {n.id: n for n in nodes if n.attr["is_page"]}
        # retrieve the relevent pages
        pages = Page.objects.filter(id__in=page_nodes.keys())
        # loop over all relevant pages
        for page in pages:
            # take the node referring to the page            
            node = page_nodes[page.id]
            if hasattr(page, 'iconextension') and hasattr(page.iconextension ,'fontawesomeicon'):
                node.attr["faicon"] = page.iconextension.fontawesomeicon
            else:
                node.attr["faicon"] = 'fa-arrow-circle-right'
        
        return nodes


menu_pool.register_modifier(AddIconModifier)

第 3 步 - 特定导航模板 在我的主模板中：

{% show_menu 0 100 100 100 "partials/navigation.html" %}

在我的导航模板中 (navigation.html)

{% load cms_tags menu_tags cache %}

{% for child in children %}

    <li class="nav-item">
        <a class="nav-link" href="{{ child.attr.redirect_url|default:child.get_absolute_url }}"><i class="fas fa-fw {{ child.attr.faicon }}"></i>{{ child.get_menu_title }}</a>
        {% if child.children %}
            <ul class="sub_menu">
                {% show_menu from_level to_level extra_inactive extra_active template '' '' child %}
            </ul>
        {% endif %}
    </li>

{% endfor %}

菜单中的 Django CMS 图标

Django CMS icon in menu

django

django-cms

djangocms-text-ckeditor