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

tcse 21.04.2015 Блог 6960 2 комментария

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

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

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

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

Показать / Скрыть текст


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta content="text/html; charset={charset}" http-equiv=Content-Type>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title}</title>
    <style type="text/css">
        body, td{font-family:arial,sans-serif;font-size:95%} a:link, a:active, a:visited{color:#0000CC} img{border:0} pre { white-space: pre; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; width: 800px; overflow: auto;}
        /*  стили цитат и тегов кода */
        .scriptcode, .quote { border:2px dotted #bebebe;  text-align: left;  padding: 5px;}
    </style> 
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- JS -->
    <script type="text/javascript" src="/engine/classes/js/jquery.js"></script>
    <script type="text/javascript" src="/engine/classes/js/jqueryui.js"></script>
    <script type="text/javascript" src="/engine/classes/js/dle_js.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</head>

<body bgcolor="#ffffff" text="#000000">
    <div class="container">

        <div class="row">
            <div class="col-xs-6 col-sm-6">
                <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>
                <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>
            </div>
            <div class="col-xs-6 col-sm-6">
                <p class="pull-right">
                    <img src="http://api.qrserver.com/v1/create-qr-code/?size=100x100&color=000000&data={full-link}"  alt="QR-код адреса статьи">
                </p>
            </div>
        </div>
        
        <hr>
        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <span style="font-size: 36px;">{title}</span>    
                
                <span class="pull-right">
                    <button onclick="doClick();" class="btn btn-primary btn-lg hidden-print"><i class="fa fa-print"></i> Печать</button> 
                </span>

            </div>
        </div>
        <hr>
        
        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <p>{full-story}</p>
            </div>
        </div>
                    

        <div style="clear: both"></div>
        <hr>
               © 2015 Бесплатный шаблон BS3-TCSE для DataLife Engine
        <hr>
        <a href="javascript:history.go(-1)" class="hidden-print">Вернуться назад</a>
    </div>

    <script language="javascript"> 
    <!-- 
    function doClick() 
    { 
    window.print(); 
    } 
    //--> 
    </script> 

</body>
</html>

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

В качестве основы используем 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) позволяет воспользоваться шикарной фичей для оффлайн чтения.

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

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

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

Живые примеры шаблонов страницы "версия для печати"

blogssmartzone.com - обычная текстовая статья на блоге.

Ana-sm.com - статья с использованием таблиц внутри текста. Если стили таблиц отличаются от bootstrap то их необходимо добавить в print.tpl.

fiat-ac.ru- версия страница автодилера с информацией по акциям. Используются теги цитаты.

stgroup-cpt.ru - пример коммерческого предложения о грузовом транспорте с использованием данных из дополнительных полей движка.

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

2 комментария

Последние события

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?