Ssi технология что это
Ssi технология что это
Большинство страниц на сайте, несмотря на их разное содержание, имеет одинаковую структуру кода. Например, верхняя и нижняя часть документа практически не меняется от страницы к странице. В таком случае рекомендуется разделить шаблон страницы на несколько файлов, которые подключаются по мере необходимости. Однако традиционный HTML не позволяет делать подобные кунштюки, поэтому помочь здесь могут серверные языки вроде PHP, Python, Ruby и др. Но для большинства начинающих веб-разработчиков эти названия звучат как неведомые заклинания, они ещё не готовы заниматься веб-программированием. В таком случае, как альтернатива, подойдёт SSI.
SSI (Server-Side Includes, включения на стороне сервера) позволяет добавлять контент во множество страниц, причём незаметно для пользователя. Это значит, что при запросе документа браузеру передаётся уже готовый, полностью сформированный код. Особенностью SSI является то, что это технология работает только под управлением веб-сервера и представляет собой набор команд вставляемых в HTML-файл.
Теперь проверяем, как это действует. Делаем два файла — index.shtml будет содержать директиву SSI, а внутри content.html хранится заголовок сайта. Содержание этих файлов представлено в примерах 1 и 2.
Пример 1. Файл index.shtml
Пример 2. Файл content.html
Если посмотреть итоговый код документа, то мы увидим следующее (пример 3).
Пример 3. Код, полученный в результате использования SSI
Если всё сделано правильно, то после запуска файла index.shtml, вы увидите надпись «Работает!». В том случае, когда написано нечто другое или вообще ничего нет, возможны два варианта.
Все упомянутые комплекты веб-серверов поддерживают SSI на исходном уровне, так что если страница как в примере 3 не отображается, необходимо проверить, что веб-сервер запущен и документ открывается в браузере под его управлением. Так, для домена test.lc открывать надо адрес http://test.lc, а не file:///W:/html/test.lc/www/index.shtml.
Возможности SSI не ограничены добавлением содержимого другого файла. С помощью SSI можно запускать серверные приложения, использовать переменные окружения, указывать размер файла, дату модификации документа и многое другое.
SSI для бедных
SSI – это простая и удобная технология организации динамических
страничек. SSI экономит место на сервере, и одновременно делает
администрирование сайта удобней в десятки раз! Все бы было хорошо, если
бы… для использования этой технологии нужны специальные разрешения
сервера. На бесплатном хостинге, у Вас поддержки этой технологии может
не быть.
Возникает вопрос замены этой технологии. Конечно же! А кто будет
переписывать 20 страничек своего сайта, если вдруг ему захочется
добавить еще один пункт меню?!
Самыми популярными способами являются замена фреймами и с помощью
JavaScript. Но, наверное, у этих способов больше недостатков, чем
достоинств.
Я же предлагаю свой способ замены. Замена SSI на SSI! Конечно, с
некоторым отличием.
Суть этого способа в том, что странички сайта будут собираться не на
сервере, а непосредственно на компьютере создателя сайта, перед закачкой
на сервер. И закачиваться на сервер будут уже собранные html странички.
Но, обо всем по порядку. Для начала я хотел бы описать каждый из
представленных методов замены SSI.
Фреймы
Это самый простой способ замены. В одном фрейме мы пишем меню, а во
втором – отображаем информацию. Это было бы очень удобно, если бы не
было таких недостатков:
1. Поисковые роботы очень плохо индексируют сайты с фреймами.
2. Фреймовые меню накладывают свой отпечаток на дизайн сайта.
3. Возможно открытие странички без фреймового меню, а это означает, что
посетитель практически не сможет получить доступ к остальной информации
сайта.
Именно по этому сайты, содержащие навигационные фреймы сейчас
практически не создаются. Ведь недостатков у них намного больше чем
достоинств.
Фреймовые структуры годятся больше для создания справочников, учебников,
и другой offline литературы.
JavaScript
Этот язык клиентских сценариев дает нам намного больше возможностей, в
сравнении с фреймами. Например, мы можем отмечать название текущей
странички в навигационном меню, вставлять целые блоки информации с
помощью одной директивы и много, много другого. JavaScript не требует
разделения странички на блоки, как это делаю фреймы. JavaScript удобен,
если бы…
1.Поддержка JavaScript у некоторых людей может быть полностью отключен.
2.Текст, выводимый JavaScript, не индексируется поисковиками.
3.Модули JavaScript могут быть кэшированы браузером. Так что даже после
внесения изменений на сайте, некоторые пользователи будут видеть старую
информацию, которая была кэширована их браузером.
Комбинация
Это, наверное, только в математике, при умножении, два минуса дают плюс.
В веб дизайне это не так – два минуса дают один огромный минус. Конечно,
можно попробовать комбинировать фреймы и JavaScript, и возможно, вы
добьетесь хороших результатов. Но, поверьте, эти результат не стоит
затраченных на него усилий.
А вдруг, со временем, Вам захочется перенести Вашу страничку на платный
хостинг. Что тогда? Вам приодеться переписывать сайт заново?
Мой способ универсален. Его можно использовать как на бесплатном так и
на платном хостинге. При этом, используя платный хостинг, Вам не нужно
будет делать никаких премудростей. Достаточно чуть-чуть
подкорректировать сайт, залить на сервер – и ресурс работает.
Действительно, что может быть проще замены SSI на SSI? Конечно, если вы
хорошо знаете эту технологию. Я так же предполагаю, что вы знакомы с
языком Perl, с помощью которого будет собираться сайт.
Итак, что нам нужно:
1. Во-первых это сайт, написаний с использованием технологии SSI.
2. Домашний веб сервер Apache + Perl
Определимся со структурой
Для удобства я буду использовать свои пути, которые Вы можете, при
необходимости, изменить.
И так, моя домашняя страничка находиться в папке e:/projects/page/
Исходник с использованием SSI находиться в папке e:/projects/page/www/.
Эта папка связана с моим виртуальным хостом dvl999.vinnitsa.com, и при
обращении к ниму происходит чтение и обработка сервером содержимого папки.
Скрипт для публикации находиться в e:/projects/page/publisher/publisher.pl
Папка странички, готовой к публикации — e:/projects/page/pub/
Подготовка сайта
Копируем все содержимое папки www в папку pub. Единственные файлы,
которые будут изменены – это html файлы. А поэтому ищем и удаляем в
папке pub html файлы, а также ssi-вставки, которые нам так же не нужны.
Для автоматизации процесса можно использовать любой файл-менеджер, с
поддержкой вывода результатов на «панель». Например, FAR.
О скрипте
Скрипт publisher.pl имеет следующий код:
Для запуска, используйте интерпретатор Perl – perl.exe
Пример базы данных:
Принцип действия скрипта прост. Моя страничка имеет виртуальный хост
http://dvl999.vinnitsa.com. Например, используя первую строчку базы
данных(/about/index.htm), происходить чтение странички
http://dvl999.vinnitsa.com/about/index.htm. Это делается по средствам
модуля LWP.
Прочитанная и обработанная страничка записывается по адресу
pub/about/index.htm. Таким образом, будут обработаны все странички,
находящиеся в базе данных.
И остается только закачать содержимое папки pub на Ваш сервер.
Вот такой способ. Из достоинств: универсальность, хорошая индексация
поисковыми роботами, независимость от настроек браузера клиента,
связанных с отключением JavaScript и фреймов. Из недостатков лишь то,
что, возможно, Вам придется закачивать все html файлы вашего сайта после
обновления ресурса. Но, это в худшем случае.
SSI сайт: HTML, XML, XSLT
Достопочтенное Ретро! Благо ты или зло?
Вздохом какого ветра к нам тебя занесло?
© Роберт Рождественский
Есть вещи, которые просто нравятся, их приятно держать в руках, они просты, они понятны. Время их расцвета ушло, но сами они не канули в лету, и к ним возвращаются снова и снова. Это касается не только предметов материального мира. Всегда найдётся программист, которому интересно писать на ассемблере, или прямо в машинных кодах, любитель простоты, минимализма, ретро. Попробуем вернуться к SSI, благо, это и проще ассемблера, и значительно моложе.
Технология SSI в своё время позволяла (и сейчас позволяет), делать сайты, в которых часть контента выносилась в отдельный файл, включаемый сервером «на лету». Обычно в отдельные файлы выносились: хидер, сайдбар, футер. Для обычного сайта с простой структурой этого хватало с лихвой. Выигрыш же состоял в том, что использовались простые, быстрые и надёжные решения, которые фактически без программирования реализовывали функционал CMS. Да и вообще, минимальный стек технологий — это любопытно.
Типичная страница сайта «на инклудах» выглядела так:
Но работа с множеством страничек вызывала некоторое неудобство. Появились CMS, которые снимали одни вопросы, и ставили другие. Интересным решением было хранение базы данных в виде одного html файла, в котором страницы обозначались тегами Н1, Н2, Н3. При этом цифра тега говорила в вложенности страницы. Идею эту я наблюдал в CMSimple cmsimple.org, хотя возможно, кто-то это придумал и ранее. На базе этой идеи наверняка создано достаточно много CMS (да и сам пробовал, каюсь, чего уж там).
Главный недостаток такого решения — необходимость ворочать большой html файл. Есть конечно возможность сделать индекс, но по большому счёту это уже не так интересно. Одно дело редактировать десяток статей в одном файле, другое — тысячи. Примем как данность, что такой движок уместен для небольшого сайта, и не важно, СДЛ это, или сателлит — мы ведь обсуждаем технологию.
SSI и БД в HTML
Что за изгибы моды? Время сошло с ума:
Бабушкины комоды в блочные лезут дома!
Вспомнив о SSI, я задался вопросом: а нельзя ли подобный подход реализовать с помощью этой технологии? Сказано — сделано. Прямо в html файле можно создать переменную, значением которой и будет база данных сайта:
Осталось научиться делать выборку из этой базы данных. Для этого пригодится переменная QUERY_STRING, которая хранит строку запроса к сайту. Настроив реврайты в htaccess и используя возможность условных выражений с поддержкой регулярных выражений (сорри за тавтологию), сервер сможет делать выборку нужной статьи из базы.
К сожалению, в SSI нет циклов, поэтому перебрать базу данных и сформировать сайдбар со списком страниц не получится: его придётся делать вручную. Неудобно, но это ограничения SSI. Также мне сильно не хватило возможности поместить в переменную содержание сайта, чего-то такого:
Такая опция позволила бы базу данных поместить в отдельный файл, соответственно код «движка» был бы более чистым и читаемым. Так что «лапша-код», это наше всё.
Для эксперимента решил сделать простой сайт, чтобы попробовать в деле предлагаемое решение. Темой выбран латино-американский танец Румба (исходники ниже). Первое впечатление — сайт работает быстро. Поскольку размер «движка» вместе с базой данных чуть больше 10 килобайт, это не удивительно. Запишем это в плюс. Плюс этот будет оставаться таковым до тех пор, пока размер БД не вырастет к примеру до мегабайта. При этом необходимость формирования меню вручную остановит от ваяния большого сайта гораздо раньше. Кроме того, копипастя что-либо в БД, необходимо не забывать заменять двойные кавычки на одинарные.
Ничего необычного и сложного. Вполне возможное решение. Важно, что странички благодаря реврайтам поисковые системы будут индексировать как отдельные, а не как одну целую. Этим конечно никого не удивишь, но упомянуть не помешает. Также в плюс запишем малую нагрузку на сервер. Не самый важный фактор для маленького сайта, но пусть будет. Если есть желание прикрутить дескрипшены — это также не проблема, достаточно ввести ещё один тег в состав разметки записей-статей.
Эти файлы нужно создать на сайте, чтобы увидеть пример в действии:
SSI и БД в XML
Вещи нездешней формы, люстры, шкатулки, бра.
Медные пра-телефоны, чайники — тоже «пра».
Минимализм языка SSI конечно не даст сильно развернуться. Но как же выкрутиться? Если немного прищуриться, глядя на html, он становится похож на xhtml, а если вообще закрыть глаза… Ну, вы уже поняли, что попробуем скрестить SSI с XML. Этот формат одним людям нравится, другие его люто ненавидят, но он «имеет место быть». Почему бы не попробовать?
Сделать из html-базы предыдущего примера xml файл — дело двух минут. Мы можем скормить его поисковой системе: Гуглу, Яндексу, Рамблеру, но не Мэйлу (предлагаю mail.ru начать индексировать xml файлы, кто за?). Поисковик воспримет файл как одну страничку и будет её учитывать именно так. С точки зрения предыдущего варианта с множеством страниц это скорее минус, но раз существует понятие Single-Page Application (SPA или Одностраничное приложение), значит эта xml страница может иметь право на жизнь*.
Однако xml файл как-то не очень похож на сайт, и показывать его в таком виде посетителю не резон. Вот тут и появляется необходимость подключения XSLT преобразования. Это обычный xsl файл, который также, как и предыдущий вариант движка, получает посредством QUERY_STRING с помощью SSI запрос и трансформирует xml файл. Результатом становится оформленная страничка, привычная посетителю. Хочу подчеркнуть, что XSLT-трансформация происходит на клиенте, т.е. её делает браузер, а не сервер.
Важно, что «одним движением руки» боковое меню со списком страниц генерируется автоматически. Кроме того, очень легко добавить в этот прототип движка разделы (категории) статей и теги (метки). Эта задача прямо-таки просится в xsl, и при желании можно нафантазировать много чего.
Поскольку сайт на XSLT версии SSI движка мы называем SPA, то с точки зрения SEO это важно. Это значит, что поисковая система видит одну страничку (ПС могут больше, так что я утрирую), и продвигать её необходимо как сайт-одностраничник. Это скорее минус, но с оговоркой. Xsl файл может при трансформации изменять контент. Это интересно. Допустим, с позиции SEO мы вынуждены добавить на сайт текст именно для ПС. Его можно задвинуть далеко в футер, а можно… просто не показывать посетителю. Насколько далеко в этом стоит заходить и стоит ли это делать вообще — это тема отдельного разговора, здесь же разговор только о технической возможности.
Теперь о трансформации на клиенте: аргумент переноса нагрузки с сервера на клиент я особо не рассматривал, кто-то это посчитает плюсом, кто-то скажет, что это экономия на спичках. Моё мнение — если возможно, лучше всё делать на сервере, но если нет, то тут выбор не велик. У браузеров к сожалению есть некоторые особенности в реализации XSLT (фичи или баги), которые надо знать и учитывать, разрабатывая xsl. Также, мне видится перспективным попробовать использовать не Апач, а Nginx, в этом случае есть вариант с использованием модуля ngx_http_xslt_module При этом сайт из SPA можно превратить в многостраничник, проводящий XSLT трансформацию на стороне сервера.
Эти файлы нужно создать на сайте, чтобы увидеть пример в действии:
Основы технологии Server Side Includes или SSI.
Я хочу рассказать вам об основах технологии server side includes или ssi.
ssi переводится как «включения со стороны сервера». Эта технология помогает сохранить уйму времени при создании сайта и закачке его на сервер. Вообще ssi призвана, насколько это возможно, облегчить работу web-мастера.
Вот, к примеру, вполне реальная ситуация:
У вас есть сайт, который, разумеется, не использует ssi, с числом страниц близким к:, да возьмем хотя бы 50 страниц. Итак, на каждой странице вы, как хороший web-мастер, заботящийся о своих посетителях, разместил текстовое меню. И вдруг по каким-то причинам название какого-то раздела изменилось, а быть может, вам захотелось добавить новый. Что же теперь заново открывать все пятьдесят страниц и переписывать все снова и снова?! В нашем случае это, к сожалению, единственное решение, правда, некоторые хорошие редакторы смогут облегчить эту непосильную ношу (и еще как облегчить!, homesite, например).
Так вот, такой проблемы у вас не произошло бы, еcлu вы использовали технологию ssi. Объясняю: если бы вместо текстового меню на всех страницах было бы написано что-то вроде
А в файле «(www)/ssi/menu_txt.html» было бы содержание этого меню, то для того, что бы добавить или изменить раздел нужно было бы только поменять содержание всего лишь одного файла menu_txt.html. Как вы, наверно, уже догадались во все страницы вместо «комментария»
будет вставлен код из menu_txt.html.
Синтаксис ssi директив.
Синтаксис ssi директив таков:
Все директивы заключаются в комментарии
, главным отличием ssi директивы от комментария является символ «#» сразу(!) после » include
Включает текст (код, содержание) указываемого документа/файла в данный документ. Положение файлов на сервере указывается с помощью следующих атрибутов:
include позволяет включать результат работы cgi скриптов, а также обращаться к ним с какой-то заданной строкой запроса. Например,
Устанавливает значение какой-либо переменной. Переменная объявляется с помощью атрибута var, а её значение задается с помощью атрибута value.
переменная a будет иметь значение variable.
А можно и так:
выводит значение переменной, указанной в атрибуте var.
то есть вместо этого кода вставляется значение переменной a
Примеры использования ssi.
Вот содержание главного документа.
main.html
А это содержание включаемых файлов.
head.html
Как вы смогли убедиться из данного примера, пользоваться ssi не так уж и трудно, и более того очень полезно.
Технические аспекты использования ssi.
Стоит несколько слов сказать о техническом обеспечении, которое необходимо для использования ssi. Если вы просто создадите файл на своем локальном диске с корректными ssi командами и откроете его в вашем браузере, то никаких включений не произойдет, т.к все выражения типа для браузера являются чистой воды комментариями. Так называемые «включения» происходят еще на стадии обработки документа сервером, прежде чем послать его пользователю. В нашем случае такого этапа (обработка документа сервером) вообще нет. Так вот для того, что бы вы смогли полностью ощутить все преимущества ssi на своем локальном компьютере, вам нужен «домашний» web-сервер.
И вот еще что: не каждый провайдер, предоставляющий хостинг, поддерживает ssi. Обычно это проблема бесплатных хостингов. Но и некоторые из них, если уж и позволяют использовать ssi, то требуют за это некую плату, например, размещение рекламы на сайте.
Вместо заключения хочу сказать что, технология ssi была специально разработана и создана для того, что бы сэкономить ваше время, а, следовательно, и деньги. Так что в любом случае старайтесь использовать ssi в своих проектах, как говорится, на полную катушку.
Что такое SSI, или Сделай свой сайт проще! (Часть 1)
Интернет-технологии в наши дни становятся все доступнее. Открыть свой сайт в Интернете может любой, выбор возможностей — на любой вкус. Можно кропотливо выписывать тэги в «Блокноте», можно использовать специальные визуальные редакторы, можно просто набросать страницу в Microsoft Word и сохранить в формате HTML. Словом, «твори, выдумывай, пробуй!». Совершенно не обязательно быть профессиональным программистом или дизайнером, все чаще на арену Интернета выходят любители.
Почти каждый непрофессиональный сайт начинает свое существование в виде нескольких HTML-документов, связанных между собой перекрестными ссылками. Многие так и уходят в таком состоянии в информационную вечность. Но некоторые любительские сайты все же становится популярными, обрастают жирком информационного наполнения, нагуливают объем. Иногда разрастаются до десятков и даже сотен страниц. Но по сути своей остаются набором раз и навсегда сформированных документов.
Поддерживать и обновлять такой сайт — сущее мучение для его владельца. Страница, как правило, состоит из нескольких блоков, причем часть их них неизменна для всех страниц сайта. Это заголовок, навигационное меню, рекламный блок, подвал страницы. Если что-то захочется изменить в одном из таких постоянных блоков, это придется вручную сделать на каждой странице сайта. Удовольствие весьма сомнительное. Часто интересные идеи остаются нереализованными именно из-за большого объема правки десятков отдельных страниц. SSI позволяет значительно облегчить эту работу. Кроме того, технология SSI позволяет делать еще кое-что, принципиально не выполнимое средствами HTML. Использовать SSI просто, хотя знание языка HTML очень поможет. Если вы не испугались, то вперед!
Прежде всего, расшифруем аббревиатуру SSI — Server Side Includes. По-русски, «включения на стороне сервера». Все понятно? Тогда на этом закончим… Хотя лучше будет все-таки пояснить. SSI — это директивы, вставляемые в HTML-код и управляющие web-сервером. Встречая в файле такие SSI-вставки, web-сервер выполняет определенные действия. Например, добавление HTML-кода из другого файла, формирование страниц «на лету» в зависимости от типа браузера и многое другое.