Обновление сайта

Обновление сайта

Наконец-то дошли руки до своего собственного сайта. Проделано довольно много работы:

  • создан простой и не броский дизайн;
  • адаптивная, резиновая верстка без применения изображений (да здравствуют шрифты);
  • ajax-загрузка контента (на чистом javascript);
  • весь текст переведен в формат markdown
  • написан генератор сайта.

На каждом пункте, кроме первого, встречалось много подводных камней.

Верстка

Первые не очевидные грабли меня встретили при попытке воплотить нарисованный дизайн в жизнь, когда делал колонки.

Поначалу хотел сделать все при помощи спрайтов, но шрифтами оказалось экономичнее по размеру файла. В этом помог сервис fontello, в котором я выбрал нужные мне иконки и добавил свои.

Также для верстки я использовал свою библиотеку Stylus для короткой записи CSS-свойств ShortCSS

JavaScript

Я постарался обойтись небольшим количеством кода. Поэтому нашёл скрипт LightBoxPlus, который не использует сторонних библиотек. Правда, пришлось немного модифицировать код, чтобы использовать шрифты вместо изображений кнопок управления. Также пришлось немного изменить инициализацию скрипта для дальнейшего использования вместе с функцией подзагрузки контента.

Подзагрузка содержимого работает, если ссылка имеет класс aj и браузер поддерживает history api. На этом этапе наткнулся на то, что innerHTML при замене текста элемента не исполняет JavaScript код и правила CSS тоже не будут применяться. Для этого были написаны функции выполнения JavaScript и загрузки CSS.

Движок (CMS)

Вообще мне не хотелось писать самому движок, но генераторов статических файлов не так много. К сожалению, они не поддерживали ни SSI1, ни ajax.

В итоге пришлось сделать самому так, чтобы сгенерированный сайт состоял из статических файлов, которые активно используют SSI1 и подготовлены для использования технологии ajax.

Из функционала движок поддерживает:

  • markdown extra
  • синтаксическую подсветку кода GeSHi
  • минификацию кода HTML
  • генерирование содержания по заголовкам (TOC)
  • подключен файловый менеджер elfinder
  • подключение внешних комментариев.
  • RSS
  • XML sitemap
  • теги

К сожалению, он сейчас слишком сыр для стороннего использования, потому как некоторые вещи придётся править либо в исходниках, либо править базу ручками. Если доведу до ума, то опубликую на github.


  1. SSI (Server Side Includes — включения на стороне сервера) — несложный язык для динамической «сборки» веб-страниц на сервере из отдельных составных частей и выдачи клиенту полученного HTML-документа. Википедия