ゴーストブログのテーマの解剖学

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

<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で構築した小さなグリッドシステムを使用することにしました。

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

結論

<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を試してみることをお勧めします。作家によって作家向けに構築されていることを忘れないでください！

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

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

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

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

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

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

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

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

以上がゴーストブログのテーマの解剖学の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。