Приложения LiveView могут состоять из двух макетов:

• корневой макет — обычно он содержит определение <html>, а также теги head и body. Любое содержимое, определённое в корневом макете, останется неизменным, даже если вы переходите между LiveView без перезагрузки страницы. Корневой макет обычно объявляется в маршрутизаторе с помощью put_root_layout и определяется как "root.html.heex" в папке макетов. Он вызывает {@inner_content}, чтобы вставить содержимое, отрисованное макетом

• макет приложения — это динамическая часть макета вашего приложения; она часто содержит меню, боковую панель, flash-сообщения и многое другое. Начиная с Phoenix v1.8 этот макет явно отрисовывается в шаблонах вызовом компонента <Layouts.app />. В Phoenix v1.7 и более ранних версиях макет обычно настраивался в файле lib/my_app_web.ex, например use Phoenix.LiveView, layout: ...

В целом эти макеты находятся в components/layouts и встраиваются в MyAppWeb.Layouts.

Корневой макет

«Корневой» макет отрисовывается только при первоначальном запросе, поэтому ему доступен assign @conn. Корневой макет обычно определяется в маршрутизаторе:

plug :put_root_layout, html: {MyAppWeb.Layouts, :root}

Корневой макет также можно задать с помощью параметра :root_layout в маршрутизаторе через Phoenix.LiveView.Router.live_session/2.

Обновление заголовка документа

Поскольку корневой макет из конвейера Plug отрисовывается вне LiveView, его содержимое нельзя динамически изменять. Единственное исключение — <title> HTML-документа. Phoenix LiveView обрабатывает assign @page_title особым образом, позволяя динамически обновлять заголовок страницы. Это полезно при навигации без перезагрузки страницы или для отображения уведомления на вкладке браузера. Например, чтобы обновить счётчик уведомлений пользователя в строке заголовка браузера, сначала задайте assign page_title при монтировании:

def mount(_params, _session, socket) do
  socket = assign(socket, page_title: "Latest Posts")
  {:ok, socket}
end

Затем обратитесь к @page_title в корневом макете:

<title>{@page_title}</title>

Вы также можете использовать компонент Phoenix.Component.live_title/1, чтобы автоматически добавлять префикс и суффикс к заголовку страницы при отрисовке и при последующих обновлениях:

<Phoenix.Component.live_title default="Welcome" prefix="MyApp – ">
  {assigns[:page_title]}
</Phoenix.Component.live_title>

Хотя LiveView не обновляет корневой макет, достаточно присвоить значение page_title, чтобы LiveView понял, что нужно обновить заголовок:

def handle_info({:new_messages, count}, socket) do
  {:noreply, assign(socket, page_title: "Latest Posts (#{count} new)")}
end

Примечание: если вам нужно динамически изменять другие части базового макета, например добавлять новые скрипты или стили в <head> при навигации без перезагрузки страницы, вместо этого следует использовать обычную навигацию по страницам, без LiveView. Присвоение значения @page_title напрямую обновляет document.title, поэтому его нельзя использовать для изменения других частей базового макета.