鬼博客主题的解剖学

这将显示博客徽标。

<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

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

也可以在partials目录中找到，此文件从default.hbs中的{{> footer}}标记加载。您还没有看过的车把标签，该页脚包含用于共享的社交媒体图标。>

造型主题

正如我提到的，幽灵是准骨。我最初打算使用Bootstrap来样式页面，但我决定使用与Sass建造的小型网格系统。

在我的.CSS文件的这个小片段中，我只包含了本文的两个断点，但是在现实世界应用中，我们将包括更多内容。如您所见，一旦屏幕收缩至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 Blog主题？

> Ghost Blog主题是一个预先设计的模板，您可以将其应用于Ghost Blog，以使其具有独特的外观和感觉。这些主题是使用handlebars.js构建的，即一种简单的模板语言，可以定制它们以适合您的特定需求。它们带有各种功能和布局，例如响应式设计，SEO优化和社交共享选项等。

>

>如何安装幽灵博客主题？是一个简单的过程。首先，您需要下载通常以.zip格式的主题文件。然后，登录到您的Ghost Admin面板，导航到“设计”部分，然后单击“上传主题”按钮。选择下载的.zip文件，然后单击“上传”。上传完成后，您可以通过单击“立即激活”按钮来激活主题。

我在哪里可以找到Ghost Blog主题？

博客主题。官方的幽灵网站有一个市场，您可以在其中找到免费和高级主题。其他受欢迎的资源包括Themeforest，这是一个提供各种幽灵主题的数字市场，以及在自己的网站上出售其主题的各种独立开发人员。

我可以自定义我的Ghost Blog主题吗？ >是的，您可以自定义您的Ghost Blog主题。幽灵主题是使用handlebars.js构建的，它允许高度定制。您可以更改布局，颜色，字体和其他设计元素，以满足您的特定需求。但是，请记住，自定义主题需要对HTML，CSS和Handlebars.js的知识。

>

> Ghost Blog主题响应良好吗？

大多数Ghost Blog主题均设计为响应迅速，这意味着它们会自动调整其布局以适合不同的屏幕尺寸。这样可以确保您的博客在所有设备上看起来都很好，包括台式计算机，笔记本电脑，平板电脑和智能手机。但是，最好在购买或下载之前检查主题的描述或演示以确保其响应能力。博客主题类似于安装新的主题。首先，您需要下载更新的主题文件。然后，转到您的Ghost Admin面板，导航到“设计”部分，然后单击“上传主题”按钮。选择更新的.zip文件，然后单击“上传”。上传完成后，您可以激活更新的主题。

>在选择《幽灵博客主题》时，我应该在Ghost Blog主题中寻找什么？ ，自定义选项和SEO优化。该主题应与博客的样式和音调相匹配，易于浏览，并且在所有设备上看起来都不错。对于搜索引擎的自定义和优化也应该很容易，以帮助您的博客在搜索结果中排名较高。

我可以在多个博客上使用Ghost Blog主题吗？多个博客上的幽灵博客主题。但是，请记住，每个博客都需要自己的幽灵安装。另外，如果您购买了高级主题，请确保检查许可协议，因为某些主题开发人员可能会限制您可以使用其主题的网站数量。

>

我需要知道如何使用代码来使用代码鬼博客主题？

>

您不需要知道如何使用Ghost Blog主题，对HTML，CSS和Handlebars.js了解一些知识可能会有所帮助，尤其是在您想尝试的情况下自定义 主题。但是，许多主题都带有广泛的文档和支持，以帮助您设置和自定义博客，即使您不是编码器。

>

>是否有免费的Ghost Blog主题？ ，有许多免费的幽灵博客主题。官方的幽灵网站提供了一些免费的主题，还有许多独立开发人员提供免费主题。但是，请记住，免费主题可能与高级主题相同的支持或自定义选项。

以上是鬼博客主题的解剖学的详细内容。更多信息请关注PHP中文网其他相关文章！