Ruby on Rails - 前端 Rápido com 框架 CSS Classless 或 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 中的原始文件必須與下面複製的文件具有相同或相似的內容：

  
    <title></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">
    
    

    

    
    

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

    
    
    
  

  
    
  

• 內的頂部部分… 頭>它們具有頁面渲染和正常運作的重要結構元素。 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 .

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

  
    <title></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">
    
    

    

    
    

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

    
    
    
  

  
    
  

也可以使用網址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

• 在之前貼上以下內容。您不需要所有這些樣式，它們已插入，以便您可以測試各種選項。

$ cd classless-css && code .

• 大多數樣式都被註解掉，除了 Normalize CSS 和 Pico CSS
• 儲存檔案並重新整理頁面或重新啟動伺服器

現在是的，帶有樣式的 HTML？

儲存上述樣式表後

深色模式

某些樣式可以選擇深色模式。若要確認，請在個人化選項中變更電腦的主題

下一步

• 依照您的喜好整理樣式；
• 如果您想在前端多花一點時間，請查看您最喜歡的樣式的自訂選項；
• 使用 Rails Live Reload 動態更新瀏覽器中對項目所做的變更；
• 使用項目 CSS 檔案中的樣式，而不使用 CDN；
• 使用 Tailwind 複製無類別 CSS 框架的功能；

參考

• 測試

以上是Ruby on Rails - 前端 Rápido com 框架 CSS Classless 或 Classlight的詳細內容。更多資訊請關注PHP中文網其他相關文章！