これにより、ブログのロゴが表示されます

<span><span><span><a</span> title<span>="{{@blog.title}}"</span> href<span>='{{@blog.url}}'</span>></span>{{{@blog.title}}}</span>

ブログのタイトルをリンクとして表示します。

<span><span><span><h2</span> class<span>="h-description-style"</span>></span>{{@blog.description}}<span><span></h2</span>></span></span>

ブログの説明が表示されます。

footer.hbs

また、Partials Directoryにあるこのファイルは、{{> footer}}タグからdefault.hbsにロードされます。まだ見たことのないハンドルバーのタグはまだありません。このフッターには、共有のためのソーシャルメディアアイコンが含まれています。

<span><span><span><div</span> class<span>="foot-box"</span>></span>
</span>    <span><span><span><div</span> class<span>="f-social"</span>></span>
</span>    <span><span><span><a</span> href<span>="http://www.facebook.com/sharer.php?u={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/facebook.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span><a</span> href<span>="https://plus.google.com/share?url={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/google_plus.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span><a</span> href<span>="http://twitter.com/share?text={{@blog.title}}&url={{url absolute="</span>true"}}" target<span>="_blank"</span>></span>
</span>        <span><span><span><img</span> src<span>="/assets/images/twitter.png"</span>></span>
</span>    <span><span><span></a</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="f-cp"</span>></span>
</span>    <span><span><span><p</span>></span>? {{date format='YYYY'}} <span><span><a</span> href<span>="{{@blog.url}}"</span>></span>{{@blog.title}}<span><span></a</span>></span><span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="f-ghst"</span>></span>
</span>    <span><span><span><p</span>></span>Runs on  <span><span><a</span> href<span>="http://ghost.org"</span> target<span>="_blank"</span>></span>Ghost<span><span></a</span>></span><span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

テーマのスタイリング

私が言ったように、ゴーストは非常に裸の骨です。私はもともとブートストラップを使用してページをスタイリングするつもりでしたが、SASSで構(gòu)築した小さなグリッドシステムを使用することにしました。

.cssファイルのこの小さなスニペットでは、この記事には2つのブレークポイントしか含まれていませんが、実際のアプリケーションにはさらに多くが含まれます。ご覧のとおり、畫面が600ピクセルに縮小すると、すべての列が100％にスケーリングします。

結(jié)論

<span><span>@media screen and (max-width: 600px)</span> {
</span>    <span><span>.mbox .list-post .i-pic</span> {
</span>        <span>position: relative;
</span>        <span>min-height: 1px;
</span>        <span>padding-left: 0px;
</span>        <span>padding-right: 0px;
</span>        <span>float: left;
</span>        <span>width: 100%;
</span>        <span>background-color: #f2e7e7;
</span>        <span>border-bottom: 3px solid #090a0a;
</span>    <span>}
</span>    <span><span>.mbox .list-post .i-pic img</span> {
</span>        <span>width: 100%;
</span>        <span>height: 100%;
</span>    <span>}
</span><span>}
</span>
<span><span>@media screen and (min-width: 601px)</span> {
</span>    <span><span>.mbox .list-post .i-pic</span> {
</span>        <span>position: relative;
</span>        <span>min-height: 1px;
</span>        <span>padding-left: 0px;
</span>        <span>padding-right: 0px;
</span>        <span>float: left;
</span>        <span>width: 33.33333%;
</span>        <span>left: 33.33333%;
</span>        <span>background-color: #f2e7e7;
</span>        <span>border-bottom: 3px solid #090a0a;
</span>     <span>}
</span><span>}</span>

ゴーストでできることの表面を傷つけただけです。ブログを始めてリソースを持っている場合は、Ghostを試してみることをお勧めします。作家によって作家向けに構(gòu)築されていることを忘れないでください！

ゴーストブログのテーマについてよく尋ねる質(zhì)問

ゴーストブログのテーマとは何ですか？

ゴーストブログのテーマは、ゴーストブログに適用してユニークなルックアンドフィールを與えることができる事前に設(shè)計されたテンプレートです。これらのテーマは、単純なテンプレート言語であるHandleBars.jsを使用して構(gòu)築されており、特定のニーズに合わせてカスタマイズできます。特に、レスポンシブデザイン、SEO最適化、ソーシャル共有オプションなど、さまざまな機(jī)能やレイアウトが付屬しています。簡単なプロセスです。まず、テーマファイルをダウンロードする必要があります。テーマファイルは通常.zip形式です。次に、ゴースト管理パネルにログインし、「デザイン」セクションに移動し、[テーマのアップロード]ボタンをクリックします。ダウンロードした.zipファイルを選択し、[アップロード]をクリックします。アップロードが完了したら、「今すぐアクティブ化」ボタンをクリックしてテーマをアクティブにすることができます。

ゴーストブログのテーマはどこにありますか？ブログのテーマ。公式ゴーストウェブサイトには、無料のテーマとプレミアムテーマの両方を見つけることができる市場があります。その他の人気のある情報源には、さまざまなゴーストテーマを提供するデジタルマーケットプレイス、および獨自のWebサイトでテーマを販売するさまざまな獨立した開発者が含まれます。 >はい、ゴーストブログのテーマをカスタマイズできます。ゴーストテーマは、ハンドルバーを使用して構(gòu)築されています。これにより、高度なカスタマイズが可能になります。特定のニーズに合わせて、レイアウト、色、フォント、その他のデザイン要素を変更できます。ただし、テーマをカスタマイズするには、HTML、CSS、およびHandleBars.jsの知識が必要であることに留意してください。

ゴーストブログのテーマは反応しますか？

ほとんどのゴーストブログテーマは、レスポンシブになるように設(shè)計されています。つまり、さまざまな畫面サイズに合わせてレイアウトを自動的に調(diào)整します。これにより、デスクトップコンピューター、ラップトップ、タブレット、スマートフォンなど、すべてのデバイスでブログが見栄えがよくなります。ただし、テーマの説明やデモを確認(rèn)して、購入またはダウンロードする前に応答性があることを確認(rèn)することをお勧めします。ブログのテーマは、新しいもののインストールに似ています。まず、更新されたテーマファイルをダウンロードする必要があります。次に、ゴースト管理パネルに移動し、[デザイン]セクションに移動し、[テーマのアップロード]ボタンをクリックします。更新された.zipファイルを選択し、[アップロード]をクリックします。アップロードが完了したら、更新されたテーマをアクティブにすることができます。 Ghostブログのテーマで何を探すべきですか？

ゴーストブログのテーマを選択するときは、デザイン、レスポンシンズなどの要因を考慮してください。 、カスタマイズオプション、およびSEO最適化。テーマは、ブログのスタイルとトーンと一致し、ナビゲートしやすく、すべてのデバイスで見栄えがする必要があります。また、検索エンジン用にカスタマイズして最適化して、検索結(jié)果でブログが高くランク付けされるのに役立ちます。複數(shù)のブログのゴーストブログのテーマ。ただし、各ブログには獨自のゴーストインストールが必要になることに留意してください。また、プレミアムテーマを購入した場合は、一部のテーマ開発者がテーマを使用できるサイトの數(shù)を制限する可能性があるため、ライセンス契約を確認(rèn)してください。ゴーストブログのテーマ？

ゴーストブログのテーマを使用するためにコーディングする方法を知る必要はありませんが、HTML、CSS、およびハンドルバーの知識を持つことは、特にあなたが望む場合は役立つことがありますカスタマイズします テーマ。ただし、多くのテーマには、コーダーではない場合でも、ブログのセットアップとカスタマイズを支援するための広範(fàn)なドキュメントとサポートが付屬しています。 、利用可能な無料のゴーストブログのテーマがたくさんあります。公式Ghost Webサイトは無料のテーマを選択しており、無料のテーマを提供する多くの獨立した開発者もいます。ただし、無料のテーマには、プレミアムテーマと同じレベルのサポートまたはカスタマイズオプションが付屬していない場合があることに留意してください。

以上がゴーストブログのテーマの解剖學(xué)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。