vorst.ru - Динамическая загрузка контента
Статьи из рубрики speed-up

Как удалить не используемые CSS правила

Очистка и сжатие CSS с помощью Gulp

Сейчас много шаблонов на базе bootstrap. На сайте, из всего разнообразия стилей, предлагаемых шаблоном, используется порой 10-20%. От балласта можно избавиться с помощью on-line ресурсов. Например uncss-online. Но этот подход трудоемок.

Надежнее использовать утилиту. Задание создается один раз и при любых изменениях в проекте достаточно выполнить одну или пару команд.


Как подключить кеширование

Ускорение работы сайта с помощью кеширования

Содержание конкретной страницы, как правило, требует предварительной подготовки. Например, в посте присутствует сразу текст на русском и на английском языке. В этом случае нужна предварительная обработка, чтобы на экране отображался только текст на текущем языке.

Если текст поста меняется редко, желательно выполнять работу по подготовке страниц в "первый" просмотр и затем выводить уже готовые страницы.


Пример загрузки контента без перезагрузки страницы

Динамическая загрузка контента

Блог - это лента из заголовков статей и нескольких строчек из них. Пусть так и останется, когда посетитель решит прочитать содержимое выбранной статьи. То есть вся лента останется и добавится контент выбранной статьи.



Поиск



Пример загрузки контента без перезагрузки страницы

Динамическая загрузка контента

Блог - это лента из заголовков статей и нескольких строчек из них. Пусть так и останется, когда посетитель решит прочитать содержимое выбранной статьи. То есть вся лента останется и добавится контент выбранной статьи.


    Поделиться

Controller

Добавим в frontend\controllers\PostController.php действие, загружающее контент.

public function actionGetContent($id)
{
    echo $this->loadModel($id)->content;
}

View

В представлении frontend/views/post/_view.php, которое используется при выводе блога, нужно добавить пустой блок для контента. Общая структура выглядит так:

<div class='post-preview'>
    <div class='post-title'> ... </div>
    <div class='post-excerpt'> ... </div>
    <div class='post-content'></div>
    <div class='post-meta'>
        ...
        <span class='read-more' data-post-id='<?= $model->id ?>'>
            <?= Yii::t('app', 'read more') ?>
        </span>
    </div>
</div>

В начале представления frontend/views/post/index.php добавим кусок jQuery кода, который и будет выполнять работу.

$script = <<< JS
$('.read-more').on('click', function(e) {
    var that = $(this);
    var preview = that.closest('.post-preview');
    var content = preview.find('.post-content');
    var read_more = preview.find('.post-meta').find('.read-more');
    $.ajax({
        url: 'post/get-content',
        data: {id: that.attr('data-post-id')},
        success: function(response) {
            content.hide();
            content.html(response);
            read_more.hide();
            content.show();
        }
    });
});
JS;
$this->registerJs($script);

Config

Стоит проверить url-маршруты в файле common/config/main.php, чтобы вызов post/get-content не вызывал проблем.

Заключение

Реализация загрузки контента по требованию проще, чем GRUD. Может поэтому и появилось RESTful.

Оставьте комментарий

Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.