Структура Yesod-проекта: шаблоны

let author   = "Денис Шевченко"
    date     = fromGregorian 2014 dec 21
    category = "Веб"
    tags     = ["Yesod"]

Приветствую!

Итак, продолжим изучение структуры нашего Yesod-проекта. Пришла пора взглянуть на содержимое каталога templates.

Шаблоны

Заглянем внутрь этого каталога:

default-layout-wrapper.hamlet
default-layout.hamlet
homepage.hamlet
homepage.julius
homepage.lucius

Выглядит необычно, не правда ли ли? Какие-то странные расширения .hamlet, .julius и .lucius… Не беспокойтесь, сейчас всё объясню.

Начнём с трёх файлов homepage.*. Как вы уже знаете, GET- и POST-запросы, направленные по корневому пути нашего приложения, обрабатываются соответствующими функциями, определёнными в файле Handler/Home.hs. В частности:

getHomeR :: Handler Html
getHomeR = do
    -- Обрабатываем GET-запросы...

Когда мы набираем http://localhost:3001, мы ожидаем увидеть некую страницу. То есть функция getHomeR должна вернуть некий HTML-код, который (в конечном итоге) и будет возвращён нашему браузеру. Но откуда же функция getHomeR возьмёт этот HTML-код, спросите вы? Отвечаю: она возьмёт его из шаблонов.

Файлы, расположенные в каталоге templates - это шаблоны наших будущих страниц. И как вы уже могли догадаться, три файла homepage.* соответствуют нашей корневой странице: именно в этих трёх файлах содержится то, что будет использовано для построения HTML-кода, возвращаемого по запросу http://localhost:3001.

Шаблонная троица

Как мы знаем, конечная страница - это смесь HTML, CSS и JS. Именно этой троице соответствуют упомянутые выше файлы: в homepage.hamlet живёт HTML-код для домашней страницы, в homepage.lucius живёт CSS для неё же, а в homepage.julius живёт JS.

Но вас, очевидно, интересует, почему такие необычные расширения? Дело в том, что автор Yesod любит Уильяма Шекспира, потому и решил воспользоваться именами его знаменитых персонажей: “Hamlet” - это Гамлет, “Lucius” - это Луций, а Julius - это Юлий.

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

Базовые шаблоны

Ну хорошо, с троицей разобрались, а для чего нужны файлы default-layout-wrapper.hamlet и default-layout.hamlet? Эти файлы, как можно догадаться из их названия, содержат умолчальные HTML-заготовки. В частности, файл default-layout-wrapper.hamlet включает в себя скелетную HTML-структуру, с тегами <head>, <body> и т.д. На основе этой структуры формируется большинство страниц приложения, поэтому в этот файл удобно вставлять общие вещи, такие как скелетные <div>-ы, код Google Analytics, <meta>-теги и т.п.

Иерархия

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

templates/
    home/
        login/
            login.hamlet
            login.julius
            login.lucius
        register/
            register.hamlet
            register.julius
            register.lucius
        socialLogin/
            socialLogin.hamlet
            socialLogin.julius
            socialLogin.lucius

Удобно и наглядно. Но вы можете спросить, почему странице home соответствуют не три шаблонных файла homepage.*, а целых девять? О, это очень интересный вопрос, но об этом мы поговорим в одной из следующих заметок. А для первого знакомства достаточно.