Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru Блог Адаптивный шаблон версии для печати в DLE

Адаптивный шаблон версии для печати в DLE


 tcse    21.04.2015    Блог    2534    1

Адаптивный шаблон версии для печати в DLE


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

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

Из наиболее полезных функций:
- Автоматически генерируемый QR код адреса страницы.
- Кнопка отправки страницы на печать.
- Поддержка стилей скрываемых/отображаемых свое содержимое при печати.

Адаптивный шаблон версии для печати в DLE


Для самых нетерпеливых сам код файла print.tpl



И комментарии по коду шаблона:

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

Для отображения логотипа сайта мы используем заглушку http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo
ее необходимо заменить на прямой URL вашего логотипа.

обратите внимание:
логотип указан 2 раза подряд.

в первом случае
<p class="visible-print">
<img src="http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo" class="img-responsive" alt="site logo" style="height: 100px;">
</p>


Класс visible-print входящий в комплект к Bootstrap 3 отображает свое содержимое только на печати.
Но так-же на печати отображаются ВСЕ ссылки встречаемые на странице (что логично, так как иначе будет невозможно получить информацию на бумаге о гиперссылках в тексте.

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

<p class="hidden-print">
<a href="{full-link}">
<img src="http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo" class="img-responsive" alt="site logo" style="height: 100px;">
</a>
</p>


Класс hidden-print отображается только в браузере и автоматически исчезает на листе бумаги.
Логотип сайта в данном блоке обернут тегами ссылки на основную (не печатную версию) страницы и позволяет в 1 клик вернуться назад (если печатная версия не потребовалась).

О пользе версии для печати в шаблоне для смартфонов.

В самом начале такая мысль казалось бредовой, экран смартфона для того и нужен, что-бы не переводить бумагу.
Но диалог печати на Android (при использовании Google Chrome) позволяет воспользоваться шикарной фичей для оффлайн чтения.

Адаптивный шаблон версии для печати в DLE

При клике на кнопку "печать" в нашем шаблоне print.tpl Хром создаем версию в виде файла PDF
который замечательно сохраняется во внутренней памяти телефона.

Адаптивный шаблон версии для печати в DLE

Ну а далее Вы по своему усмотрению можете в любой момент времени без интернета прочитать полученную копию страницы в PDF (главное, что-бы была установлена нужная читалка данного формата).

Адаптивный шаблон версии для печати в DLE


Актуальная версия шаблона страницы для печати доступна на bitbucket

Живые примеры шаблонов страницы "версия для печати"
  • blogssmartzone.com - обычная текстовая статья на блоге.
  • Ana-sm.com - статья с использованием таблиц внутри текста. Если стили таблиц отличаются от bootstrap то их необходимо добавить в print.tpl.
  • fiat-ac.ru- версия страница автодилера с информацией по акциям. Используются теги цитаты.
  • stgroup-cpt.ru - пример коммерческого предложения о грузовом транспорте с использованием данных из дополнительных полей движка.

    Видео с примером работы "версии для печати" и сохранения из нее файла PDF

  • Комментарии пользователей (1)

    tcse
    1

    39 | 22

    tcse - 21 апреля 2015 22:21 - Юзер

    Небольшое уточнение:
    сохранение страницы как PDF возможно только в Хром на android.
    тоже самое на iOS предлагает найти реальный принтер и отправить страницу на печать.

    Чтобы комментировать - войдите или зарегистрируйтесь на сайте