Есть ли шаблонный шаблон Django, который обрабатывает «... больше», и когда вы нажимаете на него, он показывает больше текста?

Question

Предположим, у меня огромный абзац.

Я просто хочу показать 15 лучших слов.После этого человек нажимает «еще», чтобы увидеть остальные вещи.

Answer 1

Просто все это, кажется, делает то, что вы хотите, и нет никакой зависимости от каких-либо внешних библиотек JS.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я не пробовал это в IE, но Chrome и Firefox работают нормально.

from django import template
from django.utils.html import escape
from django.utils.safestring import mark_safe

register = template.Library()

import re

readmore_showscript = ''.join([
"this.parentNode.style.display='none';",
"this.parentNode.parentNode.getElementsByClassName('more')[0].style.display='inline';",
"return false;",
]);

@register.filter
def readmore(txt, showwords=15):
    global readmore_showscript
    words = re.split(r' ', escape(txt))

    if len(words) <= showwords:
        return txt

    # wrap the more part
    words.insert(showwords, '<span class="more" style="display:none;">')
    words.append('</span>')

    # insert the readmore part
    words.insert(showwords, '<span class="readmore">... <a href="#" onclick="')
    words.insert(showwords+1, readmore_showscript)
    words.insert(showwords+2, '">read more</a>')
    words.insert(showwords+3, '</span>')

    # Wrap with <p>
    words.insert(0, '<p>')
    words.append('</p>')

    return mark_safe(' '.join(words))

readmore.is_safe = True

Чтобы использовать его, просто создайте папку templatetags в своем приложении, создайте там файл __init__.py, а затем перетащите этот код в readmore.py.

Затем в верхней части любого шаблона, где вы хотите его использовать, просто добавьте: {% load readmore %}

Чтобы использовать сам фильтр:

{{ some_long_text_var|readmore:15 }}

: 15 говорит о том, сколько слов вы хотите показать перед ссылкой «читать дальше».

Если вы хотите что-то необычное, например, загрузку полного контента с помощью ajax, это немного отличается и потребует немного больше инфраструктуры.

Answer 2

использовать truncatechars_html

см .: https://docs.djangoproject.com/en/1.8/ref/templates/builtins/#truncatechars-html

truncatechars_html

Similar to truncatechars, except that it is aware of HTML tags. Any tags that are opened in the string and not closed before the truncation point are closed immediately after the truncation.

For example:

{{ value|truncatechars_html:9 }}
If value is "<p>Joel is a slug</p>", the output will be "<p>Joel i...</p>".

Newlines in the HTML content will be preserved.

Answer 3

Я переписал более ранний ответ, чтобы он был чище и правильно обрабатывал экранирование строк:

@register.filter(needs_autoescape=True)
@stringfilter
def read_more(s, show_words, autoescape=True):
    """Split text after so many words, inserting a "more" link at the end.

    Relies on JavaScript to react to the link being clicked and on classes
    found in Bootstrap to hide elements.
    """
    show_words = int(show_words)
    if autoescape:
        esc = conditional_escape
    else:
        esc = lambda x: x
    words = esc(s).split()

    if len(words) <= show_words:
        return s

    insertion = (
        # The see more link...
        '<span class="read-more">&hellip;'
        '    <a href="#">'
        '        <i class="fa fa-plus-square gray" title="Show All"></i>'
        '    </a>'
        '</span>'
        # The call to hide the rest...
        '<span class="more hidden">'
    )

    # wrap the more part
    words.insert(show_words, insertion)
    words.append('</span>')
    return mark_safe(' '.join(words))

В HTML-коде предполагается, что вы используете Bootstrap и Fontawesome, но если это не ваш вкус, то легкоадаптироваться.

Для JavaScript, если вы используете jQuery (если вы, вероятно, используете Bootstrap), вам просто нужно добавить что-то вроде этого:

$(".read-more").click(function(e) {
    e.preventDefault();
    var t = $(this);
    t.parent().find('.more').removeClass('hidden');
    t.addClass('hidden');
});

Answer 4

from django import template
from django.utils.html import escape
from django.utils.safestring import mark_safe

register = template.Library()


@register.filter
def readmore(text, cnt=250):
    text, cnt = escape(text), int(cnt)

    if len(text) > cnt:
        first_part = text[:cnt]
        link = u'<a href="javascript:;" class="more">%s</a>' % _('read more')
        second_part = u'%s<span class="hide">%s</span>' % (link, text[cnt:])
        return mark_safe('... '.join([first_part, second_part]))
    return text

readmore.is_safe = True

Answer 5

Существует фильтр усеченных слов , хотя вам все еще нужен помощник JavaScript, чтобы выполнить то, что вы описали.