Overview

Документ описывает работу со скриптом новостной выдачи.

1. Подключение к странице

Стабильная версия всегда доступна по адресу:

HTML

<script type="text/javascript" src="//cdn.user-api.com/js/nengine.js"></script>

Допускается установка в любом месте страницы, скрипт отслеживает момент загрузки страницы (DOMContentLoaded) и только после него начинает вывод блоков.

2. Добавление блоков на страницу

Для того, что бы скрипт вывел новости, на странице должны быть установлены блоки с определенным классом:

HTML

<div class="newsbyadsn" adsn-data-newscount="5" adsn-data-newstype="one" adsn-data-newsadn="34"></div>
<div class="newsbyadsn" adsn-data-newscount="2" adsn-data-newstype="one" adsn-data-newsadn="34"></div>
<div class="newsbyadsn" adsn-data-newscount="10" adsn-data-newstype="multiple" adsn-data-newsadn="34"></div>

Все блоки должны иметь следующие атрибуты:

Название	Значение	Описание
class	newsbyadsn	Название класса, по которому происходит поиск блоков для вывода
adsn-data-newscount	{COUNT}	Значение кол-ва мизеров, которое выводится за одну загрузку
adsn-data-newstype	one / multiple	Сколько раз должна выполнятся загрузка блока, для блоков, имеющих фиксированное кол-во, должно быть установлено значение "one", для "бесконечных блоков" - значение "multiple"
adsn-data-newsadn	{ADNID}	Идентификатор РС, из которой надо вывести тизеры

🚧

adsn-data-newsadn

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

3. Изменение отображения блоков

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

HTML

<div class="teaser-block">
  <a href="http://log.user-api.com/?src=adrn1&amp;s_act=c&amp;s_trk=Cgi48BgykqkQmhCBzb_IChjNkrPABQ**" target="_blank">   
    <img src="https://cdn.user-api.com/r/ss_8df077a082965118f06485ee63aed77d1476363012/img_200x200.jpg" class="teaser-img" alt="">
  </a>
  <a href="http://log.user-api.com/?src=adrn1&amp;s_act=c&amp;s_trk=Cgi48BgykqkQmhCBzb_IChjNkrPABQ**" target="_blank">   
    <p class="teaser-title">จุดด่างดำบนใบหน้าจะจางหายไปตลอดกาล ทำได้ด้วยวิธีการอันแส</p>	</a>
  <a class="teaser-btn" href="http://log.user-api.com/?src=adrn1&amp;s_act=c&amp;s_trk=Cgi48BgykqkQmhCBzb_IChjNkrPABQ**" target="_blank">
    read more
  </a>
</div>

teaser-block	Класс всего тизера
teaser-img	Класс изображения
teaser-title	Класс текста тизера
teaser-btn	Класс кнопки "Read more"

Минимально необходимый CSS

CSS

.teaser-block {
	display: inline-block;
	width: 220px;
	height: 300px;
	vertical-align: top;
}