interface Web
tutoriel CSS
Frontend rapide Ruby on Rails utilisant Tailwind comme framework CSS sans classe
Frontend rapide Ruby on Rails utilisant Tailwind comme framework CSS sans classe
Cet article est très similaire aux articles précédents de cette série, mais cette fois nous utiliserons le framework Tailwind comme framework CSS sans classe.
Créer une nouvelle application Rails
-
rails serveLetimeavant la commande permet d'afficher la durée totale d'exécution de la commande. L'exemple suivant a pris 47 secondes.
<code>$ rails -v Rails 8.0.0 $ time rails new classless-css-tailwind ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
Rails 8 utilise Prop Shaft comme bibliothèque de pipeline de ressources et Importmap comme bibliothèque JavaScript par défaut, en fonction de sa philosophie « No Build ». Importmap n'effectue aucun traitement JavaScript.
Ouvrez le projet à l'aide de VSCode ou de votre éditeur préféré
<code>$ rails -v Rails 8.0.0 $ time rails new classless-css-tailwind ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
Comprendre la disposition par défaut de Rails app/views/layouts/application.html.erb
Développer…
- Suivant le principe de la convention sur la configuration (CoC), Rails utilise `application.html.erb` comme mise en page par défaut pour afficher toutes les pages ; - Le contenu du fichier original dans Rails 8 doit être identique ou similaire à :<code>$ cd classless-css-tailwind && code .</code>
-
La balise
-
<head>contient des éléments structurels importants pour le rendu des pages et leur bon fonctionnement.<head>Utilisé pour contenir des métadonnées et des ressources importantes qui aident à configurer le comportement de la page (à l'aide de JavaScript), l'apparence (à l'aide de CSS), l'association avec d'autres systèmes et services et les paramètres de sécurité tels que la protection CSRF et CSP ; Le contenu principal de la page sera rendu dans le - via la balise ERB. Cette balise sert de point d'intégration pour contenir le contenu de la vue rendu dynamiquement par Rails
<body>;
et des actions pages, html_test_1, html_test_2 et html_test_3html_test_4
```bash $ rails g pages du contrôleur html_test_1 html_test_2 html_test_3 html_test_4 créer app/controllers/pages_controller.rb route récupère "pages/html_test_1" récupérez "pages/html_test_2" récupérez "pages/html_test_3" récupérez "pages/html_test_4" invocateurb créer une application/des vues/des pages créer app/views/pages/html_test_1.html.erb créer app/views/pages/html_test_2.html.erb créer app/views/pages/html_test_3.html.erb créer app/views/pages/html_test_4.html.erb appeler l'assistant créer app/helpers/pages_helper.rb ```
- Étant donné que les routes sont également ajoutées lors de la création de contrôleurs et d'actions, toutes les actions créées sont accessibles via le lien suivant :
-
localhost:3000/pages/html_test_1 -
localhost:3000/pages/html_test_2 -
localhost:3000/pages/html_test_3 -
localhost:3000/pages/html_test_4
fichierconfig/routes.rb
- Ajoutez les lignes suivantes à la fin du fichier pour diriger la racine de la page vers le contrôleur
- et l'action
pagescréée précédemment. De cette façon, lors de l'accès à votre site Web ou à votre système, la première page affichée sera la pagehtml_test_1dupagescontrôleur. Sinon, la page par défaut de Rails sera affichée.html_test_1
<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>- Si le paramètre
- est passé lors de la création du contrôleur, vous pouvez ignorer l'ajout de routes pour l'action créée.La commande complète deviendra
rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes
Afficher les itinéraires Rails
Développer…
À l'aide du terminal, vous pouvez spécifier un contrôleur (en utilisant `-c`) pour afficher l'itinéraire, par exemple le contrôleur `pages` :<code>$ rails -v Rails 8.0.0 $ time rails new classless-css-tailwind ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
Vous pouvez également utiliser la commande suivante pour afficher tous les itinéraires :
<code>$ cd classless-css-tailwind && code .</code>
- Vous pouvez également accéder à l'itinéraire via votre navigateur en utilisant l'adresse
http://127.0.0.1:3000/rails/info/routes. N'oubliez pas de démarrer le serveur de développement en utilisantbin/devou le standardrails serverà la racine du projet. Le serveur de développement « écoute » les modifications apportées aux fichiers JavaScript et aux fichiers CSS pour effectuer le traitement nécessaire pour les transmettre à l'utilisateur. - Pour que les modifications apportées à ces fichiers soient immédiatement exécutées et visualisées dans le navigateur, une gemme comme Rails Live Reload doit être installée.
Nous allons créer quatre pages avec du contenu HTML pour tester les styles CSS.
Ruby on Rails utilise par défaut l'architecture MVC (Model-View-Controller) pour lancer l'organisation du projet. La plupart du code est organisé dans les dossiers suivants :
- Le code lié à la logique et aux données du domaine/métier doit être conservé dans le dossier
app/models ;
- Le code associé à l'affichage (HTML, JSON, XML, etc.) sera situé dans le dossier
app/views ;
- Le code lié au cycle de vie de la requête sera situé dans le dossier
app/controllers ;
Insérer le contenu de la html_test_1 page
Développez…
- Visitez le lien https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html et copiez tout le contenu à l'intérieur du `<code>$ rails -v Rails 8.0.0 $ time rails new classless-css-tailwind ... real 0m47.500s user 0m33.052s sys 0m4.249s</code>
Insérer le contenu de la html_test_2 page
Développez…
- Visitez le lien https://gist.github.com/tommaitland/5865229 et copiez tout le contenu à l'intérieur de la balise ` pagehtml_test_3
Visitez le lien https://github.com/cbracco/html5-test-page/blob/master/index.html et copiez tout le contenu après le `
`balise, où contient le texte `Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1666
14
1425
52
1327
25
1273
29
1253
24
Une comparaison des fournisseurs de formulaires statiques
Apr 16, 2025 am 11:20 AM
Essayons de savoir un terme ici: "fournisseur de formulaire statique". Vous apportez votre HTML
Une preuve de concept pour rendre Sass plus rapidement
Apr 16, 2025 am 10:38 AM
Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge
Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow Dom
Apr 17, 2025 am 10:55 AM
Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves
L'accord avec l'élément de section
Apr 12, 2025 am 11:39 AM
Deux articles ont publié exactement le même jour:
Comment nous avons tagué Google Fonts et créé des goofont.com
Apr 12, 2025 pm 12:02 PM
Goofonts est un projet parallèle signé par un développeur-femme et un concepteur-mari, tous deux de grands fans de typographie. Nous avons marqué Google
Certains pratiques avec l'élément de dialogue HTML
Apr 16, 2025 am 11:33 AM
C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et
Multipliers multiples: cas général
Apr 12, 2025 am 10:52 AM
La première partie de cette série en deux parties a expliqué comment nous pouvons obtenir un curseur à deux pouces. Maintenant, nous examinerons un cas multi-tronçon général, mais avec un autre et
Où devrait «abonner au podcast» vers le lien?
Apr 16, 2025 pm 12:04 PM
Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:
