Locomotive V3 (LocomotiveCMS) Wagonインストール編
LocomotiveCMSの新しいバージョンLocomotive V3がリリースされたのでさっそくインストールしてみました。ローカルでサイトを開発するツールであるWagonと、そのサイトをディプロイするサーバー上のRailsアプリであるEngineの関係に変わりはありません。インストールも前バージョンの手順とほとんど変わらず、WagonのインストールはQuick startそのままですが、ところどころ補足します。EngineについてはEngineインストール編をご参照下さい。
Mac OS X El Capitan/Ruby 2.2.1p85にて確認。
1. インストール
Documentにはpreオプションが残ったままですが、正式リリースされたので不要です。Wagonの最新バージョンは2.0.0になります。
$ gem install locomotivecms_wagon
$ wagon version
2.0.0
続いて、Locomotiveプラットホーム(Engineアプリ）にログインします。デフォルトではLocomotive.worksにホスティングするようになっています。アカウントがなければ、この場でSignupできるようですが、自分はサイトトップから事前に登録しておきました。1サイトのみ、容量19.1MBまで、カスタムドメイン不可のFreeプランで試用が可能です。
$ wagon auth
Locomotive Sign in/up
Enter the URL of your platform? (default: http://locomotive.works)
Enter your e-mail? [email protected]
Enter your password?
You have been successfully authenticated.
2. サイト作成
サイトを作成するには、以下のコマンドを実行します。-tでフロントエンドのframeworkを指定します。
途中、テンプレートにHAMLを使用するか、スタイルシートにSCSSを使用するか訊かれます。
$ wagon init YourSiteName -t bootstrap
...
Do you prefer HAML templates? n
...
Do you prefer SCSS stylesheets? y
...
$ cd YourSiteName/
$ bundle install
$ bundle exec wagon serve
Thin web server (v1.6.4 codename Gob Bluth)
Maximum connections set to 1024
Listening on 0.0.0.0:3333, CTRL+C to stop
http://localhost:3333/ を開くと、すでにサンプルページ(app/views/pages/index.liquid)が表示されている状態です。サンプルを手掛かりにカスタマイズできますので、とっかかりやすいですね。
ちなみに、指定できるフロントエンドframeworkは以下のコマンドで確認できます。
$ wagon list_templates
blank - A blank site with the minimal files.
line_case - A simple portfolio site.
bootstrap - A site powered by Bootstrap (v3.3.5).
foundation5 - A site powered by Foundation (v5.4.7).
unzip - Unzip a local or remote (http, https, ftp) zipped site.
3. projectsタイプ定義
projectsタイプというと紛らわしいのですが、試しにprojectsというcontent_type（いわゆるmodel）を定義してみましょう、ということです。実際にはproductsタイプでも、何でも、サイトに必要なcontent_typeを定義することになります。
$ bundle exec wagon generate content_type projects name:string client:string description:text image:file
exist
create app/content_types/projects.yml
create data/projects.yml
4. projectsリスト表示ページ作成
上記で定義したprojectsタイプのデータリストを表示するページを作成してみましょう。
$ bundle exec wagon generate page projects
Do you prefer a HAML template ? n
create app/views/pages/projects.liquid
liquid以外の選択肢はありません。"---"以降のファイル内容を以下の通り書き換えます。
---
title: Projects
# true if the page is included in the menu
listed: true
# true if the page is published
published: true
# true if the page can be used as a layout for new pages created by the editors
# is_layout: true
# position among sibling pages
# position: 1
# sets a redirection to the given url (301)
# redirect_url: "<url to a page or to a remote url>"
# content type that this page is templatizing
# content_type: "<slug of one of the content types>"
# editable_elements:
# 'some_block/some_slug': "<text>"
# 'some_block/some_slug': "<relative path to the file under the public/samples folder>"
---
{% extends 'layouts/simple' %}
{% block content/main, short_name: true %}
{% editable_model projects %}
<div class="row">
<div class="col-sm-12">
{% for project in contents.projects %}
<div class="media">
<div class="media-left">
<img class="media-object" src="{{ project.image.url | default: 'http://loremflickr.com/100/100' | resize: '100x100#' }}" alt="{{ project.name }}">
</div>
<div class="media-body">
<h4 class="media-heading">{{ project.name }}</h4>
<p><strong>Client:</strong> {{ project.client }}
<div>
{{ project.description }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endeditable_model %}
{% endblock %}
http://localhost:3333/projects を開くと、すでにprojectsタイプ定義時に作成されたサンプルデータをもとにprojectsリストページが表示されている状態です。
5. ディプロイ
以下は、Locomotive.worksにインタラクティブにディプロイしています。
$ bundle exec wagon deploy live
What is the URL of your platform? (default: http://locomotive.works)
What is the handle of your site? (default: a random one)
Deploying...-
Your site has been deployed.
To preview your site, visit: http://locomotive.works/_app/tropical-leaves-181/preview
To edit the content of your site, visit: http://locomotive.works/_app/sign_in
未定義の環境名（この場合はlive）を使用してディプロイを実行すると、config/deploy.ymlが更新され、次回以降の更新時にはこちらの設定が参照されることになります。
live:
host: locomotive.works
handle: random-string-123
email: foo@bar.com
api_key: {contidential}
実際に、http://locomotive.works/_app/tropical-leaves-181/preview でプレビューできます。
Engineインストール編では、マニュアルでconfig/deploy.ymlを編集してからローカル（自前）サーバーへディプロイしています。
6. 動的データ編集
Wagonで編集できるのはStaticなデータのみです。content_typeなどの動的データはディプロイ後にSign inして編集します。
スクリーンショットの通り編集して、実際にサイトに反映されているのを確認できます。
Author And Source
この問題について(Locomotive V3 (LocomotiveCMS) Wagonインストール編), 我々は、より多くの情報をここで見つけました https://qiita.com/tatsu/items/6a8401c3b69c5547a1a1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .