Язык разметки Web Site Pad
Язык разметки предназначен для описания html-страниц, определения макросов и их использования в шаблоне и тексте самих страниц. Основной идеей языка разметки являются макросы, секции и упрощенный синтаксис для генрации html-кода. Эти средства позволяют создавать наборы html-страниц из единого текста исходного кода.
Основные понятия
- Комментарии
- Макросы
- Секции
- Генерация HTML: заголовки, параграфы и списки
- Форматирование текста
- Изображения и ссылки
- Текстовые блоки
- Таблицы
Комментарии
В исходном коде веб проекта можно использовать комментарии которые не будут сохранятся в создаваемых программой файлах. Комментарий начинается с новой строки и символа ';':
Макросы
Макросы позволяют определить фрагмент текста под определенным именем, а затем выполнить вставку текста, указав только имя.
Определение макроса начинается с новой строки, имя макроса должно начинаться с символа '$' за именем должно следовать текст макроса:
;value - текст макроса
$name value
При определении макроса в памяти создается макропеременная с этим именем, в которой и хранится определенный им текст.
Вызов макроса, выполняется указанием имени макроса в фигурных скобках:
{$name}
При вызове макроса, в памяти ищется макропеременная с заданным именем и из нее извлекается значение для вставки.
Пример:
$program Web Site Pad
; Используем макрос в тексте
Добро пожаловать в {$program}! {$program} позволяет создавать мини-сайты.
Результат:
Существуют специальные макропеременные: $charset, $template, $name, $content и т.д. назначение которых будет рассмотрено ниже.
Секции
Секции предназначены для того чтоб программа при сборке проекта могла определить какую часть текста в какой файл сохранить. Секция помечается специальным символом определения - указанием имени файла заключенным в квадратные скобки. Таким образом, чтоб создать 2 файла необходим следующий исходный код:
Этот текст будет сохранен в файле index.html
[about.html]
А этот текст в файле about.html
При разборе секции анализируется его имя и расширение (расширение отделяется от имени символом ".") и в зависимости от этого выполняются следующие действия:
- Для расширения html:
- текст преобразуется в html-код
- html-код перекодируется в соотвествии со значением макропеременной $charset
- открывается шаблон с именем определенным в макропеременной $template (шаблоны распологаются в папке template папки проекта, шаблоном по умолчанию является index.html)
- в открывшемся шаблоне производится макроподстановка: html-код вставляется как макропеременная под именем $content. Поэтому в каждом шаблоне должно быть определено место для вставки макропеременной $content, иначе шаблон будет сохранен как есть, без содержания. Так же дополнительно для макроподстановки доступна и переменная с именем $name которая содержит имя секции.
- полученный в качестве этих действий текст сохраняется в файл с именем $name
- Для других расширений текст сохраняется в файл как есть, без дополнительных преобразований.
- Секции без расширения (без символа "." в имени) - макросекции: в них текст сохраняется в макропеременной под именем секции
Случай определения макросекции (с именем без расширения) можно считать еще одним способом определения макроса. Определенный таким образом макрос можно так же использовать для вставки текста как в другой секции, так и определить место для вставки в шаблоне.
Может возникнуть случай когда нужно в файл вывести текст заключенный в квадратные скобки и начинающийся с новой строки, например, для ini-файлов. В этом случае, чтобы эта строка не была воспринята программой как начало новой секции перед открывающей квадратной скобкой нужно поставить экранирующий символ: '\', при генерации текста он будет проигнорирован:
\[general]
key=value
В результате в файл info.ini будет помещен текст:
key=value
Генерация HTML: заголовки, параграфы и списки
Одним из достоинств языка разметки является генерация html-кода на основе упрощенного синтаксиса. Аналогом этого являются языки разметки для написания комментариев в форумах и различных Wiki-подобных системах.
Заголовки
== Заголовок 2
=== Заголовок 3
Заголовок первого уровня должен начинаться с символа "=" и последующего пробела. Заголовки второго и третьего уровня должны начинаться с двух и трех сиволов "=" соответственно. В результате будет сгенерирован html-код:
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
Параграфы
Текст отделенный от предыдущего текста пустой строкой выделяется в параграф. Если внутри текста параграфа встречается переход на новую строку, то в html-код добавляется тег перевода строки:
Это новый параграф,
с переводом строки.
Будет сгенерирован html-код:
Списки
Имеется возможность создавать нумерованные и ненумерованные списки:
* Ненумерованный элемент 2
# Нумерованный элемент 1
# Нумерованный элемент 2
Будет сгенерирован html-код:
<li>Ненумерованный элемент 1</li>
<li>Ненумерованный элемент 2</li>
</ul>
<ol>
<li>Нумерованный элемент 1</li>
<li>Нумерованный элемент 2</li>
</ol>
Списки могут быть вложенными, для этого каждый уровень нужно отделять от другого отступом в 2 пробела.
Форматирование текста
Выделение текста
Для написания текста полужирным шрифтом или курсивом используется следующий синтаксис:
Результат:
Текст может быть написан полужирным, курсивом или полужирным курсивом.
html-код:
Стили
Написанному тексту можно задать произвольный стиль:
Результат:
Текст может быть написан красным цветом или зеленым. Можно задать определенный класс стиля.
html-код:
Стиль может быть распространен на параграф или любой другой блочный элемент. Для этого нужно указать определение стиля перед нужным элементом:
= Красный заголовок
.[color:blue]
Параграф с синим текстом
Результат:
Красный заголовок
Параграф с синим текстом
html-код:
<p style="color:blue">Параграф с синим текстом</p>
Изображения и ссылки
Ссылки
Для добавления в текст ссылок используется синтаксис:
*[http://www.websitepad.com Посетите www.websitepad.com]
*[http://www.websitepad.com target=_new Открыть www.websitepad.com в новом окне]
Результат:
http://www.websitepad.com
Посетите www.websitepad.com
Открыть www.websitepad.com в новом окне
html-код:
<a href="http://www.websitepad.com">Посетите www.websitepad.com</a>
<a href="http://www.websitepad.com" target="_new">Открыть www.websitepad.com в новом окне</a>
Изображения
Для добавления изображений используется синтаксис:
Результат:
html-код:
Определен упрощенный вариант ссылки-изображения. Для этого к определению изображения нужно дополнительно написать атрибуты href и при необходимости target:
Результат:
html-код:
Текстовые блоки
Для размещения в тексте блоков с исходным кодом или заранее отформатированным текстом используется следующий синтаксис:
>отформатированный текст.
Результат:
отформатированный текст.
html-код:
Предварительно
отформатированный текст.
</pre>
Стили текстовых блоков
Текстовому блоку можно задать определенный стиль, для этого используется следующий синтаксис:
>Предварительно
>отформатированный текст.
Результат:
отформатированный текст.
html-код:
Предварительно<br/>отформатированный текст.<br/>
</div>
Таблицы
Для упрощенной разметки таблиц используется следующий синтаксис:
^ Заголовок 1^ Заголовок 2
|Ячейка 1-1| Ячейка 1-2
.[background-color:#c0e0ff]
|| Объединенная ячейка с голубым фоном
Результат:
| Заголовок 1 | Заголовок 2 |
| Ячейка 1-1 | Ячейка 1-2 |
| Объединенная ячейка с голубым фоном | |
html-код:
<thead>
<tr><td align="center">Заголовок 1</td><td align="center">Заголовок 2</td></tr>
</thead>
<tbody>
<tr><td>Ячейка 1-1</td><td align="right">Ячейка 1-2</td></tr>
<tr style="background-color:#c0e0ff"><td align="center" colspan="2">Объединенная ячейка с голубым фоном</td></tr>
</tbody>
</table>
Для управления форматированием ячеек таблицы, после символа разделения ячеек "|" нужно указать необходимое количество пробелов. Если пробел отсутствует - то выравнивание отсутствует (по умолчанию, по левому краю), если один пробел - выравнивание по центру, если два и более, то по правому краю:
Ячейчки можно объединять, для этого нужно поставить подряд столько знаков разделения ячеек "|", сколько ячеек объединяется в одну:
Для каждой строки можно задать определенный стиль, для этого нужно указать стиль перед этой строкой:
|| Объединенная ячейка с голубым фоном
