Ruby on Rails navbar-brandにリンクを付けたい

1876 ワード
Rails bootstrap4 Rails テキストリンク

初めに

Railsを学習中の際、タイトルの部分を押せばトップページに戻るようにしたかったのですが、少し手間取ったので記事にする事にしました。なので、メモ程度だと思って見て頂ければ幸いです。

本題

何をしたかったのか？

以下の画像にある、この赤い部分を押せばサイトのトップに戻るようにしたかった。「app/views/layouts/application.html.slim」を利用してこの部分は作成していたので、このファイルのコードを添付しておきます。

application.html.slim
doctype html
html
  head
    meta charset = "utf-8"
    title TaskTest
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  body
    .app-title.navbar.navbar-expand-md.navbar-light.bg-light
      .navbar-brand TaskTest
      .container
        - if flash.notice.present?
          .alert.alert-success= flash.notice
    = yield

変更した要所のみを載せます。navbar-brandの横にhrefでトップページに飛ばそうとしても上手くいきませんでした。しかし、以下のように下にaタグを設定することによってタイトルを押すとトップページに戻れるようになりました。

application.html.slim
  body
    .app-title.navbar.navbar-expand-md.navbar-light.bg-light
      .navbar-brand
        a class="title" href="/"  TaskTest
      .container
        - if flash.notice.present?
          .alert.alert-success= flash.notice
    = yield

最後に

slim形式で書くことに慣れていないのでこれが最適解なのかは分かりませんが、これからの勉強に役立てていきたいと思います。