블로그 앱을 만들 때 게시물 목록을 보려면 Bootstrap 카드를 사용했습니다.
전체 카드를 상세보기로 연결하는 방법을 요약합니다!

Bootstrap의 Card를 구현하기 전의 일람표는 이런 느낌입니다.

 <p><%= l post.created_at, format: :short %></p>
 <h5 class="card-title"><%= post.title %></h5>
 <p class="card-text"><%= post.content %></p>
 <%= link_to "詳細", post %>

각각 투고 일시와 타이틀, 본문을 1행만 표시시키고 있습니다.

1. 투고 일람을 Card로 표시

Bootstrap에서 제공하는 클래스를 사용합니다.

Card에 대해서는 이쪽을 참조.
htps : // 게이 t보오 tst et al p. jp/do cs/4.5/코m포넨 ts/인가 rd/

<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-body text-dark">
    <p><%= l post.created_at, format: :short %></p>
    <h5 class="card-title"><%= post.title %></h5>
    <p class="card-text"><%= post.content %></p>
　　 <%= link_to "詳細", post %>
  </div>
</div>

<구현 결과>


일단 좋은 느낌이 되었습니다! !

이번에 header와 footer는 필요 없었기 때문에 생략하고 있습니다.

2. Card 전체를 링크에

지금 그대로는 Card 안에 상세 페이지에의 링크가 그대로 표시되어 버리고 있으므로, 이 링크를 Card 전체에 적용시키고 싶다….

구현 방법을 조사한 결과, <div class="card-body text-dark"> 대신 <a href="#" class="card-body text-dark"> 같은 느낌으로 전체를 둘러싸면 좋은 것 같다!

<div class="card border-dark mb-3" style="max-width: 18rem;">
  <a href="/posts/<%= post.id %>" class="card-body text-dark">
    <p><%= l post.created_at, format: :short %></p>
    <h5 class="card-title"><%= post.title %></h5>
    <p class="card-text"><%= post.content %></p>
  </a>
</div>

하나하나의 투고를 꺼내기 위해서 post.id 가 필요합니다만, 그 때에 이콜을 잊어 버리면 id를 잡을 수 없게 되므로, 반드시 <%= post.id %> 라고 기술합니다.

나는 이것으로 여러 번 걸렸다. .

<실행 결과>



이제 전체 카드를 상세 페이지로 연결할 수 있습니다!

또 하나, a 태그가 아니라 link 태그의 방법으로 구현하는 방법도.

결과적으로 전체 카드를 <%= link_to ~ do %> 및 <% end %>로 묶습니다!

<div class="card border-dark mb-3" style="max-width: 18rem;">
  <%= link_to post, class: "card-body text-dark" do %>
    <p><%= l post.created_at, format: :short %></p>
    <h5 class="card-title"><%= post.title %></h5>
    <p class="card-text"><%= post.content %></p>
  <% end %>
 </div>

a 태그에 기재되어 있는 Bootstrap 의 class "card-body text-dark" 는 link 태그 안에 rails 의 기술 방법으로 재작성합니다.

평소 <%= link_to ~ %> 와 같이 1행으로 밖에 기술한 적이 없었기 때문에, do~end로 둘러싸는 방법은 처음 알았습니다!

비망록으로 남겨 둡니다.