2017-10-19 4 views
-1

(| truncatewords_html : my_number)와 같은 장고 템플릿 태그 필터를 사용하여 내 게시물 콘텐츠를 잘라내려고합니다. 그러나 사용자를 자세한 게시물 전체 내용으로 리디렉션하는 줄임표에 대한 href 링크가 있습니다.생략 부호에 대한 href 링크가 포함 된 Django truncatewords 필터 태그

비슷하지만 아주 오래된 스레드에서 인용 된 사용자 지정 템플릿 태그 필터를 정의하는 것 외에 원하는 결과를 얻기위한 기본 제공 방법이 있는지 알고 싶습니다.

답변

0

이 문제가 해결되었습니다. 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>