還記得我們在 開始構建我們的主題 這篇教程里，輸出了 index.post 里的文章列表嗎？

每個主題都有一個 index.hbs 文件，該文件展示我們博客所有的文章，通常作為網站的主頁。在 作為一個程序員，我該如何設計我的博客 這篇教程里，我們也講到過博客主頁的風格及元素設計。這篇教程我們就做一個很簡單的半屏式頭版風格的主頁吧，最終的樣子如下：

頁面組件拆分

在做任何一件事情的時候，我們不要一上來就開干，首先思考一下怎么去做會更簡潔。對于 index.hbs ，我們可以根據自己最終要設計的樣子把整個頁面拆分成各個不同的組件。

最簡單的方式，我們都知道一個頁面通常會由 header、content 和 footer 三部分組成。content 部分就是我們文章列表了。所以我們可以先簡單地把 index.hbs 拆分為 header.hbs、list-post.hbs 和 footer.hbs。為了保證博客的風格統一，通常我們的 header 和 footer 在各個頁面都會表現一致，所以這樣我們還可以在各個頁面去重用它們。

partials

為了實現上面所說的組件拆分和重用，我們需要借助 Ghost 提供的 partials 助手。它的使用方式很簡單，只需兩步即可。

• 新建一個partials 目錄，把我們要拆分的組件（比如header.hbs）放到它里面
• 使用的地方通過 {{> header}} 即可引入

需要注意的是，如果在 partials 目錄里繼續分目錄的話，使用相對路徑引入即可。比如：partials/custom/social-icon.hbs，那么使用 {{> custom/social-icon}} 即可引入。

我們可以嘗試一下，新建好這些文件，index.post 如下：

{{!< default}} {{> header}} {{> list-post}} {{> footer}}

header.hbs

接著我們來實現一下 header.hbs，這里我們簡單地輸出博客的標題，介紹和背景圖片吧，然后用樣式讓它變得美觀一些。

主題的基礎樣式我們借助一下 bootstrap4，由于不需要用到它的組件，我們只需 css 就可以了。直接把它放在 src/css 目錄里面，借助 gulp 構建，我們無需額外再引入。

bootstrap4 的 flex 布局支持使得我們在布局設計上十分方便。

<header style="background-image: url({{@site.cover_image}})"class="site-header d-flex flex-column justify-content-center"><div class="header-content d-flex flex-column align-items-center"><a href="{{@site.url}}" class="site-title">{{@site.title}}</a><h5 class="site-description">{{@site.description}}</h5></div> </header>

在樣式的組織上面，講一下我是怎么去設計的吧。

如上圖，在 less 文件夾中，我會建立一個 partials 文件夾，里面會新建跟 partials 對應的樣式文件。

components 里面對應的是一些更零散的小型組件樣式設計。variable.less 里面存放的是一些變量，比如字體顏色等等，方便我們全局更改主題的風格。mixin.less 則是利用 less 的 mixin 特性做一些混合的樣式。

在前期我們要盡可能地去規范我們主題資源的設計，這對后期的擴展和維護來說都是很重要的。

list-post.hbs

index 上下文中提供給了我們一個 posts 數組和一個分頁的對象。前面我們通過 {{#foreach}} 遍歷輸出了博客的所有文章標題。在 index 的上下文中，我們是可以拿到 post 里面所有的信息的，可以根據需要進行取舍。

最終的文章列表如下：

需要注意的幾個地方：

一篇文章可能有多個作者，Ghost 提供了 primary_author 可以替代 authors.[0] 這種寫法；標簽也是一樣，使用 primary_tag。

使用 date 輸出文章的發布時間，可以格式化成自己想要的格式。具體參考官網

字體文件用的是 Font Awesome，由于字體資源基本不會怎么改變，我是直接放在 assets 文件夾中。

文章分頁我們可以通過 pagination 助手來實現：{{pagination}}。默認的分頁器可能不是我們想要的，可以在 partials 里面新建一個 pagination.hbs 來覆蓋默認的效果。

該上下文中有一些特殊的助手，我們要注意一下：

• {{page_url}}：接收 prev、next 或頁碼作為參數，輸出第幾頁的數據
• {{page}}：輸出當前的頁碼
• {{pages}}：輸出總頁數

為了方便看到效果，我們可以把 package.json 里的 posts_per_page數值設置小一點，或者多建幾篇文章。

footer.hbs

在很多主題中，我們會發現 footer 里面通常會有最近文章、推薦文章、標簽云等信息。在后續的教程中，我們會分別介紹這些是怎么實現的，目前的話就寫個版權信息吧。

到這里，我們完成了一個博客主題的主頁設計，雖然承載的內容不是很多，但也是一個可以拿的出手的設計。

示例代碼：https://github.com/KINGMJ/maple-test/tree/features/tutorials-8

總結

以上是生活随笔為你收集整理的h5页面的写法_8. 开始构建我们的 index.hbs 页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。