鬼博客主題的解剖學-js教程-PHP中文網

Anatomy of a Ghost Blog Theme

這將顯示博客徽標。

<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中文網其他相關文章！