Ruby on Rails - 프레임워크 CSS Classless 또는 Classlight의 프론트엔드 빠른 속도-CSS 튜토리얼-php.cn

Ruby on Rails - 프레임워크 CSS Classless 또는 Classlight의 프론트엔드 빠른 속도

Barbara Streisand

풀어 주다： 2024-12-16 19:07:15

원래의

173명이 탐색했습니다.

Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight

새 Rails 애플리케이션 시작

rails 명령 이전 시간은 명령 실행이 끝날 때 실행 시간을 표시하는 데 사용됩니다. 아래 예에서는 47초가 걸렸습니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

로그인 후 복사

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

$ cd classless-css && code .

로그인 후 복사

Rails 표준 마스터 레이아웃 알아보기 app/views/layouts/application.html.erb.

CoC(Convention over Configuration)에 따라 Rails는 application.html.erb를 마스터 레이아웃으로 사용하여 모든 페이지를 렌더링합니다.
Rails 8.0.0의 원본 파일에는 아래 복사된 파일과 동일하거나 유사한 내용이 있어야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

로그인 후 복사

…
페이지가 올바르게 렌더링되고 작동하는 데 중요한 구조적 요소가 있습니다. 헤드 태그는 페이지 동작(자바스크립트 사용), 모양(CSS 사용), 다른 시스템 및 서비스와의 관계, CSRF 및 CSP 보호와 같은 보안 설정을 구성하는 데 도움이 되는 중요한 메타데이터 및 리소스를 포함하는 데 사용됩니다.
페이지의 주요 콘텐츠는

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