Универсальный генератор сайтов - Web Site Pad

Почему я называю Web Site Pad - универсальным генератором сайтов. Универсальным генератором его делает поддержка скриптового языка JavaScript. Генерация структуры сайта и его контента выполняется скриптом, который может быть легко изменен или переписан пользователем без переделки самой программы. Таким образом любой пользователь сам может добавить новые возможности либо полностью переделать скрипт генерации сайта. Попытаюсь кратко описать идеалогию Web Site Pad.

Исходный код проекта

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

Далее идет раздел секций, секция начинается с имени в квадратных скобках. Все переменные заданные внутри секции сохраняются как переменные секции, а не как глобальные переменные. Текст написанный внутри секции сохраняется в свойстве секции content. В последствии он так же используется скриптом сборки для подстановки в шаблон и записи полученного текста в html-файл.

Таким образом исходный код проекта это просто исходные данные и параметры для скрипта сборки сайта.

Шаблон

Шаблон проекта доступен для редактирования и просмотра через пункт меню Проект/Шаблон.... В редакторе шаблона можно изменить html-шаблон и CSS и JS файлы относящиеся к шаблону. Рассмотрим простейший шаблон:

<html>
<head>
<title>{$title}</title>
<meta name="keywords" content="{$keywords}"/>
<meta name="description" content="{$description}"/>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}"/>
</head>
<body>
{$content}
</body>
</html>

Как видно он практически ничем не отличается от обычного HTML, просто в нем дополнительно указаны места для вставки переменных $title, $keywords, $description, $charset, $content, которые при генерации страницы будут заменены на нужный текст.

Скрипт сборки

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

Таким образом для создания небольшого статического сайта достаточно написать в коде проекта несколько секций с текстом страниц сайта и выполнить сборку. Этого уже достаточно для создания простеньких сайтов-сателлитов.

Пользовательский скрипт сборки

Особая, WebSitePad-овская магия начинается когда в работу вступают пользовательские скрипты сборки. Пользовательский скрипт сборки это файл расположенный в шаблоне проекта под именем template.js, в нем должна быть определена функция build(). Если такая функция существует, то она вызывается сразу после анализа исходного кода проекта и перевода его в сруктуру данных доступную для использованием скриптом и перед выполнением сборки страниц из секций по умолчанию. В этой функции можно проанализировать все определенные в исходном коде секции и переменные, изменить их, удалить или добавить новые.

Самый простейший пример использования это создание меню или карты сайта из ссылок на страницы:

function build()
{
  var menu = '<ul>';
  var section;
  for (i = 0; i < this.sectionCount; i++)
  {
    section = this.section(i);
    menu += '<li><a href="' + section.name + '">' + section.title + '</a></li>';  
  }
  this.menu = menu + '</ul>';
}

В этом скрипте выполняется проход по коллекции секций, создается список ссылок на них, который затем сохраняется в переменной генератора menu.

Теперь нам остается добавить место вставки переменной menu в шаблон:

<html>
<head>
<title>{$title}</title>
<meta name="keywords" content="{$keywords}"/>
<meta name="description" content="{$description}"/>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}"/>
</head>
<body>
{$menu}
{$content}
</body>
</html>

И наконец напишем в коде проекта вот такой текст - 3 секции задающие страницы нашего сайта:

[index.html]
$title Страница 1
= {$title}

Напишите здесь текст страницы...

[index2.html]
$title Страница 2
= {$title}

Напишите здесь текст страницы...

[index3.html]
$title Страница 3
= {$title}

Напишите здесь текст страницы...

Выполните команду Просмотр и если все сделано правильно, то будет создано 3 страницы, на каждой из которых будет присутствовать меню. И если добавить в проект еще одну секцию, то будет создана еще одна страница которая так же автоматически появится и в меню.

Как видите, функционал Web Site Pad-а легко расширяется дополнительными скриптами. Скрипты могут быть написаны самим пользователем либо прямо включены в шаблоны поставляемые с программой или загруженные с сайта. Именно скрипты определяют какой сайт и как будет сгенерирован: сайт-сателлит, каталог товаров, веб-галлерея или дорвей.

Другие статьи