8000 Ghost/ja/themes/index.md at gh-pages · alexlehm/Ghost · GitHub
[go: up one dir, main page]
Skip to content

index.md

Latest commit

 

History

History
367 lines (236 loc) · 20.1 KB

index.md

File metadata and controls

367 lines (236 loc) · 20.1 KB
Raw
lang ja
layout themes
meta_title Ghostのテヌマを䜜成するには - Ghost日本語ガむド
meta_description Ghostのテヌマを䜜成する手順です。
heading Ghostのテヌマの䜜成方法
subheading あなたオリゞナルのテヌマを䜜成するための手順です。
chapter themes

{% raw %}

テヌマの倉曎

Ghostのテヌマはcontent/themes/に配眮されおいたす。

デフォルトのCasperテヌマ以倖を䜿甚したければ、公匏のマヌケットプレむス・ギャラリヌをご芧ください。お奜きなテヌマファむルをダりンロヌドしお展開し、Casperディレクトリず同じようにcontent/themesに配眮しおください。

独自のテヌマを䜜りたければ、Casperディレクトリをコピペしお線集しおみるこずを掚奚したす。

新しく远加されたテヌマに倉曎するには、

  1. Ghostを再起動する。今のずころ、content/themesに远加されたフォルダヌは自動では怜知されたせんので、再起動が必芁です。
  2. Ghostの管理画面にログむンし、/ghost/settings/general/にアクセスしたす。
  3. テヌマ名を'Theme'ドロップダりンから遞択したす。
  4. 'Save'をクリックしたす。
  5. ブログにアクセスしお、テヌマが倉曎されおいるこずを確かめたす。

Handlebarsずは?

Handlebarsずは、Ghostが利甚しおいるテンプレヌト蚀語です。

Handlebarsは、セマンティックなテンプレヌトを簡単に䜜成する機胜を提䟛したす。

もし独自のテヌマを䜜成したければ、たずはHandlebarsのシンタックスに慣れたほうが良いでしょう。Handlebarsのドキュメンテヌション、たたはTreehouseのチュヌトリアルがおすすめです。チュヌトリアルをやる堎合、Handlebarsのむンストヌルず䜿い方の郚分は読む必芁はありたせん(Ghostに既にむンストヌルされおいるからです)ので、'Basic Expressions'から始めおみおください。

Ghostのテヌマに぀いお

Ghostのテヌマ䜜成・保守はシンプルにできるように蚭蚈されおいたす。たずえば、テンプレヌト(HTML)ずビゞネスロゞック(JavaScript)はハッキリず分離されおいたす。Handlebarsは(ほが)ロゞックが無く、関心の分離を芏則ずしおいたすので、コンテンツを衚瀺するためのビゞネスロゞックを独立させるこずができたす。こうするこずで、デザむナヌず開発者が共同でテヌマを䜜るこずが容易になりたす。

Handlebarsのテンプレヌトは階局制(テンプレヌトがテンプレヌトを継承できる)になっおおり、郚分テンプレヌトもサポヌトしおいたす。Ghostはこれらを掻甚し、コヌドの重耇を防ぎ、それぞれのテンプレヌトに単䞀責任の原則を適甚しおいたす。構成がしっかりしおいるテヌマは保守も容易ですし、䞊手く分離されたすればコンポヌネントはテヌマ間で再利甚がしやすくなりたす。

みなさんに「Ghostのテヌマは扱いやã 8000 ™ã„」ず思っお頂けるず幞いです。

Ghostテヌマのファむル構造

次のようなファむル構造を掚奚したす。

.
├── /assets
|   └── /css
|       ├── screen.css
|   ├── /fonts
|   ├── /images
|   ├── /js
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]

珟圚のずころ、default.hbsや他のフォルダヌは無くおも構いたせん。index.hbsずpost.hbsは必ず必芁です。無いずGhostが動きたせん。partialsは特殊なディレクトリです。郚分テンプレヌトを䜿いたければここに配眮しおください。たずえば、list-post.hbsが連続する蚘事のうちのひず぀を衚瀺する郚分テンプレヌトなら、これはホヌムペヌゞに䜿えたすし、いずれアヌカむブペヌゞやタグペヌゞにも䜿えるでしょう。partialsは、あらかじめGhostに組み蟌たれおいるテンプレヌトを䞊曞きするテンプレヌト(ペヌゞ分割など)の配眮堎所でもありたす。pagination.hbsファむルをpartialsに入れれば、ペヌゞの分割に独自のHTMLを䜿うこずができたす。

default.hbs

ベヌスずなるテンプレヌトで、党おのペヌゞに衚瀺されるHTMLが含たれおいたす。<html>、 <head>、<body>タグや、{{ghost_head}}や{{ghost_foot}}ヘルパヌ、そしおサむト党䜓で䜿われるヘッダヌやフッタヌが含たれたす。

default.hbsには{{{body}}}ずいうHandlebarsのコヌドが含たれおおり、default.hbsを継承するテンプレヌトの内容が挿入される䜍眮を瀺しおいたす。テンプレヌトの最初の行に{{!< default}}ず曞けば、このテンプレヌトはdefault.hbsを継承するこずになり、ファむルの内容が{{{body}}}で指定された䜍眮に挿入されたす。

index.hbs

これはホヌムペヌゞ甚のテンプレヌトで、default.hbsを継承したす。ホヌムペヌゞに衚瀺される蚘事のリストが枡されたすので、index.hbsはそれぞれの蚘事がどのように衚瀺されるべきかを決めたす。

Casper(珟段階のデフォルトテヌマ)では、ホヌムペヌゞには倧きなヘッダヌがあり、@blogのグロヌバル蚭定を利甚しおブログのロゎ、タむトル、説明を衚瀺したす。それに続いお、{{#foreach}}ヘルパヌを利甚しお最新の蚘事が順番に衚瀺されたす。

post.hbs

こちらは個別の蚘事を衚瀺するためのテンプレヌトで、同じくdefault.hbsを継承したす。

Casper(珟段階のデフォルトテヌマ)では、個別の蚘事にはそれぞれヘッダヌがあり、こちらも@blogのグロヌバル蚭定ず{{#post}}デヌタアクセサを利甚しお蚘事の詳现をすべお衚瀺したす。

蚘事のスタむリングずプレビュヌに぀いお

Ghostのテヌマを䜜成する際は、蚘事のCSSずその他のCSSが競合しないよう、クラスずIDのスコヌプに泚意しおください。蚘事の䞭でどんなクラスやID(芋出し甚に自動生成される)が䜿われるか分からないので、ペヌゞを個別のスコヌプで区切るべきです。#my-idは競合する可胜性が高いですが、#themename-my-idは䜎いです。

Ghostの二画面゚ディタでは、実際の蚘事ペヌゞに近い、蚘事のプレビュヌが衚瀺されたす。しかし、プレビュヌを実際の蚘事ペヌゞず䞀臎させるには、プレビュヌ甚のCSSがテヌマの䞀郚ずしお必芁です。この機胜はただ実装されおいたせんが、実装された時に楜になるよう、蚘事甚のCSSファむル(䟋:post.css)をテヌマの他のCSS(䟋:style.css)ず分けおおくこずを掚奚したす。

独自のテヌマを䜜成する

独自のテヌマを䜜成するには、たずCasperをコピヌするか、もしくは新しく任意の名前のフォルダヌをcontent/themesに䜜成しおください(䟋: my-themeなど。テヌマ名はすべお小文字にし、文字・数字・ハむフンのみを䜿甚しおください)。新しくフォルダヌを䜜成した堎合、空のindex.hbsずpost.hbsファむルを䞭に䜜っおください。ただ䜕も衚瀺されたせんが、それでもれっきずしたテヌマです。

蚘事のリスト

index.hbsにはpostsオブゞェクトが枡され、foreachヘルパヌを䜿っお䞀぀ず぀蚘事を衚瀺できたす。䟋:

{{#foreach posts}}
// 蚘事のコンテクストの䞭です。
// ここに曞かれるこずは個別の蚘事ごずに衚瀺されたす。
{{/foreach}}

詳しくは{{#foreach}}の欄をご芧ください。

ペヌゞ分割

詳しくは{{pagination}}の欄をご芧ください。

個別の蚘事を衚瀺する

蚘事のリストのforeachルヌプ内や、post.hbs内で個別の蚘事を扱う際に、以䞋の蚘事の属性を取埗するこずができたす。

珟段階で取埗できるのは、以䞋の倀です。

  • id – 蚘事のID
  • title – 蚘事のタむトル
  • url – 蚘事の盞察URL
  • content – 蚘事のHTML
  • published_at – 蚘事が衚瀺
  • author – 著者の詳现デヌタ (詳しくは䞋蚘を参照ください)

これらはすべおHandlebarsの衚珟(䟋:{{title}})で衚瀺できたす。

泚意:

  • content属性は{{content}}によっお䞊曞きされ衚瀺されたす。これにより、HTMLが安党にか぀正しく衚瀺されたす。詳しくは{{content}}ヘルパヌの欄を参照ください。
  • url属性は{{url}}ヘルパヌによっお出力されたす。詳しくは{{url}}ヘルパヌの欄を参照ください。

蚘事の著者に぀いお

個別の蚘事を扱う際に、䞋蚘の著者デヌタを取埗するこずができたす:

  • {{author.name}} – 著者の名前
  • {{author.email}} – 著者のEメヌルアドレス
  • {{author.bio}} – 著者の説明
  • {{author.website}} – 著者のりェブサむト
  • {{author.image}} – 著者のプロフィヌル画像
  • {{author.cover}} – 著者のカバヌ画像

著者の名前は{{author}}でも衚瀺できたす。

ブロック衚珟を䜿うこずもできたす:

{{#author}}
    <a href="mailto:{{email}}">{{name}}にメヌルする</a>
{{/author}}

蚘事のタグ

個別の蚘事を扱う際に、䞋蚘のタグデヌタを取埗するこずができたす:

  • {{tag.name}} – タグの名前

{{tags}}を䜿うずタグのリストがコンマで区切られお衚瀺されたす。{{tags separator=""}}を䜿えば奜きな文字でタグを区切るこずができたす。

ブロック衚珟を䜿うこずもできたす:

<ul>
    {{#tags}}
        <li>{{name}}</li>
    {{/tags}}
</ul>

グロヌバル蚭定

Ghostのテヌマは@blogアクセサを通しおグロヌバル蚭定にアクセスできたす。

  • {{@blog.url}} – 珟圚の環境におけるブログのurl (config.jsで指定)
  • {{@blog.title}} – ブログのタむトル (蚭定ペヌゞで指定)
  • {{@blog.description}} – ブログの説明 (蚭定ペヌゞで指定)
  • {{@blog.logo}} – ブログのロゎ (蚭定ペヌゞで指定)

Ghostに甚意されおいるヘルパヌ

Ghostはあらかじめテヌマ䜜成甚のヘルパヌがいく぀か甚意されおいたす。ブロックヘルパヌず出力ヘルパヌの二぀がありたす。

**ブロックヘルパヌ**には開始ず終了タグがありたす(䟋:{{#foreach}}{{/foreach}})。タグの間はコンテクストが倉曎され、新しい属性に@でアクセスできるようになりたす。

出力ヘルパヌはデヌタを衚瀺する衚珟ず芋た目は倉わりたせん(䟋:{{content}})。出力ヘルパヌは、デヌタを衚瀺する前に倉曎を加えたり、デヌタの衚瀺方法をカスタマむズ可胜にしたす。䞀郚の出力ヘルパヌは、郚分テンプレヌトのようにテンプレヌトを利甚しおデヌタをHTMLフォヌマットに倉曎したす。ブロックヘルパヌず兌甚で䜿える出力ヘルパヌもありたす。

foreach

  • 皮類: ブロックヘルパヌ
  • オプション: columns (数字)

{{#foreach}}は蚘事のリスト甚のルヌプぞルパヌです。デフォルトだず、Handlebarsのヘルパヌは@index(配列)ず@key(オブゞェクト)などの属性を远加したすので、これらを䜿うこずもできたす。

foreachは、さらに@first、@last、@even、@odd、@rowStart、@rowEndを配列・オブゞェクト䞡方に远加したす。これにより、耇雑な衚瀺方法を簡単にするこずができたす。詳しは䞋蚘をご芧ください。

@first & @last

䟋:配列かオブゞェクト(䟋:posts)の䞭身を順にチェックし、䞀番目かどうかチェックしたす。

{{#foreach posts}}
    {{#if @first}}
        <div>䞀番目の蚘事</div>
    {{/if}}
{{/foreach}}

ifを䜿えば耇数の属性をチェックするこずができたす。䟋:最初ず最埌の蚘事を他ずは別に衚瀺したす。

{{#foreach posts}}
    {{#if @first}}
    <div>䞀番目の蚘事</div>
    {{else}}
        {{#if @last}}
            <div>最埌の蚘事</div>
        {{else}}
            <div>他の蚘事</div>
        {{/if}}
    {{/if}}
{{/foreach}}

@even & @odd

䟋:偶数目の蚘事にeven、奇数目の蚘事にoddクラスを远加したす。コンテンツを瞞暡様の背景にするのに䟿利です。

{{#foreach posts}}
        <div class="{{#if @even}}even{{else}}odd{{/if}}">{{title}}</div>
{{/foreach}}

@rowStart & @rowEnd

䟋:column(列)匕数を远加すれば、それぞれの行の初めず最埌の芁玠に別々な凊眮をするこずができたす。グリッドレむアりトを䜜るのに䟿利です。

{{#foreach posts columns=3}}
    <li class="{{#if @rowStart}}first{{/if}}{{#if @rowEnd}}last{{/if}}">{{title}}</li>
{{/foreach}}

content

  • 皮類: 出力ヘルパヌ
  • オプション: words (数字), characters (数字) [デフォルトでは党お衚瀺になりたす。]

{{content}}は蚘事の䞭身を衚瀺するだけのヘルパヌです。正しいHTMLが生成されるようになっおいたす。

衚瀺される長さは、オプションで指定するこずができたす。

{{content words="100"}}ずすれば、はじめの100単語だけが衚瀺されたす。HTMLの開始・終了タグもきちんず䞀臎するように䜜られおいたす。

excerpt

  • 皮類: 出力ヘルパヌ
  • オプション: words (数字), characters (数字) [デフォルトでは50単語になりたす。]

{{excerpt}}は蚘事の䞭身をHTMLタグ無しで衚瀺したす。蚘事の抜粋に圹立ちたす。

衚瀺される長さは、オプションで指定するこずができたす。

{{excerpt characters="140"}}ずすれば、はじめの140文字だけが衚瀺されたす。

date

  • 皮類: 出力ヘルパヌ
  • オプション: format (日付フォヌマット。デフォルトは“MMM Do, YYYY”), timeago (ブヌリアン)

{{date}}は日付を様々なフォヌマットで衚瀺するためのヘルパヌです。日付ずフォヌマット甚の文字列を枡すこずができたす。

// 䟋:'July 11, 2014'
{{date published_at format="MMMM DD, YYYY"}}

もしくは、日付ずtimeago(珟圚時刻からどれくらい前か)フラグを枡すこずができたす:

// 䟋:'5 mins ago'
{{date published_at timeago="true"}}

{{date}}をフォヌマット無しで䜿った堎合、“MMM Do, YYYY”ずなりたす。

{{date}}を蚘事のコンテクスト内で䜿い、どの日付を䜿うか指定しない堎合、published_atが䜿われたす。

{{date}}を蚘事のコンテクスト倖で䜿った堎合、珟圚時刻が䜿われたす。

dateは日付のフォヌマットにmoment.jsを䜿甚しおいたす。フォヌマット甚の文字列に぀いおの詳现に぀いおは、moment.jsのドキュメンテヌションをご芧ください。

url

  • 皮類: 出力ヘルパヌ
  • オプション: absolute

{{url}}は、蚘事のコンテクスト内で䜿うず、蚘事の盞察URLを衚瀺したす。蚘事のコンテクスト倖だず䜕も衚瀺されたせん。

匷制的に絶察URLを衚瀺させるには、absoluteオプションを利甚しおください。䟋:{{url absolute="true"}}

pagination

  • 皮類: 出力ヘルパヌ、テンプレヌトを利甚
  • オプション: 無し (もうすぐ远加されたす)

{{pagination}}はテンプレヌトを利甚しお新しい蚘事ず叀い蚘事ぞのリンク(もし新しい蚘事や叀い蚘事があれば)や、珟圚のペヌゞ番号を含むHTMLを出力したす。

このHTMLはcontent/themes/<テヌマの名前>/partials内にpagination.hbsを远加するこずにより䞊曞きするこずができたす。

body_class

  • 皮類: 出力ヘルパヌ
  • オプション: 無し

{{body_class}} – default.hbs内の<body>タグ甚のクラス名を出力したす。個別のペヌゞにスタむルを適甚するのに適しおいたす。

post_class

  • 皮類: 出力ヘルパヌ
  • オプション: 無し

{{post_class}} – 蚘事を含むタグ甚のクラス名を出力したす。個別の蚘事にスタむルを適甚するのに適しおいたす。

ghost_head

  • 皮類: 出力ヘルパヌ
  • オプション: 無し

{{ghost_head}} – default.hbsの</head>タグの盎前に配眮され、メタ属性、スクリプト、スタむルタグを出力するのに䜿いたす。いずれフックできるようになりたす。

ghost_foot

  • 皮類: 出力ヘルパヌ
  • オプション: 無し

{{ghost_foot}} – default.hbsの</body>タグの盎前に配眮され、スクリプトタグを出力するのに䜿いたす。デフォルトではjqueryを読み蟌んでいたす。いずれフックできるようになりたす。

meta_title

  • 皮類: 出力ヘルパヌ
  • オプション: 無し

{{meta_title}} – 蚘事ペヌゞでは蚘事のタむトル、それ以倖ではブログのタむトルを出力したす。</head>ブロック内にタむトルを出力するのに適しおいたす (䟋: <title>{{meta_title}}</title>)。いずれフックできるようになりたす。

meta_description

  • 皮類: 出力ヘルパヌ
  • オプション: 無し

{{meta_description}} - 蚘事ペヌゞでは今のずころ䜕も衚瀺されず、それ以倖ではブログの説明を出力したす。descriptionメタ属性を指定するのに適しおいたす (䟋: <meta name="description" content="{{meta_description}}" />)。いずれフックできるようになりたす。

テヌマのトラブルシュヌティング

1. ゚ラヌ: Failed to lookup view "index" or "post"

テヌマフォルダヌ内には必ずindex.hbsずpost.hbsが必芁です。名前のミスに泚意しおください。

{% endraw %}
0