Хак AJAX загрузка новостей и комментариев для DLE

Тема в разделе "DLE", создана пользователем mishiko, 5 янв 2014.

Информация :
Актуальная версия DataLife Engine 11.2
( Final Release v.11.2 | Скачать DataLife Engine | Скачать 11.2 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 11.1 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Модераторы: killoff
  1. mishiko

    mishiko Создатель

    Регистр.:
    5 сен 2011
    Сообщения:
    263
    Симпатии:
    107
    1372173912_dle_ajax.jpg

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

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

    Установка

    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 пунктах мы дали классы контейнерам, чтоб скрипт понимал что нужно подгружать и что прятать. Вы можете изменить названия и классы, если понимаете что делаете :)

    Итог

    За считанные минуты, мы сделали современный сайт, без каких либо вмешательств в движок.

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

    Имея желание, при помощи плагина можно сделать AJAX загрузку страниц своей мечты.
     

    Вложения:

    • dle_ajax.zip
      Размер файла:
      9,6 КБ
      Просмотров:
      42
  2. palec

    palec

    Регистр.:
    6 дек 2006
    Сообщения:
    272
    Симпатии:
    34
    При переходе обратно с полной новости сохраняется место входа? И с точки зрения SEO не навредит ли?
     
  3. killoff

    killoff CD тихо, и не DVD меня ;)

    Moderator
    Регистр.:
    13 май 2008
    Сообщения:
    2.101
    Симпатии:
    758
    Смотря каким образом переходить обратно, если по кнопке ОБРАТНО в браузере - то обычно аякс (точнее сам браузер) такого не понимает, если ссылка на обратно будет в js-коде - то скорее всего что да...
    Если есть нормальные ссылки на полную новость и всё остальное - то никак не сможет навредить, ну а если ссылок таких нет - то тут уж пиняйте на себя :)
     
    palec нравится это.
  4. igramnet

    igramnet

    Регистр.:
    7 авг 2007
    Сообщения:
    281
    Симпатии:
    35
    А в поиске работает?
     
  5. killoff

    killoff CD тихо, и не DVD меня ;)

    Moderator
    Регистр.:
    13 май 2008
    Сообщения:
    2.101
    Симпатии:
    758
    сообщение ТС внимательно почитали?