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

在前后端不分离的项目中，我们可以使用 Django 的模板语言和 Semantic UI 来实现点赞系统和通知列表。

首先，我们需要在模型中定义一个点赞模型，并在用户模型中添加一个字段来存储用户的点赞记录。如下所示：

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

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    author = models.ForeignKey(User, on_delete=models.CASCADE)

class Like(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    post = models.ForeignKey(Post, on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    likes = models.ManyToManyField(Post, through=Like, related_name='liked_by')

这里定义了一个 `Post` 模型，表示博客文章；一个 `Like` 模型，表示点赞记录；一个 `Profile` 模型，表示用户资料。 `Profile` 模型使用了多对多关系来表示用户的点赞记录。通过 `through` 参数指定了中间模型为 `Like`。

接下来，我们需要在视图中处理点赞逻辑和通知列表。如下所示：

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.contrib import messages
from .models import Post, Like

@login_required
def like_post(request, post_id):
    post = Post.objects.get(id=post_id)
    like = Like.objects.filter(user=request.user, post=post).first()
    if like:
        messages.error(request, '你已经点过赞了！')
    else:
        Like.objects.create(user=request.user, post=post)
        messages.success(request, '点赞成功！')
    return redirect('post_detail', post_id=post.id)

@login_required
def notification_list(request):
    likes = Like.objects.filter(post__author=request.user)
    return render(request, 'notification_list.html', {'likes': likes})

`like_post` 视图用于处理点赞逻辑。首先获取对应的 `Post` 实例和当前用户是否已经点赞。如果已经点赞，则返回错误消息；否则创建一个新的 `Like` 实例，并返回成功消息。

`notification_list` 视图用于获取当前用户的通知列表。通过 `filter` 方法获取所有点赞当前用户文章的点赞记录，并将其传递给模板进行渲染。

最后，我们需要在模板中使用 Semantic UI 来渲染点赞系统和通知列表。如下所示：

{% for post in posts %}
<div class="ui segment">
  <div class="ui header">{{ post.title }}</div>
  <div class="ui meta">{{ post.created_at|date }}</div>
  <div class="ui description">{{ post.content }}</div>
  <div class="ui divider"></div>
  <div class="ui right floated">
    <button class="ui button basic like" data-post="{{ post.id }}">
      {% if user.profile.likes.filter(id=post.id).exists %}
      <i class="heart icon"></i>已赞
      {% else %}
      <i class="heart outline icon"></i>赞
      {% endif %}
    </button>
  </div>
</div>
{% endfor %}

<div class="ui segment">
  <div class="ui header">通知列表</div>
  {% for like in likes %}
  <div class="ui meta">{{ like.created_at|date }}</div>
  <div class="ui description">{{ like.user }} 点赞了你的文章：{{ like.post }}</div>
  {% endfor %}
</div>

<script>
$(document).ready(function() {
  $('.like').click(function() {
    var post_id = $(this).data('post');
    $.ajax({
      url: '/like/' + post_id + '/',
      method: 'POST',
      beforeSend: function(xhr) {
        xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
      },
      success: function(data) {
        if (data.status == 'success') {
          if (data.action == 'like') {
            $('.like[data-post=' + post_id + ']').html('<i class="heart icon"></i>已赞');
          } else {
            $('.like[data-post=' + post_id + ']').html('<i class="heart outline icon"></i>赞');
          }
        }
      }
    });
  });
});
</script>

在模板中，我们遍历所有的文章，并在右侧添加一个赞按钮。根据用户是否已经点赞来显示不同的图标和文字。在点击赞按钮时，使用 AJAX 发送 POST 请求到 `like_post` 视图，根据返回的结果来更新赞按钮的状态。

在通知列表中，我们遍历当前用户的所有点赞记录，并显示点赞者和点赞的文章。