ghost 自定义网站结构
4 min read

ghost 自定义网站结构

介绍一种通过 ghost dynamic routing 对 ghost 网站进行资源结构化管理的方法。
ghost 自定义网站结构
ghost 5.0 by https://ghost.org/changelog/5/

出于博客管理的考虑需要对 ghost 博客进行结构化管理(其实就是网站分目录管理)。举例说明:原先的网站结构是这样:

https://edony.ink/A
https://edony.ink/B
https://edony.ink/C
https://edony.ink/D

为了方便会员管理、主题分享、内容结构化管理等需求,希望可以变成如下结构:

# group-1 所有 post 的列表
https://edony.ink/group-1/
https://edony.ink/group-1/A
https://edony.ink/group-1/B

# group-2 所有 post 的列表
https://edony.ink/group-2/
https://edony.ink/group-2/C

# home page
https://edony.ink/D

# 其他说明:
# 为了方便分享、展示等,上述链接都是永久链接不是 dynamic routing

ghost routing 简介

ghost 为博客提供了 routing 的能力,主要是用来映射 URL 跟网站资源的(数据、模版等等)。ghost routing 提供了如下几个分类:

  • 自定义路由(route)
  • 集合(collection)
  • 分类(taxonomies)

如何使用 ghost routing

可以在 Ghost admin 面板中的 Settings --> Labs 中上传 routes.yaml 文件来配置 ghost routing:

Ghost Admin routes configuration

routes.yaml 文件格式如下所示:

## routes.yaml

routes:

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

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

ghost routing 配置对比

  1. 自定义路由
routes:
  /features/: features

这样配置之后,会使博客 URL:https://blog.site.com/features 生效,同时还会使用你在主题中自定义的模版,模版文件名:features.hbs

  1. 集合
collections:
  /blog/:
    permalink: /blog/{slug}/
    template: blog
    filter: primary_tag:blog
  /podcast/:
    permalink: /podcast/{slug}/
    template: podcast
    filter: primary_tag:podcast
  /:
    permalink: /{slug}/
    template: index

集合是 ghost 组织所有 posts 的关键方式,集合的作用有:

  • 在分页索引路径上显示其中包含的所有发布文章
  • 管理所有发布文章的 URL 结构
  1. 分类
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

分类就是对所有发布的文章按照某个关系(例如 tag、author)进行分组

网站结构化

很显然如果我需要对我的 ghost blog 进行结构化管理,那么需要借助 collection 即集合来实现。

创建 internal tag

在 Ghost Admin 面板 Tags 页面新建 internal tag,并且填充相关的元数据。

Ghost Internal Tags Management

增加自定义 collection

在 routes.yaml 文件中增加 collection 定义,如下所示:

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

collections:
  /compare/:
    permalink: /compare/{slug}/
    filter: tag:hash-compare
  /blog/:
    permalink: /blog/{slug}/
    data: page.home
  /:
    permalink: /{slug}/
    template: index

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

这里有一个需要注意的地方,collection 是按照顺序解析的,所以 comparehome(/) 的先后顺序要控制好。

应用 internal tag

对需要归类到对应 collection 的 post 增加前面定义的 internal tag。

Ghost Use Internal Tags

自定义 page index 模版

为 collection 创建索引模版,让每个自定义 collection 都有自己的 homepage。在自己 ghost theme 中创建模版文件,以上面我的博客 twitter collection 为例,即在我的 ghost theme 中创建一个名叫 custom-page-twitter.hbs 的文件,具体文件内容如下所示:

{{!< default}}

<div class="content-area">
    <main class="site-main">
        {{#post}}
            {{> content width="narrow"}}
        {{/post}}
        <div class="post-feed container medium">
            {{#get "posts" limit="all" filter="tag:hash-twitter" order="published_at desc"}}
                {{#foreach posts}}
                    {{> "loop"}}
                {{/foreach}}
            {{/get}}
        </div>
    </main>
</div>

然后通过 ghost admin 面板对 ghost theme 进行更新:

Ghost Admin Update Theme

创建 page

在 ghost admin 的 Pages 中创建一个 page,注意 page URL 需要跟 collection 同名,以 https://edony.ink/twitter 为例,page 如下所示:

Ghost Page

总结

有利用 ghost collection 对网站进行结构化的方法之后,我们就可以轻松改进网站的导航和 UX 设计。

References

  1. Ghost Themes - Dynamic URLs & Routing
  2. How to Create Subdirectories in Ghost Using Content Collections - Mindspun
  3. Git初始化本地已有项目