Шаблон версии для печати print.tpl для DLE

Для самых нетерпеливых сам код файла print.tpl <!DOCTYPE html> <html lang="ru">...

20 апреля 2015 13 555
TCSE
шаблон, верстка, уроки, HTML, мы рекомендуем
Наши разработки

Шаблон версии для печати print.tpl для DLE

Для самых нетерпеливых сам код файла 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