Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 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>

• 标签内的上半部分包含了页面渲染和正常运行的重要结构元素。 标签用于包含元数据和重要资源，这些资源有助于配置页面的行为（使用 JavaScript）、外观（使用 CSS）、与其他系统和服务的关联以及安全配置，例如 CSRF 和 CSP 保护；
• 页面的主要内容将通过 ERB 标签在 内渲染。此标签作为集成点，用于包含 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。

我们将创建四个包含 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中文网其他相关文章！