Статьи

Когда размер не имеет значения

Опубликовано 12/31/07 // Тэги: // Комментарии: 0

Честно говоря, тема обзора различных CMS довольно скучна: в большинстве, у всех движков однотипная установка, а настройка через администраторский интерфейс не дает возможности «развернуться». Поэтому мне захотелось найти «джентльменский набор», в который включен только необходимый минимум для управления сайтом. Движок должен быть компактным и желательно … слегка не доведенным до лада, что ли. На мой взгляд, такой системой в итоге можно будет удобнее всего управлять, не отвлекаясь на мелочи, и, во-вторых, ее реально привести в порядок и сделать интересной в плане дизайна (то, что более чем на 50% привлекает посетителя).

В результате непродолжительного поиска в Интернете я смог «выловить» две разработки: Snews и Textpattern. Обе замечательно поддаются модификации, как выявилось позже, и все же TXP придется оставить в стороне – это совсем «не из той оперы». А вот Snews – как раз то, что нужно. Это, к слову, совсем не популярный движок, я даже не помню, по какой ссылке его скачал, только не на офсайте. Размер Snews не превышает 30 Kb (в архиве, а в распаковке – 120 Kb), для CMS-скрипта размер очень маленький. Распространяется движок по лицензии Creative Commons и, таким образом, он бесплатен и делать мы с ним можем все, что душа пожелает.

При ближайшем рассмотрении

Итак, скрипт скачан, что дальше? Ознакомимся со списком возможностей, чтобы понять, с чем мы вообще имеем дело. Перечисленный «фичи» стандартны для небольшого движка, но некоторые встро-енные функции все же выделю:

  • RSS Feed – поддержка агрегации, то бишь импорта RSS-лент.
  • External language file support – поддержка языков.
  • Easy external files inclusion – легкое подключение внешних файлов.
  • Comments – поддержка комментариев.
  • Template Independency – подключение шаблонов.
  • Search Engine (User) Friendly URLs – поддержка человеко- и поископонятных путей, что способствует индексации web-страниц в поисковиках.

Что касается системных требований, то они типичны: Apache с модулем mod_rewrite, PHP 4.3.x и MySQL. В базе данных будут храниться без малого пять таб-лиц, из пяти же файлов состоит сам Snews. В readme.HTML – инструкция по уста-новке. Она, установка, трехшаговая: выполнение SQL запроса (подробности в readme), редактирование snews.php и закачка файлов на сервер с назначением прав доступа «777». Главный файл snews.php, по сути, и есть движок. В начале его содержания прописана секция DATABASE VARIABLES – ее следует подкорректиро-вать. Не забудьте о параметре $db[‘website’]! Логин/пароль для входа в админку будут «test/test» соответственно :).

На заглавной странице сайта нас встречает надпись «Content not found», что не столь важно. Первым делом зайдите в настройки (путь ‘Snews’/settings/), по ходу решив несложную арифметическую задачу, и поменяйте эти test/test на что-нибудь более безопасное. Затем скорректируйте остальные настройки, но тут вы разберетесь и сами.

Шкурный вопрос, или использование XHTML шаблонов

Согласитесь, интерфейс Snews слишком минималистский – по крайней мере, хоро-ших эмоций не вызывает. Но это не беда – разработчики предусмотрели в движке поддержку шаблонов. Достоинство (а может и недостаток – смотря как подойти) Snews в том, что он работает не на сравнительно громоздком Smarty (к примеру), а собственно на XHTML (eXtensible HyperText Markup Language – расширенный язык разметки гипертекста). Я уже упоминал функцию Template Independency – хороша она тем, что интеграция с шаблонами благодаря ей стала предельно простой. Полагаю, что базовые знания HTML/CSS у вас имеются? Тогда приступим к практике, и вы во всем убедитесь сами.

В readme.HTML для реализации наших целей ничего полезного не найдете при всем желании, зато на сайте лежит руководство «News Tips and Tricks». В дальнейшем оно вам и нам очень поможет.

Я не упоминал, что в Snews входит файл index.php – это разметка нашего сайта. От-крыв для наглядности index.php в HTML-редакторе (я использую Adobe Dreamweaver, чего и вам советую), помимо разметки, вы обнаружите помеченные прямоугольниками php-вставки. Так вот, эти вставки и есть функции. Они как раз и описываются в «News Tips and Tricks» с пояснениями. Функций не так уж и много, по ходу мы рассмотрим их поподробнее.

Сайтов, где можно раздобыть HTML-шаблоны – бесчисленное множество. Если у вас есть что-нибудь от Templatemonster.com, так вообще отлично ;). Что касается меня, то я взял бесплатный HTML-шаблон под названием Modern World. Смотрится он приятно, да и размер небольшой (20 Kb). Далее по тексту подразумевается, что и вы его скачали :).

А сейчас приступаем к практике.
Скопируем содержимое архива папку с Snews и переименуем index.HTML в index.php (с заменой старого файла). Предварительно до этого момента я создал несколько публикаций, чтобы затем проконтролировать, как выводится содержание на заглавную страницу. Очень важно к index.php прикрепить CSS-файл style.CSS из папки images/. Для этого проверяем и исправляем соответствующую строку в index.php. Я использовал абсолютный путь к style.CSS – так надежнее.

  1. <link href="http://localhost/snews/images/style.CSS" rel="stylesheet" type="text/CSS" />

Если на странице появились все изображения, значит адрес стилевого файла указан правильно. Нет – значит нет, и проблема очевидна. Старый style.CSS в директории Snews можно удалять, так как он больше не понадобится.

Одной из самых важных функций, без которой не работает корректно, в частности, админ-панель, является

  1. <?php title(); ?>

Поэтому вписываем ее где-то вначале нашего индексного файла.
Переменная website_title отвечает за название сайта. Чтобы оное отображалось в логотипе, находим в index.php строку

  1. <h2>Modern World</h2>

и заменяем ее на

  1. <h2><?php echo s(‘website_title’); ?> </h2>

Это же название мы выведем в заголовок окна:

  1. <title>»Название сайта»<?php echo s(‘website_title’); ?></title>

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

  1. <a href="#">Modern World…

до

  1. «…ea commodo consequat».

Тэги <p> и </p> оставляем: сюда мы вписываем код

  1. <?php center(); ?>

Далее обратим внимание на боковую колонку. Что в ее можно вместить: список новых статей? Нет, не это очень экономно. Ведь у нас уже есть раздел «Новые публикации», а, во-вторых, в Snews предусмотрена карта сайта. Лучше поместим сюда список категорий, комментарии, ссылки и поиск (blogroll) – как в блоге, да и не только в нем.

Поисковую строку, на мой взгляд, правильнее расположить сверху, на виду у посетителя (признак хорошего тона):

  1. <?php searchform ()?>

Внедрение списка категорий в боковую панель:

  1. <ul>
  2. <?php categories(); ?>
  3. </ul>

Пишем

  1. <h1>Последние комментарии</h1>

, а в <p> и </p> заключаем

  1. <?php new_comments(5, 30); ?>

, где 5 – количество комментариев, 30 – количество символов на строку. Кстати, желательно написать пару комментариев ДО этого – чтобы проверить, как они будут «смотреться».

Приведем в порядок навигацию. В нашем понятии навигация – это несколько ссылок. Сверху страницы мы видим поле со ссылками Home, Modern world, Behind the idea, Join the movement и Contact. Если заглянуть в код, то в соответствующем порядке несложно обнаружить <a href="#">Home</a> и далее по списку. Вместо “#” выставим адрес, абсолютный либо относительный (относительно корня сайта (!), а не главной страницы). Разделов, к которым можно указать пути, не так уж и много:

  • Contact – отправка сообщений администратору сайта
  • Sitemap – карта сайта
  • Rss – экспорт новостей
  • Archive – история публикаций
  • Home – переход на главную страницу.

Вот пример моего списка:

  1. <a href="/snews/">Главная</a>
  2. <a href="/snews/sitemap/">Карта сайта</a>
  3. <a href="/snews/contact/">Контакты</a></div>

Перечень всех разделов находится в snews.php после комментария #SITE LANGUAGE VARIABLES, в #categories.

Структуру сайта завершает «подвал» (footer). Вся его информативность – копирайты, год, автор и т. д. Сюда же я вынес ссылку для входа на сайт (админу – панель администрирования).

  1. <div id="footer">
  2. <p><?php login_link(); ?> &copy; 2006-<?php echo date (‘Y’) ?>,
  3. <a href="http://site.com" title=" site.com"> site.com</a></p>
    4. </div>

Начало уже есть :).

Каскадные трюки, или Special Styling

В недрах Snews (папка images) лежит стилевой файл style.CSS, который мы привязали к index.php и который мы сейчас подвергнем правке. Знакомы или незнакомы вы с каскадными стилями – не столь важно. Скоро поймете сами, и безо всяких справочников, для чего нам это нужно.

Редактировать CSS-код удобно в программе Adobe Dreamweaver в режиме “Split” – с предосмотром и изменением в «реальном времени». Вот примеры из моего style.CSS:

  1. /* текстовые поля */
  2. textarea {
  3. width: 450px;
  4. height: 350px;
  5. border: none;
  6. font-size: 11;
  7. background: url(comment_top.gif); //за фон берем любое изображение
  8. }
  9. /* шрифт комментариев */
  10. #message {
  11. font-size: 100%; font-weight: ; margin: 0 0 50px 0;
  12. }
  13. /* ширина полей ввода */
  14. input {
  15. padding: 3px;
  16. margin: 0;
  17. }
  18. /* стиль комментариев */
  19. .comment {
  20. color: #808080;
  21. margin: 0 0 10px 0;
  22. background: #fcfce8 url(comment.gif) center no-repeat;
  23. background-position: 15px 50%; /* x-pos y-pos */
  24. border-top: 2px solid #FFD324;
  25. border-bottom: 2px solid #FFD324;
  26. padding: 5px 20px 5px 45px;
  27. }
  28. /* стиль форм */
  29. input, textarea, select {
  30. font-family:Tahoma, Arial, sans-serif;
  31. }

Впрочем, о вкусах не спорят: в Интернете несложно найти и «»препарировать» приглянувшийся CSS стиль. Главное сильно не увлекаться, т. к. размер >10 Kb уже заставляет задуматься…

Прикручиваем WYSIWYG

Форматировать текст при наборе в Snews станет гораздо удобнее, если интегрировать в его какой-нибудь wysiwyg-редактор. В качестве примера возьмем TinyMCE. Скачав, распакуйте архив в любую директорию на сайте. Затем в файл движка index.php в контейнер <head> впишите следующее:

  1. <script language="javascript" type="text/
  2. javascript" src="tiny_mce/tiny_mce.js"></
  3. script>
  4. <script language="javascript" type="text/
  5. javascript">
  6. tinyMCE.init({
  7. mode : "textareas"
  8. });
    9. </script>

Особое внимание обратите на путь к tiny_mce.js – он должен быть правильным, поскольку этот файл инициализирует TinyMCE. Следующее, что нужно сделать – найти и удалить в snews.php строки, начинающиеся с echo HTML_input(‘button’ (секция ARTICLES FORM). Этим действием мы убрали стандартные кнопки редактирования. Вот и все, теперь материал можно создавать через wysiwyg.

Сам себе локализатор

Эту идею реализовал в своей модификации Snews некий Shiaprogrammer. Ничего сверхоригинального он не сделал – просто вынес строки, касающиеся локализации, из snews.php в отдельный rus-lang.php. Тем самым использовал функции движка External language file support и Easy external files inclusion (впрочем, последняя – функция PHP в целом). Просто и удобно. А идея такова:
1) В snews.php в самом начале содержания вставляем строку

  1. <?php include(‘language/rus-lang.php’); ?>

2) Из этого же файла вырезаем строки от // LANGUAGE VARIABLES до …#SYSTEM VARIABLES и вставляем их в rus-lang.php.
3) В начало rus-lang.php впишем <?php, в конец – ?>

… и начинаем самостоятельно (ну, или с помощью словаря :) переводить значение каждой переменной, не забывая о кодировке (должна совпадать с кодировкой index.php). Если лень заниматься переводом, скачайте Snews Shiaprogrammer’а и скопируйте rus-lang.php себе (никакой лицензии я не нашел – значит, копировать не запрещено :).

Закручиваем гайки

К моменту публикации сайта все кажется почти идеальным. Но, поверьте, любая ошибка так или иначе всплывет на поверхность, если ее не предупредить. Поэтому, прежде чем предъявить свое «чудо» широкой общественности, обязательно протестируйте его. Как это сделать? Проверьте, правильно ли отображается содержание сайта во всех браузерах («всех» – это, прежде всего, Firefox, Opera, IExplorer) в различных разрешениях, начиная от 800×600. Немаловажно, чтобы весь HTML- и CSS-код соответствовал стандартам. Эти стандарты вполне конкретны, и их устанавливает организация The World Wide Web Consortium. На сайте этой организации доступны валидаторы – специальные программы для проверки правильности кода. Ими я и рекомендую воспользоваться. Как вариант – встроенный в Dreamweaver валидатор, коим я предпочитаю искать ошибки.

***

Набор инструментов (где скачать Trial-версии программ):

Adobe Dreamweaver CS 3 – www.adobe.com/go/downloads/
GridinSoft Notepad – http://gridinsoft.com

Ссылки:

www.solucija.com/forum/ – официальный форум Snews
www.snews-cms.life89.ru – русская модифицированная версия Snews от Shiaprogrammer’а
http://validator.w3.org – валидатор HTML
http://jigsaw.w3.org/CSS-validator – валидатор CSS

Оставить комментарий