Автоматическая загрузка новостей и комментариев с помощью AJAX для DLE

18 июля 2013 - Dr. Web
article279.jpg

 

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

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

Установка

1. Скачиваем архив dle_ajax.zip [9,61 Kb] и распаковываем в папку с своим шаблоном.

2. В main.tpl своего шаблона, перед </body>, добавляем:

[aviable=main] <span class="tag"><<span class="title" style="color: rgb(68, 68, 255);">script</span> <span class="attribute" style="color: red;">type</span>=<span class="value" style="color: rgb(128, 0, 255);">"text/javascript"</span> <span class="attribute" style="color: red;">src</span>=<span class="value" style="color: rgb(128, 0, 255);">"{THEME}/css/jquery-ias.min.js"</span>></span><span class="tag"></<span class="title" style="color: rgb(68, 68, 255);">script</span>></span> <span class="tag"><<span class="title" style="color: rgb(68, 68, 255);">script</span> <span class="attribute" style="color: red;">type</span>=<span class="value" style="color: rgb(128, 0, 255);">"text/javascript"</span>></span><span class="javascript"> $(<span class="function"><span class="keyword" style="color: rgb(133, 153, 0);">function</span><span class="params">()</span> {</span>     jQuery.ias({         container : <span class="string" style="color: rgb(42, 161, 152);">'#dle-content'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Название контейнера в котором находятся новости (менять не нужно)</span>         item: <span class="string" style="color: rgb(42, 161, 152);">'.news'</span>,  <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Название контейнера самой новости</span>         pagination: <span class="string" style="color: rgb(42, 161, 152);">'.navigation'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Название контейнера навигации по страницам</span>         next: <span class="string" style="color: rgb(42, 161, 152);">'#page_next a'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Ссылка на следующюю новость</span>         loader: <span class="string" style="color: rgb(42, 161, 152);">'<span class="ajaxProgress"></span>'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Загрузчик, который появляется при подгрузке страниц</span>         triggerPageThreshold: <span class="number">2</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка</span>         trigger: <span class="string" style="color: rgb(42, 161, 152);">'Ещё'</span> <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Текст кнопки</span>     }); }); </span><span class="tag"></<span class="title" style="color: rgb(68, 68, 255);">script</span>></span> [/aviable] [aviable=showfull] <span class="tag"><<span class="title" style="color: rgb(68, 68, 255);">script</span> <span class="attribute" style="color: red;">type</span>=<span class="value" style="color: rgb(128, 0, 255);">"text/javascript"</span> <span class="attribute" style="color: red;">src</span>=<span class="value" style="color: rgb(128, 0, 255);">"{THEME}/css/jquery-ias.min.js"</span>></span><span class="tag"></<span class="title" style="color: rgb(68, 68, 255);">script</span>></span> <span class="tag"><<span class="title" style="color: rgb(68, 68, 255);">script</span> <span class="attribute" style="color: red;">type</span>=<span class="value" style="color: rgb(128, 0, 255);">"text/javascript"</span>></span><span class="javascript"> $(<span class="function"><span class="keyword" style="color: rgb(133, 153, 0);">function</span><span class="params">()</span> {</span>     jQuery.ias({         container : <span class="string" style="color: rgb(42, 161, 152);">'#dle-comments-list'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Название контейнера в котором находятся комменты (менять не нужно)</span>         item: <span class="string" style="color: rgb(42, 161, 152);">'.comment'</span>,  <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Название контейнера самого коммента</span>         pagination: <span class="string" style="color: rgb(42, 161, 152);">'.navigation'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Название контейнера навигации по страницам</span>         next: <span class="string" style="color: rgb(42, 161, 152);">'#page_next a'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Ссылка на следующюю новость</span>         loader: <span class="string" style="color: rgb(42, 161, 152);">'<span class="ajaxProgress"></span>'</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Загрузчик, который появляется при подгрузке страниц</span>         triggerPageThreshold: <span class="number">2</span>, <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Количество страниц, после которых прегратится автоматическая подгрузка и появится кнопка</span>         trigger: <span class="string" style="color: rgb(42, 161, 152);">'Ещё'</span> <span class="comment" style="margin-bottom: 40px; color: green; font-style: italic;">// Текст кнопки</span>     }); }); </span><span class="tag"></<span class="title" style="color: rgb(68, 68, 255);">script</span>></span> [/aviable]

3. В CSS стили, в любое место, добавляем:

<span class="class" style="color: red;">.ajaxProgress</span> <span class="rules">{<span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"><span class="hexcolor">#eee</span> <span class="function">url(../images/loader.gif)</span> no-repeat center center</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">display</span>:<span class="value">block</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">width</span>:<span class="value"><span class="number">40</span>px</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">height</span>:<span class="value"><span class="number">40</span>px</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">margin</span>:<span class="value"><span class="number">10</span>px auto</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">border-radius</span>:<span class="value"><span class="number">10</span>px</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">border</span>:<span class="value"><span class="number">1</span>px solid <span class="hexcolor">#ddd</span></span>;</span><span class="rule">}</span></span> <span class="class" style="color: red;">.ias_trigger</span> <span class="tag" style="color: rgb(68, 68, 255);">a</span> <span class="rules">{<span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">box-shadow</span>:<span class="value">inset <span class="number">0</span>px <span class="number">1</span>px <span class="number">0</span>px <span class="number">0</span>px <span class="hexcolor">#fff</span></span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">border-radius</span>:<span class="value"><span class="number">6</span>px</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">border</span>:<span class="value"><span class="number">1</span>px solid <span class="hexcolor">#dcdcdc</span></span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">display</span>:<span class="value">block</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">color</span>:<span class="value"><span class="number">#777</span></span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">font-weight</span>:<span class="value">bold</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">padding</span>:<span class="value"><span class="number">10</span>px <span class="number">0</span></span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">text-decoration</span>:<span class="value">none</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">margin-bottom</span>:<span class="value"><span class="number">20</span>px</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">text-shadow</span>:<span class="value"><span class="number">1</span>px <span class="number">1</span>px <span class="number">0</span>px <span class="hexcolor">#fff</span></span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">text-align</span>:<span class="value">center</span>;</span><span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">font-size</span>:<span class="value"><span class="number">14</span>px</span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> <span class="hexcolor">#f4f4f4</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -moz-linear-<span class="function">gradient(top,  #f4f4f4 <span class="number">0</span>%, #eaeaea <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -webkit-<span class="function">gradient(linear, left top, left bottom, color-stop(<span class="number">0</span>%,#f4f4f4)</span>, color-<span class="function">stop(<span class="number">100</span>%,#eaeaea)</span>)</span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -webkit-linear-<span class="function">gradient(top,  #f4f4f4 <span class="number">0</span>%,#eaeaea <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -o-linear-<span class="function">gradient(top,  #f4f4f4 <span class="number">0</span>%,#eaeaea <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -ms-linear-<span class="function">gradient(top,  #f4f4f4 <span class="number">0</span>%,#eaeaea <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> linear-<span class="function">gradient(to bottom,  #f4f4f4 <span class="number">0</span>%,#eaeaea <span class="number">100</span>%)</span></span>;</span> <span class="rule">}</span></span> <span class="class" style="color: red;">.ias_trigger</span> <span class="tag" style="color: rgb(68, 68, 255);">a</span><span class="pseudo" style="color: rgb(255, 128, 0); font-weight: bold;">:hover</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> <span class="hexcolor">#efefef</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -moz-linear-<span class="function">gradient(top,  #efefef <span class="number">0</span>%, #e0e0e0 <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -webkit-<span class="function">gradient(linear, left top, left bottom, color-stop(<span class="number">0</span>%,#efefef)</span>, color-<span class="function">stop(<span class="number">100</span>%,#e0e0e0)</span>)</span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -webkit-linear-<span class="function">gradient(top,  #efefef <span class="number">0</span>%,#e0e0e0 <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -o-linear-<span class="function">gradient(top,  #efefef <span class="number">0</span>%,#e0e0e0 <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> -ms-linear-<span class="function">gradient(top,  #efefef <span class="number">0</span>%,#e0e0e0 <span class="number">100</span>%)</span></span>;</span> <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">background</span>:<span class="value"> linear-<span class="function">gradient(to bottom,  #efefef <span class="number">0</span>%,#e0e0e0 <span class="number">100</span>%)</span></span>;</span> <span class="rule">}</span></span> <span class="class" style="color: red;">.ias_trigger</span> <span class="tag" style="color: rgb(68, 68, 255);">a</span><span class="pseudo" style="color: rgb(255, 128, 0); font-weight: bold;">:active</span> <span class="rules">{ <span class="rule"><span class="attribute" style="color: rgb(128, 128, 192);">box-shadow</span>:<span class="value">inset <span class="number">0</span> <span class="number">0</span> <span class="number">5</span>px <span class="function">rgba(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">1</span>)</span></span>;</span> <span class="rule">}</span></span>

4. Открываем shortstory.tpl и оборачиваем всё его содержимое в такой DIV: <div class="news"> ...тут содержимое...</div>

5. Открываем comments.tpl и опять оборачиваем его содержимое в DIV: <div class="comment"> ...тут содержимое...</div>

6. Открываем navigation.tpl и оборачиваем его содержимое в DIV: <div class="navigation"> ...тут содержимое...</div>

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

<span class="attr_selector" style="color: inherit !important;">[next-link]</span>Вперед<span class="attr_selector" style="color: inherit !important;">[/next-link]</span>

на

<span class="tag"><<span class="title" style="color: rgb(68, 68, 255);">span</span> <span class="attribute" style="color: red;">id</span>=<span class="value" style="color: rgb(128, 0, 255);">"page_next"</span>></span>[next-link]Вперед[/next-link]<span class="tag"></<span class="title" style="color: rgb(68, 68, 255);">span</span>></span>

Всё готово. Уверен это заняло у вас не многим больше минуты :)

Пояснение

Теперь немного подробнее что мы сделали.

В первом шаге, мы загрузили сам скрипт и картинку в шаблон :)

Во втором, мы подключили этот скрипт на нужных нам страницах. Для новостей на главной, а для комментариев в полной новости. При необходимости, вы можете расширить список страниц, прочитав документацию DLE. Например подключить ещё на странице "последние комментарии", при просмотре категори и т.д.

В третьем шаге, мы немного преукрасили внешний вид. ajaxProgress  — это стили для загрузчика, который появляется при загрузке страниц. А ias_trigger, это кнопка с предложением загрузить ещё страницу.

В 4, 5 и 6 пунктах мы дали классы контейнерам, чтоб скрипт понимал что нужно подгружать и что прятать. Вы можете изменить названия и классы, если понимаете что делаете :)

Итог

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

Источник - sadisme.ru/jscoding/44-ajax-zagruzka-novostey-i-kommentariev-dlya-dle.html

Рейтинг: +1 Голосов: 1 4895 просмотров
Комментарии (0)

Нет комментариев. Ваш будет первым!