Ruby on Rails – Schnelles Frontend mit Frameworks CSS Classless oder Classlight-CSS-Tutorial-php.cn

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

Starten Sie eine neue Rails-Anwendung

Die Zeit vor dem Rails-Befehl wird verwendet, um seine Ausführungszeit am Ende der Befehlsausführung anzuzeigen. Im Beispiel unten dauerte es 47 Sekunden.

$ 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

Nach dem Login kopieren

Öffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor

$ cd classless-css && code .

Nach dem Login kopieren

Kennenlernen des Rails-Standard-Master-Layouts app/views/layouts/application.html.erb.

Gemäß Convention over Configuration (CoC) verwendet Rails application.html.erb als Master-Layout zum Rendern aller Seiten;
Die Originaldatei in Rails 8.0.0 muss den gleichen oder einen ähnlichen Inhalt haben wie die unten kopierte:

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

Nach dem Login kopieren

Der obere Teil im …
Sie verfügen über die wichtigen Strukturelemente für die korrekte Darstellung und Funktion der Seite. Das Head-Tag wird verwendet, um wichtige Metadaten und Ressourcen einzuschließen, die dabei helfen, das Verhalten der Seite (mit Javascript), ihr Erscheinungsbild (mit CSS), ihre Beziehung zu anderen Systemen und Diensten sowie Sicherheitseinstellungen wie den Schutz für CSRF und CSP zu konfigurieren ;
Der Hauptinhalt der Seiten wird innerhalb von gerendert. , über das ERB-Tag <%= yield %> . Dieses Tag dient als Integrationspunkt, um den Inhalt einer von Rails dynamisch gerenderten Ansicht einzuschließen.

Generieren Sie Testseiten mit einem Controller-Seiten und den Aktionen html_test_1, html_test_2, html_test_3 und 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

Nach dem Login kopieren

Wie bei der Erstellung des Controllers und der oben genannten Aktionen wurden auch die Routen hinzugefügt, sodass Sie auf alle über die Links erstellten Aktionen zugreifen können
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

Öffnen Sie die Datei config/routes.rb in VSCode

Fügen Sie die folgende Zeile am Ende der Datei ein, um den Seitenstamm auf die zuvor erstellten Controller-Seiten und die Aktion html_test_1 zu leiten. Daher ist die erste Seite, die beim Zugriff auf Ihre Website oder Ihr System angezeigt wird, die Seite „html_test_1“ der Controller-Seiten. Andernfalls würde die Standard-Rails-Seite angezeigt.

$ 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

Nach dem Login kopieren

Sie hätten das Hinzufügen der Routen zu den erstellten Aktionen ignorieren können, wenn Sie beim Erstellen des Controllers den Parameter --skip-routes übergeben hätten. Der vollständige Befehl würde lauten: Rails G Controller Pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Schienenstrecken anzeigen

Über das Terminal können Sie die Routen durch Angabe eines Controllers (mit -c) anzeigen, beispielsweise von Controller-Seiten aus

$ cd classless-css && code .

Nach dem Login kopieren

Oder Sie können sich mit
alle Routen anzeigen lassen

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

Nach dem Login kopieren

Der Zugriff auf die Routen ist auch über den Browser über die Adresse http://127.0.0.1:3000/rails/info/routes möglich. Vergessen Sie nicht, den Entwicklungsserver mit bin/dev oder den Standard-Rails-Server mit Rails-Server aus dem Stammverzeichnis Ihres Projekts zu starten. Der Entwicklungsserver „lauscht“ auf Änderungen in Javascript- und CSS-Dateien, um die erforderliche Verarbeitung durchzuführen und sie den Benutzern zur Verfügung zu stellen. Damit Änderungen an diesen Dateien vorgenommen und sofort im Browser angezeigt werden können, muss ein Gem wie Rails Livre Reload installiert werden.

Lassen Sie uns vier Seiten mit HTML-Inhalten erstellen, um die CSS-Stile zu testen.

Fügen Sie den Seiteninhalt für die Aktion html_test_1 ein

Greifen Sie auf den Link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html zu und kopieren Sie den gesamten Inhalt aus dem Haupt-Tag, wie unten gezeigt

$ 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

Nach dem Login kopieren

Starten Sie den Rails-Server und sehen Sie Ugly Pure HTML?

Starten Sie den Rails-Entwicklungsserver mit bin/dev oder den Standardserver mit Rails-Server und öffnen Sie den Browser bei 127.0.0.1:3000

root "pages#html_test_1"

Nach dem Login kopieren

Nach dem Öffnen der Seite sehen Sie oben die vier Links, die wir zu den zuvor erstellten Seiten html_test_1, html_test_2, html_test_3 und html_test_4 hinzugefügt haben.
So viel Arbeit bisher. Öffnen Sie jedes einzelne und Sie werden feststellen, dass der HTML-Code noch nicht mit CSS formatiert wurde, was wir als Nächstes tun werden

Öffnen Sie die Seite app/views/layouts/application.html.erb erneut, um klassenlose CSS-Stile über CDN einzubinden

Nach dem Inhalt unten

$ 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

Nach dem Login kopieren

Fügen Sie vor
den folgenden Inhalt ein. Sie benötigen nicht alle dieser Stile, sie wurden eingefügt, damit Sie verschiedene Optionen testen können.

$ cd classless-css && code .

Nach dem Login kopieren

Die meisten Stile sind auskommentiert, mit Ausnahme von Normalize CSS und Pico CSS
Speichern Sie die Datei und aktualisieren Sie die Seite oder starten Sie den Server neu

Nun ja, HTML mit Style?

Nach dem Speichern der oben genannten Stylesheets und

Dunkler Modus

Einige Stile verfügen über die Option für den Dunkelmodus. Ändern Sie zur Bestätigung das Design Ihres Computers in den Personalisierungsoptionen

Nächste Schritte

Organisieren Sie die Stile nach Ihren Wünschen;
Wenn Sie etwas mehr Zeit mit dem Frontend verbringen möchten, schauen Sie sich die Anpassungsoptionen für Ihren Lieblingsstil an;
Änderungen, die am Projekt im Browser vorgenommen wurden, mithilfe von Rails Live Reload dynamisch aktualisieren;
Styling aus Projekt-CSS-Dateien verwenden, ohne CDN zu verwenden;
Replizieren Sie die Fähigkeiten des klassenlosen CSS-Frameworks mit Tailwind;

Referenzen

Testen

Das obige ist der detaillierte Inhalt vonRuby on Rails – Schnelles Frontend mit Frameworks CSS Classless oder Classlight. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!