Html пример index: Простая html страница код пример

Leave a Comment / Html / By /

Пример создания темы оформления без использования сетки

Рассмотрим пример создания простой темы оформления без использования сетки. Данный способ пользуется большой популярностью, ввиду простоты и достаточной большой скорости создания таких тем. Такие темы имеют только один, в некоторых случаях незначительный, недостаток — их невозможно обновить простой заменой папки с темой, т.к. в шаблонах прописываются индивидуальные параметры при вставке блоков (видимой части модулей).

  1. Установленная копия движка ReadyScript (можно trial, все равно на .local она работает без ограничений, вечно)
  2. Сверстанные макеты. Для примера, подготовлены 5 простых макетов, из которых предстоит собрать тему оформления.
  • index.html – главная страница
  • catalog.html – страница со списком товаров
  • product.html – страница просмотра товара
  • anytext.html – любая текстовая страница
  • 404.html – страница для ошибок

Отсюда можно скачать полный архив с демо-версткой.

Необходимо установить на время создания темы оформления следующие опции в разделе Управление->Настройки системы:

Настройки системы

Для начала требуется создать «пустой» шаблон, чтобы можно было его выбрать в административной панели и дальше работать с ним в режиме реального времени.

Темы оформления в ReadyScript располагаются в папке /templates, соответственно создадим в ней каталог с нашей новой темой. Назовем его example. Разместим там файлы:

  • theme.xml, следующего содержания:

    <?xml version=»1.0″ encoding=»utf-8″?>

    <theme scriptType=»shop» scriptMajorVersion=»2″ themeType=»pc»>

    <general>

    <author>ReadyScript lab.</author>

    <name>Тестовая тема оформления</name>

    <description>Создана для статьи о создании собственной темы</description>

    <version>2.0.0.0</version>

    </general>

    <shades>

    <shade>

    <id>black</id>

    <title>Черная</title>

    <color>#000000</color>

    </shade>

    <shade>

    <id>green</id>

    <title>Зеленая</title>

    <color>#00FF00</color>

    </shade>

    </shades>

    </theme>

  • layout. tpl, следующего содержания:

    {* Основной шаблон *}

    {addcss file=»style.css»} {* подключаем файл ТЕКУЩАЯ_ТЕМА/resource/css/style.css *}

    {* Подключаем дополнительный стиль, если выбрана зеленая тема *}

    {if $THEME_SHADE == ‘green’}{addcss file=»style_green.css»}{/if}

    {$app->setDoctype(‘HTML’)}

    {$app->blocks->renderLayout()} {* Запускаем рендеринг данной страницы *}

  • preview_black.jpg — скриншот темы в черном цвете
  • preview_green.jpg — скриншот темы в зеленом цвете

Необходимо также сразу перенести картинки, css-стили, скрипты из каталога с версткой в соответствующие папки создаваемой темы. т.е. в resource/img, resource/css, resource/js.

Далее заходим в административную панель ReadyScript в раздел Веб-сайт -> Настройка сайта. Выбираем нашу тему оформления.

Выбор темы оформления

Тема установлена, можно переходить к её оформлению.

Для этих целей в ReadyScript служит раздел: Веб-сайт → Конструктор сайта. Заходим в него.

ReadyScript знает обо всех имеющихся «страницах» в системе (например: главная, просмотр категории товаров, карточка товара, регистрация, и.т.д) и предлагает администратору создать уникальное отображение для каждой из них. В случае, если для некоторой страницы индивидуальное отображение не задано, то используется отображение страницы по-умолчанию.

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

Настройки страницы

Нажимаем на иконку «Настройки страницы».

Окно настроек страницы

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

Создание шаблона default.tpl

Этот диалог поможет выбрать шаблон, а если его не существует, то создать. Не забываем нажать на кнопку «Сохранить», расположенную внизу страницы

Окно настроек страницы с выбранным шаблоном

В итоге у нас получится выбранное имя шаблона в диалоге редактирования страницы. После чего нажимаем «Сохранить» внизу страницы.

Связанный со страницей шаблон

Доказательством того, что страница по-умолчанию связана с шаблоном является данная надпись

Теперь нужно создать страницу «главная страница» и по аналогии связать её с шаблоном index.tpl.

Добавление новой страницы

Нажимаем добавить страницу и по аналогии связываем её с шаблоном index.tpl.

Создание шаблона Index.tpl

Пишем в файле index.tpl строчку Hello world и Сохраняем изменения.

Страницы в Конструкторе сайта

В итоге мы должны видеть две страницы в нашем Конструкторе сайта, которые связаны с соответствующими шаблонами. Чтобы обеспечить переносимость темы оформления на другой компьютер, нажимаем кнопку «Сохранить эталон темы» в правом углу, что приведет к созданию файла blocks. xml в каталоге нашей темы. Теперь, если зайти на главную страницу нашего сайта, мы увидим надпись Hello World! А это означает, что можно двигаться дальше.

Так как у нас на главной странице и на всех стальных страницах имеются общие части(шапка, левая колонка, футер), то логично вынести их на уровень выше из шаблонов default.tpl и index.tpl. И пользоваться общей частью с помощью механизма наследования шаблонов Smarty3.

Назовем шаблон с общей частью — body.tpl. И запишем в него следующее содержимое:

<div>

<header>

{* Вставляем блок «логитип» *}

{moduleinsert name=»\Main\Controller\Block\Logo»}

<div>

<span>8-800-0000-000</span><br>

<span>г. Краснодар, ул. Тестовая, 00</span>

</div>

</header>

<nav>

{* Вставляем блок «меню» *}

{moduleinsert name=»\Menu\Controller\Block\Menu»}

</nav>

<div>

<aside>

<nav>

{* Вставляем блок «категории товаров» *}

{moduleinsert name=»\Catalog\Controller\Block\Category»}

</nav>

<section>

{* Вставляем блок «новости» из категории news *}

{moduleinsert name=»\Article\Controller\Block\LastNews» category=»news»}

</section>

</aside>

<div>

{* Позволяем наследникам этого шаблона определять данную область *}

{block name=»content»}{/block}

</div>

</div>

<br>

<footer>

{* Вставляем еще раз блок «логотип», но с другими параметрами *}

{moduleinsert name=»\Main\Controller\Block\Logo»}

</footer>

</div>

Как видно, мы разметили разметили область «content», которую будут изменять наследники — default. tpl и index.tpl. А в местах, где должны отображаться блоки информации, связанные с базой, мы вставили конструкции по вызову блочных контроллеров. Кстати сказать, все блочные контроллеры в ReadyScript можно всегда найти в папках

/modules/ИМЯ_МОДУЛЯ/controller/block/ИМЯ_БЛОКА. Если открыть класс блока, то в нем всегда можно увидеть его понятное название на Русском языке, описание и ожидаемые параметры.

Переходим к наполнению файла default.tpl. Записываем в него:

{extends file=»%THEME%/body.tpl»} {* Указываем родителя данного шаблона *}

{block name=»content»} {* Указываем какую часть будем перезаписывать *}

{$app->blocks->getMainContent()} {* Вставляем «Главное содержимое страницы» *}

{/block}

Специально для свободы действий разработчиков, фронт-контроллер главной страницы не возвращает ничего, т.е. «главного содержимого страницы» — не будет, соответственно мы должны позаботиться о том, чтобы в центральной колонке у нас отобразился блок «лидеры продаж». Теперь предстоит заполнить шаблон index.tpl. Заполняем:

{extends file=»%THEME%/body.tpl»} {* Указываем родителя данного шаблона *}

{block name=»content»} {* Указываем какую часть будем перезаписывать *}

{* Выводим 6 товаров из категории «top» *}

{moduleinsert name=»\Catalog\Controller\Block\TopProducts» dirs=»top» pageSize=»6″}

{/block}

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

Делается это с помощью папки moduleview, которую мы должны создать в каталоге с темой. Чтобы перегрузить, например, шаблон «blocks/topproducts/top_products.tpl» из модуля catalog, нам нужно создать файл по следующему пути moduleview/catalog/blocks/topproducts/top_products.

tpl.

где:

  • moduleview — папка для перегрузки шаблонов модулей
  • catalog — имя модуля
  • blocks — указывает, что это папка для шаблонов блочных контроллеров
  • topproducts — имя блочного контроллера
  • top_products.tpl — имя шаблона

Наверняка у читателя возникает вопрос: «А как же можно быстро узнать какой шаблон нужно перегрузить?» На этот случай предусмотрен режим отладки, который можно включить в правом верхнем углу на главной странице сайта, если вы авторизованы под администратором. Находясь в этом режиме, у каждого блока при наведении появляется панель инструментов. Среди инструментов есть иконка «Информация о блоке», при наведении на которую отображается подробная информация о том к какому модулю принадлежит блок и какой шаблон он использует.

Информаия о блоке

Узнать какой шаблон использует тот или иной блок можно также заглянув в класс подключаемого блок-контроллера.

Итак, для наших нужд нужно создать следующие шаблоны:

  • moduleview/main/blocks/logo/logo. tpl — шаблон отображения логотипа
  • moduleview/main/blocks/breadcrumbs/breadcrumbs.tpl — шаблон хлебных крошек
  • moduleview/menu/blocks/menu/hor_menu.tpl — шаблон отображения меню
  • moduleview/catalog/blocks/category/category.tpl — шаблон отображения списка категорий в левой колонке
  • moduleview/catalog/blocks/topproducts/top_products.tpl — шаблон Лидеров продаж
  • moduleview/catalog/list_products.tpl — шаблон просмотра категории. (его использует фронт контроллер, поэтому нет секции blocks)
  • moduleview/catalog/product.tpl — шаблон карточки товара
  • moduleview/article/blocks/lastnews/last_news.tpl — шаблон списка новостей в левой колонке
  • moduleview/article/view_article.tpl — шаблон просмотра новости

Существует 2 методики быстрой перегрузки шаблонов модулей:

1.С помощью модификации существующего шаблона. Т.е. сперва нужно найти шаблон в папке с модулем (Например: /modules/catalog/view/. …) и скопировать его в соответствующую папку вашей темы (/templates/НАЗВАНИЕ ТЕМЫ/moduleview/catalog/…). А далее просто изменить HTML вокруг конструкций, возвращающих данные.

  1. Создание с нуля. Т.е. можно сразу создать шаблон в папке с темой (/templates/НАЗВАНИЕ ТЕМЫ/moduleview/МОДУЛЬ/….). Заполнить его необходимым HTML-кодом, а далее заменять строки переменными. Здесь возникает логичный вопрос: «Как можно узнать доступные в шаблоне переменные?». Ответ очень прост, с помощью режима отладки. Нужно кликнуть на иконку «Информация о блоке», и в новом окне откроются доступные переменные в шаблоне.

Настройки блоков

Нажмите на иконку

Информация о переменных блока

В отдельном окне откроются все переменные, паредаваемые в шаблон

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

Чтобы узнать более подробные сведения о переменной, в Smarty доступна конструкция {var_dump($var)}

Нужно учитывать, что если опция «Подробное отображение ошибок» отключена, то во время любого исключения или ошибки 404 будет отображаться шаблон exception. tpl. Поэтому наполним его следующим кодом:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Ой, ошибочка {$error.code}</title>

<link rel=»stylesheet» type=»text/css» href=»{$THEME_CSS}/style.css»>

</head>

<body>

<section>

<div>{$error.code}</div>

<div>{$error.comment}</div>

</section>

</body>

</html>

Дело в том, что в отличие от других шаблонов темы оформления, этот шаблон не оборачивается стандартной шапкой и футером из тегов html, head, body, а возвращается как есть, поэтому мы должны позаботиться сами о подключении CSS файлов здесь.

Чтобы позволить другим пользователям устанавливать полученную тему оформления, нужно просто добавить в zip архив, папку с темой — example.

Для загрузки новой темы оформления в систему ReadyScript, нужно зайти в административную панель в раздел Веб-сайт → Настройка сайта. Открыть диалог выбора темы оформления и нажать на кнопку «Выбрать zip-файл». После загрузки файла, тема станет доступна для выбора.

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

Скачать итоговую тему оформления можно здесь Тема «Молодежная», присутствующая в дистрибутиве ReadyScript собрана без использования сетки, её также можно использовать в качестве эталона для разработки собственных тем.

Шаблонизатор :: Инструкция пользователя

И зачем хранить этот файл на сервере? Зачем всем знать как что устроено?…

Лучше запомнить и удалить всё содержимое папки /readme/ 🙂

Шаблонизатор. 


Набор скриптов, обеспечивающий создание небольшого сайта на основе шаблонов.

Для работы необходим сервер, поддерживающий выполнение PHP-скриптов (PHP: Hypertext Preprocessor). Для использования не требуется знание программирования, а только знание языка гипертекстовой разметки документов HTML (HyperText Markup Language) Здесь и далее предполагается, что ваш сервер настроен на исполнение файлов PHP-скриптов, имеющих расширение файлов . php, а файлы с расширением .html будут показаны пользователю как html-код. Если настройки вашего сервера другие, то необходимо в любом UTF-8 совместимом текстовом редакторе изменить соответствующие строки в файле index.php. Затем следует переименовать файлы, исправив расширения на нужные.

Для работы необходима поддержка языка PHP. Желательно версии 5.2 и выше. Все файлы примеров работают в кодировке UTF-8, что более предпочтительно, по сравнению с кириллическими Win и KOI. Хотя сама обслуживающая программа не использует дополнительные специфические функции, все же желательно, чтобы PHP-сборка включала расширения: -enable-utf8 и -enable-unicode-properties. Iconv тоже должен быть сконфигурирован с поддержкой UTF-8.

В любую папку на сервере (в том числе можно использовать корневую папку веб-пространства) скопируете содержимое дистрибутива. Будем называть эту папку корневой папкой проекта. Сейчас это папка /site/index.php?/readme, которая находится в корне веб-пространства сервера www. macmax.ru.

Если HTTP-сервер работает под Apache 1.3+ или Apache 2.0+, то очень желательно настроить mod_rewrite для защиты системных папок от прямого обращения к ним, а также для удаления index.php из строки запроса, чтобы URL’ы были нормальные. Удаление index.php из строки запроса позволит вам использовать привычные относительные или абсолютные ссылки на страницах. В противном случае необходимо следить за тем, чтобы в ссылках был корректный путь. Пример настроек можно найти в файле example.htaccess.

Дистрибутив уже настроен на работу. Дополнительные финишные настройки можно осуществить редактируя файл index.php. Редактировать файлы необходимо в UTF-8 совместимом редакторе. Если PHP ниже версии 5.2, вам необходимо изменить значение в строке контроля версии файла index.php. Обслуживающая программа содержит код, совместимый с PHP версии 4.3.2 и выше.

После копирования файлов на сервер обратитесь к index.php. Будет выполнен тест работоспособности. Сперва проверяется версия PHP и наличие трёх системных папок. Если пути ошибочны обязательно отредактируйте index.php, записав туда верные имена папок проекта. Далее проверяется сборка PHP на наличие функций которые не используются шаблонизатором, но могут вам понадобиться для работы в режиме с дополнительными возможностями. Если вы не предполагаете использовать дополнительные возможности, то на результаты тестов сборки PHP можно не обращать внимания. Когда вы будете удовлетворены результатами тестов, нужно удалить с сервера файл install.php и приступать к эксплуатации проекта.

Этот шаблонизатор предназначен для небольших сайтов, которые обновляются не очень часто. Скрипты предоставляются бесплатно «KAK ЕСТЬ» и являются свободным программным обеспечением.

В корне проекта вы найдёте три папки. Первая содержит системные файлы, обеспечивающие всю работу по построению сайта на основе шаблонов (папка system). Редактировать содержимое этой папки не следует, если вы не понимаете последствия ваших действий. Все внесённые вами изменения в файлы этой папки могут поменять функциональность и идеологию работы шаблонизатора. Шаблоны, которые задают внешний вид страниц должны находиться в папке шаблонов (папка templates). А контент страниц, который будет подставлен в шаблон, должен быть представлен файлами в папке контента (папка html). Имена папок и место их расположения можно изменить, о чем необходимо записать в настройках стартового файла index.php.

Все используемые файлы изображений, подгружаемые CSS и JS файлы, и прочие им подобные необходимо хранить вне названных папок. В дистрибутиве для этого есть отдельная папка media. В папке шаблонов должны быть только шаблоны, в папке html только файлы с подгружаемым кодом, а в папке system управляющие файлы.

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

Обращение к странице проекта выглядит так:

<сервер><путь_до_проекта>index. php?<путь><файл.html>

Если с помощью Apache mod_rewrite было настроено обращение с нормальным URL, то так:

<сервер><путь_до_проекта><путь><файл.html>

Например, к этой странице можно обратиться
так: http://www.macmax.ru/site/index.php?/readme/index.php?/readme/index.html
или так: http://www.macmax.ru/site/index.php?/readme/readme/index.html
В любом случае запускается файл index.php и ему прямо или через rewrite rule передаётся адрес желаемой страницы.

После получения адреса, запрошенный файл ищется в папке html проекта. Если файл не найден, то выдаётся стандартное сообщение об ошибке 404 (Not Found). При успешном поиске, содержимое файла запоминается как SOURCE для дальнейшего использования. В корне html-папки проекта ищется файл с именем default_html и его содержимое запоминается как DEFAULT. Наличие в корне html-папки проекта файла default_html обязательно.

В коде SOURCE ищется html-тег с именем <template_name>, который должен содержать имя шаблона. Если такого тега нет или в папке шаблонов нет файла с таким именем, то в качестве шаблона будет использоваться шаблон default_template. Наличие в корне папки шаблонов файла default_template обязательно.

В коде шаблонов, в коде запрашиваемых файлов и в коде подгружаемых файлов можно использовать специальные метки, которые будут обработаны шаблонизатором. Метка начинается с символов «#{», затем сразу следует символ-код подстановки, затем латинские буквы имени и в конце символ «}».

Метки переменных (символ-код: $)

МеткаЗначениеОписание
#{$server_name}www.macmax.ru Имя сервера
#{$web_root}/site/index.php?/readme Папка проекта на сервере
#{$uri_prefix}/site/index.php?/readme Обращение к проекту. Эта переменная хранит в себе строку, которую необходимо использовать для построения корректных ссылок. Если было обращение через index.php, то значение этой переменной содержит «index.php?». Чтобы записать корректную ссылку на эту страницу надо в коде поставить:
#{$uri_prefix}/readme/index.html
Посмотрите примеры обращения через index.php и без него (второй вариант будет работать только с настроенным Apache mod_rewrite). Если вы настроили URL rewriting для скрытия запускающего файла из  URL, то в файле index.php поставьте TRUE как значение $URL_REWRITING, чтобы получить правильное значение префикса.
#{$uri}/readme/index.html Запрошенный файл
#{$dirname}/readme/ Папка, где находится запрошенный файл
#{$filename}index.html Имя запрошенного файла

Метки подгружаемых тегов (символ-код: %)

МеткаПримерОписание
#{%<имя_тега>}#{%test} Будет подгружено содержимое тега <test>, то есть строка «#{%test}» <test>будет заменена этим содержимым</test> Результат:

будет заменена этим содержимым

Нужный тег ищется в SOURCE. test}» будет заменена содержимым файла test.html Результат:

Это код из файла test.html

Нужный файл ищется рядом с SOURCE. Если файл с таким именем не найден он ищется в корне html-папки проекта. Если и там не найден, то поиск продолжается в папке шаблонов. И если опять не найден, то метка удаляется. В демонстрационном комплекте эта особенность поиска используется для вывода меню.

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

Вторым этапом подгружается PHP-обработчик, которому передаётся сформированный код. По умолчанию дистрибутив настроен так, что вызов предварительного обработчика не происходит, поскольку эта опция предназначена для продвинутых пользователей. Если вы не знакомы с языком программирования PHP, или не планируете использования дополнительного PHP-обработчика, то не включайте эту опцию и смело пропустите описание работы второго этапа. Включение происходит путём редактирования соответствующей строки в файле index.php. Предварительный обработчик должен считать содержимое массива $input, изменить $input[‘html_code’], который будет выведен на экран, записать нужные значения в массив $output, ключи которого являются метками переменных в тексте. В некоторых случаях допустимо изменение $input[‘html_source’] или $input[‘html_default’], поскольку они используются в третьем этапе. Имя файла предварительного обработчика совпадает с именем запрашиваемого файла, но с разрешением .php (или то, которое использует ваш сервер). Если предварительный обработчик с таким именем не найден, то произойдёт загрузка файла default_php из корня папки html или корня папки шаблонов.

Третий этап повторяет первый, но уже с обработанным текстом. Снова обрабатываются теги, затем файлы, и затем переменные. Полученный HTML выводиться на экран.

Эти странички иллюстрируют возможности шаблонизатора. Посмотрите их код и все будет понятно.

HTML — одиннадцать

HTML — одиннадцать Меню
  • Почему Одиннадцать?
    • Глоссарий
    • Отзывы
    • Производительность
  • Начало работы
    • Использование командной строки
    • Учебники
      • Краткие советы
    • Начальные проекты
    • Развертывание
    • Режим отладки
    • Программный API
  • Сообщество
    • Кодекс поведения
    • Открытый коллектив
    • Блог
    • Авторы
    • Таблицы лидеров
      • Добавить свой сайт
  • Работа с шаблонами
    • Макеты
      • Объединение макетов в цепочки
    • Коллекции
    • Создание страниц из данных
    • Пагинация
      • Навигация по страницам
    • Даты содержания
    • Постоянные ссылки
    • Интернационализация (i18n)
    • Распространенные ошибки
  • Использование данных
    • Настройка шаблонов
    • Одиннадцать предоставленных данных
    • Каскад данных
      • Данные основного материала
        • Настройка разбора основного материала
      • Файлы данных шаблонов и каталогов
      • Глобальные файлы данных
        • Предварительная обработка данных
      • Глубокое слияние данных
      • Глобальные данные конфигурации
      • Расчетные данные
    • Переменные среды
    • Файлы данных JavaScript
    • Пользовательские форматы файлов данных
  • Конфигурация
    • Промежуточное копирование файла
    • Игнорировать файлы
    • Фильтры
      • URL-адрес
      • слизень
      • журнал
      • get*CollectionItem
    • Шорткоды
    • Пользовательские теги
    • События
    • Смотрите и обслуживайте
      • Сервер разработки Eleventy
      • Вите
      • Браузерсинхронизация
  • Языки шаблонов
    • HTML
    • Уценка
    • WebC
    • JavaScript
    • Нанджакс
    • Жидкость
    • Руль
    • Усы
    • ЭДЖС
    • ХАМЛ
    • Мопс
    • Пользовательский
  • Плагины
    • Edge
    • Бессерверный
    • Изображение
    • Получить
    • Частичная гидратация <остров>
    • Рендеринг
    • Интернационализация (i18n)
    • RSS
    • Подсветка синтаксиса
    • Навигация
    • HTML <база>
    • Выход каталога
    • Инклюзивный язык
  • Службы API
    • Спарклайны
    • Изображение OpenGraph
    • Скриншоты
    • Аватар IndieWeb
  • История выпусков
  • Расширенный

Одиннадцать сборок уценка на 1399% быстрее, чем Gatsby .

Учитываемые языки:

  • HTML *.html
  • Markdown *.md
  • Webc *.Webc
  • Javascript *.1128.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid.jid. *.njk
  • Руль *.hbs
  • Усы *.mustache
  • EJS *.ejs
  • 6
      3 Haml *.haml0129
    • Мопс *.pug
    • Пользовательский *.*
    Одиннадцать Короткое имя Расширение файла н/м Пакет
    HTML .html н/д

    Файлы HTML можно дополнительно предварительно обработать с помощью дополнительного механизма шаблонов. Это можно настроить для каждого шаблона или глобально. Подробнее читайте в разделе «Изменение механизма рендеринга шаблона».

    Использование одних и тех же входных и выходных каталогов Перейти к заголовку #

    ВНИМАНИЕ:

    Это распространенная ошибка .

    Будьте осторожны с типом шаблона HTML при использовании одного и того же каталога --input и --output (это не значение по умолчанию).

    Если вы запустите одиннадцать более одного раза, он также попытается обработать ваши выходные файлы.

     $ одиннадцать --input=. --выход=. --formats=md,html
Написание ./README/index.html из ./README.md
$ одиннадцать --input=. --выход=. --formats=md,html
Написание ./README/index.html из ./README.md
Написание ./README/index-o.html из ./README/index.html

    Если вы собираетесь использовать --formats=html , вероятно, лучше не использовать одни и те же входные и выходные каталоги.

    Кроме того, вы можете заметить в приведенном выше выводе, что второй шаблон записал в index-o.html . Если входной и выходной каталоги совпадают с номерами и , исходный шаблон называется index.html , мы добавляем суффикс -o , чтобы избежать перезаписи самого шаблона. Это особый случай, применимый только к index.html 9.0129 имен файлов. Суффикс -o можно настроить с помощью параметра конфигурации htmlOutputSuffix .

    Другие страницы в Языки шаблонов:

    • HTML
    • Уценка
    • WebC
    • JavaScript
    • Нанджакс
    • Жидкость
    • Руль
    • Усы
    • ЭДЖС
    • ХАМЛ
    • Мопс
    • Пользовательский

    Связанные документы

    • Механизм шаблонов по умолчанию для файлов HTML

    Индекс HTML-теста

    Индекс HTML-теста

    Тесты HTML доступны в нескольких вариантах.

    Тесты со средствами навигации

    Каждая категория тестов доступна с использованием нескольких различных привязей. Имя обвязки описывает, как тестовая разметка содержится в ней, например, в случае встраивания Xlink используется XLink с осью show, настроенной на встраивание.

    • полный: Автономный, XHTML