Ajax загрузка новостей и комментариев

Сейчас технология AJAX или загрузка контента без обновления страницы стала уже не простой игрушкой, а атрибутом любого современного сайта. Поэтому сегодня, буквально за минуту, попробуем прикрутить на свой сайт AJAX загрузку новостей и комментариев для DLE.


Почему так быстро? Потому что умные люди уже сделали прекрасный Jquery плагин - Infinite Ajax Scroll, который осталось только правильно подключить. Его последнюю версию можно скачать с официальной страницы на GitHab. А теперь установка...

Установка:
1. Скачать и распаковать в папку с шаблоном архив dle_ajax.zip.

2. В main.tpl своего шаблона найти:

</body>

Добавить выше:

[aviable=main]
<script type="text/javascript" src="{THEME}/js/jquery-ias.min.js"></script>
<script type="text/javascript">
$(function() {
    jQuery.ias({
        container : '#dle-content', // Название контейнера в котором находятся новости (менять не нужно)
        item: '.news',  // Название контейнера самой новости
        pagination: '.navigation', // Название контейнера навигации по страницам
        next: '#page_next a', // Ссылка на следующюю новость
        loader: '<span class="ajaxProgress"></span>', // Загрузчик, который появляется при подгрузке страниц
        triggerPageThreshold: 2, // Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка
        trigger: 'Ещё' // Текст кнопки
    });
});
</script>
[/aviable]
[aviable=showfull]
<script type="text/javascript" src="{THEME}/js/jquery-ias.min.js"></script>
<script type="text/javascript">
$(function() {
    jQuery.ias({
        container : '#dle-comments-list', // Название контейнера в котором находятся комменты (менять не нужно)
        item: '.comment',  // Название контейнера самого коммента
        pagination: '.navigation', // Название контейнера навигации по страницам
        next: '#page_next a', // Ссылка на следующюю новость
        loader: '<span class="ajaxProgress"></span>', // Загрузчик, который появляется при подгрузке страниц
        triggerPageThreshold: 2, // Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка
        trigger: 'Ещё' // Текст кнопки
    });
});
</script>
[/aviable]

3. В файл стилей CSS добавить:

.ajaxProgress {background:#eee url(../images/loader.gif) no-repeat center center;display:block;width:40px;height:40px;margin:10px auto;border-radius:10px;border:1px solid #ddd;}
.ias_trigger a {box-shadow:inset 0px 1px 0px 0px #fff;border-radius:6px;border:1px solid #dcdcdc;display:block;color:#777;font-weight:bold;padding:10px 0;text-decoration:none;margin-bottom:20px;text-shadow:1px 1px 0px #fff;text-align:center;font-size:14px;
background: #f4f4f4;
background: -moz-linear-gradient(top,  #f4f4f4 0%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top,  #f4f4f4 0%,#eaeaea 100%);
background: -o-linear-gradient(top,  #f4f4f4 0%,#eaeaea 100%);
background: -ms-linear-gradient(top,  #f4f4f4 0%,#eaeaea 100%);
background: linear-gradient(to bottom,  #f4f4f4 0%,#eaeaea 100%);
}
.ias_trigger a:hover {
background: #efefef;
background: -moz-linear-gradient(top,  #efefef 0%, #e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#e0e0e0));
background: -webkit-linear-gradient(top,  #efefef 0%,#e0e0e0 100%);
background: -o-linear-gradient(top,  #efefef 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top,  #efefef 0%,#e0e0e0 100%);
background: linear-gradient(to bottom,  #efefef 0%,#e0e0e0 100%);
}
.ias_trigger a:active {
box-shadow:inset 0 0 5px rgba(0,0,0,.1);
}

4. Открыть shortstory.tpl шаблона и обернуть всё его содержимое в такой DIV:

<div class="news"> ...тут содержимое...</div>

5. Открыть comments.tpl шаблона и обернуть всё его содержимое в такой DIV:

<div class="comment"> ...тут содержимое...</div>

6. Открыть navigation.tpl шаблона и обернуть всё его содержимое в такой DIV:

<div class="navigation"> ...тут содержимое...</div>

Плюс тут же меняем:

[next-link]Вперед[/next-link]

на

<span id="page_next">[next-link]Вперед[/next-link]</span>

Готово!


Уверен это заняло у вас не многим больше минуты. Теперь немного подробнее что мы сделали:
В первом шаге, мы загрузили сам скрипт и картинку в шаблон.
Во втором, мы подключили этот скрипт на нужных нам страницах. Для новостей на главной, а для комментариев в полной новости. При необходимости, вы можете расширить список страниц, прочитав документацию DLE. Например подключить ещё на странице "последние комментарии", при просмотре категории и т.д.
В третьем шаге, мы немного приукрасили внешний вид. ajaxProgress - это стили для загрузчика, который появляется при загрузке страниц. А ias_trigger, это кнопка с предложением загрузить ещё страницу.
В 4, 5 и 6 пунктах мы дали классы контейнерам, чтоб скрипт понимал что нужно подгружать и что прятать. Вы можете изменить названия и классы, если понимаете что делаете :)

Работа скрипта, сделана очень продумано: сохраняется навигация по страницам и есть поддержка "умеренной" загрузки (после нескольких страниц, просто появляется кнопка для загрузки). • Версия DLE: 9.х
• Автор: mishiko
• Источник