piyopiyo.exポータルチュートリアル ５章～faviconとページタイトルを設定する～

本記事はpiyopiyo.exポータルチュートリアルの５章となります。

本章の目的

ブラウザのタブに表示される、faviconとサイト名を変更します。

faviconを設定する

faviconの設定についてはプロジェクト生成時に下記に設定されているので、該当箇所に画像を配置するだけで置き換えることができます。

lib/phoenix_app_web/endpoint.ex

～中略～
  plug Plug.Static,
    at: "/",
    from: :phoenix_app,
    gzip: false,
    only: ~w(assets fonts images favicon.ico robots.txt) # <-- favicon setting here
～中略～

デフォルトでは空のファイルが配置されています。

上書きすることで画像ファイルを置き換えます。

置き換え後の画像

サイトのタイトルを変更する

サイトタイトルについては、すでに３章でroot.htmlを修正したタイミングで変更済です。

lib/phoenix_app_web/templates/layout/root.html.heex

～中略～
    <meta name="og:type" content="website">
    <meta name="og:title" content="piyopiyo.exポータル"> <!-- Web Site Title here --> 
    <meta name="twitter:card" content="summary">
～中略～

ただし、現在トップページとなっているmessages一覧画面のハンドラで上書きされているため、「Listing Messages」が表示されています。
該当箇所を削除します。

lib/phoenix_app_web/live/message_live/index.ex

  defp apply_action(socket, :index, _params) do
    socket
#    |> assign(:page_title, "Listing Messages") # <-- delete here
    |> assign(:message, nil)
  end

結果の確認

faviconとページタイトルが反映されました。

関連情報

• この演習完了時点のリポジトリ断面

• 使用したpiyopiyo.exポータル公式のfavicon画像