這將顯示博客徽標(biāo)。

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

將博客標(biāo)題顯示為鏈接。

<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}}標(biāo)記加載。您還沒(méi)有看過(guò)的車(chē)把標(biāo)籤，該頁(yè)腳包含用於共享的社交媒體圖標(biāo)。 >

造型主題

正如我提到的，幽靈是準(zhǔn)骨。我最初打算使用Bootstrap來(lái)樣式頁(yè)面，但我決定使用與Sass建造的小型網(wǎng)格系統(tǒng)。

在我的.CSS文件的這個(gè)小片段中，我只包含了本文的兩個(gè)斷點(diǎn)，但是在現(xiàn)實(shí)世界應(yīng)用中，我們將包括更多內(nèi)容。如您所見(jiàn)，一旦屏幕收縮至600像素，所有列的規(guī)模都達(dá)到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>

>

結(jié)論

>我只抓取了幽靈可以做的事情的表面。如果您想創(chuàng)建博客並擁有資源，我建議您嘗試一下。請(qǐng)記住，它是為作家的作家建造的！

>關(guān)於幽靈博客主題的經(jīng)常詢(xún)問(wèn)的問(wèn)題

>什麼是Ghost Blog主題？

> Ghost Blog主題是一個(gè)預(yù)先設(shè)計(jì)的模板，您可以將其應(yīng)用於Ghost Blog，以使其具有獨(dú)特的外觀和感覺(jué)。這些主題是使用handlebars.js構(gòu)建的，即一種簡(jiǎn)單的模板語(yǔ)言，可以定制它們以適合您的特定需求。它們帶有各種功能和佈局，例如響應(yīng)式設(shè)計(jì)，SEO優(yōu)化和社交共享選項(xiàng)等。

>

>如何安裝幽靈博客主題？是一個(gè)簡(jiǎn)單的過(guò)程。首先，您需要下載通常以.zip格式的主題文件。然後，登錄到您的Ghost Admin面板，導(dǎo)航到“設(shè)計(jì)”部分，然後單擊“上傳主題”按鈕。選擇下載的.zip文件，然後單擊“上傳”。上傳完成後，您可以通過(guò)單擊“立即激活”按鈕來(lái)激活主題。

我在哪裡可以找到Ghost Blog主題？

博客主題。官方的幽靈網(wǎng)站有一個(gè)市場(chǎng)，您可以在其中找到免費(fèi)和高級(jí)主題。其他受歡迎的資源包括Themeforest，這是一個(gè)提供各種幽靈主題的數(shù)字市場(chǎng)，以及在自己的網(wǎng)站上出售其主題的各種獨(dú)立開(kāi)發(fā)人員。

我可以自定義我的Ghost Blog主題嗎？ >是的，您可以自定義您的Ghost Blog主題。幽靈主題是使用handlebars.js構(gòu)建的，它允許高度定制。您可以更改佈局，顏色，字體和其他設(shè)計(jì)元素，以滿(mǎn)足您的特定需求。但是，請(qǐng)記住，自定義主題需要對(duì)HTML，CSS和Handlebars.js的知識(shí)。

>

> Ghost Blog主題響應(yīng)良好嗎？

大多數(shù)Ghost Blog主題均設(shè)計(jì)為響應(yīng)迅速，這意味著它們會(huì)自動(dòng)調(diào)整其佈局以適合不同的屏幕尺寸。這樣可以確保您的博客在所有設(shè)備上看起來(lái)都很好，包括臺(tái)式計(jì)算機(jī)，筆記本電腦，平板電腦和智能手機(jī)。但是，最好在購(gòu)買(mǎi)或下載之前檢查主題的描述或演示以確保其響應(yīng)能力。博客主題類(lèi)似於安裝新的主題。首先，您需要下載更新的主題文件。然後，轉(zhuǎn)到您的Ghost Admin面板，導(dǎo)航到“設(shè)計(jì)”部分，然後單擊“上傳主題”按鈕。選擇更新的.zip文件，然後單擊“上傳”。上傳完成後，您可以激活更新的主題。

>在選擇《幽靈博客主題》時(shí)，我應(yīng)該在Ghost Blog主題中尋找什麼？ ，自定義選項(xiàng)和SEO優(yōu)化。該主題應(yīng)與博客的樣式和音調(diào)相匹配，易於瀏覽，並且在所有設(shè)備上看起來(lái)都不錯(cuò)。對(duì)於搜索引擎的自定義和優(yōu)化也應(yīng)該很容易，以幫助您的博客在搜索結(jié)果中排名較高。

我可以在多個(gè)博客上使用Ghost Blog主題嗎？多個(gè)博客上的幽靈博客主題。但是，請(qǐng)記住，每個(gè)博客都需要自己的幽靈安裝。另外，如果您購(gòu)買(mǎi)了高級(jí)主題，請(qǐng)確保檢查許可協(xié)議，因?yàn)槟承┲黝}開(kāi)發(fā)人員可能會(huì)限制您可以使用其主題的網(wǎng)站數(shù)量。

>

我需要知道如何使用代碼來(lái)使用代碼鬼博客主題？

>

您不需要知道如何使用Ghost Blog主題，對(duì)HTML，CSS和Handlebars.js了解一些知識(shí)可能會(huì)有所幫助，尤其是在您想嘗試的情況下自定義 主題。但是，許多主題都帶有廣泛的文檔和支持，以幫助您設(shè)置和自定義博客，即使您不是編碼器。

>

>是否有免費(fèi)的Ghost Blog主題？ ，有許多免費(fèi)的幽靈博客主題。官方的幽靈網(wǎng)站提供了一些免費(fèi)的主題，還有許多獨(dú)立開(kāi)發(fā)人員提供免費(fèi)主題。但是，請(qǐng)記住，免費(fèi)主題可能與高級(jí)主題相同的支持或自定義選項(xiàng)。

以上是鬼博客主題的解剖學(xué)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！