Einführung

Dies ist eine Fortsetzung der Serie "Erstellen einer EC-Site mit Rails 5 (3)" (https://qiita.com/GreenFingers_tk/items/d77555311286d966462e), die eine EC-Site erstellt, auf der Sie in einer fiktiven Bäckerei einkaufen können. Dieses Mal werden wir die Kopf- und Fußzeile erstellen. Da es eine große Sache ist, habe ich versucht, es reaktionsschnell zu machen.

Quellcode

https://github.com/Sn16799/bakeryFUMIZUKI

Farbanordnung

Nebenbei habe ich mich für die Themenfarbe für die gesamte Site entschieden. Da der Name des Geschäfts (fiktiv) Fumizuki ist, werden wir ihn in einer sommerlichen blauen Farbe zusammenfassen. Ich werde vorerst auch den Farbcode veröffentlichen. Für Ihre Information.

Dunkelblau …… # 120136, rgb (18,1,54) Mittelblau …… # 035aa6, rgb (3,90,166) Hellblau ... # 40bad5, grb (64,186,213) Ein Punkt gelb… # fbcf1e, rgb (252,191,30)

Header

Erstellen Sie eine Teilvorlage für den Header in App / Ansichten / Layouts. Der Dateiname lautet _header.html.erb.

Die bedingte Verzweigung wird durchgeführt, sodass sich die Anzeige in drei Mustern ändert: ** wenn Sie als Administrator angemeldet sind **, ** wenn sich der Kunde anmeldet ** und ** wenn er nicht angemeldet ist **. Ich möchte die Meldung "Willkommen, Herr XX!" Anzeigen, wenn Sie sich als Kunde anmelden. Da jedoch der Nachname und der Vorname separat in der Datenbank gespeichert werden, wird der Ansichtscode kompliziert. Fügen Sie daher der Modelldatei ein wenig hinzu, damit Sie eine Zeichenfolge ausgeben können, die den Nachnamen und den Vornamen verkettet.

`app/model/customer.rb`


def full_name
  self.family_name + " " + self.first_name
end

Jetzt können Sie full_name in view oder controller eingeben, um es in full name zu sehen!

`app/views/layouts/_header.html.erb`


<header class="container-fluid middle-blue-back">
  <nav class="navbar navbar-expand-lg">
    <!--Logo Bild. Ich werde es später ersetzen.-->
    <div>
      <%= link_to customer_top_path, style: 'color: #fcbf1e' do %>
      <h1>LOGO</h1>
      <% end %>
    </div>

    <!--Umschalttaste, die nur angezeigt wird, wenn die Bildschirmbreite schmaler wird-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFumizuki" aria-controls="navbarFumizuki" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

    <!--Verschiedene Links. Anzeigen der Umschaltung zwischen Administratoranmeldung, Kundenanmeldung und Nichtanmeldung.-->
    <div class="collapse navbar-collapse" id="navbarFumizuki">
      <!--Administrator-->
      <ul class="navbar-nav mr-auto w-75 nav-justified">
        <% if admin_signed_in? %>
          <div class="admin-message">Sie sind als Administrator angemeldet</div>
          <li class="nav-item"><%= link_to 'Produktliste', admins_products_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Mitgliederliste', admins_customers_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Bestellverlaufsliste', admins_orders_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Genre-Management', admins_genres_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Ausloggen', destroy_admin_session_path, method: :delete, class: 'nav-link' %></li>
        <!--Klient-->
        <% elsif customer_signed_in? %>
          <li class="nav-item"><%= link_to 'About', customer_about_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Meine Seite', customer_path(current_customer.id), class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Produktliste', products_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Wagen', cart_items_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Ausloggen', destroy_customer_session_path, method: :delete, class: 'nav-link' %></li>
        <!--Nicht anmelden-->
        <% else %>
          <li class="nav-item"><%= link_to 'About', customer_about_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Produktliste', products_path, class: 'nav-link' %></li>
          <li class="nav-item" ><%= link_to 'Anmelden', new_customer_registration_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Einloggen', new_customer_session_path, class: 'nav-link' %></li>
        <% end %>
      </ul>
      <!--Botschaft(customer)oder Suchfenster(admin) -->
      <% if customer_signed_in? %>
        <p>Herzlich willkommen<%= current_customer.full_name %>San!</p>
      <% else admin_signed_in? %>
        <!--Das Suchformular ist vorläufig. Machen Sie etwas, das später funktioniert, und ersetzen Sie es.-->
        <form class="form-inline my-2 my-lg-0">
        <input type="search" class="form-control mr-sm-2" placeholder="Suche..." aria-label="Suche...">
        <button type="submit" class="btn btn-outline-success my-2 my-sm-0">Suche
        </button>
	    </form>
      <% end %>
    </div>
  </nav>
</header>

Fusszeile

Es spielt keine Rolle, ob Sie keine Funktion hinzugefügt haben oder nicht, aber ich werde es schaffen, weil ich ohne sie einsam bin.

`app/views/layouts/_footer.html.erb`


<div class="container-fluid middle-blue-back">
  <h3 class="footer-message">Bakery FUMIZUKI</h3>
</div>

Es hat eine einfache Struktur mit einem blauen Hintergrund und einem gelben Zentrum mit den Worten "Bakery FUMIZUKI".

Machen Sie einen groben Rahmen

Bearbeiten Sie application.html.erb, um das Layout der gesamten Site anzupassen. Hier werden auch die zuvor erstellte Kopf- und Fußzeile geladen.

`app/views/layouts/application.html.erb`


<!DOCTYPE html>
<html>
  <head>
    <title>Fumizuki</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <!--Reaktionsschnell-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- swiper -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    <!-- font awsome -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>

  <body>
    <%= render 'layouts/header' %>
    <div class="container-fluid">
      <div class="row">
        <%= yield %>
      </div>
    </div>
    <%= render 'layouts/footer' %>
  </body>
</html>

Die Kehrmaschine in der Mitte ist eine Bibliothek zum Schieben von Fotos. Ich werde es in diesem Artikel nicht verwenden, aber ich dachte, es wäre in Zukunft nützlich, weil es praktisch ist. Darunter ist font-awsome eine praktische Site, auf der Sie viele Symbole kostenlos verwenden können, indem Sie einfach den Link kopieren. Ich denke, ich werde diesen bald verwenden.

Mit scss dekoriert

Legen Sie verschiedene Farben für den auf der HTML-Seite beschriebenen Klassennamen fest.

`app/assets/stylesheets/application.scss`


@import 'bootstrap';

.middle-blue-back {
  background-color: #035aa6
}

.light_blue_letter {
 color: #40bad5
}

.footer-message {
  line-height: 100px;
  text-align: center;
  color: #fcbf1e
}

// header
.navbar-toggler {
  border-color: #40bad5;
}
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(64,186,213)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-link {
  color: #40bad5;
}

Arbeiten Sie auch auf der obersten Seite

Ich wollte sehen, wie das Farbmuster, das ich für die Themenfarbe ausgewählt habe, im Browser aussehen würde, also habe ich es auf der oberen Seite versucht. Ich werde es später löschen, wenn ich die offizielle Top-Seite schreibe.

`html:app/views/homes/top.html.erb`


<div class="col">
  <h1>Homes#top</h1>
  <div class="row">
    <div class="col-3" style="height: 100px; background-color: #120136"></div>
    <div class="col-3" style="height: 100px; background-color: #035aa6"></div>
    <div class="col-3" style="height: 100px; background-color: #40bad5"></div>
    <div class="col-3" style="height: 100px; background-color: #fcbf1e"></div>
  </div>
</div>

Versuchen Sie, auf [localhost: 3000](localhost: 3000) zuzugreifen.

Sowohl die Kopf- als auch die Fußzeile werden problemlos angezeigt.

Als ich die Bildschirmbreite mit den Entwicklertools verkleinerte, wurde es richtig zu einem Hamburger-Symbol!

Nachtrag

Mit Bootstrap können Sie die Reaktionsfähigkeit problemlos unterstützen, was eine sehr nützliche Funktion ist. Ich habe etwas CSS geschrieben, aber ich gebe nur die Farben an. Da der Farbcode nur aus 4 Farben besteht, erhöht sich die Menge an CSS-Code nicht wesentlich, selbst wenn Sie die gesamte Anwendung abschließen.

Sie können auch denken, dass es einige Leute gibt, die so weit gelesen haben. Ich bin auch ein bisschen besorgt. Die Themenfarbe der Seite, wie ich sie irgendwo gesehen habe.

Ja. ** Vollständig I ● EA **. Ich habe es nicht bemerkt, bis es auf der Website angezeigt wurde, also war ich überrascht, nachdem ich den Code geschrieben hatte. Es ist in Ordnung, weil ich IK ● A mag, aber ich glaube nicht, dass mir dort etwas gefällt, also frage ich mich, ob ich es weiter implementiert habe. Sobald es wie IKE ● aussieht, ist es auch ein Problem, dass Sie jedes Mal, wenn Sie sich die Website ansehen, denken ** "Dieser Laden verkauft nie Brot" **.

Kann ich die Website vervollständigen, ohne von KEA beleidigt zu werden? Fahren Sie fort mit Nächstes Mal!

Referenz

Bootstrap4-Migrationshandbuch Bootstrap4 Japanese Reference Einführung in Tohohos Bootstrap 4 So ändern Sie die Farbe des Hamburger-Menüs von Bootstrap 4

[RUBY] Erstellen Sie eine EC-Site mit Rails5 ④ ~ Kopf- und Fußzeile ~