更改Django中每个用户的网页徽标

Question

我如何在其他用户登录到Django平台中更改 base.html 中的网站徽标？例如：user-a（request.user.customer.public_id）登录时，将其上传到文件夹中的徽标后，将在网站上看到不同的徽标，而用户-B将看到不同的徽标。 默认情况下，如果没有用户上传徽标，则他们将在网站上看到默认徽标。

<div class="container-fluid" title="Website">
      <a data-testid="linkElement"
  href="https://www.google.com" target="_self" class="xQ_iF"><img src="{% static 'logo.png' %}" alt="google"
  style="width:90px;height:60px; margin-left: auto; margin-right: auto; padding-left: 32px;  position: absolute;">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
    aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
    </button>

      </a>

 <nav class="navbar navbar-expand-lg">

        <ul class="navbar-nav ml-auto" style = "margin-left: auto;">
        <li class="nav-item active">
        <a class="nav-link" href="{% url 'home' %}"><i class="fa fa-home"></i>&nbsp; Home <span class="sr-only">(current)</span></a>
        </li>
    
        <li class="nav-item active">
          <a class="nav-link" href="https://www.google.com/support-page"><i class="fa fa-envelope"></i>&nbsp; Support<span class="sr-only">(current)</span></a>
          </li>
    
    
        <li class="nav-item dropdown">
        <a  class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-bs-toggle="dropdown">
        <i class="fa fa-user-circle-o"></i>&nbsp; {{request.user}}</a>
        <div class="dropdown-menu" style="background-color: #
        </div>
        </li>
        </ul>
        </div>
    
          </div>
      </div>
      </nav>
      </div>

Answer 1

您可以将其与用户本身的数据库结构联系在一起。在这种情况下，我建议将图片字段添加到与用户关联的新模型（或与用户关联的组相关联）：

class UserLogos(models.Model):
    """
    Model for storing User Logos
    """
    user = models.ForeignKey(
        User,
        on_delete=models.CASCADE,
        verbose_name=_("user"),
        help_text=_("The associated user"),
    )
    photo = models.ImageField(
        _("photo"),
        upload_to="logo_photos",
        help_text=_("Your logo photo"),
        default="logo_photos/default.png",
    )

然后在您的视图中，只需调用此项目：

def index(request):
    """
    Index View

    Render the server configured index page
    """
    return render(
        request,
        "index.html",
        {
            "userLogo": models.UserLogos.filter(user=request.user).first()
        },
    )

最后在您的HTML模板中：

<img src="{{ userLogo.photo.url }}"/>

Answer 2

假设我们有一个路由dynamic_logo_page/使用dynamic_logo_page.html模板，相应的视图名称为dynamic_logo_view。

# Inside views.py

def get_logo_url(user_id):
    # TODO: implement logic to get the logo_url based on user_id
    return some_logo_url

def dynamic_logo_view(request):
  if request.user.is_authenticated:
      logo_url = get_logo_url(request.user.id)
      content = {
        "user_id": request.user.id,
        "logo_url": logo_url
      }
        
  return render(request, 'dynamic_logo_page.html', content)

<!-- Inside dynamic_logo_page.html -->
...
{% if user.is_authenticated %}
  <div>Hi {{ user_id }}, here is your personalized logo below:</div>
  <img src="{{ logo_url }}" alt='logo'/>
{% endif %}
...

Answer 3

解决方案取决于您是否要在每个请求上向每个用户显示一个随机徽标，或者每个用户都有自己的特定徽标。

每个用户的随机徽标，每个请求都不同，

如果您希望徽标是每个请求的随机徽标，则可以在模板上下文中提供徽标列表，然后使用a 随机过滤器从列表中随机选择徽标。

<img id="logo" src="{% static logo_options|random %}">

这将导致两个用户同时在统计上相同的徽标，但这取决于有多少徽标变体可用。

每个用户的特定徽标，每个请求都具有

为用户具有相同徽标的特定徽标，然后必须以某种方式指定并存储徽标。这可以通过将imageField 添加到用户模型，然后在模板中检索此字段来实现。

有多种方法可以扩展用户内置在Django中的模型，请参见此处的教程： https://simpleisbetterterthancomplex.com/tutorial/2016/07/07/22/how-to-to-to-to-to-to--extend-django-django-user-user-model-model.html < /a>

根据您的解决方案，模板最终可能会看起来像这样：

<img id="logo" src="{% static user.logo.url %}">

Answer 4

这就是我解决这个问题的方式。
这是我的型号。

class Customer(models.Model):
    user = models.OneToOneField(User, null=True, blank =True, on_delete=models.CASCADE)
    date_created = models.DateTimeField(auto_now_add=True, null=True)
    name = models.CharField(max_length=200, null=True)
    first_name = models.CharField(max_length=200, null=True)
    last_name = models.CharField(max_length=200, null=True)
    email = models.CharField(max_length=200, unique=True)
    phone = models.CharField(max_length=200, null=True)
    platformLogo= models.ImageField(upload_to=upload_path, default='logo.png', null=True, blank=False)

这是保存徽标的功能。

def upload_path(instance, filename):
    filename = str(date.today())
    name = instance.user.customer
    name1 = str(name)
    name = name1.replace('@','_')
    return f'{name}/{filename}.jpg'

我的设置.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")]


MEDIA_URL = '/platformLogo/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/platformLogo')

这是HTML模板

<div class="container-fluid" title="Website">

{% if request.user.is_staff %} 

  <a data-testid="linkElement"
href="https://www.google.com" target="_self" class="xQ_iF"><img src="{% static 'logo.png' %}" alt="google"
style="width:90px;height:60px; margin-left: auto; margin-right: auto; padding-left: 32px;  position: absolute;">

{% else %}

 <a data-testid="linkElement"
 href="https://www.google.com" target="_self" class="xQ_iF"><img src="{% static user.customer.platformLogo.url %}" alt="google"
 style="width:90px;height:60px; margin-left: auto; margin-right: auto; padding-left: 32px;  position: absolute;">
   
{% endif %}

   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
  </button>
  </a>
<nav class="navbar navbar-expand-lg">

    <ul class="navbar-nav ml-auto" style = "margin-left: auto;">
    <li class="nav-item active">
    <a class="nav-link" href="{% url 'home' %}"><i class="fa fa-home"></i>  Home <span class="sr-only">(current)</span></a>
    </li>

    <li class="nav-item active">
      <a class="nav-link" href="https://www.google.com/support-page"><i class="fa fa-envelope"></i>  Support<span class="sr-only">(current)</span></a>
      </li>


    <li class="nav-item dropdown">
    <a  class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-bs-toggle="dropdown">
    <i class="fa fa-user-circle-o"></i>  {{request.user}}</a>
    <div class="dropdown-menu" style="background-color: #
    </div>
    </li>
    </ul>
    </div>

      </div>
  </div>
  </nav>
  </div>

Answer 5

我找到了解决这个问题的另一种替代方法。以下是我的型号。

class Customer(models.Model):
    user = models.OneToOneField(User, null=True, blank =True, on_delete=models.CASCADE)
    date_created = models.DateTimeField(auto_now_add=True, null=True)
    name = models.CharField(max_length=200, null=True)
    first_name = models.CharField(max_length=200, null=True)
    last_name = models.CharField(max_length=200, null=True)
    email = models.CharField(max_length=200, unique=True)
    phone = models.CharField(max_length=200, null=True)
    platformLogoUrl = models.CharField(max_length=500, default='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Google_2011_logo.png/640px-Google_2011_logo.png', null=True)

HTML模板

    <div class="container-fluid" title="Website">

    {% if request.user.is_staff %} 

    <a href="https://www.google.com" <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Google_2011_logo.png/640px-Google_2011_logo.png" alt="google"
    style="width:90px;height:60px; margin-left: auto; margin-right: auto; padding-left: 32px;  position: absolute;">

    {% else %}

    <a data-testid="linkElement"
    href="https://www.google.com"><img src="{{request.user.customer.platformLogoUrl}}" alt="google"
    style="width:90px;height:60px; margin-left: auto; margin-right: auto; padding-left: 32px;  position: absolute;">
   
    {% endif %}

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
    aria-controls="navbarNavAltMarkup" aria-expanded="true" aria-label="Toggle navigation">
    </button>
    </a>
    <nav class="navbar navbar-expand-lg">

    <ul class="navbar-nav ml-auto" style = "margin-left: auto;">
    <li class="nav-item active">
    <a class="nav-link" href="{% url 'home' %}"><i class="fa fa-home"></i>  Home <span class="sr-only">(current)</span></a>
    </li>

    <li class="nav-item active">
      <a class="nav-link" href="https://www.google.com/support-page"><i class="fa fa-envelope"></i>  Support<span class="sr-only">(current)</span></a>
      </li>


    <li class="nav-item dropdown">
    <a  class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-bs-toggle="dropdown">
    <i class="fa fa-user-circle-o"></i>  {{request.user}}</a>
    <div class="dropdown-menu" style="background-color: #
    </div>
    </li>
    </ul>
    </div>

      </div>
  </div>
  </nav>
  </div>