Ruby on Rails フロントエンドフレームワーク CSS クラスレスまたはクラスライト sem CDN-CSSチュートリアル-php.cn

新しい Rails アプリを作成する

VSCode またはお気に入りのエディタを使用してプロジェクトを開きます

Rails ルートを表示

CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。

ホームページ

ウェブフロントエンド

CSSチュートリアル

Ruby on Rails フロントエンドフレームワーク CSS クラスレスまたはクラスライト sem CDN

Barbara Streisand

Jan 13, 2025 am 10:20 AM

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 保護などのセキュリティ構成を構成するのに役立つメタデータと重要なリソースを含めるために使用されます。 >
内にレンダリングされます。このタグは、Rails で動的にレンダリングされたビューコンテンツを含めるための統合ポイントとして機能します。 <body>

ページコントローラーと html_test_1、html_test_2、html_test_3、html_test_4 アクションを使用してテストページを生成します

展開…

「」バッシュ $ Rails g コントローラーページ html_test_1 html_test_2 html_test_3 html_test_4 app/controllers/pages_controller.rb を作成しますルート取得「pages/html_test_1」「pages/html_test_2」を取得「pages/html_test_3」を取得「pages/html_test_4」を取得呼び出す者アプリ/ビュー/ページを作成する app/views/pages/html_test_1.html.erb を作成します app/views/pages/html_test_2.html.erb を作成します app/views/pages/html_test_3.html.erb を作成します app/views/pages/html_test_4.html.erb を作成しますヘルパーを呼び出す 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

ファイルを開きます

`config/routes.rb`

ファイルの最後に次の行を追加して、ページルートが以前に作成したページコントローラーと html_test_1 アクションを指すようにします。このようにして、Web サイトまたはシステムにアクセスすると、最初に表示されるページはページコントローラーの html_test_1 ページになります。それ以外の場合は、Rails のデフォルトページが表示されます。

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

ログイン後にコピー

コントローラーの作成時に

rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Rails ルートを表示

展開…

ターミナルを使用して、ルートを表示するコントローラー (`-c` を使用)、たとえばページコントローラーを指定できます。

<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 をインストールする必要があります。

CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。

Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクト編成を開始します。ほとんどのコードは次のフォルダーに編成されています:

コードがドメイン/ビジネスロジックおよびデータに関連している場合は、app/models フォルダーに保存してください。
フォルダーに配置されます。 app/viewsリクエストのライフサイクルに関連するコードは、
app/controllers紙面の都合上、以降の手順は省略させていただきます。上記はオリジナルのテキストから擬似的にオリジナル化されており、画像の元の形式と場所が保持されていることに注意してください。完全な疑似オリジナルには、残りの部分も同様に書き直す必要があります。

以上がRuby on Rails フロントエンドフレームワーク CSS クラスレスまたはクラスライト sem CDNの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。