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

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

頁面組件拆分

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

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

partials

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

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

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

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

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

header.hbs

接著我們來實現(xiàn)一下 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 特性做一些混合的樣式。

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

list-post.hbs

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

最終的文章列表如下：

需要注意的幾個地方：

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

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

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

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

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

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

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

footer.hbs

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

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

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

總結

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

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