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

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>
  • タグの上部には、ページのレンダリングと通常の操作に重要な構造要素が含まれています。 タグは、ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関連付け、CSRF や CSP 保護などのセキュリティ構成を構成するのに役立つメタデータと重要なリソースを含めるために使用されます。 >
  • ページのメインコンテンツは、ERB タグを介して
  • 内にレンダリングされます。このタグは、Rails で動的にレンダリングされたビュー コンテンツを含めるための統合ポイントとして機能します。
ページ コントローラーと 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 のデフォルト ページが表示されます。
    <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 フォルダーに保存してください。
  • 表示関連のコード (HTML、JSON、XML など) は
  • フォルダーに配置されます。 app/viewsリクエストのライフサイクルに関連するコードは、
  • フォルダーに配置されます。
  • app/controllers紙面の都合上、以降の手順は省略させていただきます。 上記はオリジナルのテキストから擬似的にオリジナル化されており、画像の元の形式と場所が保持されていることに注意してください。 完全な疑似オリジナルには、残りの部分も同様に書き直す必要があります。

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
マウスの動きのシミュレーションマウスの動きのシミュレーションApr 22, 2025 am 11:45 AM

ライブトークやクラス中にインタラクティブなアニメーションを表示しなければならなかった場合、スライドと対話するのが必ずしも簡単ではないことを知っているかもしれません

Astro ActionsとFuse.jsでのパワー検索Astro ActionsとFuse.jsでのパワー検索Apr 22, 2025 am 11:41 AM

Astroを使用すると、ビルド中にほとんどのサイトを生成できますが、fuse.jsのようなものを使用して検索機能を処理できるサーバー側のコードが少しあります。このデモでは、ヒューズを使用して、個人の「ブックマーク」セットを検索します。

未定義:3番目のブール値未定義:3番目のブール値Apr 22, 2025 am 11:38 AM

ドキュメントが保存されている間にGoogleドキュメントに表示されるものと同様に、プロジェクトの1つに通知メッセージを実装したかったのです。言い換えれば、a

三元声明の防衛三元声明の防衛Apr 22, 2025 am 11:25 AM

数ヶ月前、私はハッカーのニュースに出演していました(1つのように)。あなたがこのアイデアに慣れていない場合(私のように

多言語翻訳にWeb Speech APIを使用します多言語翻訳にWeb Speech APIを使用しますApr 22, 2025 am 11:23 AM

サイエンスフィクションの初期の頃から、私たちは私たちに話しかける機械について空想してきました。今日は当たり前です。それでも、作成のための技術

Jetpack GutenbergブロックJetpack GutenbergブロックApr 22, 2025 am 11:20 AM

私はその日私たちにワードキャンプにいたので、グーテンバーグがコアにリリースされたときのことを覚えています。数ヶ月が今から経過しているので、ますます私たちのことを想像してください

VUEで再利用可能なページネーションコンポーネントを作成しますVUEで再利用可能なページネーションコンポーネントを作成しますApr 22, 2025 am 11:17 AM

ほとんどのWebアプリケーションの背後にあるアイデアは、データベースからデータを取得し、可能な限り最良の方法でユーザーに提示することです。そこでデータを扱うとき

「ボックスシャドウ」とクリップパスを一緒に使用します「ボックスシャドウ」とクリップパスを一緒に使用しますApr 22, 2025 am 11:13 AM

&#039;は、理にかなっていると思われることを非常に実行できる状況を少し段階的に実行しますが、CSSのトリックでそれを成し遂げることができます。これで

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン