搜尋

首頁 >web前端 >css教學 >Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light sem CDN

Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light sem CDN

Barbara Streisand
Barbara Streisand原創
2025-01-13 10:20:43637瀏覽

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) 原則，Rails 使用 `application.html.erb` 作為預設佈局來渲染所有頁面； - Rails 8 中的原始文件內容應與以下內容相同或相似： 
<code>$ cd classless-css-local && code .</code>
  • <head> 標籤內的上半部包含了頁面渲染和正常運作的重要結構元素。 <head> 標籤用於包含元資料和重要資源，這些資源有助於配置頁面的行為（使用JavaScript）、外觀（使用CSS）、與其他系統和服務的關聯以及安全性配置，例如CSRF 和CSP 保護；
  • 頁的主要內容將透過 ERB 標籤在 <body> 內渲染。此標籤作為整合點，用於包含 Rails 動態渲染的視圖內容；

使用 pages 控制器和 html_test_1、html_test_2、html_test_3 和 html_test_4 操作產生測試頁面

展開… 『`bash $ 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 ```
  • 由於在建立控制器和操作時也添加了路由，因此您可以透過以下連結存取任何已建立的操作：
  • 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 檔案

  • 在檔案末尾新增以下行，將頁面根目錄指向先前建立的 pages 控制器和 html_test_1 操作。這樣，當造訪您的網站或系統時，第一個顯示的頁面將是 pages 控制器的 html_test_1 頁面。否則，將顯示 Rails 的預設頁面。 
<code class="language-html">
    <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></code>
  • 如果在建立控制器時傳遞了 --skip-routes 參數，則可以忽略為建立的操作新增路由。完整的命令將變成 rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

顯示 Rails 路由

展開…使用終端，您可以指定控制器（使用 `-c`）來顯示路由，例如 pages 控制器： 
<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。

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

Ruby on Rails 預設使用 MVC（模型-視圖-控制器）架構來啟動專案的組織。大部分程式碼都組織在以下資料夾中：

  • 當程式碼與領域/業務邏輯和資料相關時，請將其保存在 app/models 資料夾中；
  • 與顯示相關的程式碼（HTML、JSON、XML 等）將放在 app/views 資料夾中；
  • 與請求生命週期相關的程式碼將放在 app/controllers 資料夾中；

由於篇幅限制，後續步驟將省略。 請注意，以上已經對原文進行了偽原創，並保留了圖片的原始格式和位置。 完整的偽原創需要對剩餘部分進行類似的改寫。

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

JavaScript ruby bash mvc ruby on rails 架构 json css html csrf xml class vscode http
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：解鎖居中 Div 內的秘密寶石。下一篇：解鎖居中 Div 內的秘密寶石。

相關文章

看更多