introduction

Il s'agit d'une suite de la série "Créer un site EC avec Rails 5 (3)" (https://qiita.com/GreenFingers_tk/items/d77555311286d966462e), qui crée un site EC sur lequel vous pouvez faire vos achats dans une boulangerie fictive. Cette fois, nous allons créer l'en-tête et le pied de page. Comme c'est un gros problème, j'ai essayé de le rendre réactif.

Code source

https://github.com/Sn16799/bakeryFUMIZUKI

Arrangement des couleurs

En passant, j'ai décidé de la couleur du thème pour l'ensemble du site. Puisque le nom du magasin (fictif) est Fumizuki, nous allons le résumer dans une couleur bleue estivale. Je posterai également le code couleur pour le moment. Pour ton information.

Bleu foncé …… # 120136, rgb (18,1,54) Bleu moyen …… # 035aa6, rgb (3,90,166) Bleu clair …… # 40bad5, grb (64.186.213) Un point jaune …… # fbcf1e, rgb (252,191,30)

entête

Créez un modèle partiel pour l'en-tête dans app / vues / mises en page. Le nom du fichier est _header.html.erb.

Le branchement conditionnel est effectué de sorte que l'affichage change selon trois modèles: ** lorsqu'il est connecté en tant qu'administrateur **, ** lorsque le client se connecte ** et ** lorsqu'il n'est pas connecté **. Je souhaite afficher le message «Bienvenue, Monsieur XX!» Lors de la connexion en tant que client, mais comme le nom et le prénom sont enregistrés séparément dans la base de données, le code de vue devient compliqué. Par conséquent, ajoutez un peu au fichier modèle afin de pouvoir générer une chaîne qui concatène le nom et le prénom.

`app/model/customer.rb`


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

Vous pouvez maintenant entrer full_name dans la vue ou le contrôleur pour le voir dans son nom complet!

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


<header class="container-fluid middle-blue-back">
  <nav class="navbar navbar-expand-lg">
    <!--Image logo. Je le remplacerai plus tard.-->
    <div>
      <%= link_to customer_top_path, style: 'color: #fcbf1e' do %>
      <h1>LOGO</h1>
      <% end %>
    </div>

    <!--Bouton bascule qui apparaît uniquement lorsque la largeur de l'écran devient étroite-->
    <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>

    <!--Divers liens. L'affichage peut être commuté entre lorsque l'administrateur est connecté, lorsque le client est connecté et lorsqu'il n'est pas connecté.-->
    <div class="collapse navbar-collapse" id="navbarFumizuki">
      <!--Administrateur-->
      <ul class="navbar-nav mr-auto w-75 nav-justified">
        <% if admin_signed_in? %>
          <div class="admin-message">Vous êtes connecté en tant qu'administrateur</div>
          <li class="nav-item"><%= link_to 'Liste de produits', admins_products_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Liste des membres', admins_customers_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Liste de l'historique des commandes', admins_orders_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Gestion du genre', admins_genres_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Se déconnecter', destroy_admin_session_path, method: :delete, class: 'nav-link' %></li>
        <!--client-->
        <% elsif customer_signed_in? %>
          <li class="nav-item"><%= link_to 'About', customer_about_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Ma page', customer_path(current_customer.id), class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Liste de produits', products_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Chariot', cart_items_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Se déconnecter', destroy_customer_session_path, method: :delete, class: 'nav-link' %></li>
        <!--Non-connexion-->
        <% else %>
          <li class="nav-item"><%= link_to 'About', customer_about_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'Liste de produits', products_path, class: 'nav-link' %></li>
          <li class="nav-item" ><%= link_to 's'inscrire', new_customer_registration_path, class: 'nav-link' %></li>
          <li class="nav-item"><%= link_to 'S'identifier', new_customer_session_path, class: 'nav-link' %></li>
        <% end %>
      </ul>
      <!--message(customer)ou fenêtre de recherche(admin) -->
      <% if customer_signed_in? %>
        <p>Bienvenue<%= current_customer.full_name %>San!</p>
      <% else admin_signed_in? %>
        <!--Le formulaire de recherche est provisoire. Faites quelque chose qui fonctionne plus tard et remplacez-le.-->
        <form class="form-inline my-2 my-lg-0">
        <input type="search" class="form-control mr-sm-2" placeholder="Chercher..." aria-label="Chercher...">
        <button type="submit" class="btn btn-outline-success my-2 my-sm-0">Chercher
        </button>
	    </form>
      <% end %>
    </div>
  </nav>
</header>

bas de page

Ce n'est pas grave si vous n'avez pas ajouté de fonction ou non, mais je vais le faire parce que je suis seul sans elle.

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


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

Il a une structure simple avec un fond bleu et un centre jaune avec les mots "Bakery FUMIZUKI".

Faire un cadre approximatif

Modifiez application.html.erb pour ajuster la mise en page de l'ensemble du site. L'en-tête et le pied de page que vous avez créés précédemment sont également chargés ici.

`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' %>

    <!--Sensible-->
    <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>

La balayeuse au milieu est une bibliothèque pour faire glisser des photos. Je ne vais pas l'utiliser dans cet article, mais j'ai pensé que ce serait utile à l'avenir car c'est pratique. En dessous, font-awsome est un site pratique où vous pouvez utiliser de nombreuses icônes gratuitement simplement en copiant le lien. Je pense que je vais utiliser celui-ci bientôt.

Décoré avec scss

Définissez différentes couleurs pour le nom de classe décrit du côté HTML.

`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;
}

Travaillez également sur la première page

Je voulais voir à quoi ressemblerait l'échantillon de couleur que j'avais choisi pour la couleur du thème sur le navigateur, alors je l'ai essayé sur la page supérieure. Je l'effacerai plus tard lorsque j'écrirai la première page officielle.

`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>

Essayez d'accéder à [localhost: 3000](localhost: 3000).

L'en-tête et le pied de page s'affichent sans problème.

Lorsque j'ai réduit la largeur de l'écran avec les outils de développement, c'est devenu une icône de hamburger correctement!

Postscript

Avec Bootstrap, vous pouvez facilement prendre en charge la réactivité, qui est une fonction vraiment utile. J'ai écrit du CSS, mais je spécifie simplement les couleurs. Étant donné que le code couleur n'est que de 4 couleurs, même si vous remplissez l'ensemble de l'application, la quantité de code CSS n'augmentera pas beaucoup.

En outre, vous pouvez penser qu'il y a quelques personnes qui ont lu jusqu'ici. Je suis aussi un peu inquiet. La couleur du thème du site, comme je l'ai vu quelque part.

Oui. ** Complètement I ● EA **. Je ne l'ai pas remarqué jusqu'à ce qu'il soit affiché sur le site, donc j'ai été surpris après avoir écrit le code. C'est correct parce que j'aime IK ● A, mais je ne pense pas aimer quoi que ce soit là-bas, alors je me demande si j'ai continué à l'implémenter. Une fois que cela ressemble à IKE ●, c'est aussi un problème que chaque fois que vous visitez le site, vous pensez ** "Ce magasin ne vend jamais de pain" **.

Puis-je compléter le site sans être offensé par KEA? Continuez vers La prochaine fois!

référence

Guide de migration Bootstrap4 Référence japonaise Bootstrap4 Introduction au Bootstrap 4 de Tohoho Comment changer la couleur du menu hamburger de Bootstrap 4

[RUBY] Créer un site EC avec Rails5 ④ ~ En-tête et pied de page ~