Розробка кастомної теми Ghost (Handlebars)

Розробка кастомної теми Ghost (Handlebars)

Ghost теми використовують Handlebars — логічно спрощений шаблонізатор. На відмінну від PHP-шаблонів WordPress, у Handlebars немає произвільного коду — тільки хелпери Ghost та вбудовані вирази. Це обмеження забезпечує безпеку, але вимагає розуміння системи хелперів.

Структура теми та обов'язкові файли

my-theme/
├── package.json        # обов'язково: name, version, engines.ghost
├── index.hbs           # головна сторінка / список постів
├── post.hbs            # шаблон посту
├── page.hbs            # статичні сторінки
├── error.hbs           # сторінки помилок (404, 500)
├── tag.hbs             # архів по тегу (опціонально, fallback на index)
├── author.hbs          # сторінка автора (опціонально)
├── partials/           # переиспользуємі частини
│   ├── header.hbs
│   ├── footer.hbs
│   └── post-card.hbs
└── assets/
    ├── css/screen.css  # основний CSS
    └── js/main.js

// package.json
{
  "name": "my-theme",
  "description": "Custom Ghost theme",
  "version": "1.0.0",
  "engines": { "ghost": ">=5.0.0", "ghost-api": "v5" },
  "license": "MIT",
  "config": {
    "posts_per_page": 12,
    "image_sizes": {
      "xs": { "width": 300 },
      "s": { "width": 600 },
      "m": { "width": 1200 },
      "l": { "width": 2000 }
    },
    "card_assets": true,
    "custom": {
      "header_style": {
        "type": "select",
        "options": ["Center", "Left", "Right"],
        "default": "Center"
      },
      "show_reading_time": {
        "type": "boolean",
        "default": true
      }
    }
  }
}

Основні хелпери та контекст

{{! index.hbs — список постів}}
{{#foreach posts}}
  <article class="post-card {{post_class}}">
    {{#if feature_image}}
      <figure>
        <img srcset="{{img_url feature_image size="s"}} 300w,
                     {{img_url feature_image size="m"}} 600w,
                     {{img_url feature_image size="l"}} 1000w"
             sizes="(max-width: 768px) 100vw, 50vw"
             src="{{img_url feature_image size="m"}}"
             alt="{{title}}">
      </figure>
    {{/if}}

    <div class="post-card-content">
      <header>
        {{#primary_tag}}
          <a href="{{url}}" class="post-tag">{{name}}</a>
        {{/primary_tag}}
        <h2><a href="{{url}}">{{title}}</a></h2>
      </header>

      {{#if excerpt}}
        <p>{{excerpt words="30"}}</p>
      {{/if}}

      <footer>
        {{#primary_author}}
          <img src="{{img_url profile_image size="xs"}}" alt="{{name}}">
          <a href="{{url}}">{{name}}</a>
        {{/primary_author}}

        <time datetime="{{date format="YYYY-MM-DD"}}">
          {{date format="DD MMM YYYY"}}
        </time>

        {{#if @custom.show_reading_time}}
          <span>{{reading_time}}</span>
        {{/if}}
      </footer>
    </div>
  </article>
{{/foreach}}

{{pagination}}

Сборка та валідація

# Валідація теми (офіційний інструмент Ghost)
npm install -g gscan
gscan /path/to/my-theme

# Або через API (CI/CD)
gscan /path/to/my-theme --json

# Загрузка через API
curl -X POST https://myblog.com/ghost/api/admin/themes/upload/ \
  -H "Authorization: Ghost $ADMIN_API_KEY" \
  -F "[email protected]"

Терміни розробки