Plume のテーマは CSS ファイル(及びフォントや背景画像など、CSS と共に読み込むことのできるその他必須でないリソース)なので、テーマを書くために知っている必要があるのは CSS を知っていることだけです。
基本テンプレート
開始地点としていいのは公式の基本テーマです。これは SCSS で書かれており、Plume のリポジトリーに含まれています。
それらのファイルをコピーし(AGPL-3.0 ライセンス下にあります)、 _variables.scss
内の変数を変えことから始めることができます。 このテーマを土台として使う場合は、SASS/SCSS を変換して、管理者が自分のインスタンスにインストールできる単一の CSS ファイルにする必要があります。
Stylish と言ったブラウザー拡張をインストールして CSS その中にコピーすることで、自分のテーマをテストすることができます。
時折、(レイアウトの変更や新しい CSS クラスの追加などの場合)Plume の更新によってテーマが壊れてしまうかも知れません。 Plume の開発に追従してテーマを機能させ続けたいのであれば、Gitea上のプロジェクト(GitHub)をフォローすることで、テーマに影響する変更があった際に通知を受けることができます。 テーマを壊すようなプルリクエストやコミットは、通常そうだとはっきり特定できます。
詳細説明
Plume には二種類のテーマがあります。
- インスタンステーマは、管理者がインスタンスのデフォルトテーマとして定義することができ、インスタンス上のユーザーは、望むなら自分個人のデフォルトとして選択することができます。
- また、ブログテーマは、ブログの執筆者がブログをカスタマイズするのに使用できます。 これはそのブログ上のページにのみ適用され、インスタンスレベルのテーマを上書きします。
テーマをビルドする際の唯一の違いは、(NAME
を実際のテーマ名として)ブログテーマは static/css/blog-NAME
ディレクトリー内に置くべきで、一方インスタンステーマは static/css/NAME
内に置くべきだということです。
このディレクトリー内で唯一必要なファイルは theme.css
です。
Plume はこのファイル一つだけを読み込みます。そのため、このファイルが(インスタンスで使用するフォントなど)その他全てを読み込むのを担当します。
以上です。このルールに従っていれば、テーマでやりたいことは何をやっても構いません。
ダークテーマの検出
ブログ用のテーマを書く時に、全体のインスタンステーマがダークかそうでないかが分かると、ブログのテーマをそれに合わせて適応させることができ、便利かも知れません。 そのため、規約として、ダークテーマは名前にいつも「dark」という言葉を入れるべきです。 そうすると、Plume は HTML ドキュメントの CSS クラスに現在のテーマ名を追加するので、ユーザーがどちらの種類のテーマを使っているか検出することができます。
例えば、以下のコードは、blockquote タグで囲まれたテキストを、ライトテーマでは青、ダークテーマではオレンジで表示するように指定しています。
article blockquote {
color: blue;
}
html[class*=dark] article blockquote {
color: orange;
}
Plume はあなたのテーマをコンパイルできます
もし Plume をソースからビルドしているなら、assets/themes/NAME
内のあらゆるテーマが static/css/NAME
内にコンパイルされます。
SCSS か SASS ファイルは、ファイル名がアンダースコアで始まっていない限り CSS に変換されます。
各 SCSS/SASS ファイルはファイルを共有することができる一方で、同じディレクトリー内にあっても異なるテーマとして扱われます(例えばテーマの色違いを作るのに有用です)。
他のファイルは出力ディレクトリーにそのままコピーされるだけです。