Ruby on Rails - 前端 Rápido com 框架 CSS Classless 或 Classlight-css教學-PHP中文網

首頁

web前端

css教學

Ruby on Rails - 前端 Rápido com 框架 CSS Classless 或 Classlight

Barbara Streisand

Dec 16, 2024 pm 07:07 PM

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），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>

登入後複製

內的頂部部分… 頭>它們具有頁面渲染和正常運作的重要結構元素。 head 標籤用於包含重要的元資料和資源，幫助配置頁面的行為（使用 javascript）、外觀（使用 CSS）、與其他系統和服務的關係以及安全設置，例如 CSRF 和 CSP 的保護；
頁面的主要內容將渲染在內，透過ERB標籤。此標籤充當整合點，包含由 Rails 動態呈現的視圖內容；

產生測試頁面，包含控制器頁面和操作 html_test_1、html_test_2、html_test_3 和 html_test_4

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

登入後複製

與建立控制器和上述操作過程一樣，也新增了路由，讓您可以存取從連結建立的任何操作
- 本機：3000/pages/html_test_1
- 本機：3000/pages/html_test_2
- 本機：3000/pages/html_test_3
- 本機：3000/pages/html_test_4

在 VSCode 中開啟 config/routes.rb 文件

在檔案末尾新增以下行，將頁面根目錄導向到先前建立的控制器頁面和操作 html_test_1。因此，造訪您的網站或系統時顯示的第一個頁面將是來自控制器頁面的 html_test_1 頁面。否則它將顯示預設的 Rails 頁面。

$ 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

登入後複製

如果您在建立控制器時傳遞了 --skip-routes 參數，您可能會忽略將路由新增至建立的操作。完整的指令將成為 Rails g 控制器頁面 html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

顯示鐵路路線

使用終端，您可以透過指定控制器（使用 -c）來顯示路由，例如從控制器頁面

$ cd classless-css && code .

登入後複製

或您可以使用
顯示所有路線

<!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>

登入後複製

也可以使用網址http://127.0.0.1:3000/rails/info/routes透過瀏覽器存取路線。不要忘記使用 bin/dev 啟動開發伺服器，或使用專案根目錄中的rails server 啟動標準rails 伺服器。開發伺服器「偵聽」javascript 檔案和 css 檔案中的更改，以執行必要的處理，使它們可供使用者使用。要在瀏覽器中立即對這些檔案進行更改和查看，需要安裝一個 gem，例如 Rails Livre Reload。

讓我們建立四個包含 HTML 內容的頁面來測試 CSS 樣式。

插入 html_test_1 操作的頁面內容

造訪連結 https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html 並複製主標籤中的所有內容，如下

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

登入後複製

啟動 Rails Server 並看到醜陋的純 HTML？

使用bin/dev啟動Rails開發伺服器或使用rails server啟動標準伺服器，並開啟瀏覽器127.0.0.1:3000

root "pages#html_test_1"

登入後複製

開啟頁面後，您將在頂部看到我們新增到先前建立的 html_test_1、html_test_2、html_test_3 和 html_test_4 頁面的四個連結。
到目前為止還有很多工作。打開每個文件，您會注意到 HTML 尚未使用任何 CSS 進行樣式化，我們接下來將進行此操作

再次開啟 app/views/layouts/application.html.erb 頁面以透過 CDN 包含 Classless CSS 樣式

在以下內容之後

$ 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

登入後複製