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

<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>

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

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

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

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

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

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

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

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

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

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