Шаблон код html: HTML шаблоны сайтов

Содержание

Глава 4: DjangoBook по-русски | Django на русском

Глава 4. Шаблоны

Перевод © Попов Руслан <ruslan.popov • gmail>

В предыдущей главе вы могли заметить что-то особенное в том, как
мы возвращали текст в наших представлениях. А именно, HTML был
напрямую вбит в код на Python, примерно так:

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

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

Любое изменение в дизайне страницы требует изменения в коде. Дизайн сайта изменяется гораздо чаще, чем сам код сайта. Удобнее будет иметь возможность вносить изменения в дизайн, не затрагивая код.
Разработка кода на языке Python и работа с HTML являются двумя различными дисциплинам и наиболее профессиональные среды web-разработки разделяют такую ответственность между отдельными людьми (или даже отдельными подразделениями). От дизайнеров и HTML/CSS кодеров не следует требовать редактирования Python кода для выполнения их работы.
Возможность одновременной работы программистов над Python кодом и дизайнеров над шаблонами является наиболее эффективным подходом, в отличие от необходимости одним ожидать окончания работ других, чтобы приступить к выполнению своих задач.

По этим причинам гораздо проще и более удобно разделять дизайн
страницы от кода, обеспечивающего её работу. Мы можем сделать это
с помощью шаблонной системы Django, которую
мы обсудим в этой главе.

Основы шаблонной системы

Шаблон Django — это строка текста, которая предназначена для разделения представления документа от его данных. Шаблон определяет места подстановки и различные виды основной логики (шаблонные теги), которая управляет отображением документа. Обычно, шаблоны используются для создания HTML, но шаблоны Django также способны участвовать в генерации любого текстового формата.

Давайте начнём с простого примера. Данный шаблон описывает HTML
страницу, которая благодарит посетителя за заказ, отправленный
компании. Рассматривайте его как вид письма:

<html>
<head><title>Ordering notice</title></head>

<body>

<h2>Ordering notice</h2>

<p>Dear {{ person_name }},</p>

<p>Thanks for placing an order from {{ company }}. It's scheduled to
ship on {{ ship_date|date:"F j, Y" }}.</p>

<p>Here are the items you've ordered:</p>

<ul>
{% for item in item_list %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

{% if ordered_warranty %}
    <p>Your warranty information will be included in the packaging.</p>
{% else %}
    <p>You didn't order a warranty, so you're on your own when
    the products inevitably stop working.</p>
{% endif %}

<p>Sincerely,<br />{{ company }}</p>

</body>
</html>

Данный шаблон представляет собой обычный HTML с несколькими
переменными и шаблонными тегами. Рассмотрим его подробнее:

Любой текст взятый в скобки (т.е., {{ person_name }}) является переменной. Это
означает «вставить значение переменной с указанным именем.» (Как же мы определяем значения переменных?
Скоро мы это рассмотрим.)
Любой текст взятый в фигурные скобки и проценты (т.е.,
{% if ordered_warranty %}) является
шаблонным тегом. Определение тега
достаточно простое: тег просто указывает шаблонной системе
«сделать что-то.»
Вышеприведёный шаблон содержит тег for
({% for item in item_list %}) и тег
if ({% if ordered_warranty %}).
Тег for работает почти так же как и
оператор for языка Python, позволяя вам
циклически обрабатывать каждый элемент
последовательности. Тег if, как вы можете
ожидать, работает аналогично логическому оператору
if. В данном примере, тег проверяет
является ли True значением
ordered_warranty. Если это так,
шаблонная система отобразит всё, что находится между
{% if ordered_warranty %} и {% else %}. В противном случае, шаблонная система
отобразит всё между {% else %} и {% endif %}. Следует отметить, что элемент {% else %} является необязательным.
Наконец, второй параграф данного шаблона содержит пример
использования фильтра, который
предоставляет наиболее удобный способ изменения формата
переменной. В данном примере, {{ ship_date|date:»F j, Y» }}, мы передаём значение переменной
ship_date фильтру date,
указывая для него аргументы «F j, Y». Фильтр date форматирует дату в
соответствии с указанным форматом. Фильтры подключаются к
переменным с помощью символа |, аналогично
Unix потокам.

Каждый шаблон Django имеет доступ к некоторому количеству встроенных тегов и фильтров, многие из которых будут рассмотрены в последующих разделах главы. Приложение F FIXME содержит полный список тегов и фильтров, будет неплохо, если вы ознакомитесь с этим списком. Также есть возможность создавать свои собственный фильтры и теги, мы рассмотрим это в главе 9 FIXME.

Зачем нужен HTML-шаблон? — Еmail маркетинг

Время чтения: 12 минут

Если при фразе «шаблон HTML-письма для рассылки» волосы встают дыбом от ужаса – текст для вас. Мы не заставим учить языки программирования и погружаться в тонкости верстки. Просто расскажем, что такое шаблон и почему все вокруг говорят о коде.

Что такое шаблон письма?

Шаблон email-рассылки – основа электронного письма. Это пустая форма письма, которую заполняют подходящими элементами – изображениями, текстом, кнопками с призывом к действию, ссылками на сайт и соцсети. Готовый шаблон выглядит так:

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

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

Структура шаблона

Шаблон строится по стандартной структуре: хедер, основная часть и футер. Это обязательные элементы шаблона, и неважно, о какой email-рассылке идет речь – продающей, контентной или письме-открытке.

Хедер

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

Хедер в email-рассылке зоомагазина Petshop.ru выглядит так:

Компания вставила логотип, название, рекламный слоган, номер колл-центра и ссылки на разделы из каталога товаров.

Основная часть

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

Емкое письмо от фитнес-клуба: завлекающий текст, тематическая картинка. Один минус – нет кнопки с призывом к действию. Ее не стоит прятать в футер. Лучше поставить в основную часть.

Футер

Подвал письма. Здесь указывают юридический адрес отправителя, ссылки на соцсети и кнопку «отписаться от рассылки».

Это футер сервиса по продаже билетов Bileter.ru. Серый скучный фон, и зря. Попрощайтесь с подписчиками ярко, чтобы запомниться и оставить приятное впечатление. Продумайте дизайн, а текст составьте не из официально-деловой лексики, а понятных и душевных слов.

Виды шаблонов

Платформы для email-рассылок предлагают 3 варианта работы с шаблонами:

Готовый шаблон;
Блочный редактор;
Собственный HTML-шаблон.

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

В Mailigen – 108 готовых шаблонов. Чтобы их найти, войдите на платформу и кликните на «Кампании – Шаблоны – Предлагаемые шаблоны».

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

Блочный редактор. Это инструмент, благодаря которому создают шаблон из готовых блоков. Знания HTML-кода не нужны.
В Mailigen есть 10 блоков, их можно переставлять местами, добавлять и удалять:

Текст;
Видео;
Кнопка;
Заголовок;
RSS-контент;
Изображение;
Группы в соцсетях;
Шеринг в соцсетях;
Динамический контент;
Горизонтальный разделитель.

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

Собственный HTML-шаблон. Это отдельный HTML-файл рассылки. Если ты не верстальщик и не программист, уже на этом этапе определение «HTML-файл» может вызвать ступор.

HTML – это стандартный язык программирования, который «понимают» все веб-страницы интернета. С помощью этого языка описывают разметку документов – то есть то, как документы выглядят на сайте.

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

Возможности HTML-шаблона

Описать разметку HTML-шаблона новичку непросто. Даже программист, который пишет коды для сайтов, не всегда справится с этой задачей. Тут нужно знать не только алгоритмы, которыми пользуется HTML-язык, но и особенности верстки email-письма. Поэтому для работы с HTML-макетами надо применять знания как программирования, так и верстки рассылок.

Зато если научиться «кодить», получится создать уникальные макеты email-рассылок. Плюс, при грамотно прописанном коде верстка письма будет правильно отображаться:

а) на устройствах с любой шириной экрана;
б) в любом браузере и любой почте.

Теперь про ограничения. Язык HTML разработали в 1980-90-х годах. С тех пор он обновлялся несколько раз, а в интернете появились новые браузеры и почтовые провайдеры. Они не составили единые стандарты обработки кода, поэтому писать код так, чтобы его правильно считывали все браузеры и почтовые провайдеры, стало сложно.

Вот тут-то новичок и может попасть в ловушку – написать разметку макета, используя современные версии языка HTML. Это риск, ведь не все веб-системы смогут прочитать закодированную информацию. Как результат – съедет верстка: размер кнопок станет большим, или, наоборот, маленьким; футер потеряется, а текст выйдет за пределы шаблона.

Чтобы не разочароваться в возможностях HTML-верстки и сделать email-рассылку, которая откроется «без потерь», нужно использовать старые способы работы с кодом – те, что разработали в 1990-х годах.

Как верстать HTML-шаблон?

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

В коде обозначают и ширину письма. Оптимально – поставить 600 пикселей. Этот размер хорошо «подстраивается» под экраны разных диаметров.

Есть рекомендации и по размеру шрифта – 13 пикселей и больше. Меньше ставить не нужно, иначе на смартфоне шрифт будет мелким. Человек не сможет его прочитать.

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

Шрифты лучше использовать общепринятые: Arial, Times New Roman, Georgia, Tahoma и другие. Если вставите дизайнерский шрифт, есть риск, что он не отобразится у пользователя – это зависит от версии браузера и настроек почтовых программ. Тогда шрифт автоматически «переведут» в стандартный. Человек сможет прочитать текст, но, скорее всего, он съедет: ведь высота и ширина символов для каждого шрифта отличается.

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

Где сделать HTML-шаблон?

HTML-шаблон письма можно сделать на платформе для email-рассылок. Такая опция есть в Mailigen. Заходишь на платформу, кликаешь «Кампании – Шаблоны – Визуальный редактор».

Появляются два пустых поля. Левое – чтобы написать код. Правое – чтобы посмотреть, как выглядит письмо.

В визуальном редакторе можно с нуля написать код для рассылки, а можно подправить HTML-код готового макета. Для этого выбираем шаблон из предлагаемых и переходим в визуальный редактор. Видим, как выглядит email-рассылка в поле для кода и в поле для предварительного просмотра шаблона.

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

Бесплатные сервисы для работы с шаблонами

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

Stripo

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

Stripo предлагает 300 бесплатных готовых HTML-шаблонов, которые можно экспортировать на вашу платформу для email-рассылок. Код сохранится – вы сможете отредактировать его в любой момент и изменить внешний вид рассылки. Чтобы правок было меньше, выбирайте в Stripo тематические шаблоны – для промо-писем, welcome-серии, уведомлений, брошенной корзины.

Например, такой макет можно выбрать, чтобы сделать акционную рассылку в День Рождения пользователя:

А такую для брошенной корзины магазина товаров для туризма:

Litmus Templates

Сайт с бесплатными готовыми HTML-шаблонами для welcome-цепочек, объявлений, уведомлений и других видов писем.

Такой макет Litmus предлагает для рассылки-квитанции:

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

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

Behance

Платформа для дизайнеров, где можно выложить свою лучшую работу или вдохновиться шедеврами коллег со всего мира. У сервиса есть отдельный проект для email-маркетологов – Free Email Template. Смотрите яркие работы верстальщиков и дизайнеров и бесплатно скачивайте понравившиеся HTML-макеты.

На чем остановимся?

Все шаблоны писем сделаны на основе HTML-кода. Уже готовые макеты в вашей платформе для рассылок тоже когда-то были написаны в HTML. Вопрос в том, как удобно собирать шаблоны именно вам – с помощью кода или блоков.

Новичкам можно не забивать голову сложными символами из языка HTML и остановиться на шаблонах, которые предлагает платформа-рассыльщик. Макеты разработаны профессионалами и чаще всего верстка и дизайн у них адаптивные – подходящие для любой ширины экрана. Просто вставьте свои картинки и текст, и письмо готово к отправке.

Правда, в предложенных макетах не всегда хватает элементов, которые нужны для вашей email-рассылки. Например, стоит одна кнопка, а надо две. Эти ограничения – не повод резко выучить HTML. Перейдите в блочный редактор и вставьте недостающий блок в макет.

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

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

Хочешь больше узнать про верстку? Нужен уникальный дизайн письма? Позвони или напиши на [email protected].

html — HTML-файлы, распознаваемые как шаблон Django в VS Code

Я новичок в VS Code, начиная с ST3 и TextMate до этого. Немного сбит с толку, почему HTML не определяется автоматически и не предлагается в качестве выбора языка после нажатия на нижний правый индикатор языка?

Я пытался явно добавить "files.associations": {"*.html": "html"} в настройки пользователя, но безрезультатно.

Запуск VSCode v1.15.1 на macOS v10.12.6.

nootrope

5 Сен 2017 в 00:58

6 ответов

Лучший ответ

Включить следующую строку настройки emmet.includeLanguages": {"django-html": "html"} в Настройки VSCode.json:

{
"python.jediEnabled": false,
"files.autoSave": "afterDelay",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": 
"automaticallyOverrodeDefaultValue",
"editor.minimap.enabled": true,
"workbench.colorTheme": "Monokai",
"editor.largeFileOptimizations": false,
"html.format.indentInnerHtml": true,
"html.format.indentHandlebars": true,
"emmet.includeLanguages": {"django-html": "html"},
"[django-html]": {

},
"files.associations": {
    "*.html": "html"
}

}

Это делает исправление для меня в версии 1.33.1

onlyphantom
12 Ноя 2019 в 04:32

Решено! Я начал удалять расширения и обнаружил, что виноват Django Template 1.2.0 (bibhasdn.django-html). Как только я отключил его, опция HTML вернулась в меню «Языковые ассоциации». Шляп на @ifconfig, подтверждающий, что я должен ожидать его появления.

nootrope
5 Сен 2017 в 04:35

Пакет расширения Python, включающий пакеты DJANGO, позволил VSCOde видеть все HTML как шаблоны Django и устанавливать комментарии как {% comment%} вместо 

Удаление это решило проблему.

Tzvi Gregory Kaidanov
11 Июл 2018 в 06:52

1) Нажмите «Выбор языка» в нижней правой панели инструментов.

2) Выберите «Настроить сопоставление файлов для .html» из выпадающего списка.

3) Выберите html из выпадающего списка.

Это приведет к удалению html-файла, помеченного как Django-html каждый раз, когда вы создаете html-документ.

Ardent Coder
13 Май 2020 в 22:01

Эти настройки работали у меня в vscode settings.json

"files.associations": {
    "**/templates/*.html": "django-html",
    "**/templates/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements",
    "*.html": "html"
  },
  "emmet.includeLanguages": { "django-html": "html" }

Ibrahim Noor
15 Авг 2020 в 10:59

Я думаю, что самый простой способ — это проверить. В правом нижнем углу кода вы можете увидеть нижний колонтитул, как показано на рисунке ниже.

Итак, нажмите там Django HTML . Затем можно увидеть всплывающее окно с вводом. Введите HTML в качестве ввода и выберите HTML . Задача решена.

colidyre
29 Фев 2020 в 11:22

Как адаптировать шаблон email для рассылок через eSputnik

Допустим, до этого момента вы делали рассылки в другой ESP, или ваш верстальщик сделал кастомный шаблон. Если просто скопировать и вставить в редактор свой HTML, многие функции будут заблокированы. Нельзя будет редактировать любой элемент (контейнер/структуру/полосу) и базовые блоки в drag’n’drop-режиме.

Чтобы по-полной использовать возможности редактора eSputnik, шаблон нужно адаптировать. Для этого нужно:

HTML-код письма.

Редактор eSputnik.

Фишки по адаптации, которые вы узнаете из статьи.

Приступим к адаптации своего HTML письма.

Простой вариант адаптации шаблона в eSputnik

Этот способ подойдет, если вы не хотите добавлять блоки или менять их расположение, а просто надо редактировать содержимое: текст, ссылки, картинки.

Для примера мы взяли код шаблона Wemo на популярном ресурсе reallygoodemails.com. Загрузим выбранный нами образец HTML и поэтапно рассмотрим, как адаптировать его.

Если вы уже столкнулись с задачей подогнать свой код письма для редактора eSputnik, то наверняка знаете, как загрузить свой HTML. Нужно зайти в Сообщения — Сообщения — Создать Email.

И в разделе шаблонов “Базовые” выбрать вариант “Мой HTML”.

После этого вы увидите редактор с визуальной областью письма ① и активное окно редактора кода ②. В последнем можно открыть секцию CSS для задания стилей ③.

Для удобства верстки или редактирования письма рекомендуем распределять HTML и CSS письма по соответствующим секциям редактора кода. Часто в HTML-коде писем CSS-стили содержатся внутри тега


<head>

например:

Необходимо вырезать все, что обернуто в тег


<style></style>

внутри


<head></head>

и вставить в секцию CSS редактора кода.

В нашем шаблоне сделано так же. Разделим HTML и CSS по секциям.

Секция HTML

Секция CSS

Редактор eSputnik отобразил наше письмо в визуальном поле, но не видно картинок.

Все в порядке, нам еще предстоит их загрузить. А пока нажмите верхнюю строчку в хедере письма.

Как вы видите, сразу после вставки HTML-кода шаблона в eSputnik можно редактировать ссылки, картинки и их названия (альтернативный текст). Сделать это можно как через панель редактирования, так и через редактор кода.

Попробуем загрузить картинки в письмо.

Кликните на логотип в визуальной части письма и в меню слева нажмите на значок “Заменить”.

После этого откроется галерея картинок, которая будет пуста.

Вам нужно загрузить в нее изображения. Для этого есть два пути:

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

Нажмите на иконку загрузки изображения по текущей ссылке:

После этого выбираем лого из галереи и для остальных не отобразившихся картинок в шаблоне проделываем ту же работу.

Когда все картинки подставлены — получаем красивый шаблон.

Проверим его отображение на мобильном устройстве и убедимся, что картинки отображаются корректно.

Итак, сразу после вставки HTML-кода письма в eSputnik, есть возможность редактировать ссылки и картинки. А чтобы редактировать обычный текст, необходимо применить CSS-класс esd-text к тегу, в котором находится весь блок текста. Обычно это теги p, div, td, h2, h3, h4, span. К последнему применять спец. класс можно только в том случае, если внутри


<span>

находится весь текст, а не его часть. Применим класс esd-text к обертке текста.

После того, как класс esd-text задан, кликните по тексту в визуальной области письма, и eSputnik позволит редактировать текст, а также стилизовать его через панель редактирования.

Это все, что нужно для простого способа адаптации шаблона.

Last post

Усложненный вариант адаптации

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

Для начала разберемся, как устроены письма в eSputnik.

Об иерархии вложенности писем eSputnik

Письма в редакторе eSputnik состоят из:

полос;

структур;

контейнеров;

блоков.

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

Рассмотрим пример вложенности полосы, в которой находится структура с двумя контейнерами и блоками «Картинка» + «Текст»:

Полоса с классом esd-stripe.

Структура с классом esd-structure.

Контейнер с классом esd-container-frame.

Блок с классом esd-block.

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

Почти всегда есть куда вставить класс для полосы, структуры и/или контейнеров. Но из-за специфичной верстки блоков не всегда удается добавить для них класс так, чтоб они корректно адаптировались. Поэтому мы рекомендуем добавлять класс esd-block-html в обертку такого блока, тогда eSputnik сможет активировать кнопки управления (сохранение, перемещение, копирование, удаление) и дальше редактировать такой блок можно будет через HTML.

Список доступных классов Блоков

esd-block-image — класс для определения блока «Картинка»;

esd-block-text — класс для определения блока «Текст»;

esd-block-button — класс для определения блока «Кнопка»;

esd-block-spacer — класс для определения блока «Разделитель»;

esd-block-social — класс для определения блока «Соцсеть»;

esd-block-html — класс для определения блока «HTML»;

esd-block-menu — класс для определения блока «Меню».

Адаптируем полосу

Найдем ячейку таблицы, которой можно назначить класс для полосы. Такая таблица нашлась — это контент письма целиком. Устанавливаем ему класс esd-stripe.

После добавления класса eSputnik определил ячейку как полосу, и появилась рамка с элементами управления. Теперь полосу можно редактировать через боковую панель, а также удалять/копировать/перемещать ее прямо в визуальной области письма.

Адаптируем структуру

Назначим соответствующий класс esd-structure для структуры.

Как и у полосы, у структуры появилась рамка и элементы управления.

Адаптируем базовые блоки

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

Логотипу — esd-block-image.

Блоку с текстом — esd-block-text.

Аналогичным образом мы назначили класс esd-block-image.

Вот как выглядит общий результат по адаптации блоков:

Попробуем адаптировать карточку товара с кнопкой

Здесь нам не хватает Контейнеров, чтобы была возможность перетаскивать блоки из панели drag’n’drop.

Находим ячейку таблицы, в которой расположено фото товара с альт-текстом «Wemo Mini», и указываем ей класс esd-container-frame — это будет наш первый Контейнер.

В этом контейнере превращаем блок в картинку при помощи добавления класса esd-block-image.

Поработаем со вторым контейнером. Находим ячейку таблицы, в которой расположен текст «Wemo Mini», и указываем ей класс esd-container-frame.

Все, что находится в ① и ② областях ячейки esd-container-frame — наши блоки.

Весь контент этого контейнера — текст и кнопка. Указываем ячейке первой обасти класс esd-block-text, а ячейке второй области — блок esd-block-button.

Аналогичным образом мы превращаем оставшийся пользовательский HTML в блоки редактора eSputnik. Не нужно каждый настраивать вручную все карточки. Достаточно сделать заготовку в одной структуре, а потом дублировать ее с помощью кнопки, которая находится в элементах управления. В новых структурах просто заменить текст, картинки, ссылки.

Итоги

Мы показали:

Как адаптировать кастомный HTML для редактирования текста, картинок и ссылок в редакторе eSputnik.

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

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

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

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

Рассмотрим пример создания темы оформления с использованием сеточного css-фреймворка gs960. Темы собранные по сетке являются более удобными для пользователей, так как в такие темы можно добавлять блоки (видимые части модулей) из административной панели, с помощью Конструктора сайта, не имея навыков работы с версткой. Такие темы легко обновляются путем замены всех файлов в папке с темой оформления, т.к. все сведения о настройках блоков находится в базе данных.

Установленная копия движка ReadyScript (можно trial, все равно на .local она работает без ограничений, вечно)
Сверстанные по сетке макеты. Для примера, подготовлены 5 простых макетов, из которых предстоит собрать тему оформления.

index.html – главная страница
catalog.html – страница со списком товаров
product.html – страница просмотра товара
anytext.html – любая текстовая страница
404.html – страница для ошибок

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

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

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

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

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

theme.xml, следующего содержания:
5 Тестовая тема оформления gs960
6 Создана для статьи о создании собственной темы по сетке gs960
layout.tpl, следующего содержания: 1 {* Основной шаблон *}
2 {addcss file=»960gs.css»} {* подключаем CSS фреймворк gs960 *}
3 {addcss file=»style.css»} {* подключаем файл ТЕКУЩАЯ_ТЕМА/resource/css/style.css *}
5 {if $THEME_SHADE == ‘green’}{addcss file=»style_green.css»}{/if} {* Подключаем дополнительный стиль, если выбрана зеленая тема *}
6 {$app->setDoctype(‘HTML’)}
7 {$app->blocks->renderLayout()} {* Запускаем рендеринг данной страницы *}
preview_black.jpg — скриншот темы в черном цвете
preview_green.jpg — скриншот темы в зеленом цвете

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

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

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

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

В случае использования тем по сетке, на сторону ReadyScript переносится обязанность генерировать сетку для страницы. Каждая страница может состоять из трех типов элементов:

Контейнер — это корневой элемент для секций, создает рабочую область. Контейнеру присваивается класс, container_N, где N — количество колонок, в соответствии с правилами gs960. В контейнеры обычно оборачивают независимые горизонтальные секции сайта, например, Шапка, Контент, Футер — это 3 разных контейнера. Почему удобно делить страницу на контейнеры? Потому, что контейнеры могут наследоваться на остальных страницах, т.е. Шапку и Футер удобно определить один раз на странице по-умолчанию, а вот центральную часть (Контент) определять разной на каждой странице.
Секция — область внутри контейнера, имеющая определенную ширину. Основное предназначение секции — это удерживание содержимого в пределах своей области. Секции присваивается класс grid_N, где N — количество колонок, в соответствии с правилами gs960.
Блок — видимая часть модуля, в которой отображается определенная информация. Блок размещается внутри секции. Каждый модуль может иметь неограниченное число блоков. Например, модуль «Каталог» содержит в себе следующие блоки: «Последние просмотренные товары», «Список категорий», «Рекомендуемые товары».

Далее мы будем конструировать страницы на основе нашей верстки с использованием описанных выше трех составляющих. Элементы верстки с классами container_… — это контейнеры, элементы с классом grid_… — это секции, все что находится внутри блока секций — это HTML-код блока. HTML-код блоков мы будем переносить уже в шаблоны соответствующих блоков, а структуру контейнеров и секций создадим в Конструкторе сайта.

Начнем со страницы по-молчанию. Согласно верстке, на всех страницах имеется 3 контейнера:

шапка
контент (центральная часть)
футер

Посмотрим, как в верстке описаны контейнеры:

2 … содержимое контейнера «Шапка»

5 … содержимое контейнера «Контент»

8 … содержимое контейнера «Футер»

Создадим данные контейнеры в конструкторе сайта.

Добавим контейнер «Шапка», нажатием на одноименную кнопку. Контейнер шапки имеет класс container_12, из этого следует, что используется 12 колоночная система верстки — это означает, что полная ширина страницы составляет — 12 колонок и общая ширина секций, которые могут поместиться в однку строку также составляет 12 колонок. Контейнер также имеет дополнительный класс header необходимо указать его в поле CSS класс.

Окно добавления контейнера

По аналогии добавим 2 других контейнера — «Контент», «Футер». Все контейнеры — 12 колоночные. У контейнеров «Шапка» и «Футер» есть дополнительные классы, header и footer соответственно. У контейнера «Контент» дополнительного класса — нет. После создания контейнеров страница по-умолчанию выглядит следующим образом:

Страница по-умолчанию с контейнерами

Заметки

Пока речь идет о контейнерах, то стоит рассмотреть все имеющиеся параметры у контейнера, исключительно для справки.

Ширина — Количество колонок, на которое будет делиться ширина контейнера.
CSS класс — Дополнительный класс, который будет приписан в аттрибуте class у HTML-элемента
Название — Любое текстовое название контейнера
Внешний элемент — HTML-элемент, в который будет обернут HTML-элемент контейнера.
CSS-класс оборачивающего блока — CSS-класс, для внешнего HTML-элемента.
Внешний шаблон — позволяет задать произвольный шаблон, в котором можно задать любую оборачивающую верстку для контейнера.
Внутренний шаблон — позволяет задать произвольный шаблон, который будет оборачивать все содержимое контейнера.

Внешний элемент

Если у контейнера задан внешний элемент, например div, и задан CSS-класс оборачивающего блока, например — wrap-block, то итоговый сгенерированный HTML будет иметь следующий вид:

Внешний шаблон

Если у контейнера задан внешний шаблон следующего содержания:

…любое содержание…

5 {$wrapped_content} {* Зарезервированная пременная. Означает — место вставки HTML-кода контейнера *}

Итоговый сгенерированный HTML-код контейнера будет иметь следующий вид:

…любое содержание…

5 {* начало стандартного HTML кода контейнера *}

7 … содержимое контейнера

9 {* конец стандартного HTML кода контейнера *}

Как видно из примера, опция внешний шаблон позволяет привнести любой HTML-код вокруг элемента контейнера.

Внутренний шаблон

Если у контейнера задан внутренний шаблон следующего содержания:

…любое содержание…

5 {$wrapped_content} {* Зарезервированная пременная. Означает — место вставки HTML-кода содержимого контейнера *}

Итоговый сгенерированный HTML-код контейнера будет иметь вид:

…любое содержание…

6 … содержимое контейнера

Как видно из примера, опция внутрненний шаблон позволяет привнести любой HTML-код вокруг содержимого контейнера.

Далее приступим к переносу Секций из верстки в Конструктор сайта. Рассмотрим секции контейнера «Шапка».

Видно, что в контейнере присутствуют 3 секции.

ширина — 4 колонки, пользовательских классов — нет.
ширина — 4 колонки, префикс — 4 колонки, пользовательских классов — нет
ширина — 12 колонок, пользовательский CSS класс — topMenu

Чтобы добавить секцию необходимо выбрать пункт «Добавить секцию», в выпадающем меню контейнера.

Окно добавления секции

Аналогичным образом переносим все секции из нашей верстки во все контейнеры. Получаем следующую сетку:

Секции в контейнерах страницы по-умолчанию

Заметки

Рассмотрим все имеющиеся параметры у секций.

Название секции для автоматической вставки модулей — этот параметр позволяет поставить метку на секцию.(левая, центральная или правая колонка или другое значение). Другие модули при установке могут использовать эту информацию для автоматического добавления своих блоков на страницы шаблона.
Ширина — ширина секции, указывается в колонках.
Внутреннее выравнивание — устанавливает выравнивание блоков внутри секции. В случае, если задано значение «на всю ширину», то блоки вставляются как есть. Если задано значение «слева» или «справа», то блоки внутри секции будут обернуты div’ом со стилем float:left или float:right соответственно.
Префикс — Отступ-слева (префикс по терминологии gs960), указывается в колонках. На уровне CSS задается с помощью: padding-left.
Суффикс — Отступ справа (суффикс по терминологии gs960), указывается в колонках. На уровне CSS задается с помощью: padding-right.
Сдвиг влево(pull) — Смещение влево (pull по терминологии gs960), указывается в колонках. На уровне CSS задается с помощью: position:relative;left:XX;
Сдвиг вправо(push) — Смещение вправо (push по терминологии gs960), указывается в колонках. На уровне CSS задается с помощью: position:relative;left:XX;
Пользовательский CSS класс — CSS класс, добавляемый к элементу секции.

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

Шапка
- Логотип (Системный модуль → Логотип сайта)
- Номер телефона (Произвольный HTML)
- Меню (Меню → Меню)
Контент
- Каталог (Каталог → Список категорий)
- Новости (Статьи → Список свежих новостей)
- Центральная часть (Системный модуль → Главное содержимое страницы)
Футер
- Логотип (Системный модуль → Логотип сайта)

Чтобы добавить блок, необходимо воспользоваться соответствующим пунктом выпадающего меню секций.

Окно выбора блока для вставки

Например, чтобы добавить логотип в шапку сайта, выберите «Системный модуль» в списке слева, а справа отметьте блок «Логотип сайта». Откроется диалог настройки блока.

Диалог настройки блока Логотип

Блока «Номер телефона», в системе не существует, поэтому воспользуемся блоком «Произвольный HTML», и просто перенесем часть HTML из верстки.

Добавление произвольного HTML

По аналогии добавим и настроим все блоки на странице по-умолчанию. В результате получим следующее.

Блоки в секциях страницы по-умолчанию

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

3 //блок Логотип

6 //блок Произвольный HTML

15 //Блок Категории товаров
16 //Блок Список свежих новостей

20 //Блок Главное содержимое страницы

26 //Блок Логотип

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

Рассмотрим подробнее как это можно сделать.

Сперва необходимо добавить страницу «Главная страница» в Конструкторе сайта.

Диалог добавления страницы

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

Клонирование контейнера

В результате копирования контейнера получаем:

Клонированный контейнер

Удаляем ненужный для главной страницы блок «Главное содержимое страницы» и добавляем в секцию 9 блок Каталог товаров → Продукты из категории. Производим настройку блока.

Настройка блока Продукты из категории

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

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

Делается это с помощью папки 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 вокруг конструкций, возвращающих данные.

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

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

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

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

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

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

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

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

5 Ой, ошибочка {$error.code}

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

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

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

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

Как работать с шаблонами?

В новом редакторе мы предлагаем вам новый способ управления шаблонами в разделе Меню > Email маркетинг > Мои шаблоны.

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

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

Примечание: Шаблоны, созданные в новом редакторе, не могут быть использованы для автоответчиков или сообщений автоматизации.

Как работать с новыми шаблонами?

Чтобы создать новый шаблон из секции шаблонов:

Перейдите в Меню > Email маркетинг > Мои шаблоны и кликните кнопку Создать шаблон.
Дайте своему шаблону имя, состоящее из до 100 символов.
Вы можете выбрать Готовый шаблон или Пустой шаблон, и создать на его основе свое сообщение.

Как создать новый шаблон из редактора:

Наведите курсор на кнопку Сохранить и выйти.
Из выпадающего меню выберите Сохранить как шаблон.
Введите название шаблона и кликните Создать.

Теперь шаблон будет сохранен в Меню>>Email маркетинг>>Шаблоны.

Чтобы управлять своими шаблонами:

Наведите курсор на меню действий (три вертикальные точки).
Здесь вы увидите три опции:

Переименовать — используйте эту опцию, чтобы изменить название шаблона
Изменить — используйте эту опцию чтобы работать с шаблоном в редакторе
Скачать HTML — используйте эту опцию чтобы скачать HTML код шаблона
Удалить — используйте эту опцию чтобы польностью удалить шаблон из вашего аккаунта

Кликните выбранное действие, чтобы выполнить его.

Примечание: Шаблоны из старых версий редактора не будут доступны в новой панели с шаблонами.

Как я могу протестировать свой шаблон?

В разделе Тест и предпросмотр существует три способа протестировать создаваемый вами шаблон.

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

На что похож чистый HTML-код интернет-сайтов?

За написание этой статьи хочу сказать «спасибо» одному замечательночу человеку из мира Joomla. Звать его Beliyadmin. Как-то в разговоре обсуждали мой очередной сайт (верстку), короче, искали баги. В какой-то момент вспомнили о валидности HTML-кода.

Ведь действительно, если глянуть на многие исходные коды страниц — становится очень страшно. Код HTML бывает такой страшный!

Не зря умные люди придумали CSS для удобства и вообще для упрощении множества процедур, особенно при создании сайтов, да хотя бы простых статей при наполнении тех же сайтов.

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

DOCTYPE

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

<!doctype html>

Заголовок страницы <head>

Здесь обязательно надо указывать тег <Title>с указанием названия страницы. Также в <head> указывается исходная кодировка, подключаемые стили CSS, также подключаемые скрипты. Скрипты и CSS находятся в соответствующих папках. Так же указывем OpenGraph разметку и, конечно, не забываем про viewport:

<head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
    <meta name="description" content="Краткое описание страницы">
    <meta name="title" content="Заголовок страницы">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> /* Отвечает за адаптивную верстку */
    <link rel="shortcut icon" href="/favicon.ico">
    <meta property="og:type" content="website">
    <meta property="og:url" content="ссылка">
    <meta property="og:locale" content="ru">
    <meta property="og:locale" content="ru">
    <meta property="og:description" content="Краткое описание страницы">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="Заголовок страницы">
    <meta property="og:title" content="Заголовок страницы">
    <link href="/css/app.css" rel="stylesheet">
</head>

Классифицируем <body>

Использование class для тела сайта позволяет использовать уникальные шаблоны и стили для каждой страницы, если, конечно, используете постраничную верстку. Например, вы можете задать для каждого class свое оформление заголовков h3 с использованием дочерних селекторов: .page1 h3 .page2 #two h3.

Семантически чистое меню

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

<ul>
   <li><span>Главная</span></li>
   <li><a href="about.php">О нас</a></li>
   <li><a href="contact.php">Контакты</a></li>
</ul>

Главный блок DIV для содержимого страницы

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

.wrapper {
    max-width : 1280px;
    margin: 0 auto
}

Важный контент должен быть первым

Будет лучше, если ваш важный контент, с чтоки зрения SEO, такой как новости или приглашения, будет опубликован первым. Если правая или левая колонки содержат в себе навигацию (например, меню), то лучше сделать его как можно ниже в DOM.

Подключение активного содержимого

A это было первым, что я сделал, когда создал первый сайт при помощи PHP. Я разбил сайт на 4 логические части, и каждая подгружалась при помощи команды include. Лучше всего будет, если вы подгружаете отдельно верхнее меню, боковые и футер. В таком случае вам будет проще управлять содержимым.

Закрытые теги

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

Иерархия заголовков

Не забываем, что на странице может быть только один заголовок h2. А под ним h3 и h4. Применимо только для страницы материала/карточки товара.

Содержимое, содержимое, содержимое

Это понимают все, надеюсь. Без содержимого сайт — просто пустышка, который стыдно показывать. Текст не забываем оформлять параграфами <p>. Использование переноса <br/> приводит к схлопыванию форматирования. Не всегда красиво. Также на забываем про отступ слева первой строки для красной строки или отступ снизу у параграфа.

Нет стилям в HTML

В коде страницы не должно быть никакого форматирования, особенно такого как <font>. Держите ваши стили в CSS файлах, и будет вам счастье.

Проверяем сайт в валидаторе.

Есть бесплатный сервис validator.w3.org — проверяем HTML и исправляем ошибки кода. CSS проверять CSS не стоит, так как много не проходят кроссбраузерные стили.

Не испольузем заголовки hX в названиях блоков.

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

<div>
    <h4>Название блока</h4>
    <div>Содержимое</div>
</div>

Правильно:

<div>
    <div>Название блока.</div>
    <div>Содержимое</div>
</div>

Используйте этот шаблон HTML в качестве начального для любого проекта веб-разработки

Когда вы создаете новый веб-сайт, важно иметь хорошую стартовую основу. В этой статье я объясню, что такое шаблон HTML 5 и как создать базовый шаблон для использования в ваших проектах.

Что такое шаблон HTML 5?

Согласно Википедии,

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

Шаблон в HTML — это шаблон, который вы добавите в начале вашего проекта. Вы должны добавить этот шаблон на все свои HTML-страницы.

Пример шаблона HTML 5

Давайте взглянем на базовый пример.

  

  
    
    
    
     Шаблон HTML 5

Что такое тип документа в HTML?

Первая строка в вашем HTML-коде должна быть объявлением doctype. Тип документа сообщает браузеру, в какой версии HTML написана страница.

Если вы забыли включить эту строку кода в свой файл, тогда некоторые из тегов HTML 5, например

, <нижний колонтитул> и <заголовок> могут не поддерживаться браузером.

Что такое корневой элемент HTML?

Тег — это элемент верхнего уровня HTML-файла. Вы вложите в него теги и .

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

Что такое заголовочные теги в HTML?

Теги содержат информацию, которая обрабатывается машинами. Внутри тегов вы будете вкладывать метаданные, которые представляют собой данные, описывающие документ для машины.

  <заголовок>
    
    
    
     Шаблон HTML 5

Что такое кодировка символов UTF-8?

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

По данным Консорциума World Wide Web,

Кодировка на основе Unicode, такая как UTF-8, может поддерживать множество языков и может размещать страницы и формы в любом сочетании эти языки.Его использование также устраняет необходимость в логике на стороне сервера для индивидуального определения кодировки символов для каждой обслуживаемой страницы или каждой входящей отправки формы.

Что такое метатег области просмотра в HTML?

Этот тег отображает ширину страницы до ширины экрана устройства. Если у вас мобильное устройство шириной 600 пикселей, то окно браузера также будет шириной 600 пикселей.

Начальный масштаб управляет уровнем масштабирования. Значение 1 для начального масштаба предотвращает масштабирование по умолчанию браузерами.

Что означает X-UA-Compatible?

Этот тег определяет режим документа для Internet Explorer. IE = edge — самый высокий поддерживаемый режим.

Что такое теги заголовка HTML?

Тег </code> — это заголовок веб-страницы.Этот текст отображается в строке заголовка браузера.</p><pre> <code> <title> Шаблон HTML 5

Таблица стилей CSS

Этот код свяжет ваш собственный CSS-код со страницей HTML. rel = "stylesheet" определяет отношения между файлом HTML и внешней таблицей стилей.

Теги сценария в HTML

Внешние теги сценария будут размещены непосредственно перед конечным тегом тела.Здесь вы можете связать свой внешний код JavaScript.

Заключение

Вам следует добавить шаблон HTML 5 на каждую из ваших HTML-страниц. Этот стартовый код содержит важную информацию, такую как тип документа, метаданные, внешние таблицы стилей и теги скрипта.

Создание пользовательского шаблона электронной почты в формате HTML

Используйте свои навыки HTML и CSS для создания пользовательских шаблонов электронной почты ConvertKit.

☝️ Внимание! Это расширенное руководство для тех, кто уже знаком с пользовательским HTML и CSS. Если кодирование не ваша сильная сторона, мы бы порекомендовали вам использовать вместо него наш визуальный редактор шаблонов, для которого у нас есть отдельный учебник.

Давайте углубимся.

1. Создайте новый шаблон электронной почты HTML

На странице шаблонов в вашей учетной записи нажмите кнопку «Новый шаблон электронной почты» на правой боковой панели:

Затем на следующей странице нажмите «Использовать редактор HTML»:

Вы попадете на страницу, которая выглядит следующим образом:

Сейчас она очень пуста, но это скоро изменится.

ПРИМЕЧАНИЕ: Если вы уверенно умеете кодировать, у вас, вероятно, возникнет соблазн пропустить оставшуюся часть этого руководства прямо сейчас (пустой редактор кода заманчиво, верно ?!). Но мы рекомендуем вам продолжить чтение, хотя бы для ознакомления с нашими рекомендациями, чтобы убедиться, что ваш шаблон действителен и работает.

2. Вставьте код одного из наших шаблонов по умолчанию в редактор

«Но подождите», — можете подумать вы. «Я хотел создать свой собственный шаблон !»

Не волнуйтесь: вы все равно сможете сделать его своим и настроить так, как вам нравится! 🎨

Здесь мы предоставляем код для наших 3-х шаблонов по умолчанию.

Мы рекомендуем выбрать ту, которая вам больше всего нравится, в качестве начальной точки и вставить ее код в редактор.

Причина, по которой мы предлагаем начать с одного из наших шаблонов в качестве основы, заключается в том, что в шаблоне ConvertKit требуется несколько переменных, а именно:

Место для содержимого, которое вы добавляете в редактор электронной почты, с помощью значение атрибута href тега привязки
Физический адрес, введенный вручную в или , автоматически подставляемый из адреса в настройках вашей учетной записи с использованием переменной {{address}}

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

ПРИМЕЧАНИЕ: Мы не помешаем вам написать собственный код шаблона с нуля, если вы так предпочитаете; вам просто нужно обязательно включить все вышеперечисленные элементы, чтобы он функционировал должным образом. Если у вас возникнут проблемы, у нас есть руководство по их устранению.

3.Дайте вашему шаблону имя

Не стесняйтесь дать вашему шаблону идентифицируемое имя в этом поле — это только для вашей внутренней справки, и вы можете изменить его в любое время:

4. Нажмите «Сохранить»

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

Мы еще не закончили, и этот шаблон не будет нигде использоваться, пока вы не установите его; вам просто нужно сохранить свой шаблон хотя бы один раз, чтобы активировать эту кнопку «Предварительный просмотр макета» на боковой панели:

(Это значительно упростит настройку вашего шаблона!)

5.Сделайте его своим (также известное как: забавная часть)

На этом этапе у вас есть действующий, функциональный шаблон электронной почты, который готов к настройке.

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

ПРИМЕЧАНИЕ: Не забудьте сохранить его снова, когда закончите настройку!

6. [Необязательно] Установите его по умолчанию

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

Для этого нажмите кнопку «Использовать этот шаблон» под ним на странице шаблонов:

Зеленая галочка укажет, что это ваш текущий вариант по умолчанию:

Вот и все!

Возникли проблемы?

Мы составили руководство по устранению неполадок, которое поможет вам решить наиболее распространенные проблемы с шаблонами электронной почты HTML, с которыми мы сталкиваемся 👇

HTML-шаблонов с редактором кода

Мы постоянно добавляем и обновляем эту коллекцию HTML-шаблонов с помощью кода.Все участники Novi могут использовать их для нескольких клиентских проектов бесплатно. Проверьте дизайн, попробуйте визуальный редактор HTML Novi и присоединяйтесь к нам прямо сейчас! Вы платите цену за средний шаблон и получаете всю коллекцию из 40+ шаблонов для любого количества веб-сайтов. Никаких скрытых затрат, никаких ограничений, никаких условий.

Шаблон целевой страницы для ремонта автомобилей

SEO Studio — Консультации

Шаблон целевой страницы дошкольного центра — Целевая страница детского центра KindPlace — это 100% адаптивный шаблон, созданный, чтобы помочь вам создать привлекательный и полнофункциональный веб-сайт для ваш детский сад.

Шаблон веб-сайта для вейкбординга — Waves — это адаптивный шаблон веб-сайта школы вейкбординга, разработанный для того, чтобы помочь вашему клубу вейкбординга получить лучшее признание в Интернете и занять более высокое место во всем мире.

Шаблон веб-сайта личного портфолио — Шаблон веб-сайта личного портфолио создан для тех людей, которые понимают необходимость создания личного онлайн-бренда!

Шаблон веб-сайта бара-ресторана — Создайте привлекательный веб-сайт для ваших постоянных и будущих посетителей с помощью этого удивительного шаблона веб-сайта кафе / бара / ресторана от Novi Builder!

Шаблон веб-сайта правительственного департамента — Этот минималистичный шаблон веб-сайта государственного департамента идеально подходит для любой правительственной организации, агентства или ведомства!

Шаблон веб-сайта для художников — Jasmine Mills — это шаблон веб-сайта для художников, созданный для продвижения ваших работ.С его помощью вы можете показывать свои избранные картины посетителям вашего сайта.

Шаблон сайта маркетингового агентства — Выберите этот замечательный шаблон сайта маркетингового агентства и получите лучшую платформу для продвижения своего успешного бизнеса в сфере маркетинга!

Шаблон веб-сайта компании-разработчика программного обеспечения — Этот впечатляющий шаблон веб-сайта компании-разработчика программного обеспечения подойдет вам, если вы разработчик, желающий продвигать свой стратуп в Интернете или на мобильных устройствах!

Шаблон веб-сайта для стоматологических клиник — Denta Plus — это адаптивный шаблон веб-сайта для стоматологических клиник.Этот шаблон информативен и легко настраивается благодаря многофункциональному Novi Builder.

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

Шаблон веб-сайта тренера по здоровью — Дайан Мур — это шаблон веб-сайта тренера по здоровью, созданный для привлечения внимания ваших клиентов к вашим услугам наставничества по питанию и их продвижения в Интернете.

Шаблон сайта с дизайном интерьера

Шаблон сайта по аренде автомобилей

Шаблон сайта коммерческой недвижимости

Шаблон сайта финансового консультанта

Шаблон сайта промышленной компании

9000 Шаблон сайта современной церкви

Шаблон сайта рекламного агентства

Шаблон сайта портфолио художника

Шаблоны аудиторских сайтов

Шаблон медицинского сайта

Шаблон сайта строительной компании

Шаблон сайта детского сада

9000 шаблон веб-сайта

Шаблон веб-сайта Agro

Шаблон веб-сайта стоматолога

Шаблоны веб-сайтов промышленного инжиниринга

Бизнес-консультации шаблон веб-сайта

Шаблон веб-сайта инвестиционной компании

Шаблон веб-сайта стартап-компании

Шаблон веб-сайта университета

Шаблон веб-сайта юридической фирмы

Бизнес-консалтинг Шаблон корпоративной мобильной целевой страницы

03 Startup Company

03 Startup Company Приложение

Шаблон целевой страницы для фермерских хозяйств — Шаблон целевой страницы для сельского хозяйства Rich Harvest — это очень отзывчивая и гибкая целевая страница, разработанная специально для органических ферм.

Шаблон целевой страницы для корпоративных стартапов

Что делает HTML-шаблоны с кодом, который любят тысячи разработчиков

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

Можно легко редактировать HTML-тексты.
Стандарт HTML общепризнан и может быть преобразован в любые CMS, платформы и редакторы.
Создавая HTML-сайты для своих клиентов, вы можете добавить визуальный конструктор сайтов и предоставить им инструмент редактирования без программирования.
HTML можно редактировать практически со всеми инструментами разработчика.
Все современные браузеры поддерживают HTML.
HTML оптимизирован для SEO, у поисковых роботов нет проблем с его сканированием.
У них быстрая скорость загрузки.
Вы можете добавить любой сторонний код или функциональность, и они наверняка будут работать!

Как видите, в большинстве случаев HTML — это все, что вам нужно для любого онлайн-проекта. Несмотря на то, что в Интернете существует несколько конструкторов веб-сайтов и систем управления контентом, все они так или иначе используют их.

Почему стоит выбирать HTML-шаблоны с Code Empowered от Novi?

Конечно, у вас может возникнуть вопрос: «Зачем мне использовать шаблоны Novi HTML?» Что ж, мы это предсказали;) Потому что в них есть все, что вам нужно, и немного больше. Проверьте профи ниже, чтобы узнать, что вы с ними получите, и вы никогда не вернетесь к трате денег на темы с одной лицензией.

Они чертовски дешевы!

Первое и самое сладкое преимущество шаблонов Novi HTML с кодом — это справедливая система ценообразования.Мы — сообщество разработчиков и хотим помочь всем начинающим веб-студиям и разработчикам получить все, что им нужно, с помощью единой дешевой подписки. Заплатив стоимость одного премиум-шаблона, вы получаете доступ к полной коллекции из 40+ шаблонов, которая постоянно обновляется. Используйте любой шаблон для неограниченного количества проектов и получите пожизненный доступ к профессиональному дизайну с помощью визуального редактора.

Простой процесс установки

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

Простое визуальное редактирование WYSIWYG

Каждый из этих шаблонов существует в двух версиях. Первый содержит стандартный HTML-код со всеми связанными файлами. В основе второй лежит редактор Novi. Одно из его основных преимуществ — визуальное редактирование WYSIWYG. Это означает «то, что вы видите, то и получаете» и упрощает жизнь тысячам разработчиков и конечных пользователей.

Богатая функциональность с обязательными плагинами бесплатно

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

Регулярные обновления

Мы растем и улучшаем продукт. Каждый месяц мы анализируем сотни запросов участников и планируем новые обновления, чтобы сделать Novi Editor лучше для вас, а также добавить функции и исправить потребности нашего сообщества. Ваше мнение — наш приоритет. Поэтому вы можете оставлять комментарии на нашей официальной странице сообщества, и мы сделаем все возможное, чтобы ваши предложения стали реальностью!

Быстрая скорость загрузки и SEO

Широко известно, что HTML-шаблоны и веб-сайты имеют самую быструю скорость загрузки, что имеет решающее значение как для SEO, так и для UX.Если вы используете простые HTML-шаблоны с кодом, вы никогда не пострадаете от обновлений Google для мобильных устройств. Более того, они предоставят пользователям удобный мобильный поиск и снизят показатель отказов.

Давайте сделаем это вместе

Мы будем рады приветствовать вас в семье Нови и готовы ответить на все ваши вопросы или помочь вам выбрать лучший план членства. Нажмите кнопку ниже, чтобы задать любые вопросы, связанные с шаблонами и функциями Novi HTML, или выберите свой план и начните свое путешествие прямо сейчас!

Как загрузить HTML в качестве шаблона для писем? : Freshsales

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

  Примечание:  Эта функция рекомендуется только для пользователей, знакомых с пользовательским кодированием. Воспользуйтесь помощью разработчика, чтобы закодировать HTML-шаблон.

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

Контактные данные абонента:

Контактные данные компании:

{{company :: name}}
{{company :: address}}
{{company :: city}}
{{company :: state}}
{{company :: country}}

Аналогично, другие свойства контактов также могут быть включены в специальный код.Например, если свойство {{contact :: first_name}} включено в элементы, имя контакта будет заполнено в заполнителе при отправке электронного письма.

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

 Примечание. Ссылки для отказа от подписки и сведения о компании будут включены Freshmarketer по умолчанию, если они не включены в код вручную.Если сведения включены частично, на вкладке «Обзор» будет показано предупреждение о необходимости их включения.

Загрузка файла:

Чтобы загрузить файл, перейдите к стилям внутри своей кампании. У вас будет возможность выбрать одну из тем, макетов по умолчанию и загрузить свой собственный HTML. Нажмите на файлы просмотра, чтобы выбрать и загрузить ZIP-файл. Отдельный файл HTML также можно загрузить без архивирования, если у вас нет изображений.

Рекомендации, которым следует следовать при загрузке шаблона:

Необходимо создать ZIP-файл, содержащий ваш HTML-файл в корневом каталоге и все изображения в виде вложенных папок в нем.
Максимальный размер ZIP-файла составляет 1 МБ. Желательно, чтобы имя файла состояло только из букв, цифр и дефиса.
ZIP-файл должен содержать один HTML-файл.
Кодировка символов файлов HTML должна быть UTF-8.
Форматы изображений должны быть JPG, JPEG, PNG или GIF.
Все файлы CSS должны быть помещены в отдельную папку CSS, в которой внешние файлы CSS будут ссылаться внутри вашего файла HTML.
Изображения следует помещать в отдельную папку.
HTML-файл не должен ссылаться на какой-либо файл Javascript или содержать какие-либо функции Javascript. Если есть, они будут удалены автоматически.
Обязательно прогоните HTML через валидатор перед загрузкой, чтобы убедиться в отсутствии синтаксических ошибок в файле.
Имена папок должны совпадать с именами, которые вы указали в своем коде. При загрузке учитывается регистр.

После загрузки файла вы можете перейти к его просмотру. Нажмите Далее, чтобы просмотреть свой шаблон.

При просмотре вы можете щелкнуть предыдущую вкладку «Дизайн» и внести необходимые изменения в свой шаблон.

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

TEMPLATE — Используйте HTML-шаблоны из Common Lisp

HTML-TEMPLATE — Используйте HTML-шаблоны из Common Lisp

HTML-TEMPLATE — Используйте шаблоны HTML из Common Lisp

Аннотация
HTML-TEMPLATE — это переносимая библиотека для Common Lisp, которую можно использовать
для заполнения шаблонов произвольными (строковыми) значениями во время выполнения.(На самом деле, не имеет значения, является ли результат HTML. Просто
очень вероятно, что это будет то, что в основном используется библиотека
для.)
Он смоделирован по образцу модуля Perl HTML :: Template и частично
совместим с его синтаксисом, хотя обе библиотеки содержат некоторые
расширения, которые другой не поддерживает.
HTML-TEMPLATE переводит шаблоны в эффективные закрытия, которые
можно использовать повторно так часто, как это необходимо. Он использует интеллектуальный кеш
механизм, поэтому вы, тем не менее, можете обновлять шаблоны, пока ваша программа
запущен, и изменения вступят в силу немедленно.
Обоснование чего-то вроде HTML-TEMPLATE или HTML :: Template таково:
что вы хотите разделить код и макет (я думаю, что в новоязе эти
называются «бизнес-уровень» и «презентация».
Layer «) как можно больше при создании HTML, особенно если
вы работаете с графическими художниками, которые отвечают за визуальный
внешний вид вашего сайта, но не программисты. Собственно говоря, вы
не может полностью разделить код и макет . Я работал (или
пришлось работать) с несколькими разными подходами на протяжении многих лет,
включая создание HTML-кода из сценариев CGI напрямую с использованием таких инструментов, как Embperl, Mason, PHP (yuk!) или Java / XML / XLST, или
использование другой разметки Lisp
языков, но обнаружил, что подход HTML :: Template обычно работает
лучшее для меня: графическим дизайнерам нужно изучить только минимальный набор
новых тегов и может обновлять свои шаблоны независимо от работы
сделано на бэкэнде.Это просто и просто работает. YMMV, из
курс…
HTML-TEMPLATE предназначен для переносимости и должен работать со всеми
соответствуют реализациям Common Lisp, но в основном протестированы и
развернут с LispWorks. Сообщите нам, если вы столкнетесь с какими-либо
проблемы.
Поставляется в стиле BSD
лицензия, так что вы можете делать с ней все, что захотите.
HTML-TEMPLATE используется Planet Lisp, Booble и Heike Stephan.
Ярлык для загрузки: http://weitz.de/files/html-template.tar.gz.

Содержание

Простой пример
Загрузка и установка
Поддержка и списки рассылки
Синтаксис
Семантика
Словарь HTML-TEMPLATE
1. Создание и использование принтеров
  1. создать-шаблон-принтер
  2. шаблон для заполнения и печати
2. Кэш шаблона
  1. очистить кеш-шаблон
  2. удалить из кеш-шаблона
  3. * без проверки кеша *
3. Настройка
  1. * шаблон-начало-маркер *
  2. * шаблон-конец-маркер *
  3. * путь-шаблон-по умолчанию *
  4. * выходной-шаблон-по умолчанию *
  5. * преобразовать ноль в пустую строку *
  6. * формат без строк *
  7. * последовательности-списки *
  8. * строки атрибутов верхнего регистра *
  9. * модификатор строки *
  10. * пакет-символ-шаблон *
  11. * принудительное значение по умолчанию *
  12. * функция доступа к значениям *
  13. * вызов-шаблон-функция-доступ *
  14. * call-value-access-function *
  15. * игнорировать пустые строки *
  16. * предупреждение о создании *
4. Условия
  1. шаблон-ошибка
  2. ошибка вызова шаблона
  3. ошибка-отсутствует-значение-шаблона
  4. ошибка шаблона, а не строки
  5. шаблон-не-строка-значение-ошибки
  6. синтаксическая ошибка шаблона
  7. поток ошибок синтаксиса шаблона
  8. строка синтаксической ошибки шаблона
  9. шаблон-синтаксис-ошибка-столбец
5. Побег
  1. escape-последовательность
  2. * escape-char-p *
  3. минимальная escape-строка
  4. escape-строка-минимальные-плюс-кавычки
  5. escape-строка-iso-8859-1
  6. аварийная веревка-все
Благодарности

Простой пример

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

Если у вас есть текстовый файл
#p "/tmp/foo.tmpl" нравится это


   строк  ->
    
       столбцов  ->
         красочный  ->
            content  -> 
        
            content  ->

тогда следующий код

(пусть * ((rows (цикл для i ниже 49 на 7
                   собирать (список: cols
                                 (цикл для j от i ниже (+ i 7)
                                       for string = (формат nil "~ R" j)
                                       collect (list: строка содержимого
                                                     : разноцветный (oddp j))))))
       (значения (список: строки строки)))
  (шаблон заполнения и печати #p "/ tmp / foo.tmpl "значения))

создаст эту HTML-таблицу:

ноль	одна	два	три	четыре	пять	шесть
семь	восемь	девять	десять	одиннадцать	двенадцать	тринадцать
четырнадцать	пятнадцать	шестнадцать	семнадцать	восемнадцать	девятнадцать	двадцать
двадцать один	двадцать два	двадцать три	двадцать четыре	двадцать пять	двадцать шесть	двадцать семь
двадцать восемь	двадцать девять	тридцать	тридцать один	тридцать два	тридцать три	тридцать четыре
тридцать пять	тридцать шесть	тридцать семь	тридцать восемь	тридцать девять	сорок	сорок один
сорок два	сорок три	сорок четыре	сорок пять	сорок шесть	сорок семь	сорок восемь

Загрузка и установка

HTML-TEMPLATE вместе с этой документацией можно скачать с http: // weitz.де / файлы / html-template.tar.gz. В
текущая версия — 0.9.2.

Если вы используете Debian, вам следует
возможно, используйте cl-html-template
Пакет Debian, доступный благодаря Питеру ван Эйнде и Кевину
Розенберг. Также есть порт
за Gentoo Linux спасибо Мэтью Кеннеди.

HTML-TEMPLATE поставляется с простыми определениями системы для MK: DEFSYSTEM и ASDF, так что вы можете либо адаптировать его
под свои нужды или просто распакуйте архив и из HTML-ШАБЛОНА
каталог запустите ваш образ Lisp и оцените форму
(mk: compile-system "html-template") (или
эквивалентный для asdf), который должен скомпилировать и загрузить весь
система.Установка через asdf-install также должна
быть возможно.

Если по какой-то причине вы не хотите использовать MK: DEFSYSTEM или asdf, вы
можете просто ЗАГРУЗИТЬ файл load.lisp или вы
также может сойти с рук что-то вроде этого:

(цикл для имени в '("пакеты" "специальные предложения" "ошибки" "util" "шаблон" "api")
      do (compile-file (make-pathname: name name
                                      : type "lisp"))
         (название загрузки))

Обратите внимание, что в реализациях CL, которые используют компилятор Python
(я.е. CMUCL, SBCL, SCL) вы можете объединить скомпилированные объектные файлы
чтобы создать один объектный файл, который вы можете загрузить позже:

cat {пакеты, специальные предложения, ошибки, утилита, шаблон, api} .x86f> html-template.x86f

(Замените «. x86f » правильным суффиксом для
ваша платформа.)

В дистрибутив входит тестовый файл
« test.lisp «, который можно ЗАГРУЗИТЬ
после загрузки самого HTML-ШАБЛОНА, чтобы проверить, все ли работает как
предназначены. Если все в порядке, вы должны увидеть эти два сообщения:

Подождите пару секунд.Все тесты пройдены ...

Некоторые тесты предполагают наличие каталога
#p "/ tmp /" где вы можете создавать файлы. Если ты на
Windows вам, вероятно, следует это изменить — см. Переменную
TMP-DIR в test.lisp .

Обратите внимание, что не существует общедоступного репозитория CVS для HTML-TEMPLATE — репозиторий на common-lisp.net устарел и не синхронизирован с (текущей) версией, распространяемой с weitz.de.

Луис Оливейра поддерживает дарк
хранилище HTML-ШАБЛОНА
по адресу http: // common-lisp.сеть / ~ лоливейра / ediware /.

Поддержка и списки рассылки

Для вопросов, отчетов об ошибках, запросов функций, улучшений или исправлений
пожалуйста, используйте html-template-devel
список рассылки. Если вы хотите получать уведомления о будущих выпусках
подписаться на html-template-анонс
список рассылки. Эти списки рассылки стали доступны благодаря
услуги common-lisp.net.

Если вы хотите отправлять патчи, пожалуйста, прочтите это в первую очередь.

Синтаксис

Шаблон — это просто обычный текст (файл или строка) с вкраплениями
с тегами шаблона .Тег шаблона выглядит так

   имя  [ атрибут ] ->

где имя является одним из TMPL_VAR ,
TMPL_LOOP , TMPL_REPEAT , TMPL_CALL , TMPL_IF , TMPL_UNLESS ,
TMPL_INCLUDE , / TMPL_LOOP , / TMPL_REPEAT ,
/ TMPL_IF , / TMPL_UNLESS или TMPL_ELSE . Случай не имеет значения,
то есть tmpl_var или Tmpl_Var также будет
юридические имена.

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

Любое количество (включая пустую строку) пробелов сразу после
«" и непосредственно перед " -> " - необязательный и будет проигнорирован.Однако хотя бы один пробел символ между именем и атрибутом (если присутствует) обязательный. Но учтите, что если атрибут не разделен " или ', тогда должен быть пробел для отделите атрибут от закрывающего ' -> '.

Ниже приведены примеры легальных тегов шаблонов.

Но обратите внимание, что в последнем примере атрибутом является ' foo -> ', что, вероятно, не то, что вы ожидали ...

Это , а не :

TMPL_VAR всегда должен сопровождаться атрибутом (1-й пример), а TMPL_ELSE не должен (2-й пример).В третий не распознается как тег шаблона из-за отсутствия пробел за TMPL_VAR . Тег будет просто игнорируется, и парсер будет искать следующее появление ' '.

Четвертый пример не работает, потому что второй апостроф не экранируется обратной косой чертой, как вы могли подумать. Вместо этого парсер будет думать, что атрибут на этом заканчивается, и будет жаловаться на следующая за ним строка « bar '». Следующий пример не выполняется, потому что, кроме HTML :: Template, комментарий HTML маркеры обязательны.(Но обратите внимание, что вы можете изменить это, установив переменные * TEMPLATE-START-MARKER * и * ШАБЛОН-КОНЕЦ-МАРКЕР * .) В последнем примере используется необязательный параметр HTML :: Template. Обозначение " NAME = ", которое не поддерживается HTML-ШАБЛОН.

TMPL_VAR , TMPL_INCLUDE и TMPL_CALL Теги могут появляться где угодно и так часто, как вы как в ваших шаблонах, в то время как другие теги должны подчиняться определенным правилам - они должны следовать одному из этих шаблонов

   атрибут  ->  текст  
   атрибут  ->  текст    текст ' 
   атрибут  ->  текст  
   атрибут  ->  текст

где текст и текст ' сами должны быть действительными шаблоны.Другими словами: эти конструкции должны правильно гнездиться.

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

   Конец комментария ->
   foobar

`Семантика`

Универсальная функция CREATE-TEMPLATE-PRINTER преобразует шаблон в принтер шаблонов .А шаблон принтера - это функция, которая принимает один аргумент - a структура шаблона - которая описывает, как шаблон должен быть заполненным и печатает заполненный шаблон в потоке, привязанном к внутренняя переменная * TEMPLATE-OUTPUT * . Вы можете FUNCALL шаблонный принтер, но предпочтительный способ использования он должен вызвать его с помощью FILL-AND-PRINT-TEMPLATE (который также может создавать шаблоны принтеров по мере необходимости). Обратите внимание, что шаблоны принтеров - это скомпилированные закрытия, но, хотя вы обычно создавать их во время выполнения, компилятор Lisp не вызывается для этой задачи так что вы можете смело вырезать его из своего изображения, если хотите.

В остальной части этого документа мы будем проводить различие между время генерации это время, когда принтер шаблона создано (либо явно CREATE-TEMPLATE-PRINTER или неявно ЗАПОЛНИТЬ И ПЕЧАТЬ ШАБЛОНА ) и время вызова , которое является временем использования принтера ( FUNCALL или ЗАПОЛНИТЬ И ПЕЧАТЬ ШАБЛОНА ) заполнить и распечатать шаблон.

Каждый из тегов шаблона TMPL_VAR , TMPL_IF , TMPL_UNLESS , TMPL_LOOP , TMPL_CALL и TMPL_REPEAT связаны с конкретным символом в время поколения.Этот символ является результатом INTERN ing строку атрибута тега в пакет * TEMPLATE-SYMBOL-PACKAGE * . В структура шаблона - аргумент, данный шаблону принтер - связывает эти символы со значениями. По умолчанию это выполняется с помощью списка свойств, но это можно изменить при вызове шаблона время, изменив содержимое переменной * VALUE-ACCESS-FUNCTION * . (Примечание что имя структура не означает, что шаблонные структуры являются структурами в смысл Common Lisp.Обычно это не так.)

Теги шаблона работают следующим образом:

символ ->

Этот тег будет заменен значением, связанным с символом который должен быть (см. * FORMAT-NON-STRINGS * ) строкой (или, возможно, NIL - см. * CONVERT-NIL-TO-EMPTY-STRING * ). * STRING-MODIFIER * применяется к строке перед ее выводом.
* (let ((tp (create-template-printer "Привет !")))
    (шаблон заполнения и печати tp '(: foo "Мир"))
    (терпи)
    (шаблон заполнения и печати tp '(: foo "Народ"))
    (терпи)
    (шаблон заполнения и печати tp '(: символ foo)))
Привет, мир!
Привет, народ!
Привет СИМВОЛ!
 

символ -> текст символ -> текст

В первом случае, если значение, связанное с символ не NIL (под) шаблон текст будет заполнен и напечатан.В противном случае весь конструкция будет заменена пустой строкой. Во втором случае это наоборот.
* (let ((tp (create-template-printer " quick  brown fox")))
    (шаблон заполнения и печати tp '(: fast t))
    (терпи)
    (шаблон заполнения и печати tp '(: быстрый ноль)))
Быстрая коричневая лисица
Коричневая лиса
 

символ -> текст текст ' символ -> текст текст '

В первом случае, если значение, связанное с символом , равно не NIL , (под) шаблон текст будет заполнен и напечатал.Иначе, текст ' используется вместо этого. Во втором случае это другой наоборот.
* (let ((tp (create-template-printer " быстро  медленно  brown fox")))
    (шаблон заполнения и печати tp '(: fast t))
    (терпи)
    (шаблон заполнения и печати tp '(: быстрый ноль)))
Быстрая коричневая лисица
Медленная коричневая лиса
 

символ -> текст

Значение, связанное с символом , должно быть последовательность (см. * СПИСКИ ПОСЛЕДОВАТЕЛЬНОСТЕЙ * ) шаблонные структуры.Для каждого элемента этой последовательности (под-) шаблон текст заполняется и печатается с использованием соответствующая структура шаблона.
Обратите внимание, что каждая структура шаблона (под-), которая используется для заполнения текст вводит новый набор ассоциаций между символами и их ценности. Пока шаблонный принтер находится в пределах текста , внешняя структура шаблона временно «забывается» кроме * ЗНАЧЕНИЕ-ДОСТУП-ФУНКЦИЯ * (обратите внимание, что параметр in-loop-p , в частности) принимает заботиться об этом.
* (defпараметр * tp *
    (создать-шаблон-принтер
     " [, ] "))

* TP *
* (шаблон заполнения и печати * tp *
                           '(: foo ((: bar "EINS": baz "ONE")
                                   (: bar "ZWEI": baz "TWO"))))
[EINS, ONE] [ZWEI, TWO]
* (let ((* функция-доступ-значение *
         (лямбда (значения символов и необязательный in-loop-p)
           (объявить (игнорировать in-loop-p))
           (символ значений getf))))
    (шаблон заполнения и печати * tp * '(: baz "ONE"
                                    : foo ((: bar "EINS")
                                          (: бар "UNO")))))
[EINS,] [UNO,]
* (шаблон заполнения и печати * tp * '(: baz "ONE"
                                  : foo ((: bar "EINS")
                                        (: бар "UNO"))))
[EINS, ONE] [UNO, ONE]
 

символ -> текст

Если значение, связанное с символом , является положительным целым числом N , то текст (под) шаблона будет заполнен и напечатан N раз.В противном случае вся конструкция будет заменена пустой строкой.
* (let ((tp (create-template-printer " очень  быстрая коричневая лиса")))
    (шаблон заполнения и печати tp '(: три 3))
    (терпи)
    (шаблон заполнения и печати tp '(: три "3")))
Очень-очень-очень быстрая коричневая лисица
Быстрая коричневая лисица
 
Обратите внимание, что исходная библиотека HTML :: Template не имеет тега TMPL_REPEAT - если это важно для вас.

путь ->

Строка путь должен быть допустимым путем для существующего текстового файла.Этот текстовый файл неявно конвертируется в шаблонный принтер при генерации время, как если бы оно было явно преобразовано вызовом CREATE-TEMPLATE-PRINTER . В время вызова тег будет заменен результатом из FUNCALL , используя этот шаблонный принтер с текущим структура шаблона. (Обратите внимание, что это означает, что включенный файл имеет быть действующим шаблоном, т.е. вы не можете, скажем, иметь TMPL_IF тег в вашем основном файле и поместите закрывающий / TMPL_IF во включенный файл.)
* (with-open-file (s "/ tmp / foo": direction: output: if-exists: supersede)
    (write-string " быстро  brown fox" s))
" быстро  бурая лисица"
* (fill-and-print-template " перепрыгивает через ленивую собаку" '(: fast t))
Предупреждение: создан новый шаблонный принтер для #p "/ tmp / foo"
Быстрая коричневая лиса прыгает через ленивую собаку
* (fill-and-print-template " перепрыгивает через ленивую собаку" '(: fast nil))
Коричневая лиса перепрыгивает через ленивую собаку
 
Эти теги могут быть вложенными, т.е.е. включенные файлы могут сами включать другие файлы. Включены шаблоны принтеров , всегда берутся из кеша по адресу время вызова, что означает, что вы можете обновлять их отдельно от включая принтер.

символ ->

Значение, связанное с символом , должно быть последовательностью (как согласно * СПИСКИ ПОСЛЕДОВАТЕЛЬНОСТЕЙ * ) вызовов шаблонов, каждый из которых определяет подструктуру и шаблон, который нужно применить к этому.По умолчанию звонки представляют собой просто списки с car с указанием имени шаблона и cdr, содержащего подструктура. (См. * ФУНКЦИЯ ВЫЗОВ-ШАБЛОН-ДОСТУП * и * ФУНКЦИЯ ЗНАЧЕНИЯ-ДОСТУПА * для способов настроить внешний вид вызовов.)
TMPL_CALL объединяет аспекты TMPL_LOOP и TMPL_INCLUDE - перебирает последовательность значений, обходные циклы, но вместо использования части текущего шаблона для распечатать значения, каждое значение содержит свою информацию о том, какие к нему должен быть применен подшаблон.
* (with-open-file (s "/ tmp / paragraph": direction: output: if-exists: supersede)
    (запись строки "  " s))
"  "
* (with-open-file (s "/ tmp / header": direction: output: if-exists: supersede)
    (write-string "  " s))
"  "
* (шаблон заполнения и печати "  "
                           '(: parts ((#P "/ tmp / header": text "Глава 1")
                                     (#P "/ tmp / paragraph": text "Жил-был утконос... ")
                                     (#P "/ tmp / header": текст "Глава 5")
                                     (#P "/ tmp / paragraph": text "И жили долго и счастливо."))))
 Глава 1 
  Жил-был утконос ... 
  Глава 5 
  И с тех пор жил долго и счастливо.  
Обратите внимание, что вам не нужно включать полные пути в вызов конструкции. Вы можете использовать * DEFAULT-TEMPLATE-PATHNAME * чтобы указать большую его часть, или установите * CALL-TEMPLATE-ACCESS-FUNCTION * в функцию, которая создает имена пути любым удобным для вас способом.

Также обратите внимание, что исходная библиотека HTML :: Template не имеет тега TMPL_CALL - если это важно для вас.

`Словарь HTML-ШАБЛОНА`

HTML-TEMPLATE экспортирует следующие символы (некоторые из которых также экспортируется CL-WHO, кстати, так что будьте осторожны, если вы используете обе библиотеки):

`Создание и использование шаблонных принтеров`

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

[Общая функция] create-template-printer template & key force element-type if-does-not-exist external-format => printer

Эта функция создаст и вернет шаблон принтера printer , созданный из шаблона, обозначенного шаблон . Поведение этой функции зависит от тип шаблон .
Если шаблон является потоком , это должен быть открытый поток ввода символов, который считывается посимвольно с READ-CHAR , и полученный текст используется в качестве шаблона.
Если шаблон является строкой , он преобразуется в поток строк, который снова подается в CREATE-TEMPLATE-PRINTER .
Если шаблон представляет собой путь , он должен обозначать существующий текстовый файл. Файл открывается WITH-OPEN-FILE , и результирующий поток снова подается в CREATE-TEMPLATE-PRINTER . Все аргументы ключевого слова, кроме force , используются как аргументы ключевого слова для WITH-OPEN-FILE .Имя пути будет объединено с * DEFAULT-TEMPLATE-PATHNAME * перед его использованием. HTML-TEMPLATE поддерживает кэш-памяти ранее созданных шаблонных принтеров. Если (объединенный) путь можно найти в этом кэше, и файл, обозначенный этим путем, не изменился с момента создания связанного кэшированного принтера шаблона (который проверяется с помощью FILE-WRITE-DATE ), будет использоваться кешированное значение и новый шаблонный принтер не будет создан. Это может быть отменено ключевым словом аргумент force , т.е.е. когда force истинно, новый шаблонный принтер будет безоговорочно создан (и кэширован, если force не является ключевым словом : DO-NOT-CACHE ). Значение по умолчанию для force - это значение * FORCE-DEFAULT * . (См. Также * NO-CACHE-CHECK * .) Обратите внимание, что вам может потребоваться использовать force , если вы изменили одну из переменных настройки, описанных ниже, и хотите создать шаблон принтера на основе этих новых настроек. хотя сам файл шаблона не изменился.Также обратите внимание, что FILE-WRITE-DATE может не заметить разницу, если более новая версия файла всего на доли секунды новее старой.
Эта функция будет сигнализировать об ошибке типа TEMPLATE-INVOCATION-ERROR , если template не является путевым именем и указан один из аргументов ключевого слова.
* (with-input-from-string (поток «Скорость  бурая лиса»)
    (funcall (поток создания-шаблона-принтера) '(: скорость "быстро")))
Быстрая коричневая лисица
* (funcall (create-template-printer "The  brown fox") '(: speed "slow"))
Медленная коричневая лиса
* (с-открытым-файлом (поток "/ tmp / foo.tmpl ": direction: output)
    (write-string "Поток  brown fox"))

" бурая лисица"
* (funcall (create-template-printer #p "/tmp/foo.tmpl") '(: speed "быстро"))
Предупреждение: создан новый шаблонный принтер для #p "/tmp/foo.tmpl"
Быстрая коричневая лисица
* (funcall (create-template-printer #p "/tmp/foo.tmpl") '(: speed "очень быстро"))
Чрезвычайно быстрая коричневая лисица
* (funcall (create-template-printer #p "/tmp/foo.tmpl": force t) '(: speed "очень быстро"))
Предупреждение: новый шаблонный принтер для #p "/ tmp / foo.tmpl "создан
Очень быстрая коричневая лисица
* (пробный файл "/tmp/bar.tmpl")

Ноль
* (funcall (create-template-printer #p "/tmp/bar.tmpl": if-does-not-exist: create) '(: foo "foo"))
Предупреждение: создан новый шаблонный принтер для #p "/tmp/bar.tmpl"

* (пробный файл "/tmp/bar.tmpl")

#p "/tmp/bar.tmpl"
 

[Общая функция] шаблон заполнения и печати значения шаблона / принтера и ключевой поток и разрешить другие-ключи => |

Эта функция заполнит шаблон, обозначенный шаблон / принтер , значениями, предоставленными значениями , и распечатает полученный текст в поток , который по умолчанию имеет значение * DEFAULT-TEMPLATE-OUTPUT * .Значение значений должно быть структурой шаблона, соответствующей текущему значению * VALUE-ACCESS-FUNCTION * .
Если шаблон / принтер является функцией, он будет использоваться, как если бы это был шаблонный принтер. В противном случае шаблон / принтер сначала будет загружен в CREATE-TEMPLATE-PRINTER , и полученный шаблон будет использован. Обратите внимание, что это означает, что здесь также действует описанный выше механизм кэширования.
Если шаблон / принтер - это путь, все аргументы ключевого слова, кроме stream , будут использоваться в качестве аргументов ключевого слова для CREATE-TEMPLATE-PRINTER . Если это не путь, аргументы ключевого слова, отличные от stream , приведут к ошибке типа TEMPLATE-INVOCATION-ERROR .
* (fill-and-print-template "Скорость  brown fox" '(: speed "slow"))
Медленная коричневая лиса
* (with-input-from-string (поток «Скорость  бурая лиса»)
    (поток шаблона заполнения и печати '(: скорость "быстро")))
Быстрая коричневая лисица
* (с-открытым-файлом (поток "/ tmp / foo.tmpl ": направление: вывод: если существует: заменить)
    (write-string "Поток  brown fox"))

" бурая лисица"
* (шаблон заполнения и печати #p "/tmp/foo.tmpl" '(: скорость "быстро"))
Предупреждение: создан новый шаблонный принтер для #p "/tmp/foo.tmpl"
Быстрая коричневая лисица
* (fill-and-print-template #p "/tmp/foo.tmpl" '(: speed "очень быстро"))
Очень быстрая коричневая лисица
* (let ((tp (create-template-printer "Скорость  бурая лиса")))
    (fill-and-print-template tp '(: speed "tardy")))
Запоздалый бурая лисица
 

`Кэш шаблонов`

Функции и переменные в этом разделе связаны с механизмом кэширования, описанным в записи для CREATE-TEMPLATE-PRINTER .

[Функция] clear-template-cache => |

Эта функция полностью очистит кеш, используемый HTML-TEMPLATE.

[Функция] удалить из кеш-шаблона путь => результат

Эта функция удалит принтер шаблона, связанный с путем из кеша HTML-TEMPLATE. результат истинный , если был такой шаблонный принтер, или NIL в противном случае.

[Специальная переменная] * без проверки кеша *

Если значение этой переменной истинно (по умолчанию NIL ) СОЗДАТЬ ШАБЛОН-ПРИНТЕР и ЗАПОЛНИТЬ И ПЕЧАТЬ ШАБЛОН не будет проверять, изменился ли файл шаблона с момента его кэшируется, но вместо этого всегда будет использовать кэшированный шаблон принтера, если есть один, то есть дискового ввода-вывода больше не будет, когда все принтеры-шаблоны генерируются. Этот вариант предназначен для сайтов с тяжелыми трафик, когда вы не ожидаете, что ваши шаблоны больше не изменятся.

`Настройки`

В этом разделе собрано более дюжина специальных переменные, которые можно использовать для настройки поведения HTML-TEMPLATE.

[Специальная переменная] * шаблон-начало-маркер *

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

[Специальная переменная] * шаблон-маркер-конец *

Это должна быть строка (по умолчанию "->" ), который используется во время генерации для определения конца тег шаблона.
* (let ((* маркер-начало-шаблона * ""))
    (fill-and-print-template "  fox" '(: speed "quick")))
Быстрая <коричневая> лиса
 

[Специальная переменная] * путь-шаблон-по умолчанию *

Это должно быть имя пути (значение по умолчанию - результат вызова MAKE-PATHNAME без аргументов), который объединяется с единственным аргументом CREATE-TEMPLATE-PRINTER если этот аргумент - путь.
* (с-открытым-файлом (поток "/tmp/foo.tmpl": направление: вывод: если-существует: заменить)
    (write-string "Поток  brown fox"))

" бурая лисица"
* (setq * default-template-pathname * #p "/ tmp /")

#p "/ tmp /"
* (fill-and-print-template #p "foo.tmpl" '(: speed "очень быстро"))
Предупреждение: создан новый шаблонный принтер для #p "/tmp/foo.tmpl"
Очень быстрая коричневая лисица
 

[Специальная переменная] * шаблон вывода по умолчанию *

Это должен быть поток (по умолчанию значение * СТАНДАРТНЫЙ ВЫХОД * при загрузке HTML-TEMPLATE), который используется как выходной поток ЗАПОЛНИТЬ И ПЕЧАТЬ ШАБЛОНА если не указан аргумент ключевого слова stream .
* (fill-and-print-template "Скорость  brown fox" '(: speed "slow"))
Медленная коричневая лиса
* (с выводом в строку (* вывод шаблона по умолчанию *)
    (fill-and-print-template "Скорость  коричневая лиса" '(: скорость "медленно")))

"Медленная коричневая лисица"
 

[Специальная переменная] * преобразовать ноль в пустую строку *

Если значение этой переменной - истина (значение по умолчанию), TMPL_VAR теги будут заменены пустой строкой, если связанное значение NIL , иначе ошибка типа TEMPLATE-MISSING-VALUE-ERROR сигнализируется.Эта переменная принимает эффект во время вызова.
* (let ((tp (create-template-printer "Скорость  бурая лиса")))
    (привязка обработчика
      ((шаблон-ошибка-отсутствует-значение (лямбда (условие)
                                       (объявить (игнорировать условие))
                                       (потребительная стоимость "медленно"))))
      (пусть ((* преобразовать-ноль-в-пустую-строку * ноль))
        (шаблон заполнения и печати tp '(: foo "bar")))))
Медленная коричневая лиса
 

[Специальная переменная] * формат без строк *

Если значение этой переменной истинно (что по умолчанию), TMPL_VAR будет принимать нестроковые значения и преобразовать их в строки используя (FORMAT NIL "~ A"...) . Обратите внимание, что чек для * CONVERT-NIL-TO-EMPTY-STRING * все же произойдет сначала. Эта переменная вступает в силу во время вызова.
* (fill-and-print-template "Скорость  бурая лиса" '(: speed: tardy))
ТАРДИ коричневая лисица
 

[Специальная переменная] * последовательности-есть-списки *

Если значение этой переменной - истина (значение по умолчанию) код, сгенерированный тегом TMPL_LOOP , ожидает своего связанное значение будет списком, в противном случае он ожидает, что это будет вектор.Эта переменная вступает в силу во время генерации.
* (шаблон заполнения и печати " [] "
                           '(: список ((: элемент "1")
                                    (: элемент "2")
                                    (: пункт "3"))))
[1] [2] [3]
* (let ((* последовательности-списки * nil))
    (шаблон заполнения и печати " [] "
                             '(: вектор # ((: элемент "1")
                                         (: элемент "2")
                                         (: пункт "3")))))
[1] [2] [3]
 

[Специальная переменная] * строки атрибутов верхнего регистра *

Если значение этой переменной - истина (значение по умолчанию) строки атрибутов передаются в STRING-UPCASE до интернирования.Эта переменная вступает в силу во время генерации.
* (let ((* строки атрибутов верхнего регистра * ноль))
    (fill-and-print-template "Скорость  бурая лиса" '(: speed "quick": | speed | "slow"))))
Медленная коричневая лиса
 

[Специальная переменная] * строка-модификатор *

Обозначение функции, применяемой к строкам, которые заменить теги TMPL_VAR . По умолчанию - это # 'ESCAPE-STRING-ISO-8859-1 . Используйте # 'CL: IDENTITY , если хотите оставить строку как есть.
* (fill-and-print-template " brown fox" '(: speed ""))
Тег & lt; quick & gt; коричневая лиса

* (let ((* строка-модификатор * # 'идентификатор))
    (fill-and-print-template "Скорость  коричневая лиса" '(: speed "")))
<Быстрая> коричневая лисица
 

[Специальная переменная] * шаблон-символ-пакет *

Значение этой переменной должно быть пакет обозначение, обозначающее атрибут упаковки струны интернированы в.По умолчанию - КЛЮЧЕВОЕ СЛОВО. упаковка. Эта переменная вступает в силу при генерации время.
* *упаковка*

# <Пакет COMMON-LISP-USER, 20/21 внутренний, 0/9 внешний>
* (let ((* шаблон-символ-пакет * (найти-пакет: common-lisp-user)))
    (fill-and-print-template "The  brown fox" '(: speed "quick" speed "slow")))
Медленная коричневая лиса
 

[Специальная переменная] * по умолчанию *

Значение по умолчанию для аргумента ключевого слова force СОЗДАТЬ ШАБЛОН-ПРИНТЕР .Его начальное значение - NIL .

[Специальная переменная] * функция доступа к значениям *

Значение этой переменной должно быть обозначение для функции с лямбда список (значения символов и необязательный in-loop-p) , который является используется для связывания символов с их значениями, когда принтер-шаблон вызван. in-loop-p истинно всякий раз, когда это функция вызывается из тега TMPL_LOOP или TMPL_CALL .
По умолчанию ценность
(лямбда (значения символов и необязательный in-loop-p)
  (let ((результат (символ значений getf)))
    (усл (в петле-р
           (цикл для элемента в результате
                 когда (элемент listp)
                   ;; хранить значения с верхних уровней
                   собирать (добавлять значения элементов)
                 еще
                   собрать элемент))
          (t результат))))
 
Эта переменная вступает в силу при вызове время.
* (let ((tp (create-template-printer "Скорость  бурая лиса"))
        ;; для краткости мы проигнорируем третий аргумент здесь
        (* функция-доступ-значение * # 'gethash)
        (хэш (make-hash-table: test # 'eq)))
    (setf (gethash: хэш скорости) "быстро")
    (заполнить и распечатать шаблон tp хеш))
Быстрая коричневая лисица
 

[Специальная переменная] * вызов-шаблон-функция-доступ *

Значение этой переменной должно быть указателем. для функции, которая принимает один аргумент (структура вызова) и возвращает либо шаблонный принтер, либо значение, которое можно использовать в качестве первый аргумент create-template-printer .Эта функция будет использоваться для определения шаблона, который должен быть используется для вызова в теге TMPL_CALL .
Значение по умолчанию это # ' CAR . Эта переменная вступает в силу при вызове время.

[Специальная переменная] * call-value-access-function *

Значение этой переменной должно быть указателем. для функции, которая принимает один аргумент (структура вызова) и возвращает структуру для использования в качестве значения для вызова в TMPL_CALL тег.
Значение по умолчанию - # ' CDR . Эта переменная вступает в силу при вызове время.

[Специальная переменная] * игнорировать пустые строки *

Если значение этой переменной истинно (по умолчанию NIL ), принтеры шаблонов подавляют любые пробелы в перед тегами шаблона до (но исключая) первого # \ Newline и любые пробелы за тегами шаблонов до (и включительно) первый # \ Newline .Это справедливо для всех теги кроме TMPL_VAR . Идея в том, что вы можете захотеть поместите теги вроде TMPL_LOOP в собственные строки, чтобы повысить удобочитаемость файлов шаблонов без создания ненужные пустые строки в вашем выводе. Эта переменная вступает в силу в время поколения.
* (with-open-file (s "/tmp/foo.tmpl": direction: input)
    (цикл для строки = (строка чтения s nil nil)
          пока линия
          делать (строка печати))
    (ценности))

"<таблица>"
""
""
""
"  "
""
""
""
""
* (let ((values (list: row-loop
                      (петля для ряда в '((1 2 3 4) (2 3 4 5) (3 4 5 6))
                            собирать (список: col-loop
                                          (петля для столбца в ряд
                                                собирать (список: элемент
                                                              (формат nil "~ A" col)))))))
      (* игнорировать пустые строки * т))
  (шаблон заполнения и печати #p "/ tmp / foo.tmpl "значения: сила t))
Предупреждение: создан новый шаблонный принтер для #p "/tmp/foo.tmpl"
<таблица>
  
     1 
     2 
     3 
     4 
  
  
     2 
     3 
     4 
     5 
  
  
     3 
     4 
     5 
     6 
  

 

[Специальная переменная] * предупреждение о создании *

Если эта переменная - true (значение по умолчанию), CREATE-TEMPLATE-PRINTER предупредит вы всякий раз, когда шаблонный принтер создается заново из имени пути аргумент вместо того, чтобы быть взятым из кеша.

`Условия`

В этом разделе перечислены условия сигнализируется HTML-TEMPLATE и соответствующими средствами доступа.

[Тип условия] шаблон-ошибка

Каждая ошибка, о которой сообщает HTML-TEMPLATE, имеет тип ОШИБКА ШАБЛОНА . Это прямой подтип SIMPLE-ERROR . без каких-либо дополнительных слотов или опций.

[Тип условия] ошибка вызова шаблона

Ошибки типа TEMPLATE-INVOCATION-ERROR сигнализируются, если СОЗДАТЬ ШАБЛОН-ПРИНТЕР или ЗАПОЛНИТЬ И ПЕЧАТЬ ШАБЛОН вызываются с неверными ключевыми аргументами.Это прямой подтип ШАБЛОН-ОШИБКА без каких-либо дополнительные слоты или опции.

[Тип условия] ошибка-отсутствует-значение-шаблона

Сообщается об ошибке типа TEMPLATE-MISSING-VALUE-ERROR если шаблонный принтер для TMPL_VAR снабжен NIL Значение , хотя * CONVERT-NIL-TO-EMPTY-STRING * это ложный . Это прямой подтип TEMPLATE-ERROR без каких-либо дополнительные слоты или опции.Всякий раз, когда TEMPLATE-MISSING-VALUE-ERROR сигнализируется, связанный ИСПОЛЬЗОВАНИЕ-ЗНАЧЕНИЕ доступен перезапуск.

[Тип условия] ошибка шаблона, а не строки

Сообщается об ошибке типа TEMPLATE-NOT-A-STRING-ERROR если шаблонный принтер для TMPL_VAR снабжен значение, которое не является ни строкой, ни NIL и * FORMAT-NON-STRINGS * равно false . Это прямой подтип ШАБЛОН-ОШИБКА с одним дополнительный слот для значения, которое может быть прочитано с помощью TEMPLATE-NOT-A-STRING-ERROR-VALUE .Каждый раз, когда поступает сигнал TEMPLATE-NOT-A-STRING-ERROR , связанный ИСПОЛЬЗОВАНИЕ-ЗНАЧЕНИЕ доступен перезапуск.

[Общая функция] шаблон-не-строка-значение-ошибки условие => значение

Если условие является условием типа TEMPLATE-NOT-A-STRING-ERROR , эта функция вернет значение (не строковое), вызвавшее ошибку.

* (let ((tp (create-template-printer "Квадрат имеет  углов")))
    (привязка обработчика
      ((шаблон-не-строка-ошибка (лямбда (условие)
                                      (потребительная стоимость
                                        (формат nil "~ R"
                                                (условие-шаблон-не-строка-значение ошибки))))))
      (let ((* формат без строк * nil))
        (шаблон заполнения и печати tp '(: номер 4)))))
У квадрата четыре угла

[Тип условия] синтаксическая ошибка шаблона

Ошибка типа TEMPLATE-SYNTAX-ERROR сигнализируется во время генерации, когда HTML-TEMPLATE невозможно создать шаблонный принтер из-за синтаксических ошибок в шаблон.Это прямой подтип TEMPLATE-ERROR с тремя дополнительные слоты. Они обозначают поток, из которого был создан HTML-TEMPLATE. чтение, когда он обнаружил ошибку и строку и столбец внутри этот поток. (См. Следующие три записи о том, как получить доступ к этим слоты.)
Поскольку многие синтаксические ошибки не могут быть обнаружены до того, как синтаксический анализатор перейдет в конец потока, строка и столбец обычно обозначают последнюю позицию где парсер был доволен, а не на той позиции, где он сдался.
* (обработчик-кейс
    (fill-and-print-template "Квадрат имеет  углов"
                             '(:Номер четыре"))
    (шаблон-синтаксическая-ошибка (условие)
      (формат t "Хьюстон, у нас проблема с потоком ~ A: ~% ~
                 Похоже, что-то пошло не так после строки ~ A, столбца ~ A.~% ~
                 Последнее сообщение, которое мы получили, было «~?». "
              (условие потока ошибок синтаксиса шаблона)
              (условие строки-ошибки-синтаксиса-шаблона)
              (условие-шаблон-синтаксис-ошибка-столбец)
              (условие управления форматом простого условия)
              (простое условие-условие-формат-аргументы))
      (ценности)))
Хьюстон, у нас проблема с потоком # :
Похоже, что-то пошло не так после строки 1, столбец 26.
Последнее полученное нами сообщение было «Неожиданный EOF».
Обратите внимание, что столбец 26 находится непосредственно за «TMPL_VAR» .

[Общая функция] шаблон-синтаксис-ошибка-поток условие => поток

Если условие является условием типа TEMPLATE-SYNTAX-ERROR , эта функция вернет поток, из которого парсер читал, когда произошла ошибка.

[Общая функция] шаблон-синтаксис-ошибка-строка условие => число

Если условие является условием типа TEMPLATE-SYNTAX-ERROR , эта функция вернет номер строки, которая была связана с эта ошибка.Как и в Emacs, строки считаются начиная с с 1. HTML-TEMPLATE увеличивает счетчик строк всякий раз, когда он читает # \ Newline из своего входного потока.

[Общая функция] шаблон-синтаксис-ошибка-столбец условие => число

Если условие является условием типа TEMPLATE-SYNTAX-ERROR , эта функция вернет номер столбца, который был связан с эта ошибка.Как и в Emacs, столбцы считаются начиная с с 0.

`Побег`

Функции и переменные, которые можно использовать для кодирования символов для HTML-документы - см. * СТРОКА-МОДИФИКАТОР * .

[Функция] escape-строка проверка строки и ключа => escape-string

Эта функция примет строку строка и заменит каждый символ, для которого test возвращает true с его (десятичной) символьной сущностью. test должен быть указателем для функции одного аргумента, которая принимает символ и возвращает обобщенное логическое значение. По умолчанию используется значение * ESCAPE-CHAR-P * .
* (escape-строка " 'nave'")
"& lt; H & # 252; hner & gt; & # 039; na & # 239; ve & # 039;"
 

[Специальная переменная] * escape-char-p *

Это значение по умолчанию для test аргумент ключевого слова для ESCAPE-STRING .Его начальное значение
# '(лямбда (символ)
    (или (найдите char "<> & '\" ")
        (> (char-code char) 127)))
 

[Функция] минимальная escape-строка строка => escape-строка [Функция] escape-строка-минимальные-плюс-кавычки строка => escape-строка [Функция] escape-строка-iso-8859-1 строка => escape-строка [Функция] escape-строка-все строка => escape-строка

Это вспомогательная функция, основанная на ESCAPE-STRING .Они определены следующим образом:

(defun escape-строка-минимальная (строка)
  «Экранировать только # \ <, # \> и # \ & в STRING.»
  (строка escape-строки: test # '(lambda (char) (find char "<> &"))))

(defun escape-строка-минимальный-плюс-кавычки (строка)
  «Как ESCAPE-STRING-MINIMAL, но также без кавычек».
  (строка escape-строки: test # '(lambda (char) (find char "<> &' \" "))))

(defun escape-строка-iso-8859-1 (строка)
  "Экранирует все символы в STRING, которые не определены в ISO-8859-1."
  (строка escape-строки: test # '(lambda (char)
                                  (или (найдите char "<> & '\" ")
                                      (> (char-code char) 255)))))

(defun escape-строка-все (строка)
  "Экранирует все символы в строке STRING, которых нет в 7-битном ASCII.
набор символов."
  (строка escape-строки: test # '(lambda (char)
                                  (или (найдите char "<> & '\" ")
                                      (> (char-code char) 127)))))

`Благодарности`

Спасибо Сэму Трегару за HTML :: Template, который я использовал успешно в течение многих лет вместе с mod_perl и который вдохновил мне написать HTML-ШАБЛОН.

Спасибо Джеймсу Андерсону и Кенту М. Питману, которые помогли устранить путаницу. мне насчет перезапусков.

Спасибо Marijn Haverbeke за очень чистый и всеобъемлющий патч для кода TMPL_CALL .

Заголовок $: /usr/local/cvsrep/html-template/doc/index.html,v 1.59 2015-05-21 21:00:01 edi Exp $

НАЗАД НА ГЛАВНУЮ СТРАНИЦУ

`Управление шаблонами HTML-страниц - поддержка сетей взаимодействия`

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

Чтобы просмотреть свои шаблоны, а также отредактировать и создать новые, перейдите на страницу Pages> Компоненты> Шаблоны .

`Редактирование шаблонов`

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

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

Редактор, который вы видите при редактировании шаблона, зависит от того, является ли он стандартным шаблоном или шаблоном, созданным на основе образца или чертежа. Стандартный шаблон был создан с нуля, и вы увидите редактор HTML для верхнего и нижнего колонтитула (см. Ниже). Чертежи / образцы сделаны по-другому и содержат «замены», которые значительно упрощают редактирование шаблонов, поскольку вам не нужно редактировать HTML.

Шаблоны

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

`Создание шаблонов HTML`

Нажмите кнопку New Template

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

Вы увидите список своих шаблонов - при желании вы можете выбрать один из них для создания. Каждый шаблон имеет маркировку (T) , что означает, что он был создан с нуля с использованием только редактора HTML, или (BP) , что означает, что он был создан из образца шаблона или получен из шаблона чертежа из ресурсов сообщества. (доступно только для некоторых организаций).

При создании нового шаблона у вас есть три варианта:

 от
 до  Начните с нуля  (у вас не будет HTML-кода, и вам нужно будет заполнить верхний и нижний колонтитулы с нуля),
 С
 по  Создать из выбранного  (это дублирует существующий шаблон) или
, чтобы использовать  Образцы шаблонов  (вам не нужно редактировать какой-либо HTML, вместо этого вы можете настроить некоторые образцы шаблонов, чтобы добавить свой собственный брендинг)

Какой из них вы выберете, зависит от вас и зависит от того, как ваша организация управляет своими шаблонами.

`Начиная с нуля`

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

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

`Добавление HTML-кода шаблона`

Шаблон HTML состоит из «верхнего и нижнего колонтитула».Шаблон должен быть закодирован таким образом, чтобы создать рабочую область на странице, куда извлекается весь динамический контент из программного приложения (например, поля формы, дополнительные вопросы, шаблоны сообщений и т. Д.).

Вы можете добавить сюда любой код, если он является действительным HTML-документом.

`Создание шаблона на основе существующего веб-сайта`

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

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

 https: // имя хоста / каталог / файл

, а не / directory / file

Самый простой способ сделать это - выполнить запрос «Найти и заменить» для всех последовательностей «href =» / »и« src = »/» и любых других последовательностей и заменить их на «href =» https: // host / 'и' src = ”https: // www.host / ’и т. д. соответственно.

Любые объявления должны быть удалены из заголовка кода.

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

Все файлы, загруженные на вашу панель управления Engaging Networks, защищены.

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

`Создание из существующего шаблона`

Если вы продублируете или выберете шаблон «создать из выбранного», то шаблон будет продублирован, а текущий код отобразится в верхнем и нижнем колонтитулах. Затем вы можете отредактировать его, чтобы настроить шаблон для своей новой кампании. Это полезно, если ваш новый дизайн похож, так что это быстрее, чем начинать с нуля.

`Использование образца шаблона`

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

Вы можете посмотреть это короткое видео-пошаговое руководство или следовать инструкциям ниже

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

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

У вас есть несколько настроек, на которые стоит обратить внимание:

Имя шаблона: это имя, которое будет дан шаблону. Вы увидите это в списке шаблонов, а также как вариант, когда вы прикрепите шаблон к странице

.

Настройки (cog): некоторые дополнительные настройки для шаблона - см. Ниже
Локаль (флаг): языковой стандарт шаблона - см. Ниже

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

Когда вы будете готовы использовать свой шаблон, просто нажмите «Сохранить», и он будет доступен для использования. Если вы перейдете к редактированию его позже, вы увидите тот же экран редактора шаблонов.

Опытные пользователи могут щелкнуть Редактировать HTML, если вы хотите увидеть HTML верхнего и нижнего колонтитула.Обратите внимание, что это будет содержать некоторые замены в фигурных скобках, которые относятся к доступным настройкам - вы не можете создавать здесь новые, поэтому будьте осторожны при их редактировании. Только основные пользователи могут создавать новые шаблоны чертежей и замены.

`Общие настройки шаблона`

`Местонахождение`

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

Для получения дополнительной информации о локали прочтите отдельный справочный ресурс здесь.

`Мобильный шаблон`

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

`Расширенные настройки`

Если вы щелкнете значок шестеренки при редактировании шаблона, вы можете выбрать «Запретить редактору Page Builder визуализировать этот шаблон».Это может быть полезно, если у вас очень сложный шаблон, который замедляет процесс создания вашей страницы.

`Теги страниц`

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

`Дополнительная информация`

Чтобы получить более подробную статью о HTML и других советах по шаблонам, щелкните здесь.

`Как создать шаблон электронной почты в формате HTML`

Создать шаблон электронной почты в формате HTML намного проще, чем кажется.Вам даже не нужно уметь «программировать».

Серьезно.

Все, что вам нужно, - это поставщик услуг электронного маркетинга.

В наши дни провайдеры электронной почты создали множество бесплатных шаблонов для своих клиентов, которые они могут использовать в своих маркетинговых кампаниях по электронной почте. А шаблоны ведущих поставщиков написаны с использованием HTML, XHTML или HTML5 (все версии языка разметки гипертекста, кода, определяющего структуру и содержание веб-сайтов и электронных писем).

С помощью функции «Постоянный контакт» вы можете создать электронное письмо в формате HTML несколькими способами:

создать настраиваемый фирменный маркетинговый шаблон электронной почты
выбрать небрендовый шаблон и сделать его своим
использовать настраиваемый «пустой» шаблон
вставьте собственный код в расширенный редактор
или попросите команду профессиональных услуг Constant Contact создать его для вас

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

`Что такое HTML и зачем он мне нужен?`

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

Без HTML мы вернулись бы к отправке только старых писем в обычном текстовом стиле. У нас не будет изображений, цветов, шрифтов и GIF-файлов электронной почты, которые мы в настоящее время используем, чтобы сделать наши электронные письма визуально привлекательными для наших читателей.

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

`Как создать электронное письмо в формате HTML?`

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

Создание настраиваемого фирменного маркетингового шаблона электронной почты.
Выберите небрендированный шаблон и создайте его самостоятельно.
Используйте настраиваемый «пустой» шаблон, который можно заполнить с помощью простых в использовании блоков перетаскивания.
Вставьте собственный код в расширенный редактор.
Сделайте так, чтобы профессиональные услуги Constant Contact создали его для вас.

Давайте подробнее рассмотрим каждый из этих вариантов.

`1. Создайте настраиваемый шаблон фирменного электронного письма.`

Это, вероятно, самый простой и быстрый вариант для самостоятельного создания HTML-шаблона электронной почты.

Однако вам необходимо, чтобы ваш веб-сайт уже был настроен и работал.

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

Нет учетной записи постоянного контакта? Попробуйте онлайн-маркетинг бесплатно с 60-дневной пробной версией.

Выберите «Шаблоны брендов» при создании нового электронного письма в своей учетной записи постоянного контакта.

При выборе этого варианта вам будет предложено указать адрес вашего веб-сайта. После ввода фирменный конструктор шаблонов Constant Contact начинает работать на вас.

Оцените этот конструктор, созданный менее чем за 23 секунды (да, я рассчитал его), на основе веб-сайта клиента Constant Contact, Whole Latte Love Cafe:

Фирменный конструктор шаблонов создает базовый HTML-шаблон с вашим логотипом и цвета.

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

Фирменный конструктор шаблонов дает вам сверхбыстрый способ заложить основу вашего многоразового HTML-шаблона электронной почты.

`2. Выберите небрендированный шаблон и сделайте его своим.`

Это самый популярный способ создания HTML-шаблона.Если у вас еще нет веб-сайта или вы планируете его изменить, это отличный вариант для вас.

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

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

Все маркетинговые шаблоны электронной почты Constant Contact написаны на HTML.

Если вы не нашли подходящий шаблон, вы можете начать с пустого HTML-шаблона.

`3. Используйте настраиваемый «пустой» шаблон, который можно заполнить с помощью простых в использовании блоков перетаскивания.`

Это похоже на выбор готового шаблона, только вы начнете с пустого HTML-шаблона, чтобы создать свой собственный.

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

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

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

Хотите узнать больше о работе в редакторе Constant Contact 3-го поколения? Ознакомьтесь с этим руководством.

И это приводит нас к:

`4. Вставьте собственный код в расширенный редактор.`

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

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

Параметр «Пользовательский код» позволяет вам добавить собственный HTML-код в «Постоянный контакт».

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

Есть код? Перетащите свой в расширенный редактор Constant Contact.

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

И это подводит нас к одному варианту, который совсем не требует вашей работы:

`5. Сделайте так, чтобы профессиональные услуги Constant Contact создали его для вас.`

Признаюсь, лучшее я оставил напоследок.

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

«Без консультации» - это возможность создать для вас шаблон, основанный на основных передовых методах, с цветами и изображениями, перенесенными с вашего веб-сайта. Это шаг за пределы фирменного конструктора шаблонов, так это то, что вы получаете более полный HTML-шаблон, а не только его основу. Помимо того, что ваш логотип будет хорошо выглядеть, а цвета соответствуют вашему бренду, они будут вставлять изображения и ссылки на видео с вашей веб-страницы (где это необходимо), добавлять значки и ссылки в социальных сетях, создавать гиперссылки на вашу веб-страницу и добавлять любые дополнительные информация в нижнем колонтитуле, которую вам может потребоваться добавить, включая юридические оговорки или отраслевые формулировки.У вас также будет профессиональный дизайнер, который позаботится о том, чтобы он был хорошо сбалансирован, соответствовал лучшим практикам и был готов, чтобы вы могли просто поменять местами изображения и заполнить заголовки и текст.

«С консультацией» - это когда у вас есть личный специалист по дизайну, который разработает индивидуальное электронное письмо в соответствии с вашими требованиями. Они превратят ваше видение в реальность без необходимости изучать HTML. Кроме того, если кто-то сделает тяжелую работу над настраиваемым многоразовым HTML-шаблоном электронной почты (Фу, это уж точно!), Вы также получите фирменный нижний колонтитул, так что ваш фирменный шаблон электронного письма будет вашим сверху вниз.

Чтобы получить дополнительную информацию о том, как один из специалистов по дизайну Constant Contact разработает ваш фирменный HTML-шаблон, перейдите на веб-страницу наших услуг и заполните контактный лист, чтобы член нашей команды связался с вами, или позвоните в службу поддержки клиентов по номеру 855- 273-0449. В любом случае они с радостью ответят на любые ваши вопросы, а также помогут настроить собственный фирменный шаблон, разработанный специально для вас.

`Какой вариант HTML-шаблона лучше всего?`

Лучший вариант для вас зависит от ваших потребностей и ресурсов.

`Есть время, но ограниченный бюджет?`

Если вы хотите начать работу прямо сейчас, и у вас уже есть свой веб-сайт и бренд, то фирменный шаблон может быть вашим лучшим выбором. Здесь вы вложите немного времени, но не денег.

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

Если у вас еще нет веб-сайта и вы не уверены в своем логотипе или цветах, воспользуйтесь конструктором веб-сайтов Constant Contact. Вы можете создать свой веб-сайт, отсортировать цвета своего бренда и даже создать свой логотип, не выходя из своей учетной записи постоянного контакта.

`Нравится вызов?`

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

Или, может быть, вы использовали программу для создания собственного электронного письма и теперь у вас есть набор кода, с которым вы не знаете, что делать? Затем используйте параметр "Пользовательский код" для постоянного контакта.

Category Html