Anatomie eines Ghost -Blog -Themas

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!