開発者ドキュメント

UbuntuVPSでOmega4Drupalサブテーマを作成する方法

オメガについて

Omega は、最も有名なDrupalレスポンシブベーステーマの1つであり、66,000を超える公式インストールがあります。 バージョン4は、オメガ3の設計方法(サイトビルダー向けの柔軟なUIオプションを使用)から根本的な一歩を踏み出し、経験豊富なフロントエンド開発者の基本テーマになっています。

このチュートリアルでは、Omega4をインストールして最初のサブテーマを作成するプロセスを段階的に説明します。 このために、DrushとDrupalのコピーがすでにインストールされている独自のVPSを実行していると仮定します。 まだ行っていない場合は、このチュートリアルに従ってセットアップを行うことができます。 はい、Drupalの作業にまだDrushを使用していない場合は、今日から始めてください。

ユーザーの変更

root ユーザーでVPSを操作している場合は、別のユーザーに変更する必要があることが重要です。 したがって、すでに別のユーザーでVPSを実行している場合を除いて、先に進んでVPSを作成します(彼を tony と呼びましょう)。

sudo adduser tony

ウィザードを実行すると、先に進んで彼をsudoersグループに追加できます(このユーザーでsudoコマンドを実行できるようになります)。

sudo adduser tony sudo

これで、この新しく作成されたユーザーでログインして、ユーザーを変更できます。

オメガ4のコピーを手に入れよう

root ユーザーを使用しなくなったので(最初に使用していた場合)、OmegaテーマをDrupalインストールにダウンロードします。 Drushを使用して実行します。 Drupalサイト内のフォルダー(任意)にいることを確認し、次のコマンドを実行します。

sudo drush dl omega

バージョン4はすでに推奨リリースであるため、Drushは最新の安定したリリースを自動的にダウンロードします。 次に、次のコマンドで有効にします。

sudo drush en omega

次に、適切な測定のためにすべてのキャッシュをクリアします。

sudo drush cc all

次に、後で必要になるため、unzipをすばやくインストールします。

sudo apt-get install unzip

root ユーザーではないため、すべてのコマンドの前にsudoが付いていることに気付くでしょう。

Rubyバージョンマネージャー(RVM)

Omega 4を使用すると、Sass、Compass、Susy、およびRubyで記述されたその他のあらゆる種類の機能を操作できるため、先に進む前にRubyとRubygemを処理する必要があります。 続行するための推奨される方法は、最初にRVMをインストールすることです。 次のコマンドを実行してインストールします。

\curl -L https://get.rvm.io | bash

これを使用するには、次のコマンドを実行します。

~/.rvm/scripts/rvm

次に、次のコマンドを実行して、Rubyのすべての要件がVPSにインストールされていることを確認します。

rvm requirements

RVMがインストールされたので、テーマに使用するものが2つあるはずです。rubygemsとbundlerです(これらが何であるかはすぐにわかります)。

オメガサブテーマ

Drushを使用して、作業するサブテーマを生成します。 ここでも、Drupalサイトフォルダー内のどこかで、次のコマンドを実行します。

sudo drush omega-wizard

ターミナルウィンドウの指示に従います。テーマに名前を付け(ファンシーとしましょう)、ベーステーマ(オメガとしましょう)、スターターキット(ベーシックとしましょう)を選択します。 )、宛先(おそらくサイト)、サイト自体(すべて、複数のサイトを実行していない場合)、デフォルトのreadmeファイルを保持または削除し、新しいサイトのデフォルトをテーマにします。

現在行われているプロセスでは、 unzip をインストールする必要があることに注意してください(ただし、すでに処理されているため、問題ありません)。

ここでサイトに移動すると、新しいサブテーマが有効になっていて、サイトでデフォルトとして設定されていることがわかります。 終わりましたか? いいえ、そうではありません。

RubyとRubyGems

ターミナルで、この新しく作成されたテーマのフォルダーに移動します。

cd /var/www/drupal/sites/all/themes/fancy

次のようなメッセージが表示されます。

ruby-1.9.3-p448 is not installed.
To install do: 'rvm install ruby-1.9.3-p448'

Rubyのバージョンはケースによって異なる場合があり、インストールしたOmegaのバージョンと厳密に関連しています。 このテーマの機能を拡張するGemsの多くは絶えずアップグレードされているため(たとえば、 Sass )、下位互換性がなく、アップグレードごとに構文が変更されるリスクが高くなります。

サブテーマフォルダーには、Rubyのバージョンとこのフォルダーで使用されるgemset環境を指定する2つのファイル(.ruby-gemset.ruby-version)があります。 。 したがって、別のOmega 4サブテーマで、別のバージョンのRubyを別のgemsetで問題なく実行することができます。

これが明確になったので、ここで必要なバージョンのRubyをインストールしましょう(サブテーマフォルダーに移動したときに表示されるターミナルメッセージから通知されます)。 次のコマンドを実行してインストールします。

rvm install ruby-1.9.3-p448

もちろん、言われたバージョンに変更してください。 .ruby-version ファイル内をチェックして、そこでバージョンを確認することもできます。 テーマプロジェクトに適切なバージョンのRubyがインストールされたので、次のコマンドを実行して、Rubyが使用されていることを確認できます。

rvm list

Rubyのバージョンが1つしかない場合は、問題ないはずです。 ただし、さまざまなバージョンを出力するこの小さなコマンドと、それらが現在の環境(サブテーマの環境)でどのように使用されているかを知っていても問題はありません。実行するときは、サブテーマフォルダーにいることを確認してください。

次に、テーマに付属するGems( Gemfile ファイルで指定されているSass、Compass、Susyなど)をインストールします。 次のコマンドを実行します。

bundle install

メッセージが端末画面に印刷されると、個々のGemsがインストールされているのがわかります。 さらに、Gemfile.lockファイルがGemfileの隣に作成され、インストールされているGemsの正確なバージョンを追跡します。 したがって、installコマンドを再度実行する必要がある場合は、まったく同じGemsがインストールされ、非互換性の問題が防止されます。

アクセス許可の問題が原因でGemfile.lockを書き込めないというエラーが発生した場合は、サブテーマフォルダーが自分(バンドルインストールを実行しているユーザー)が所有していることを確認してください。

chown -R tony /var/www/drupal/sites/all/themes/fancy

そして今、あなたは基本的に完了です。 たとえば、Sassをテストする場合は、sassフォルダーにある.scssファイルの1つを編集します。

cd /var/www/drupal/sites/all/themes/fancy/sass/

そして、次の行に貼り付けます。

body {
  background-color:red;
}

ブラウザでサイトを更新しても、何も起こりません。 Sassをコンパイルして、通常のCSSに変換する必要があります。 これを行うには、サブテーマのルートフォルダーから次のコマンドを実行してCompassを使用できます。

compass compile

通知が届くはずです。ブラウザを更新すると、SassはCSSに変わります( css / フォルダにあります)。

開発中で、.scssファイルへのすべての変更を自動的にコンパイルする場合は、次のコマンドを実行します。

compass watch

これにより、変更が監視され、自動的にコンパイルされます。 CTRL-Cを押して、視聴を停止します。

さらに、Sassの使用について詳しくは、先ほど書いたこのチュートリアルをご覧ください。

投稿者: Danny
モバイルバージョンを終了