기본 Rails 웹사이트 헤더
나는 최근에 사용자에게 속한 여러 속성에 대한 트리 인벤토리를 유지하기 위해 TreeLogger라는 기본 Ruby on Rails 애플리케이션을 구축했습니다. 가장 먼저 시작했던 작업 중 하나는 전체 웹사이트에 표시될 매우 기본적이지만 유용한 헤더를 구축하는 것이었습니다.
이 초기 버전의 응용 프로그램에 대해 생각해 낸 것은 다음과 같습니다.
오른쪽에는 각각 고유한 기능을 가진 3개의 버튼이 있습니다.
이 헤더를 작성하는 프로세스는 다음과 같습니다.
app/views/layouts/application.html.erb
에서 빈 헤더 태그로 시작합니다. 이것은 우리 웹사이트의 헤더에 대한 코드가 있는 곳입니다.<header>
</header>
웹 사이트의 루트 경로로 연결되는 로고에 대한 링크가 필요하며 이를 위해 ERB 표현을 활용할 것입니다.
/app/views/layouts/application.html.erb
<header>
<a href=<%= root_path %>>
</a>
</header>
링크로 표시되는 콘텐츠는 나무 이미지와 "TreeLogger"라는 이름으로 구성되는 로고 자체입니다(접근성을 위해 스크린 리더를 사용하는 사용자를 위해 이미지에 대체 텍스트를 할당하는 것을 잊지 마십시오).
<header>
<a href=<%= root_path %>>
<img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
</a>
</header>
다음으로 유용한 ERB 표현식을 사용하여 헤더 오른쪽에 표시할 세 개의 링크를 빌드합니다. 이러한 URI 경로는
config/routes.rb
에 정의되어 있습니다.<header>
<a href=<%= root_path %>>
<img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
</a>
<%= link_to "Properties", properties_path %>
<%= link_to "Home Page", root_path %>
<%= link_to "Log Out", logout_path %>
</header>
지금까지 우리가 가진 것은 다음과 같습니다.
정확하지 않습니다... 계속 갑시다. 먼저 다른 세 링크에서 로고를 분리하여 헤더의 각 측면으로 보냅니다. 요소의 각 "그룹"을 해당
<span>
에 배치하고 오른쪽에 있는 범위에 특수 스타일 속성을 할당하여 이를 수행할 수 있습니다.<header>
<span>
<a href=<%= root_path %>>
<img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
</a>
</span>
<span style="float:right;">
<%= link_to "Properties", properties_path %>
<%= link_to "Home Page", root_path %>
<%= link_to "Log Out", logout_path %>
</span>
</header>
이는 우리에게 다음을 제공합니다.
더 가까워지면 이제 조금 더 스타일을 적용하여 보기 좋게 만듭니다. 로고 링크에 클래스를 추가하고 각 탐색 링크에 클래스를 추가한 다음 애플리케이션의 CSS 스타일시트에서 둘 모두에 대한 스타일을 정의합니다.
/app/views/layouts/application.html.erb
<header>
<span>
<a class="logoLink" href=<%= root_path %>>
<img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
</a>
</span>
<span style="float:right;">
<%= link_to "Properties", properties_path, class: "navButton" %>
<%= link_to "Home Page", root_path, class: "navButton" %>
<%= link_to "Log Out", logout_path, class: "navButton" %>
</span>
</header>
/app/assets/stylesheets/application.scss
a.logoLink {
color: inherit;
text-decoration: none;
font-weight: bold;
font-size: 300%;
}
a.navButton {
background-color: rgb(25, 78, 38);
border: none;
color: white;
padding: 7px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border: 2px solid #4CAF50;
}
a.navButton:hover {
background-color: white;
color: black
}
최종 모습은 다음과 같습니다.
마지막으로, 많은 기본 Rails 응용 프로그램에서 인증에 사용되는 일반적으로 정의된 사용자 정의 방법인
logged_in?
방법을 사용하여 사용자가 로그인했는지 여부에 따라 탐색 버튼의 모양을 지정해 보겠습니다. 이렇게 하면 최종 코드가 남습니다.<header>
<span>
<a class="logoLink" href=<%= root_path %>>
<img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
</a>
</span>
<% if logged_in? %>
<span style="float:right;">
<%= link_to "Properties", properties_path, class: "navButton" %>
<%= link_to "Home Page", user_path(current_user), class: "navButton" %>
<%= link_to "Log Out", logout_path, class: "navButton" %>
</span>
<% end %>
</header>
이제 로그인한 사용자가 없으면 헤더는 다음과 같이 나타납니다.
Reference
이 문제에 관하여(기본 Rails 웹사이트 헤더), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/spenser6131/basic-rails-website-header-32h5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)