Ruby on Rails - 前端 Rápido com 框架 CSS Classless 或 Classlight-css教程-PHP中文网

Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight

启动新的 Rails 应用程序

rails命令之前的时间用于在命令执行结束时显示其执行时间。在下面的示例中，花费了 47 秒。

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制

使用 VSCode 或您喜欢的编辑器打开项目

$ cd classless-css && code .

登录后复制

了解 Rails 标准主布局 app/views/layouts/application.html.erb。

显示更多...

根据约定优于配置（CoC），Rails 使用 application.html.erb 作为主布局来渲染所有页面；
Rails 8.0.0 中的原始文件必须与下面复制的文件具有相同或相似的内容：

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

登录后复制

内的顶部部分… 它们具有页面渲染和正常运行的重要结构元素。 head 标签用于包含重要的元数据和资源，帮助配置页面的行为（使用 javascript）、外观（使用 CSS）、与其他系统和服务的关系以及安全设置，例如 CSRF 和 CSP 的保护；
页面的主要内容将渲染在内，通过ERB标签<%=产量%> 。该标签充当集成点，包含由 Rails 动态呈现的视图内容；

生成测试页面，包含控制器页面和操作 html_test_1、html_test_2、html_test_3 和 html_test_4

显示更多...

$ 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

登录后复制

与创建控制器和上述操作过程中一样，还添加了路由，允许您访问从链接创建的任何操作
- 本地主机：3000/pages/html_test_1
- 本地主机：3000/pages/html_test_2
- 本地主机：3000/pages/html_test_3
- 本地主机：3000/pages/html_test_4

在 VSCode 中打开 config/routes.rb 文件

在文件末尾添加以下行，将页面根目录定向到之前创建的控制器页面和操作 html_test_1。因此，访问您的网站或系统时显示的第一个页面将是来自控制器页面的 html_test_1 页面。否则它将显示默认的 Rails 页面。

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制

如果您在创建控制器时传递了 --skip-routes 参数，您可能会忽略将路由添加到创建的操作。完整的命令将成为 Rails g 控制器页面 html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

显示铁路路线

显示更多...

使用终端，您可以通过指定控制器（使用 -c）来显示路由，例如从控制器页面

$ cd classless-css && code .

登录后复制

或者您可以使用
显示所有路线

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

登录后复制

也可以使用地址http://127.0.0.1:3000/rails/info/routes通过浏览器访问路线。不要忘记使用 bin/dev 启动开发服务器，或者使用项目根目录中的rails server 启动标准rails 服务器。开发服务器“侦听”javascript 文件和 css 文件中的更改，以执行必要的处理，使它们可供用户使用。要在浏览器中立即对这些文件进行更改和查看，需要安装一个 gem，例如 Rails Livre Reload。

让我们创建四个包含 HTML 内容的页面来测试 CSS 样式。

插入 html_test_1 操作的页面内容

显示更多...

访问链接 https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html 并复制主标签中的所有内容，如下

$ 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

登录后复制

启动 Rails Server 并看到丑陋的纯 HTML？

显示更多...

使用bin/dev启动Rails开发服务器或使用rails server启动标准服务器，并打开浏览器127.0.0.1:3000

root "pages#html_test_1"

登录后复制

打开页面后，您将在顶部看到我们添加到之前创建的 html_test_1、html_test_2、html_test_3 和 html_test_4 页面的四个链接。
到目前为止还有很多工作。打开每个文件，您会注意到 HTML 尚未使用任何 CSS 进行样式化，我们接下来将进行此操作

再次打开 app/views/layouts/application.html.erb 页面以通过 CDN 包含 Classless CSS 样式

显示更多...

在以下内容之后

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

登录后复制