Rails6 + Bootswatch/Honoka 소개

16006 단어 Rails6bootswatch호노카Bootstrap루비
Bootstrap은 매우 빚을지고 있습니다. 디자인 센스가 없는 나라도 쉽게 거기서 볼 수 있는 사이트를 만들 수 있습니다. 감사합니다.

그러나 "아무래도 ..."라는 느낌이 왔기 때문에 Rails에 Bootswatch를 도입해 보았습니다. 또 「일본어가 아름답다」라고 평판의 Honoka의 도입에도 도전해 보았습니다.

환경



Ruby 2.7.2
Rails 6.0.3.4
Yarn 1.22.10
Webpack을 설치하여 톱 페이지를 볼 수있는 상태에 있어야합니다.

톱 페이지 만들기



Bootstrap을 배포하기 위한 준비로 톱 페이지를 만듭니다.

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>VoiceOrigami</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

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

app/views/static_pages/top.html.erb
<!--<div class="container">-->
  <div class="jumbotron m-3">
    <h1 class="display-4 red">ようこそ！ テストアプリへ</h1>
    <hr class="my-4">
    <p>Ruby on Rails + Bootstrap のテンプレートです</p>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">
      <i class="far fa-window-maximize"></i>
      モーダルを開く
    </button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダルタイトル</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ありがとう
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">とじる</button>
        </div>
      </div>
    </div>
  </div>
<!--</div>-->

app/views/layouts/_header.html.erb
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

app/views/footer.html.erb
<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

app/assets/stylesheets/cutstom.scss
 .red { // custom.scss が読み込まれているかチェックするため
   font-size: 2rem;
   color: red;
 }


 /* Sticky footer styles
-------------------------------------------------- */
 html {
   position: relative;
   min-height: 100%;
 }
 body {
   /* Margin bottom by footer height */
   margin-bottom: 60px;
 }
 .footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 60px;
   background-color: #f5f5f5;
 }


 /* Custom page CSS
 -------------------------------------------------- */
 /* Not required for template or sticky footer method. */

 //.container {
 //  width: auto;
 //  max-width: 680px;
 //  padding: 0 15px;
 //}
 //.container .text-muted {
 //  margin: 20px 0;
 //}

Bootstrap이 도입되지 않았기 때문에 무너져 표시됩니다.



Bootstrap 소개



Yarn으로 Bootstrap을 설치합니다.
$ yarn add [email protected] jquery popper.js

bootstrap을 적용합니다.

app/javascripts/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
+ import 'bootstrap'
+ import '../src/application.scss'

app/javascripts/src/application.scss
@import '~bootstrap/scss/bootstrap';

여기서 stylesheet_link_tag를 삭제하면 app/assets/stylesheets/cutstom.scss가 더 이상 로드되지 않습니다. 두 줄 코드를 추가합니다. stylesheet_link_tag 이상에서 로드하십시오.

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>VoiceOrigami</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

custom.scss의 첫 번째 행에서 Bootstrap을 읽습니다. $blue 등의 컬러 코드를 사용할 수 있게 됩니다.

app/assets/stylesheets/custom.scss
@import "../../../node_modules/bootstrap/scss/bootstrap";

Heroku에 업로드 한 후 Bootstrap을 적용하기 위해 코드 추가

config/webpack/environment.js
const { environment } = require('@rails/webpacker')

    const webpack = require('webpack')

    environment.plugins.append('Provide', new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    }))
module.exports = environment

이것으로 Bootstrap4가 도입되었습니다.



Bootswatch 소개



Bootswatch는 Bootstrap과 호환되는 무료 테마 모음입니다.

도입 방법은 이전 단계와 거의 동일합니다.

Yarn으로 Bootstrap을 설치합니다.
$ yarn add [email protected]

bootswatch (Minty)를 적용합니다.

app/javascripts/src/application.scss
+ @import '~bootswatch/dist/minty/variables';
@import '~bootstrap/scss/bootstrap';
+ @import '~bootswatch/dist/minty/bootswatch';

app/assets/stylesheets/custom.scss
+ @import "../../../node_modules/bootswatch/dist/minty/variables";
@import "../../../node_modules/bootstrap/scss/bootstrap";
+ @import "../../../node_modules/bootswatch/dist/minty/bootswatch";

이것으로 Bootswatch 배포가 완료됩니다. 익숙한 Bootstrap이 멋지게 변신했지요. Minty 이외의 테마도 사용해 보세요.



호노카



요령이 잡혔으므로, 이번에는 Honoka를 도입해 봅시다. 일본어가 아름다운 Bootstrap 테마입니다.

Yarn으로 설치
$ yarn add bootstrap-honoka

Honoka를 적용합니다.

app/javascripts/src/application.scss
@import '~bootswatch/dist/minty/variables';
@import '~bootstrap/scss/bootstrap';
@import '~bootswatch/dist/minty/bootswatch';
@import '~bootstrap-honoka/dist/css/bootstrap';

법칙에 따라 custom.scss에도 추가하고 싶지만 왜 Minty와의 동시 적용을 할 수 없습니다 (이 부근은 조사가 필요)

app/assets/stylesheets/custom.scss
@import "../../../node_modules/bootswatch/dist/minty/variables";
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import "../../../node_modules/bootswatch/dist/minty/bootswatch";
//@import "../../../node_modules/bootstrap-honoka/dist/css/bootstrap"; 追記しないこと

Navibar의 링크 아래에 흰색 선이 붙는 등 미묘하게 변화하고 있음을 확인했습니다. 이것으로 완성입니다!



Webpack의 작동 방식을 잘 이해하지 못하고 힘들었지만 Bootswatch/Honoka 배포가 완료되었습니다. 누군가의 도움이 되었으면 좋겠습니다.

참조

CSS BUTTONS
【Bootstrap】그리드 시스템을 중첩으로 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage