Ruby on Rails - 前端 Rápido com 框架 CSS Classless 或 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 中的原始文件必须与下面复制的文件具有相同或相似的内容：

  
    <title></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">
    
    

    

    
    

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

    
    
    
  

  
    
  

• 内的顶部部分… 头>它们具有页面渲染和正常运行的重要结构元素。 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 .

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

  
    <title></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">
    
    

    

    
    

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

    
    
    
  

  
    
  

也可以使用地址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

• 在之前粘贴以下内容。您不需要所有这些样式，它们已被插入，以便您可以测试各种选项。

$ cd classless-css && code .

• 大多数样式都被注释掉，除了 Normalize CSS 和 Pico CSS
• 保存文件并刷新页面或重启服务器

现在是的，带有样式的 HTML？

保存上述样式表后

深色模式

某些样式可以选择深色模式。要确认，请在个性化选项中更改计算机的主题

下一步

• 根据您的喜好整理样式；
• 如果您想在前端多花一点时间，请查看您最喜欢的样式的自定义选项；
• 使用 Rails Live Reload 动态更新浏览器中对项目所做的更改；
• 使用项目 CSS 文件中的样式，而不使用 CDN；
• 使用 Tailwind 复制无类 CSS 框架的功能；

参考

• 测试

以上是Ruby on Rails - 前端 Rápido com 框架 CSS Classless 或 Classlight的详细内容。更多信息请关注PHP中文网其他相关文章！