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