GHOST CMS - 创建自定义主页 Creating a custom home page

Posted 2021-03-21 qduck

创建自定义主页 Creating a custom home page

为你的网站创建一个自定义的主页是一个让你从人群中脱颖而出的好方法，并把你自己独特的印记存放在你的网上。本教程向您展示了如何在Ghost中自定义和开发自己的自定义主页。

Creating a custom home page for your site is a great way to set yourself apart from the crowd and put your own unique stamp on your online presence. This tutorial shows you how to customise and develop your own custom home page in Ghost.

创建和自定义模板 Creating and customising your template

在我们开始之前，我想先解释一下处理Ghost主题的几个先决条件。Ghost中的主题使用Handlebars，这是一种模板语言，提供对Ghost内容的访问和其他常见模板好处。

Before we dive in there‘s a couple of prerequisites I‘d like to explain for working with Ghost themes. Themes in Ghost use Handlebars, a templating language that provides access to Ghost content and other common templating benefits.

主题文件结构和索引。 index.hbs file

Theme file structure and index.hbs file

每一个Ghost主题都有一个索引。hbs文件，“hbs”代表把手。此文件呈现您的所有帖子，并且最有可能用于您站点的主页。

Every Ghost theme comes with an index.hbs file, the "hbs" stands for handlebars. This file renders all your posts, and is most likely being used on the home page of your site.

在Ghost admin中下载主题UI 

Download theme UI in the Ghost admin

通过下载您的Ghost主题，您可以对该文件进行更改。要下载主题，请浏览Ghost admin中的Design视图，向下滚动到选择的主题，然后单击右侧的“download”。一旦你解压缩了主题，你就可以打开索引了。在文本编辑器中的hbs文件，并开始进行更改。

By downloading your Ghost theme you can make changes to this file. To download the theme navigate to the Design view in the Ghost admin and scroll down to the selected theme and click "download" on the right hand side. Once you‘ve unzipped the theme you can open the index.hbs file in a text editor and begin making changes.

{{!-- Main --}}
<main id="main">

    <div>
        <h2>Hey ??</h2>
        <p>My name’s Dave. I’m a Web Designer and Front-end Developer based in Bristol, currently working at Ghost as Developer Advocate.</p>
    </div>
        
    {{!-- Featured Post --}}
    {{#is "home"}}
    {{#get "posts" filter="featured:true" limit="1" as |featured_post|}}
        {{#foreach featured_post}}
            <article class="post featured">

自定义index.hbs的片段。Snippet from a customised index.hbs file

在上面的例子中，我在标题中添加了一个简短的简介。修改后，将主题文件夹压缩，然后使用Design视图底部的‘Upload a theme‘按钮上传压缩过的主题。

In the above example I‘ve added a short bio to the header. After making changes, zip the theme folder up and use the ‘Upload a theme‘ button at the bottom of the Design view to upload your zipped theme.

A customised home page

但如果我想要一个更定制的主页呢?我使用的主题有分页，这些分页的页面使用相同的索引。hbs模板列出较老的帖子，所以我的简历也将显示在所有这些页面。

But what if I want a more bespoke home page? The theme I‘m using has pagination and those paginated pages use the same index.hbs template to list older posts, so my bio is going to be shown on all those pages too.

Home page with paginated pages beside them with the same content

我们可以通过在我们的主题中创建一个名为home.hbs的新模板来防止这种情况的发生。您需要在主题的根目录中创建此文件，与现有索引处于同一级别。哈佛商学院的文件。这个新的主模板将替换现有的索引。hbs模板，但只在主页上。

We can prevent that from happening by creating a new template in our theme called home.hbs. You‘ll need to create this file in the root of your theme, at the same level as the existing index.hbs file. This new home template will replace the existing index.hbs template but only on the home page.

同样，你需要把主题拉上拉链，上传到Ghost，然后激活它以使更改生效

Once again you‘ll need to zip up the the theme, upload it to Ghost and activate it for the changes to take affect.

Same 3 pages but now with custom content only on the home page

呈现Ghost内容

Rendering Ghost content

如前所述，handlebars模板允许我们在Ghost主题的任何地方呈现内容。对于我的用例，我想创建一个名为“Howdy”的页面，并在我的主页上呈现该内容。使用Ghost中的路由，可以将内容数据和模板指定为站点中的任何URL。

As mentioned before, the handlebars templating lets us render content anywhere in a Ghost theme. For my use case I‘d like to create a page called "Howdy " and render that content on my home page. With the use of Routes in Ghost it‘s possible to designate content data and templates to any URL in the site.

POST的设置页面在管理后台

Post settings UI in the Ghost admin

首先用你的主页内容在Ghost admin中创建一个页面，并将slug设置为“home”，这将是你的路由文件中引用的唯一标识符。接下来导航到Labs视图并下载您的路由。路由部分的yaml文件。在文本编辑器中打开它之后，它应该是这样的

First create a page in Ghost admin with your home page content and set the slug to "home", this will be the unique identifier to reference in your routes file. Next navigate to the Labs view and download your routes.yaml file from the Routes section. After opening it in a text editor it should look something like this:

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Amend the routes section to the following:

将路由部分修改如下:

routes:
  /:
    data: page.home
    template: home

/表示站点的根主页，我们分配的数据是我们用slug“home”创建的页面，我们分配的模板是home.hbs。完成更改后，保存文件并上传路由。yaml文件到Ghost管理的实验室视图中的相同部分。

The / represents the root home page of the site and we‘re assigning the data which is the page we made with the slug "home", and we‘re assigning a template which is home.hbs. After you have made your changes save the file and upload the routes.yaml file to the same section within the Labs view of the Ghost admin.

Download / upload routes.yaml UI in the Ghost admin

最后，我们需要使用handlebars主题助手在模板中呈现主页内容。打开home.hbs。在文本编辑器中找到要插入页面内容的区域。使用{{#页面}}…{{/page}}助手来包围要添加内容的区域。这是我的home模板的一个例子:

Finally we need to render the home page content in the template with the use of handlebars theme helpers. Open the home.hbs template in a text editor and locate the area you want to insert your page content. Use the {{#page}}...{{/page}} helper to surround the area you want to add content to. Here‘s an example of my home template:

{{!-- Main --}}
<main id="main">
    {{#page}}
        <div>
            <h2>{{title}}</h2>
            {{content}}
        </div>
    {{/page}}
</main>

Snippet from a custom home page template

保存这些更改，压缩主题，并将其上传到Ghost管理中的Design视图。你现在有一个自定义主页，你可以编辑从右边的Ghost 管理!

Save these changes, zip the theme up, and upload it to the Design view in the Ghost admin. You‘ll now have a custom home page that you can edit from right in side the Ghost admin!

Home page with custom content from page content

Adjusting page routes调整页面的路线

创建自定义主页时的一个常见模式是将列出所有帖子的页面移动到另一个页面。要更改您的文章列表的呈现位置，请重新打开您的路由。并找到集合部分。集合表示帖子组，默认为所有帖子。

A common pattern when creating a custom home page is to move the page where all your posts are listed to another page. To change where your post list gets rendered re-open your routes.yaml file and locate the collections section. Collections represent groups of posts, the default being all posts.

Amend the collections section to the following:

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index

类似于在选择“/blog/”URL之前设置主页数据并将默认集合分配给该URL，我们还将调整单个帖子的永久链接，使其前缀为“/blog/”，以确保URL模式一致。

Similar to setting the home page data before we‘re selection the "/blog/" URL and allocating the default collection to that URL, we‘re also adjusting the permalink of the singular posts to be prefixed with "/blog/" to ensure a consistent URL pattern.

首页和博客页面显示各自的新内容Home page and blog page showing their new respective content