備受推薦的 Ghost 博客主題結構設計

時間 2019-11-08

標籤備受推薦 ghost 博客主題結構設計简体版

原文原文鏈接

任何一個項目，若是有一個良好的組織規範和結構設計，那麼便成功了一半，這在工程實踐上是相當重要的。css

對於 Ghost 博客主題來講，一個比較規範的結構設計，會讓你的主題開發變得十分輕鬆。對此，官方教程裏也有 Recommended Structure（推薦結構），以下：html

.
├── /assets
    ├── /css
        ├── screen.css
    ├── /fonts
    ├── /images
    ├── /js
├── /partials
    ├── list-post.hbs
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]
└── package.json [required]

固然，實際的開發過程當中，咱們可能要藉助一些構建工具，好比：gulp.js 等等。在參考了大量優秀的 Ghost 主題源碼後，對於 Recommended Structure 咱們會作一些調整，下面我會細細解說。前端

Recommended Structure

直接上圖吧，最後咱們的主題結構以下：git

這是一個基本的主題結構，你們能夠在這個基礎上去構建本身的主題。爲了方便你們，我專門建了一個分支：點擊獲取，別忘了，點一下 star 噢。github

裏面包括了簡單的 gulp 腳手架，進入項目根目錄，執行一下 npm install 就能夠了。web

default.hbs

從前面官方推薦的結構能夠看出 default.hbs 並非必須的，但在實際的主題開發中，它每每是必須的。爲何這麼說呢，以前咱們介紹 Layout Expressions 也提到過，default.hbs是一個默認模板，咱們其餘的模板均可以擴展默認的模板。npm

因此它裏面的內容咱們也很清楚了。它裏面包含<html>，<head>以及<body>標籤，還有{{ghost_head}}和{{ghost_foot}}助手錶達式。若是你的博客全部頁面的主體部分是同樣的，好比 header 和 footer ，你還能夠在該模板裏面構建好基礎的頁面結構。json

而後咱們須要擴展的內容，也就是不一樣的頁面展現的部分，咱們能夠用{{{body}}}來填充gulp

最後，給你們看一下個人default.hbs示例代碼：緩存

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>{{meta_title}}</title>
    {{ghost_head}}
</head>
<body class="{{body_class}}">
{{{body}}}
{{ghost_foot}}
</body>
</html>

partials

partials 目錄是 Ghost 主題裏一個十分重要的目錄，你能夠在這裏面創建不少小的模板文件。

按照如今前端組件化的思想，一個頁面一般是由各類小的組件拼裝起來的。好比 index.hbs 裏面可能包含文章列表等內容，你能夠在partials裏面建一個list-post.hbs專門負責輸出文章列表，而後在index.hbs中使用{{> list-post}}輸出它。

partials 目錄還有一個很重要的功能，就是你能夠創建一些模板文件用來覆蓋系統內置的模板文件。好比：系統提供了{{navigation}}助手錶達式用來輸出導航，{{pagination}}助手錶達式用來輸出分頁。你能夠在partials目錄裏創建pagination.hbs和navigation.hbs文件覆蓋系統默認的模板。須要注意的是，這種方式直接經過{{pagination}}和{{navigation}}來輸出，而不是用{{> pagination}} partial 表達式

assets

你只須要確保一點，主題裏的全部資源都放在assets目錄裏，須要引入資源的時候使用{{asset}}助手錶達式便可。好比：

<link rel="stylesheet" href="{{asset 'css/style.css'}}">

你們可能會問，那項目裏的src目錄又是幹什麼的。我這裏主要是爲了開發時方便一些，專門建了一個用於開發的目錄，裏面的內容會經過 gulp 打包到 assets 目錄，最後發佈的時候會刪掉該目錄。

其實，你也能夠不用 assets 目錄和{{asset}}助手錶達式，但官方強烈推薦你們用，畢竟它有如下好處：

確保資源文件的相對路徑始終正確
能夠緩存資源文件
爲主題開發者提供了穩定性......

Templates

在主題文件夾的根目錄裏，咱們能夠看到有index.hbs、post.hbs這些文件。前面講到在 partials 裏面咱們能夠建立自定義的模板文件，但根目錄裏的這些模板文件都必須遵循嚴格的命名約定，咱們稱之爲系統模板吧。

每一個模板用於呈現博客的特定頁面或部分（稱爲 Context），而且每一個模板均可以訪問特定的數據。有關模板的更多信息，咱們以後會在具體的操做中介紹到，你也能夠直接訪問官網的模板頁面瞭解。

Contexts （上下文）

Ghost 博客主題的每一個頁面都屬於上下文。Contexts 對應着不一樣的 URL，而且告訴你哪些模板將會被使用，哪些數據是可使用的，不一樣的上下文body_class輸出的內容也是不同的。主題裏全部的 Context 在 Context Table 裏面都有詳細說明

預覽地址個人主頁，項目主頁： maple，歡迎 star
專題教程持續更新中，想要本身製做主題的同窗能夠關注一下

相關標籤/搜索