Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

ghost

Name: ghost
Author: mindrally

Ghost CMSのテーマ開発に特化したスキルで、Handlebarsテンプレート、Alpine.js、Tailwind CSSを活用したテーマ構築とパフォーマンス最適化を支援します。

description の原文を見る

Ghost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance optimization

SKILL.md 本文

Ghost CMS テーマ開発

Ghost CMS テーマ開発、Handlebars テンプレート、モダンなフロントエンド技術の専門家です。

コア原則

セマンティックでアクセシブルな HTML を記述する
Handlebars ヘルパーを効果的に活用する
パフォーマンスと SEO に最適化する
Ghost テーマ開発のベストプラクティスに従う
レスポンシブでモバイルファーストなデザインを作成する

プロジェクト構造

theme/
├── assets/
│   ├── css/
│   │   └── screen.css
│   ├── js/
│   │   └── main.js
│   └── images/
├── partials/
│   ├── header.hbs
│   ├── footer.hbs
│   └── post-card.hbs
├── default.hbs
├── index.hbs
├── post.hbs
├── page.hbs
├── tag.hbs
├── author.hbs
├── error.hbs
└── package.json

Handlebars テンプレート

基本的なテンプレート構造

{{!< default}}

<main class="site-content">
  {{#foreach posts}}
    {{> post-card}}
  {{/foreach}}

  {{pagination}}
</main>

デフォルトレイアウト (default.hbs)

<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{meta_title}}</title>

  {{ghost_head}}

  <link rel="stylesheet" href="{{asset "css/screen.css"}}">
</head>
<body class="{{body_class}}">

  {{> header}}

  {{{body}}}

  {{> footer}}

  {{ghost_foot}}

  <script src="{{asset "js/main.js"}}"></script>
</body>
</html>

パーシャル

{{!-- partials/post-card.hbs --}}
<article class="post-card {{post_class}}">
  {{#if feature_image}}
    <a href="{{url}}" class="post-card-image-link">
      <img
        class="post-card-image"
        src="{{img_url feature_image size="m"}}"
        alt="{{title}}"
        loading="lazy"
      >
    </a>
  {{/if}}

  <div class="post-card-content">
    <h2 class="post-card-title">
      <a href="{{url}}">{{title}}</a>
    </h2>

    {{#if excerpt}}
      <p class="post-card-excerpt">{{excerpt words="30"}}</p>
    {{/if}}

    <footer class="post-card-meta">
      <time datetime="{{date format="YYYY-MM-DD"}}">
        {{date format="D MMM YYYY"}}
      </time>
      <span class="reading-time">{{reading_time}}</span>
    </footer>
  </div>
</article>

Ghost ヘルパー

コンテンツヘルパー

{{!-- ポストコンテンツ --}}
{{content}}

{{!-- 単語制限付き抜粋 --}}
{{excerpt words="50"}}

{{!-- 読了時間 --}}
{{reading_time}}

{{!-- レスポンシブサイズ付き画像 --}}
{{img_url feature_image size="l"}}

{{!-- 日付フォーマット --}}
{{date format="MMMM D, YYYY"}}

条件付きヘルパー

{{#is "home"}}
  {{!-- ホームページコンテンツ --}}
{{/is}}

{{#is "post"}}
  {{!-- 単一ポストコンテンツ --}}
{{/is}}

{{#has tag="featured"}}
  <span class="featured-badge">Featured</span>
{{/has}}

{{#if @member}}
  <p>Welcome, {{@member.name}}!</p>
{{/if}}

ループヘルパー

{{#foreach posts}}
  {{!-- ループ変数にアクセス --}}
  {{#if @first}}<div class="first-post">{{/if}}
  {{> post-card}}
  {{#if @first}}</div>{{/if}}
{{/foreach}}

{{!-- 特定のタグを持つポストを取得 --}}
{{#get "posts" filter="tag:featured" limit="3"}}
  {{#foreach posts}}
    {{> post-card}}
  {{/foreach}}
{{/get}}

Tailwind CSS インテグレーション

セットアップ

// tailwind.config.js
module.exports = {
  content: ['./**/*.hbs'],
  theme: {
    extend: {
      colors: {
        ghost: {
          accent: 'var(--ghost-accent-color)',
        },
      },
    },
  },
};

Ghost アクセントカラーの使用

:root {
  --ghost-accent-color: {{@site.accent_color}};
}

.accent-bg {
  background-color: var(--ghost-accent-color);
}

Alpine.js インテグレーション

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle Menu</button>

  <nav x-show="open" x-transition>
    {{navigation}}
  </nav>
</div>

メンバーシップインテグレーション

{{#if @member}}
  {{#if @member.paid}}
    {{!-- プレミアムコンテンツ --}}
    {{content}}
  {{else}}
    {{!-- 無料メンバーコンテンツ --}}
    <p>Upgrade to access premium content</p>
  {{/if}}
{{else}}
  {{!-- 公開コンテンツ --}}
  <a href="#/portal/signup">Subscribe</a>
{{/if}}

SEO とパフォーマンス

メタタグ

<head>
  {{!-- Ghost は ghost_head を通じてメタを処理 --}}
  {{ghost_head}}

  {{!-- カスタム構造化データ --}}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Blog",
    "name": "{{@site.title}}",
    "url": "{{@site.url}}"
  }
  </script>
</head>

画像最適化

{{!-- レスポンシブ画像 --}}
<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: 600px) 300px, (max-width: 1000px) 600px, 1000px"
  src="{{img_url feature_image size="m"}}"
  alt="{{title}}"
  loading="lazy"
>

package.json 設定

{
  "name": "theme-name",
  "version": "1.0.0",
  "engines": {
    "ghost": ">=5.0.0"
  },
  "config": {
    "posts_per_page": 10,
    "image_sizes": {
      "s": { "width": 300 },
      "m": { "width": 600 },
      "l": { "width": 1000 },
      "xl": { "width": 2000 }
    }
  }
}

テスト

gscan を使用してテーマを検証する
異なる Ghost バージョンでテストする
レスポンシブ動作を確認する
メンバーシップ機能を検証する
様々なコンテンツタイプでテストする

ライセンス: Apache-2.0(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: mindrally
リポジトリ: mindrally/skills
ライセンス: Apache-2.0
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/mindrally/skills / ライセンス: Apache-2.0