Dies zeigt das Blog -Logo.

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

Zeigt den Blog -Titel als Link an.

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

Zeigt die Blog -Beschreibung an.

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

Auch im Partials -Verzeichnis gefunden, wird diese Datei aus dem {{> footer}} -Tag in default.hbs geladen. Keine Lenker -Tags, die Sie noch nicht gesehen haben, diese Fu?zeile enth?lt Social -Media -Symbole zum Teilen.

Styling des Themas

Wie ich bereits erw?hnte, ist Ghost sehr Barebone. Ich wollte ursprünglich Bootstrap verwenden, um Seiten zu stylen, aber ich entschied mich, ein kleines Netzsystem zu verwenden, das ich mit SASS gebaut habe.

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

In diesem kleinen Ausschnitt aus meiner .css -Datei habe ich nur zwei Haltepunkte für diesen Artikel aufgenommen, aber in einer realen Weltanwendung würden wir viele weitere aufnehmen. Wie Sie sehen k?nnen, skalieren alle Spalten auf 100%, sobald der Bildschirm auf 600 Pixel schrumpft.

Schlussfolgerung

Ich habe nur die Oberfl?che dessen zerkratzt, was mit Ghost getan werden kann. Wenn Sie einen Blog starten und die Ressourcen haben m?chten, würde ich vorschlagen, dass Sie Ghost versuchen. Denken Sie daran, es wurde für Schriftsteller von Schriftstellern gebaut!

h?ufig gestellte Fragen zu Ghost -Blog -Themen

Was ist ein Ghost-Blog-Thema? Diese Themen werden mit Lenker erstellt. Sie sind mit verschiedenen Funktionen und Layouts geliefert, wie z. B. reaktionsschnelles Design, SEO -Optimierung und Social Sharing -Optionen, unter anderem.

Wie installiere ich ein Ghost -Blog -Thema? ist ein einfacher Prozess. Zun?chst müssen Sie die Themendatei herunterladen, die normalerweise in einem .zip -Format liegt. Melden Sie sich dann in Ihr Ghost Admin -Panel an, navigieren Sie zum Abschnitt "Design" und klicken Sie auf die Schaltfl?che "Ein Thema hochladen". W?hlen Sie die heruntergeladene .zip -Datei und klicken Sie auf "Upload". Sobald der Upload abgeschlossen ist, k?nnen Sie das Thema aktivieren, indem Sie auf die Schaltfl?che "Jetzt aktivieren" klicken.

Wo kann ich Ghost -Blog -Themen finden? Blog -Themen. Die offizielle Ghost -Website verfügt über einen Marktplatz, auf dem Sie sowohl kostenlose als auch Premium -Themen finden k?nnen. Weitere beliebte Quellen sind Themeforest, ein digitaler Marktplatz, der eine Vielzahl von Geisterthemen anbietet, und verschiedene unabh?ngige Entwickler, die ihre Themen auf ihren eigenen Websites verkaufen.

Kann ich mein Ghost -Blog -Thema anpassen? > Ja, Sie k?nnen Ihr Ghost -Blog -Thema anpassen. Ghost -Themen werden mit Lenker gebaut, die ein hohes Ma? an Anpassungsgrad erm?glichen. Sie k?nnen das Layout, Farben, Schriftarten und andere Designelemente für Ihren spezifischen Anforderungen ?ndern. Denken Sie jedoch daran, dass das Anpassen eines Themas einige Kenntnisse über HTML, CSS und Lenker erfordert.

reagieren Ghost -Blog -Themen? Dies stellt sicher, dass Ihr Blog auf allen Ger?ten, einschlie?lich Desktop -Computern, Laptops, Tablets und Smartphones, hervorragend aussieht. Es ist jedoch immer eine gute Idee, die Beschreibung oder Demo des Themas zu überprüfen, um sicherzustellen, dass es reaktionsschnell ist, bevor Sie es kaufen oder herunterladen. Das Blog -Thema ?hnelt der Installation eines neuen. Zun?chst müssen Sie die aktualisierte Themendatei herunterladen. Gehen Sie dann zu Ihrem Ghost Admin -Panel, navigieren Sie zum Abschnitt "Design" und klicken Sie auf die Schaltfl?che "Ein Thema hochladen". W?hlen Sie die aktualisierte .zip -Datei und klicken Sie auf "Upload". Sobald der Upload abgeschlossen ist, k?nnen Sie das aktualisierte Thema aktivieren. , Anpassungsoptionen und SEO -Optimierung. Das Thema sollte dem Stil und Ton Ihres Blogs passen, leicht zu navigieren und auf allen Ger?ten gut auszusehen. Es sollte auch einfach für Suchmaschinen angepasst und optimiert werden, um Ihrem Blog zu helfen, in den Suchergebnissen h?her zu rangieren.

Kann ich ein Ghost -Blog -Thema in mehreren Blogs verwenden? Ein Ghost -Blog -Thema in mehreren Blogs. Denken Sie jedoch daran, dass jeder Blog eine eigene Geisterinstallation ben?tigt. Wenn Sie ein Premium -Thema gekauft haben, überprüfen Sie auch die Lizenzvereinbarung, da einige Themenentwickler die Anzahl der Websites einschr?nken k?nnen, auf denen Sie ihr Thema verwenden k?nnen. Ein Ghost -Blog -Thema?

W?hrend Sie nicht wissen müssen anpassen Das Thema. Viele Themen sind jedoch mit umfassender Dokumentation und Unterstützung geliefert, um Ihr Blog einzurichten und anzupassen, auch wenn Sie kein Coder sind.

Gibt es kostenlose Ghost -Blog -Themen? Es gibt viele kostenlose Ghost -Blog -Themen. Die offizielle Ghost -Website bietet eine Auswahl kostenloser Themen, und es gibt auch viele unabh?ngige Entwickler, die kostenlose Themen anbieten. Beachten Sie jedoch, dass freie Themen m?glicherweise nicht mit der gleichen Support- oder Anpassungsoptionen wie Premium -Themen verbunden sind.

Das obige ist der detaillierte Inhalt vonAnatomie eines Ghost -Blog -Themas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!