【问题标题】:Django CMS icon in menu菜单中的 Django CMS 图标
【发布时间】:2020-04-24 03:19:18
【问题描述】:

我想在导航上显示我上传的图标,但我想,我走错了路。

这是我的扩展模型

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,我的一切工作正常,只是出现显示菜单图标的问题,任何人都可以帮助我这种情况?

【问题讨论】:

    标签: django django-cms djangocms-text-ckeditor


    【解决方案1】:

    基于@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 %}
    

    【讨论】:

      【解决方案2】:

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

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

      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,并返回该页面的iconextension。这个方法我以前用过。

      【讨论】:

      • 它正在使用 request.current_page 但不适用于 child.iconextension,我不知道如何获取它,
      • @howrecepes 哦,好点。菜单模板中的child 不是页面,而是NavigationNode 对象。这使事情变得更加复杂。我会更新我的答案。
      猜你喜欢
      • 1970-01-01
      • 2012-03-30
      • 2011-07-22
      • 2015-03-28
      • 1970-01-01
      • 1970-01-01
      • 2016-03-25
      • 2015-01-14
      • 1970-01-01
      相关资源
      最近更新 更多