Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

comfortable-mexican-sofaのレイアウト編集方法

comfortable-mexican-sofaでレイアウトを編集する方法を確認しました。
 
comfortable-mexican-sofaでは、管理画面でレイアウトを設定する事が出来ます。
 
(1)オンラインマニュアルの設定例
 

<html>
  <body>
    <h1>{_{ cms:page:header:string }}</h1>
    {_{ cms:page:content:rich_text }}
  </body>
</html>

・"cms:page"が管理画面のページ編集画面に対応。
 
・"header:string"と指定すると、ページ編集画面に"header"という項目名で文字列を入力できるようになります。
 
ここで"title:string"にするとページ編集画面の項目名がtitleになります。こちらの方が分かりやすいですね。
 
・"content:rich_text"と指定するとページ編集画面でコンテンツをリッチテキストモードで編集する事が出来ます。"rich_text"と指定しない場合はテキストモードになります。
 
(2)3カラム構成にする場合
 
コンテンツ部分を3カラム構成にしてページ編集画面で入力するには、下記のように"left_column"、"right_column"を使って設定します。
 
下記のようにレイアウトを設定するとページ編集画面に3つのカラム入力部が表示されます。

<div class="left_column">
  {_{cms:page:left_column:rich_text}}
</div>
<div class='content'>
  {_{ cms:page:content:rich_text }}
</div>
<div class="right_column">
  {_{cms:page:right_column:rich_text}}
</div>
</pre>

 
(3)ヘッダー部、フッター部の設定
 
ヘッダー部、フッター部などサイト全体で共通する部分は、ページ編集画面ではなく"スニペット"画面で別途編集する事が出来ます。
 
スニペットで登録したものをレイアウトに取り込む場合は、下記のように"cms:snippet"を使用します。

<html>
  <body>
    <div class='header'>
      {_{ cms:snippet:header }}
    </div>
    <div class='content'>
      <h1> {_{ cms:page:title:string }} </h1>
      {_{ cms:page:content }}
    </div>
    <div class='footer'>
      {_{ cms:snippet:footer }}
    </div>
  </body>
</html>