省略記号のhrefリンク付きDjango truncatewordsフィルタタグ

Question

（| truncatewords_html：my_numberなどの）Djangoテンプレートタグフィルタを使用して投稿コンテンツを切り捨てたいとします。しかし、ユーザーを詳細なポスト・フル・コンテンツにリダイレクトする省略記号のhrefリンクがあります。

カスタムテンプレートタグフィルタ（類似しているがかなり古いスレッドで引用されている）を定義するのに加えて、望みの結果を得るための組み込みメソッドがあるかどうかを知りたい。

Answer 1

私はこの問題を解決しました。 Djangoのテンプレートタグフィルタにロジックを構築する代わりに、私のフロントエンド（JQueryライブラリを使用しています）が消費するJSON APIデータ（Django Rest Frameworkで構築）を送信します。

Serializers.py：コードは、次の通りです

class PostListSerializer(ModelSerializer): 
    url = post_detail_url 
    username = serializers.SerializerMethodField() 
    date_created = serializers.SerializerMethodField() 

    def get_username(self, obj): 
     return obj.user.username 

    def get_date_created(self, obj): 
     return obj.created.strftime('%b %d %Y | at %I:%M %p') 

    class Meta: 
     model = Post 
     fields = [ 
      'id', 
      'username', 
      'title', 
      'slug', 
      'content', 
      'url', 
      'date_created', 
      ] 

views.py：

class PostListAPIView(generics.ListAPIView): 
    queryset = Post.objects.all() 
    serializer_class = serializers.PostListSerializer 

、最終的には私のpost_list.html：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $.ajax({ 
     url: '/api/posts/', 
     method: 'GET', 
     success: function(data){ 
     // iterate through the array of objects 
     $.each(data, function(key, value){ 
      var postUser= value.username; 
      var postTitle = value.title; 
      var postSlug = value.slug; 
      var postCreated = value.date_created; 
      var postContent = value.content; 
      var postShort; 

      if (postContent.length >= 50){ 
      // truncate long posts 
      postShort = jQuery.trim(postContent).substring(0, 50).split(" ").slice(0, -1).join(" ") 
     + "<a href='/posts/" + postSlug + "'>" + "..." + "</a>"; 
      } else { 
      postShort = postContent; 
      } 

      $('#posts-container').append(
      "<div>" + "<h4>" + postUser + ": " + "<a href='/posts/" 
     + postSlug + "'>" + postTitle + "</a>" + "<h5>" 
     + postCreated + "</h5>" + postShort + "</div>" + "<hr>" 
     ); 
     }); 
     }, 
     error: function(data){ 
     console.log('error'); 
     console.log(data); 
     } 
    }); 
    }); 
</script>