Подключение файлов — HTML: Препроцессор Pug
Преимущество Pug перед простым HTML — возможность подключения файлов. Представьте проект, состоящий из пяти статических страниц. Некоторые сайты, при таком объёме, не используют CMS или другие серверные решения, которые будут управлять шаблоном сайта. Во-первых, это быстрее, так как нет дополнительной обработки, во-вторых, это снижает порог входа в проект.
У статического решения есть одна глобальная проблема — переиспользование повторяющихся HTML-блоков. Чаще всего это футер, шапка, меню, баннеры и так далее. Копировать HTML — не лучшее решение, так как рано или поздно это приведёт к различиям в блоках.
В этой ситуации на помощь приходит Pug. Он позволяет создать отдельные файлы для повторяющихся элементов и подключать их внутрь любого файла. Как будет рассмотрено в уроке, это может быть не только разметка, но и любые данные, вплоть до интерпретации других файлов, таких как Markdown.
Для примера создадим несколько Pug-файлов с разметкой шапки и футера:
Эти файлы можно включать внутрь любых других Pug-файлов используя конструкцию include и указав путь к подключаемому файлу.
Во время обработки index.pug интерпретатор подставит все подключаемые файлы. В этом случае нет необходимости компилировать все файлы, только основной. С подобной структурой подключений мы уже знакомились в курсе посвященному препроцессору SASS.
charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> rel="icon" type="image/x-icon" href="favicon.ico"> Hexlet rel="stylesheet" href="./styles/app.css"> class="logo" href="#">Хекслет href="/programs">Программы href="/courses">Курсы href="/pricing">Цены href="/teams">Компаниям Научитесь программировать и получите востребованную профессию Hexlet Ltd.
Pug позволяет подключать любой тип файла. Логика достаточно проста — данные любого подключенного файла будут вставлены «как есть». Таким образом можно подключить не только шаблоны с синтаксисом Pug, но и скрипты, CSS код, текстовые данные.
/* Basis Styles */ * box-sizing: border-box; margin: 0; padding: 0; > h1, h2, h3 color: #666; font: 2em/1.5 'Headers', sans-serif; > charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> rel="icon" type="image/x-icon" href="favicon.ico"> Hexlet * box-sizing: border-box; margin: 0; padding: 0; > h1, h2, h3 color: #666; font: 2em/1.5 'Headers', sans-serif; > rel="stylesheet" href="./styles/app.css">
Дополнительные модули
При работе с Pug можно пользоваться не только встроенными возможностями, но и расширять их другими обработчиками. Это достигается за счёт взаимодействия с jstransformer .
В качестве примера используем распространённую задачу по добавлению файлов формата markdown в разметку. Markdown — язык разметки текстов, который может преобразовываться в HTML. Такой способ записи текстов облегчает их прочтение и даёт возможность правильно размечать тексты людям, которые далеки от вёрстки.
Преобразуем следующий текст:
# Hexlet. Научитесь программировать и получите востребованную профессию Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. Выбирайте Хекслет, если вы: * Хотите научиться программировать, но не знакомы с разработкой * Хотите получить новую профессию * Хотите развиваться ## Как проходит обучение Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта. Интересно: на Хекслете тексты для курсов пишутся именно в формате Markdown, а потом автоматически переводятся в HTML-разметку при их загрузке на сервер.
Для преобразования Markdown в HTML в препроцессоре Pug используется пакет jstransformer-markdown-it . Его можно установить командой
install jstransformer-markdown-it Для подключения модуля используется синтаксис :название-модуля . Всё, что находится внутри модуля, будет обработано скриптом.
Hexlet. Научитесь программировать и получите востребованную профессию Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. Выбирайте Хекслет, если вы: Хотите научиться программировать, но не знакомы с разработкой Хотите получить новую профессию Хотите развиваться Как проходит обучение Вы выбираете профессию, мы подбираем для вас индивидуального наставника. Это действующий программист с опытом преподавания. Обучение программированию в рамках профессии объединяется в четыре модуля. Каждый модуль состоит из тематических курсов и практического проекта.
Важно: я специально аккуратно форматирую итоговый HTML-код для удобного чтения во время урока. Если вы повторите шаги из урока, Pug может выдать вам немного другое форматирование. Это не страшно и не является ошибкой.
Внутрь модулей так же можно передавать файл для подключения. Это приоритетный вариант, так как лучше не иметь текст внутри Pug файлов, а хранить их отдельно. Это большая тема, посвящённая архитектуре приложений, но старайтесь разделять текст и его вывод. Чем меньше текста содержится в Pug, тем проще с ним работать.
Для подключения файла к модулю используется та же конструкция include , после которой указывается название модуля и файл для подключения.
Дополнительное задание
Создайте базовую разметку HTML страницы с использованием Pug и добавьте следующий текст в формате markdown:
# О Хекслете Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. ## Идея и мотивация Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии. Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. Каждый урок на Хекслете включает в себя до трех шагов: 1. **Теория**. Короткая лекция в виде текста или видео. Она основана на задаче, так что в отличие от традиционной академической теории, мы делаем упор на специфическую задачу, которая уже решена умными инженерами и программистами, а затем следуем по их шагам, чтобы понять решение. Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Как подключить html и css файлы к серверу на node.js?
Как подключить html и css файлы к серверу на node.js не используя Express, Nest, Hapi?
Вот что я написал, но думаю что это не корректно.
let http = require('http'); let fs = require('fs'); let path = require('path'); http.createServer(function(req, res)< if(req.url === "/")< fs.readFile('index.html', null, function(err, html)< res.writeHead(200, ); res.end(html); >); > else if(req.url.match('style.css'))< var cssPath = path.join(__dirname, req.url); var fileStream = fs.createReadStream(cssPath); res.writeHead(200, ); fileStream.pipe(res); > else< res.writeHead(404, ); res.end("404 Not Found"); > >).listen(3000, () => console.log('Server work'));- Вопрос задан более года назад
- 703 просмотра
Содержание file.HTML
И в результате в брайзере выведется
Вот что находится в РНР файле.
Я содержание HTML файла!
Опять РНР фаил.
Примерно так если в коротко и чтоб понятно.
Ну или вместо инклуда используй include_once»путь/имя.расширение»;
автор: ZКатя (01.08.2014 в 21:02) письмо автору
что-то не получается. это первый мой сайт, видимо я не так все делаю((
автор: berson (01.08.2014 в 21:16) письмо автору
Только что все перепроверил на денвере и все работает ну прям сто пудов и не одной ошибки все как надо. Попробуй не чего от себя не писать (кроме правильных имен файлов) а так пере копировать Ctr+C Ctr+V в два файла.
автор: ZКатя (01.08.2014 в 23:34) письмо автору
Вот это я вставила в файл index.php в нужное место в шаблоне
| > echo «Вот что находится в РНР файле.» ; > include ‘googlemap.html’ ; > echo «Опять РНР файл.» ; > ?> |
А вот в это я обернула мой html файл с картой google
автор: lightning.say (02.08.2014 в 05:02) письмо автору
похоже что-то с шаблоном покажите файл шаблона с вставляемым кодом.
автор: ZКатя (04.08.2014 в 15:52) письмо автору
автор: ZКатя (04.08.2014 в 15:53) письмо автору
автор: lightning.say (04.08.2014 в 16:43) письмо автору
зачем вы в каждой строчке вставляемого кода пишете знак «>» ?
он не нужен.
автор: ZКатя (04.08.2014 в 17:10) письмо автору
Не знаю) это уже с шаблоном было)
автор: confirm (04.08.2014 в 17:39) письмо автору
Ваш шаблон, это полная страница, а вы ее пытаетесь втулить не к месту. А если к примеру вставить ее в iframe, то будет работать (только мусор выкинуть нужно).
А вообще же, нужно выбросить из этого шаблона все лишнее, то что в head вставить в секцию head index.php, а тег карты в нужное ее место.
автор: lightning.say (04.08.2014 в 17:50) письмо автору
>Ваш шаблон, это полная страница
тут вы под шаблоном говорите об html-файле я правильно понимаю? изначально шаблоном она называет php файл в который вставляется html, это я для уточнения спрашиваю, чтобы не было путаницы.
автор: confirm (04.08.2014 в 18:34) письмо автору
Посмотрите что за шаблон, что из себя представляет, и нужно ли его подключать, а не проще прописать нужное в индексном файле?
Я вообще сомневаюсь, что это некий шаблон, скорее это взятый пример подключения на страницу карты, который «с чистой совестью» пытаются использовать как есть.
автор: ZКатя (05.08.2014 в 02:00) письмо автору
Прописывать пробовала, ничего не получилось. Я просто не знаю даже что делаю) но все перепробовала))
автор: moonfox (05.08.2014 в 03:46) письмо автору
вставка html напрямую тоже не работает?)
автор: confirm (05.08.2014 в 06:27) письмо автору
PS. А вот как надо вставить то, что в примере:
marker = new google.maps.Marker( <
position: new google.maps.LatLng(55.86344,37.701832),
icon: <
path: google.maps.SymbolPath.CIRCLE,
scale: 10
>,
draggable: true,
map: map
>);
google.maps.event.addDomListener(window, ‘load’, initialize);
автор: ZКатя (05.08.2014 в 12:40) письмо автору
не знаю. опять не получилось))
автор: confirm (05.08.2014 в 12:49) письмо автору
Ну так надо внимательнее читать. Вот что вы делаете опять:
| displayBodyTag (); ?> > |
А где инициализация, о которой я писал?
| displayBodyTag () ?> > |
И еще, ваш код с пустыми «дырами» так будет и выплюнут на страницу, а нужны ли на ней эти никчемные \r\n, \t . ?
автор: ZКатя (05.08.2014 в 13:04) письмо автору
пустые дыры надо потом убрать. сейчас то что я не так сделала? опять нет карты((
автор: confirm (05.08.2014 в 13:23) письмо автору
HTML-код у вас, это нечто. С чего это закрывающий тег DIV следует после закрывающего тега BODY.
Не работает сейчас, значит вы не все сделали что требовалось.
Вот тоже самое, просто без вашего кода:
marker = new google.maps.Marker( <
position: new google.maps.LatLng(55.86344,37.701832),
icon: <
path: google.maps.SymbolPath.CIRCLE,
scale: 10
>,
draggable: true,
map: map
>);
google.maps.event.addDomListener(window, ‘load’, initialize);
Сохраните это как html файл и запустите. Есть карта?
автор: ZКатя (05.08.2014 в 13:42) письмо автору
этот файл открывается отдельно
автор: confirm (05.08.2014 в 13:46) письмо автору
автор: ZКатя (05.08.2014 в 13:49) письмо автору
автор: confirm (05.08.2014 в 13:59) письмо автору
Ну так проблема вставить этот код в ваш так, как я показывал? Стиль объекта map_canvas, его высоту 100% вы указали в стилях? Выводя свой код вы проверяете его на ошибки? Ведь у вас html-результат содержит непростительные ошибки.
Вот тоже самое со вставкой РНР и разбивкой на две колонки:
marker = new google.maps.Marker( <
position: new google.maps.LatLng(55.86344,37.701832),
icon: <
path: google.maps.SymbolPath.CIRCLE,
scale: 10
>,
draggable: true,
map: map
>);
google.maps.event.addDomListener(window, ‘load’, initialize);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set(‘map_style’, styledMap);
map.setMapTypeId(‘map_style’);
>
Map
$s = ‘
Google Maps is a desktop and mobile web mapping service application and technology provided by Google, offering satellite imagery,
street maps, and Street View perspectives, as well as functions such as a route planner for traveling by foot, car, bicycle (beta test),
or with public transportation. Also supported are maps embedded on third-party websites via the Google Maps API,[1] and a locator for
urban businesses and other organizations in numerous countries around the world. Google Maps satellite images are not updated in real
time; however, Google adds data to their Primary Database on a regular basis, and most of the images are no more than 3 years old.
The opt-in redesigned version of the desktop application has been available since 2013, alongside the «classic» (pre-2013) version.
The redesigned version was met by user criticism regarding hiding some common functions, removing a scale bar, and lack of other features
that include My Places and sharable customized links to parametrized split Street View and Map views.
Google Maps uses a close variant of the Mercator projection, and therefore cannot accurately show areas around the poles. A related
product is Google Earth, a stand-alone program which offers more globe-viewing features, including showing polar areas.
Google Maps for mobile is the world\’s most popular app for smartphones, with over 54% of global smartphone owners using it at least
once during the month of August 2013.
‘ ;
А если вставлять ваш РНР-код, но и следя за html-структурой, думаете что откажется работать? Ну проверьте еще раз что вы делаете, явно же либо вы не все прописали, либо допускаете ошибки в структуре.
автор: ZКатя (11.08.2014 в 10:20) письмо автору
html код у меня не может содержать ошибок. я его взяла с developers.google.com. в index php тоже ошибок нет никак. это шаблон rockettheme, своего я ничего не придумывала
автор: confirm (11.08.2014 в 12:49) письмо автору
Вот «хвост» вашего индексного файла:
Это по вашему без ошибок? Я не проверяю весь ваш файл, я его только мелком гляжу, выискивая то, что касается вставке.
Вы могли взять чей-то шаблон его, и возможно без ошибок, но допускаете при выводе, а возможно и сам шаблон кривой.
автор: ZКатя (12.08.2014 в 14:06) письмо автору
странно. вроде с официального сайта скачала. а чем опасны эти ошибки?)
автор: confirm (12.08.2014 в 14:27) письмо автору
Опасности они не представляют, а вот попортить крови вполне могут. Некорректные вложения тегов могут быть причиной неверного отображения элементов на странице или даже их отсутствия. Это может зависеть не только от самих некорректных html-элементов, но так же их стилей.
Кроме этого, некорректная верстка может служить причиной некорректной работы клиентских скриптов.
Внешние таблицы стилей
Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей. Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и CSS.
Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.
Представляем внешнюю таблицу
Внешняя таблица стилей — это обычный текстовый файл с расширением css. Вообще говоря, это расширение не обязательное, но очень рекомендуемое, дабы избежать проблем с некоторыми особо старыми браузерами.
Файл с таблицей стилей должен содержать только правила и комментарии CSS. Наличие во внешней таблице стилей, например, HTML-разметки может привести к тому, что некоторые ее части или вообще вся таблица будут проигнорированы.
Тег link для внешних таблиц стилей
Для подключения внешнего CSS используется тег link.
Знакомься, тег link:
- устанавливает связь с внешними документами, чаще всего с таблицами стилей;
- должен располагаться в секции head;
- в одном документе может быть несколько тегов link.
Примеры подключения CSS
Как правило, используются три атрибута:
- rel — отвечает за установку взаимосвязи и в данном случае имеет значение «stylesheet»;
- type — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип «text/сss»;
- href — абсолютный или относительный путь к самому CSS-файлу.
Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в нашем справочнике.
Пример подключения дополнительной таблицы стилей для устройств печати:
Пример подключения CSS с использованием условных комментариев (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):
Достоинства внешних CSS
Кроме того, что все правила четко погруппированы в отдельном файле и их легко находить и, при необходимости, править, у внешних таблиц есть ряд существенных плюсов, по сравнению с вложенными. Например:
- Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
- Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
- Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.
Резюме
Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.
- Анатомия CSS
- История развития CSS
- Что такое CSS
- CSS анимация
- Анимация в CSS3. Часть I
- Анимация в CSS3. Часть II
- Вендорные префиксы
- Box model — блочная модель
- Схлопывание margin
- Блочные элементы
- Введение
- Дерево документа HTML
- Каскад в CSS
- Наследование
- Наследование: общие сведения
- Специфичность
- Вложенные таблицы стилей
- Внешние таблицы стилей
- Встроенные стили
- Группируем CSS. Директива @import
- Cелектор идентификатора
- Селектор атрибутов
- Селектор дочернего элемента
- Селектор класса
- Селектор обобщенных родственных элементов
- Селектор потомка
- Селектор сестринского элемента
- Селектор типа
- Селекторы псевдоклассов
- Селекторы псевдоэлементов
- Селекторы: общие сведения
- Составные селекторы. Комбинаторы
- Универсальный селектор
- Эффективность CSS селекторов