5.4 KiB
freeCodeCamp.org の開発者ニュースのテーマに貢献する方法
開発者ニュースは /news
サイトとも呼ばれ、Ghost によって提供されます。 サイトのルックアンドフィールにカスタムテーマを使用しています。 テーマのソースコードは https://github.com/freeCodeCamp/news-theme です。
テーマ
Ghostは、テーマに Handlebars と呼ばれる単純なテンプレート言語を使用します。 /news
で使用されるテーマは、デフォルトの casper テーマ に基づいています。
デフォルトのテーマには多くのコメントがあるので、コードやコメントを読むだけで何が起こっているのかを簡単に把握できます。 どのように動作するかを理解したら、 テーマ API ドキュメント で、Handlebars ヘルパーとテンプレートの詳細をお読みください。
主なファイルは次のとおりです。
default.hbs
- メインテンプレートファイルindex.hbs
- ホームページに使用post.hbs
- 個々の投稿に使用page.hbs
- 個々のページに使用tag.hbs
- タグアーカイブに使用author.hbs
- 著者アーカイブに使用
1つの巧妙なトリックは、テンプレートファイルにページのスラグを追加するだけで、カスタムのワンオフテンプレートを作成することもできることです。 例:
page-about.hbs
-/about/
ページのカスタムテンプレートtag-news.hbs
-/tag/news/
アーカイブのカスタムテンプレートauthor-ali.hbs
-/author/ali/
アーカイブのカスタムテンプレート
開発
-
ゴーストをローカルにインストールします。
npm install -g ghost-cli@latest mkdir ghost-local-site cd ghost-local-site
ghost install local ghost start
注: freeCodeCampは現在、バージョン
2.9.0
を使用しているため、それ以降のバージョンであることを確認してください。ghost-local-site
ディレクトリからghost
コマンドを実行します。 インターフェースに慣れていない場合は、Ghost 公式ドキュメント の追加指示に従ってください。 -
テーマディレクトリにあるリポジトリをフォークしてクローンします (
YOUR_USERNAME
を GitHub ユーザー名に置き換えてください)。cd content/themes/ git clone https://github.com/YOUR_USERNAME/news-theme.git
-
前提条件がすべて揃っていることを確認します。
テーマのスタイルは Gulp/PostCSS を使用してコンパイルされ、将来の CSS 仕様をポリフィルします。 Node.js が必要です。 Node.js のバージョンが
ghost
と互換性があることを確認してください。 -
依存関係をインストールしてテーマを開発します。
npm ci npm run develop
-
これで
/assets/css/
ファイルを編集できるようになりました。これは/assets/built/
に自動的にコンパイルされます。 -
開発サイトにアクセスします。
a. アドレスバーに
http://localhost:2368/ghost/
を入力します。 ページに表示されたセットアップを続行します (ghost の初回実行時)。b. (セットアップ時に一度だけ) テーマが利用可能であることを確認するために、別の端末で Ghost を再起動します。
cd ghost-local-site ghost restart
c. (セットアップ時に一度だけ) これが完了したら、
http://localhost:2368/ghost/#/settings/design
に行き、一番下までスクロールします。freecodecamp-news-theme
をクリックしてアクティブ化します。 -
最終コードを Zip してプルリクエストを作成します。
zip
Gulp タスクは、テーマファイルをdist/<theme-name>.zip
にパッケージ化し、本番サイトにアップロードできるようにします。PR を行う場合は、コードをコミットして PR を送信する前に、以下のスクリプトを実行していることを確認してください。
npm run zip
その他の参照とリソース
PostCSS 機能の使用
- Autoprefixer - あらゆる種類のブラウザのプレフィックスも書く必要がありません。すべてのブラウザにおいて、最新の2つのメジャーバージョンをサポートして自動的に行われます。
- 変数 - シンプルな純粋な CSS 変数
- カラー関数
SVG アイコン
このテーマは、Handlebars パーシャルを介して組み込まれたインライン SVG アイコンを使用しています。 すべてのアイコンは /partials/icons
内にあります。 アイコンを使用するには、関連ファイルの名前を含めます。例えば、 SVGアイコンを /partials/icons/rss.hbs
に含めるには、{{> "icons/rss"}}
を使用します。
独自の SVG アイコンを同じ方法で追加できます。