Anatomie d'un thème de blog fantôme

Cela affiche le logo du blog.

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

Affiche le titre du blog comme un lien.

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

Affiche la description du blog.

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

Également trouvé dans le répertoire partiels, ce fichier se charge de la balise {{> Footer}} dans default.hbs. Pas de balises de guidon que vous n'avez pas encore vues, ce pied de page contient des icônes de médias sociaux pour le partage.

Styler le thème

Comme je l'ai mentionné, Ghost est très nu. J'allais à l'origine utiliser Bootstrap pour style, mais j'ai décidé d'utiliser un petit système de grille que j'ai construit avec SASS.

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

Dans ce petit extrait de mon fichier .css, je n'ai inclus que deux points d'arrêt pour cet article, mais dans une application du monde réel, nous en inclurions beaucoup plus. Comme vous pouvez le voir, toutes les colonnes évoluent à 100% une fois que l'écran réduit à 600 pixels.

Conclusion

Je n'ai fait que gratter la surface de ce qui peut être fait avec Ghost. Si vous cherchez à démarrer un blog et à avoir les ressources, je vous suggère d'essayer Ghost. N'oubliez pas qu'il est construit pour les écrivains par des écrivains!

Les questions fréquemment posées sur les thèmes du blog fantôme

Quel est un thème de blog fantôme?

Un thème de blog fantôme est un modèle pré-conçu que vous pouvez appliquer à votre blog fantôme pour lui donner un aspect unique. Ces thèmes sont construits à l'aide de guidon. Ils sont livrés avec diverses fonctionnalités et dispositions, telles que la conception réactive, l'optimisation du référencement et les options de partage social, entre autres. est un processus simple. Tout d'abord, vous devez télécharger le fichier thème, qui est généralement au format .zip. Ensuite, connectez-vous à votre panneau d'administration Ghost, accédez à la section «Design» et cliquez sur le bouton «Télécharger un thème». Sélectionnez le fichier .zip téléchargé et cliquez sur «Télécharger». Une fois le téléchargement terminé, vous pouvez activer le thème en cliquant sur le bouton «Activer maintenant».

Où puis-je trouver des thèmes de blog fantôme?

Il y a plusieurs endroits où vous pouvez trouver des fantômes thèmes de blog. Le site officiel de Ghost a un marché où vous pouvez trouver des thèmes gratuits et premium. D'autres sources populaires incluent TheForest, un marché numérique qui offre une grande variété de thèmes fantômes et divers développeurs indépendants qui vendent leurs thèmes sur leurs propres sites Web.

Puis-je personnaliser mon thème de blog fantôme?

Oui, vous pouvez personnaliser le thème de votre blog fantôme. Les thèmes fantômes sont construits à l'aide de guidon.js, ce qui permet un degré élevé de personnalisation. Vous pouvez modifier la disposition, les couleurs, les polices et autres éléments de conception en fonction de vos besoins spécifiques. Cependant, gardez à l'esprit que la personnalisation d'un thème nécessite une certaine connaissance de HTML, CSS et GroundBars.js.

Les thèmes de blog fantômes sont-ils réactifs?

La plupart des thèmes de blog fantômes sont conçus pour être réactifs, ce qui signifie qu'ils ajustent automatiquement leur disposition pour s'adapter à différentes tailles d'écran. Cela garantit que votre blog a fière allure sur tous les appareils, y compris les ordinateurs de bureau, les ordinateurs portables, les tablettes et les smartphones. Cependant, c'est toujours une bonne idée de vérifier la description ou la démo du thème pour vous assurer qu'elle est réactive avant de l'acheter ou de le télécharger.

Comment mettre à jour mon thème de blog fantôme?

Mise à jour de votre fantôme Le thème du blog est similaire à l'installation d'un nouveau. Tout d'abord, vous devez télécharger le fichier de thème mis à jour. Ensuite, accédez à votre panneau d'administration Ghost, accédez à la section «Design» et cliquez sur le bouton «Télécharger un thème». Sélectionnez le fichier .zip mis à jour et cliquez sur «Télécharger». Une fois le téléchargement terminé, vous pouvez activer le thème mis à jour.

Que dois-je rechercher dans un thème de blog fantôme?

Lors du choix d'un thème de blog fantôme, considérez des facteurs tels que la conception, la réactivité , Options de personnalisation et optimisation SEO. Le thème devrait correspondre au style et au ton de votre blog, soyez facile à naviguer et a l'air bien sur tous les appareils. Il devrait également être facile à personnaliser et à optimiser pour les moteurs de recherche afin d'aider votre blog plus haut dans les résultats de recherche.

Puis-je utiliser un thème de blog fantôme sur plusieurs blogs?

Oui, vous pouvez utiliser Un thème de blog fantôme sur plusieurs blogs. Cependant, gardez à l'esprit que chaque blog aura besoin de sa propre installation fantôme. De plus, si vous avez acheté un thème premium, assurez-vous de vérifier l'accord de licence, car certains développeurs de thème peuvent limiter le nombre de sites où vous pouvez utiliser leur thème.

Dois-je savoir comment coder pour utiliser Un thème de blog fantôme?

Bien que vous n'ayez pas besoin de savoir comment coder pour utiliser un thème de blog fantôme, avoir une certaine connaissance de HTML, CSS et GroundBars.js peut être utile, surtout si vous le souhaitez Personnalisez le thème. Cependant, de nombreux thèmes sont livrés avec une documentation approfondie et un soutien pour vous aider à configurer et à personnaliser votre blog, même si vous n'êtes pas un codeur.

Y a-t-il des thèmes de blog fantôme gratuit?

Oui , il existe de nombreux thèmes de blog fantômes gratuits disponibles. Le site officiel de Ghost propose une sélection de thèmes gratuits, et il existe également de nombreux développeurs indépendants qui proposent des thèmes gratuits. Cependant, gardez à l'esprit que les thèmes libres peuvent ne pas être livrés avec le même niveau d'options de support ou de personnalisation que les thèmes premium.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!