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

tcse 21.04.2015 Блог 6903 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 комментария

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

TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
Сегодня, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:37

т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
Видосы в директории upload можно хоть оставить? их там 80 Гб
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:17

фтп обычный юзер а не root
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:15

дэк только так и загружаю
Gordi | Как реализовать шифрование трафика? ³

Gordi
Как реализовать шифрование трафика?
18-11-2024, 14:14

я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:13

Gordi,
через фтп загружай
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:11

Привет Николай!
Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
или направь на путь истинный, пжст