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

建立新的 Rails 應用程式

使用 VSCode 或您喜歡的編輯器開啟專案

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

使用 VSCode 開啟 config/routes.rb 檔案

顯示 Rails 路由

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

首頁

web前端

css教學

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

Barbara Streisand

Jan 13, 2025 am 10:20 AM

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 的預設頁面。

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

登入後複製

如果在建立控制器時傳遞了 --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。