テーマを作成する

インスタンスのテーマを作成したい人向けの情報

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 ファイルはファイルを共有することができる一方で、同じディレクトリー内にあっても異なるテーマとして扱われます(例えばテーマの色違いを作るのに有用です)。

他のファイルは出力ディレクトリーにそのままコピーされるだけです。