搜索

首页 >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:43634浏览

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
上一篇：Unlocking the Secret Gem Inside a Centered Div.下一篇：Dog RER & MER Calculator

相关文章

查看更多