Как сделать удобный журнал на uCoz

В сообществе он-лайн игры для девушек Мирчар очень популярны "Журналы". Это такой формат ведения фан-сайта, при котором несколько материалов объединяются под одну "обложку” по идейным и другим признакам, но чаще - временным. Да и сами материалы напоминают статьи глянцевых журналов.

Итак, под Журналом будем понимать такой формат публикации материалов, при котором несколько материалов объединены в "номер".

Номер, выпуск - совокупность материалов журнала, объединенные под "обложкой".

Обложка - объединяющий материал, содержащий непосредственно обложку журнала и содержание - ссылки на материалы номера.

И в нашем сообществе номер журнала, а именно обложка, то есть само содержание с ссылками верстается вручную: открыл материал, скопировал ссылку, вставил по тексту. И хорошо, если картинку от материала для разнообразия поставят, да по рубрикам раскрасят. Я же, будучи в душе программистом, всегда ратую за автоматизацию подобной рутины. По итогам урока мы будем видеть на странице обложки список материалов в нужном порядке, раскрашенные по рубрикам, по желанию можно выводить картинки, рейтинг материалов и прочую статистику (просмотры/загрузки файлов/комментарии). Если задача ясна, поехали:

1. Выбор модулей

Для обложки модули Блог и Новости привлекают наличием календаря (а журнал - издание периодическое), но усложняют программирование (впрочем, данный вопрос решается задействованием дополнительного поля как для обложки, так и для самих материалов. Любой другой модуль - это упрощенное программирование, но отсутствие календаря материалов. Из остальных контент-модулей больше подойдет Каталог Файлов, поскольку имеет возможность задержки материалов по дате. Это если предполагается выпускать номер в определенный день, а так можно обойтись и премодерацией.

Для материалов номера подойдет любой модуль с фильтрами, лучше Доска объявлений или Игры.

В данном уроке выбраны Каталог файлов (под обложку), для материалов - Доска объявлений.

Активировали эти модули, причем доску объявлений - без категорий. Следующий шаг:

2. Замена стандартных надписей (ПУ - Настройки).

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

Названия модулей:

Форма добавления модуля Доски объявлений:

Это основные пункты, по которым необходимо провести переименование. Просмотрите другие пункты и переименуйте их по собственному желанию.

3. Настройки каталога файлов.

Займемся обложкой нашего журнала. Не самой картинкой, конечно, и даже не внешним видом - технической стороной "кухни”.

3.1. Управление категориями

Каталог файлов не допускает размещение своих материалов вне категорий (как, например, новости или блог), поэтому переименуем существующую по умолчанию "Мои файлы” в что-нибудь близкое по теме, например "Выпуски”. При желании упоминание категории из шаблона вырежем.

3.2. Настройки модуля

Что здесь особо нужно отметить, так это поля в форме добавления материалов: название выпуска, анонс, полный текст, обложка - обязательные поля (две галочки). Все остальное, включая порядок - на ваше усмотрение.

Еще можно включить "возможность выбрать дату добавления материала” и к нему "Не выводить материалы, дата добавления которых больше текущей даты”.

Переходим к материалам журнала, тоже с технической стороны.

4. Настройка Доски объявлений (материалы журнала)

4.1. Настройка фильтров

Собственно, это самая важная и главная часть всего урока и всей идеи. Именно благодаря фильтрам мы будем видеть на странице обложки нужные нам материалы. Но и тут uCoz имеет ограничения, вполне здравые, иначе мы бы с вами наломали дров. В Доске Объявлений всего три фильтра, по 100 значений в каждом. Если использовать только один, то 100 номеров журнала - это не так уж и много. Мы задействуем комбинацию двух фильтров: 100х100=10 000 номеров - это уже достаточный задел для творческого полета. Третий фильтр можно оставить про запас.

Как проще заполнить фильтры? Включаем Exсel и на автозаполнении делаем ячейки от 1 до 99. Копируем этот массив. Далее переходим в ПУ - модуль Материалы журнала (доска объявлений) - настройка фильтров

Третий фильтр (тип объявления), бывший тут от доски объявлений - удалить.
Первый фильтр: код номера (I), вставить скопированные ячейки, добавить "00”
Второй фильтр: код номера (II), вставить скопированные ячейки, добавить "100”

Как это будет работать? При добавлении журнальной статьи нужно из значений фильтров составить номер выпуска:

№ выпуска = фильтр2+фильтр1
выпуск №1: Фильтр2=не заполнен; Фильтр1=1
выпуск №56: Фильтр2=не заполнен; Фильтр1=56
…
выпуск №100: Фильтр2=1; Фильтр1=00
выпуск №10056: Фильтр2=100; Фильтр1=56

Итого 10 099 выпусков на полном автомате.

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

4.2. Управление категориями

Категории будут выполнять роль рубрик журнала. Это очень удобно, поскольку оформить материалы можно в зависимости от рубрики простой установкой стилей.

Но прежде всего нам необходим рабочий раздел. Все потому, что фильтры можно применять либо к категориям, либо к разделам, но не ко всему модулю. В этот раздел покидаем нужные нам рубрики: Рассказы, Интервью, Головоломки, Полезные файлы. Это, конечно, лишит нас возможности использовать другие разделы для нужд журнала, но по самой идее журнала этого хватит.

4.3. Настройки модуля

Здесь аналогично модулю файлов, большая часть установок - по деланию и привычке. Среди полей формы добавления выберите название, анонс, полный текст и коды выпуска (что есть фильтры) - обязательными и изображения, файл-архив. Если вы хотите организовать навигацию в материалах аналогично журналу: следующий материал - предыдущий материал, в упрощенном варианте можно задействовать дополнительные поля для ссылок на них.

5. Права

Еще одно допущение, которое мы принимаем в уроке: положим, что № журнала = $ID$ обложки (материала каталога файлов). Чтобы номера не пропадали зря, обложки нельзя удалять - только редактировать. Этого можно избежать, если использовать дополнительные поля как в одном, так и в другом модуле. Но вот повысит ли это степень автоматизации верстки - вопрос открытый.

Поэтому настроим права:

ПУ - Пользователи - Группы пользователей - Установка прав для всех групп. Уберем возможность удалять все материалы модуля Каталог файлов даже у администраторов. В крайнем случае, вы всегда сможете удалить материал через ПУ - управление материалами. Лишние права на добавление материалов тоже лучше снять (у гостей, пользователей и даже проверенных) - все равно над сайтом в Миречар пашет только команда.

6. Скрипты и коды

Все скрипты и коды вставляются в шаблоны. И первое, что нужно сделать - это создать бэкап шаблонов (ПУ - дизайн - Резервное копирование шаблонов). Если вы что-то не так сделаете и все "слетит” - легко будет восстановить. Второе, здесь я, конечно не говорю об оформлении сайта/журнала - только о ключевых моментах, типа куда вставлять скрипт, что поменяется для вашего сайта.

6.1. Материалы журнала (модуль доски объявлений) - шаблон страницы со списком материалов раздела

Поместим $BODY$ в <div> с id:

<div id="numbers">
$BODY$
<div align="center">$PAGE_SELECTOR1$</div>
</div>

Именно этот "див” будет загружаться на странице "обложки”. А если вдруг в вашем номере материалов достаточно много (скольку установили в настройкам модуля на одну страницу раздела), внизу будет выводиться переключатель страниц.

6.2. Шаблон собственно обложки (страница материала для модуля файлов)

<div class="eBlock">
 <div align="center">
 <img src="$SCREEN_URL$" width="550" alt="$ENTERY_TITLE$, Выпуск №$ID$">
 </div>
 <div class="eText">$MESAGE$</div>
 <script type="text/javascript">
var filter1=$ID$<?substr($ID$, -2)?>;
filter2=2)?>0;
$.get('/board/1-1-0-0-0-'+filter1+'-'+filter2, function(data) {
 $('#value').html($('#numbers', data));
})
 </script>
</div>

Сначала идет картинка обложки, затем "полный текст” обложки. В контейнер <div id="contentLinks"></div> будет загружен  список отфильтрованных материалов из модуля Доски, где мы размещаем материалы журнала. Дальше собственно скрипт. Он написан из расчета, что № выпуска - это $ID$ обложки, и что материалы журнала расположены в Доске Объявлений. Что рабочий раздел, в котором находятся категории-рубрики, имеет id=1. А первая сотня номеров задается первым фильтром, а не вторым и по тем правилам, которые оговорены в п. 4.1. Также обратите внимание на строчку 11

$('#contentLinks').html($('#numbers', data));

#contentLinks - это id дива, в который загружаются материалы (в обложке)
#numbers - это id дива, который загружается в первый (на странице разделов материалов).

Если вы используйте ссылки "предыдущий материал/следующий материал” для навигации между статьями внутри номера, то в шаблон Страница материала нужно вставить такой фрагмент:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" style="text-align:left">
<a href="$OTHER1$">Листать назад</a>
</td>
<td width="50%"style="text-align:right">
<a href="$OTHER2$">Листать вперед</a>
</td>
</tr>
</table>

Почему для навигации внутри номера приходится использовать "ручной метод”, а не встроенные коды, существующие, например, в модуле Фотоальбома и Игр. Потому что встроенные коды осуществляют навигацию внутри внутри категории, а мы используем фильтры. Можно написать скрипт, возможно позже я так и сделаю.

И последний довесок, этакий бонус - разукраска материалов по рубрикам.

Если вы верстали дизайн сайта сами, тогда вы, конечно, разберетесь, куда впихивать дополнительные стили. Для типовых дизайнов  uCoz материалы располагаются в контейнере с классом eBlock, а заголовки материалов имеют класс eTitle. В шаблоне Вид материалов (модуля Доска объявлений - с материалами журнала) к указанным классам добавим  код $CID$, что есть id категории.

class="eTitle-$CID$"
class="eBlock-$CID$"

То же можно проделать и в шаблоне Страница материала с комментериями.

Теперь открываем файл стилей CSS и для каждой категории прописываем правила оформления. К примеру, раскрасим заголовки в разные цвета:

.eTitle-2, .eTitle-2:visited {color:#FF0000}
.eTitle-3, .eTitle-3:visited {color:#CC00CC}
.eTitle-4, .eTitle-4:visited {color:#333399}
.eTitle-5, .eTitle-5:visited {color:#339933}

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

Творческих вам успехов.

P.S. Прочитали? Загрузились? А теперь расслабьтесь и наслаждайтесь видео-версией урока с комментариями!