前后端不分离项目中，用 templates 和 semantic-ui 实现系统通知列表

在前后端不分离的项目中，实现系统通知列表可以使用 templates 和 semantic-ui。下面是一个简单的示例：

1. 在 Django 项目中创建一个 notifications 应用程序，用于管理系统通知。

2. 在 notifications 应用程序中创建一个模型，用于保存通知数据。例如：

from django.db import models
from django.contrib.auth.models import User

class Notification(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    message = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

3. 创建一个视图函数，用于显示系统通知列表。这个视图函数应该从数据库中获取所有通知，然后将它们传递给模板。

from django.shortcuts import render
from .models import Notification

def notification_list(request):
    notifications = Notification.objects.filter(user=request.user).order_by('-created_at')
    return render(request, 'notifications/notification_list.html', {'notifications': notifications})

4. 创建一个模板，用于显示系统通知列表。可以使用 semantic-ui 中的列表组件来显示通知。例如：

{% extends 'base.html' %}

{% block content %}
  <h1>Notifications</h1>
  <div class="ui relaxed divided list">
    {% for notification in notifications %}
      <div class="item">
        <div class="content">
          <div class="header">{{ notification.created_at }}</div>
          <div class="description">{{ notification.message }}</div>
        </div>
      </div>
    {% empty %}
      <p>No notifications yet.</p>
    {% endfor %}
  </div>
{% endblock %}

5. 在主模板中添加一个链接，用于访问系统通知列表。例如：

<div class="ui dropdown item">
  <i class="bell icon"></i>
  <span class="badge">{{ notifications.count }}</span>
  <div class="menu">
    <a class="item" href="{% url 'notifications:notification_list' %}">Notifications</a>
  </div>
</div>

这样就可以在前后端不分离的项目中使用 templates 和 semantic-ui 实现系统通知列表了。