検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >Ruby on Rails フロントエンド フレームワーク CSS クラスレス または クラスライト sem CDN

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

Barbara Streisand
Barbara Streisandオリジナル
2025-01-13 10:20:43637ブラウズ

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 保護などのセキュリティ構成を構成するのに役立つメタデータと重要なリソースを含めるために使用されます。 >
    • ページのメインコンテンツは、ERB タグを介して
  • 内にレンダリングされます。このタグは、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
    • VSCode を使用して
ファイルを開きます

config/routes.rb

ファイルの最後に次の行を追加して、ページ ルートが以前に作成したページ コントローラーと html_test_1 アクションを指すようにします。このようにして、Web サイトまたはシステムにアクセスすると、最初に表示されるページはページ コントローラーの html_test_1 ページになります。それ以外の場合は、Rails のデフォルト ページが表示されます。 
<code class="language-html">
    <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></code>
コントローラーの作成時に
    パラメーターが渡された場合、作成されたアクションのルートの追加を無視できます。完全なコマンドは 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 フォルダーに保存してください。
    • 表示関連のコード (HTML、JSON、XML など) は
  • フォルダーに配置されます。 app/viewsリクエストのライフサイクルに関連するコードは、
    • フォルダーに配置されます。
  • app/controllers紙面の都合上、以降の手順は省略させていただきます。 上記はオリジナルのテキストから擬似的にオリジナル化されており、画像の元の形式と場所が保持されていることに注意してください。 完全な疑似オリジナルには、残りの部分も同様に書き直す必要があります。

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

JavaScript ruby bash mvc ruby on rails 架构 json css html csrf xml class vscode http
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：中心部の部門内の秘密の宝石のロックを解除する次の記事：中心部の部門内の秘密の宝石のロックを解除する

関連記事

続きを見る