Ruby on Rails 프론트엔드 빠른 프레임워크 CSS Classless 또는 Class-Light sem CDN-CSS 튜토리얼-php.cn

새 Rails 앱 만들기

VSCode 또는 선호하는 편집기를 사용하여 프로젝트를 엽니다

Rails 경로 표시

CSS 스타일을 테스트하기 위해 HTML 콘텐츠가 포함된 4개의 페이지를 생성합니다.

집

웹 프론트엔드

CSS 튜토리얼

Ruby on Rails 프론트엔드 빠른 프레임워크 CSS Classless 또는 Class-Light sem CDN

Barbara Streisand

Jan 13, 2025 am 10:20 AM

Ruby on Rails Frontend Rápido com Frameworks CSS Classless ou Class-Light sem CDN

이 기사에서는 이전 기사와 동일한 주제를 논의하지만 이전 기사에서는 CDN 호스팅 CSS 프레임워크를 사용했지만 이 기사에서는 로컬 CSS 파일을 사용하여 프로젝트 폴더에 복사합니다.

새 Rails 앱 만들기

rails serve 명령 전 시간은 명령 실행의 총 시간을 표시하는 데 사용됩니다. 다음 예에서는 47초가 걸렸습니다.

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

로그인 후 복사

'빌드 없음' 철학을 기반으로 하는 Rails 8은 기본적으로 Propshaft를 자산 파이프라인 라이브러리로 사용하고 Importmap을 JavaScript 라이브러리로 사용합니다. Importmap은 JavaScript로 아무 작업도 수행하지 않습니다.

VSCode 또는 선호하는 편집기를 사용하여 프로젝트를 엽니다

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

로그인 후 복사

Rails 기본 레이아웃에 대해 알아보기 `app/views/layouts/application.html.erb`

확장…

- CoC(Convention Over Configuration) 원칙에 따라 Rails는 `application.html.erb`를 기본 레이아웃으로 사용하여 모든 페이지를 렌더링합니다. - Rails 8의 원본 파일 내용은 다음과 동일하거나 유사해야 합니다.

<code>$ cd classless-css-local && code .</code>

로그인 후 복사

<head> 태그의 상단에는 페이지 렌더링 및 정상적인 작동에 중요한 구조 요소가 포함되어 있습니다. <head> 태그는 페이지 동작(JavaScript 사용), 모양(CSS 사용), 다른 시스템 및 서비스와의 연결, CSRF 및 CSP 보호와 같은 보안 구성을 구성하는 데 도움이 되는 메타데이터와 중요한 리소스를 포함하는 데 사용됩니다. >
내부에 렌더링됩니다. 이 태그는 Rails가 동적으로 렌더링한 뷰 콘텐츠를 포함하기 위한 통합 지점 역할을 합니다. <body>

페이지 컨트롤러와 html_test_1, html_test_2, html_test_3 및 html_test_4 작업을 사용하여 테스트 페이지 생성

확장…

``배쉬 $ 레일스 g 컨트롤러 페이지 html_test_1 html_test_2 html_test_3 html_test_4 app/controllers/pages_controller.rb 생성 경로는 "pages/html_test_1"을 얻습니다. "pages/html_test_2"를 얻으세요 "pages/html_test_3"을 얻으세요 "pages/html_test_4"를 얻으세요 호출자 앱/뷰/페이지 생성 app/views/pages/html_test_1.html.erb 생성 app/views/pages/html_test_2.html.erb 생성 app/views/pages/html_test_3.html.erb 생성 app/views/pages/html_test_4.html.erb 생성 도우미 호출 app/helpers/pages_helper.rb 생성 ````

localhost:3000/pages/html_test_1
localhost:3000/pages/html_test_2
localhost:3000/pages/html_test_3
localhost:3000/pages/html_test_4

VSCode를 사용하여

파일 열기`config/routes.rb`

    <title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link>

로그인 후 복사

매개변수를 전달하면 생성된 작업에 대한 경로 추가를 무시할 수 있습니다.완전한 명령은 rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Rails 경로 표시

확장…

터미널을 사용하여 컨트롤러(`-c` 사용)를 지정하여 경로를 표시할 수 있습니다(예: 페이지 컨트롤러).

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

로그인 후 복사

또는 다음 명령을 사용하여 모든 경로를 표시할 수 있습니다.

<code>$ cd classless-css-local && code .</code>

로그인 후 복사

주소http://127.0.0.1:3000/rails/info/routes를 사용하여 브라우저를 통해 경로에 액세스할 수도 있습니다. 프로젝트 루트에서 bin/dev을 사용하여 개발 서버를 시작하거나 rails server을 사용하여 표준 Rails 서버를 시작하는 것을 잊지 마세요. 개발 서버는 필요한 처리를 수행하고 이를 사용자에게 제공하기 위해 JavaScript 및 CSS 파일의 변경 사항을 "수신"합니다.
이러한 파일의 변경 사항이 브라우저에 즉시 반영되려면 Rails Live Reload와 같은 gem을 설치해야 합니다.