【Rails】html.erb의 기술

이미지

rails 처리된 이미지는 [app-assets-images]를 루트로 합니다.

<%= image_tag 'icon/hogehoge.png' %>

텍스트 링크

<%= link_to "링크 이름", "링크 경로"%>

<%= link_to "ホーム",root_path %>

텍스트 링크에 HTML 태그 추가

xxx.html.erb

<%= link_to root_path  do %>ホーム<span>HOME</span><% end %>

xxx.html

<a href="/">ホーム<span>HOME</span></a>

이미지 링크

<%= link_to image_tag('shop_images/hogehoge.png'),'/areas/hogehoge' %>

클래스/id 속성 추가

<%= link_to 'トップページ', root_path, class: "top-large", id: "top" %>

CSS 가져오기

모두 읽는 주문
※ ["\x83"on UTF-8] 오류가 발생했지만 css가 아니라 다음과 같이 자바스크립트가 영향을 받았습니다.
app/views/layouts/application.html.erb

<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>

태그 수정

rails에서 실행할 때, 기본적으로 호버 배경색은 검은색입니다
hogehoge.css

a:hover{
  background-color: transparent;
}

참조:https://qiita.com/yukiji/items/3c43f8f6d54c561df3fd

Javascript 가져오기

모두 읽는 주문
app/views/layouts/application.html.erb

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

[encoding: Invalid ByteSequence Error] ["\x83"on UTF-8] 오류가 발생할 수 있지만 js 파일의 문자 코드 오류이기 때문에 utf-8로 다시 저장하면 오류를 피할 수 있습니다.

HTML의 일부를 템플릿화

많은 장면들이 눈썹과 꼬리 등이 공통된 Html를 외부화하고 싶어 한다.

공통 섹션 파일 만들기

저장 위치: app/views/shared
파일 이름:_temp.html.erb
※ 템플릿을 만들 때는 밑줄을 앞에 두십시오

부르고 싶은 곳에서 아래 주문을 외우세요.

<%=render'디렉터리 이름/부분 템플릿 이름'%>

<%= render 'shared/temp' %>