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。