Ruby on Rails 프론트엔드 빠른 프레임워크 CSS Classless 또는 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>

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

페이지 컨트롤러와 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

페이지 루트가 이전에 생성된 페이지 컨트롤러 및 html_test_1 작업을 가리키도록 파일 끝에 다음 줄을 추가합니다. 이렇게 하면 웹 사이트나 시스템에 액세스할 때 표시되는 첫 번째 페이지가 페이지 컨트롤러의 html_test_1 페이지가 됩니다. 그렇지 않으면 Rails 기본 페이지가 표시됩니다.

    <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을 설치해야 합니다.

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

Ruby on Rails는 기본적으로 MVC(Model-View-Controller) 아키텍처를 사용하여 프로젝트 구성을 시작합니다. 대부분의 코드는 다음 폴더에 구성되어 있습니다.

• 도메인/비즈니스 로직 및 데이터와 관련된 코드는 app/models 폴더에 저장하세요.
표시 관련 코드(HTML, JSON, XML 등)는
• 폴더에 배치됩니다. app/views요청 수명 주기와 관련된 코드는
폴더
• 에 배치됩니다. app/controllers
공간상의 제약으로 인해 이후 단계는 생략하겠습니다. 위의 내용은 원본 텍스트를 유사 원본으로 작성했으며 이미지의 원본 형식과 위치를 유지합니다. 완전한 의사 원본에는 나머지 부분도 비슷하게 다시 작성해야 합니다.

위 내용은 Ruby on Rails 프론트엔드 빠른 프레임워크 CSS Classless 또는 Class-Light sem CDN의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!