Хотите визуализировать или показать только несколько строк из текста - PullRequest
Новая
       17

Хотите визуализировать или показать только несколько строк из текста

0 голосов
/ 18 апреля 2019

Я использую редактор Summernote для написания блога и sqlalchemy для хранения данных блога.Весь функционал работает нормально.Теперь на домашней странице я хочу показать несколько строк каждого блога, что я не в состоянии сделать.

Я попробовал несколько опций на views.py, однако он вызывал ошибку разбиения на страницы.Я также попробовал несколько вариантов с разбивкой и срезами, но безуспешно из-за редакторов html и реального текста.

View.py для получения данных постов блога. 

blog_posts = BlogPost.query.order_by(BlogPost.date.desc()).paginate(page=page,per_page=5)

index.html для рендеринга блогаразмещать данные.Это для цикла 

<p>{{ post.text|safe }}</p>

Данные (html + фактический текст), хранящиеся в таблице sqlite в столбце Текст (тип данных), пока вы читаете эту проблему, будет отображаться только фактический текст 

<p style="margin-top: 0.5em; margin-bottom: 0.5em; line-height: inherit; color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; letter-spacing: normal; word-spacing: 0px;"><span style="font-size: 10px; font-family: Arial;">?</span><span style="font-family: Arial;">?</span><b><span style="font-family: Arial;">Automation</span></b><span style="font-family: Arial;">&nbsp;is the technology by which a process or procedure is performed with minimal human assistance.</span><sup id="cite_ref-1" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/Automation#cite_note-1" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Arial;">[1]</span></a></sup><span style="font-family: Arial;">&nbsp;Automation&nbsp;</span><sup id="cite_ref-Rifkin_1995_2-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/Automation#cite_note-Rifkin_1995-2" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Arial;">[2]</span></a></sup><span style="font-family: Arial;">&nbsp;or automatic control is the use of various&nbsp;</span><a href="https://en.wikipedia.org/wiki/Control_system" title="Control system" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Arial;">control systems</span></a><span style="font-family: Arial;">&nbsp;for operating equipment such as machinery, processes in factories, boilers and heat treating ovens, switching on telephone networks, steering and stabilization of ships, aircraft and other applications and vehicles with minimal or reduced human intervention.</span></p><p style="margin-top: 0.5em; margin-bottom: 0.5em; line-height: inherit; color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; letter-spacing: normal; word-spacing: 0px;"><br></p>

Ожидаемый результат - я хочу показать только 3 - 5 строк текста.

1 Ответ

0 голосов
/ 18 апреля 2019

Что вам нужно, это показать / скрыть кнопку дополнительного содержимого, как показано в кодировке ниже.

Здесь я устанавливаю ограничение на количество символов 30 или более. Кнопка «Читать далее» появится, если персонаж больше 30. Вы также можете скрыть содержимое.

Вы можете настроить предел вашего персонажа, чтобы соответствовать вашему выбору. Это возможно при использовании Jquery / Ajax и небольшого CSS, как показано в коде.

Попробуйте приведенный ниже код и убедитесь, что вы подключены к Интернету, чтобы загрузить файл jquery, который заставит его работать.

В вашем случае вам нужно будет передать текст класса элементам вашего HTML-абзаца согласно ниже 

<p class="text">{{ post.text|safe }}</p>

Вот пример кода 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    function breakWords(paragraph, showtext){


        var words = paragraph.split(' ');

        var newText = '';

        for(i=0; i<words.length; i++){


            if(i<= showtext){

                newText += words[i] + ' ';

            }else {

                if (i == (showtext + 1)) newText += '... <span class="fulltext hide">';     

                newText += words[i] + ' ';

                if (words[i+1] == null) newText += '</span><a href="#" class="links"> &raquo; read more</a>';

            }

        }

        return newText;

    }


    $('.text').each(function () {

            $(this).html(breakWords($(this).html(), 10));

            $(this).children('span').hide();


        }).click(function () {


            var fulltext = $(this).children('span.fulltext');
            var links = $(this).children('a.links');


            if (fulltext.hasClass('hide')) {

                fulltext.show(10);
                links.html(' &raquo; hide');        
                fulltext.removeClass('hide');

            } else {

                fulltext.fadeOut(10);
                links.html(' &laquo; read more');           
                fulltext.addClass('hide');

            }

            return false;

        });

});

</script>

<style>


.links{color:#F60; font-weight:bold;text-decoration:none;}
</style>

</head>

<body>

<div id="textbox"> 
<p class="text">

The man behind my mystery. It was during the birthday celebration of David frank my first love that I 
met a young businessman who wons my heart over with enticing material gift. catapults me unto of the world promise me.
 a bliss.  
The man behind my mystery. It was during the birthday celebration of David frank my first love that I 
met a young businessman who wons my heart over with enticing material gift. catapults me unto of the world promise me.
 a bliss.</p>
</div>


</body>
</html>

источник ссылка

...