Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to customize the style of themes? #9

Open
Tracked by #21
MurakamiShinyu opened this issue Jul 27, 2020 · 3 comments
Open
Tracked by #21

How to customize the style of themes? #9

MurakamiShinyu opened this issue Jul 27, 2020 · 3 comments
Labels
discussion

Comments

@MurakamiShinyu
Copy link
Member

Vivliostyle公式テーマなど公開されているテーマを使って本を作る場合、ユーザーはそのスタイルをカスタマイズできる必要があります。

（公開テーマをどのようにしてカスタマイズして使うかは、vivliostyle-cli などテーマを使う側の実装の問題かもしれませんが、vivliostyle/themes の共通のメカニズムとして検討が必要ではないかと思うので、vivliostyle/themes のissueにしました。）

一般に、既存のスタイルシートをベースにしたスタイルのカスタマイズ方法として次のものがあります：

  • 既存のスタイルシート（CSSファイル）をコピーして、それを修正する。
  • 既存のスタイルシートがSassなどプリプロセッサで生成されている場合は、そのソースファイル（scssファイルなど）を修正して、それらを使ってCSSファイルを生成しなおす。（その場合、ソースファイルでは、よくカスタマイズするプロパティの値などが変数で設定されて "variables.scss" ファイルなど１箇所にまとめられていたりする。）
  • 既存のスタイルシート（CSSファイル）をそのまま使うが、それに加えて追加のスタイルシートを指定する（HTML内で <link rel="stylesheet"> を既存のスタイルシートと追加するスタイルシート用にそれぞれ指定）。追加のスタイルシートでは、CSSカスケーディング規則によって、既存のスタイルシートでのスタイルを新しいスタイルで上書きする。
  • 既存のスタイルシート（CSSファイル）を新しいスタイルシートの先頭で @import ルールによって取り込む（HTML内の <link rel="stylesheet"> には新しいスタイルシートのみ指定する）。CSSカスケーディング規則によって、既存のスタイルシートでのスタイルを新しいスタイルで上書きする。

以上のどの方法も、現状の vivliostyle/themes と vivliostyle-cli (v3.0.0-pre.2)ではうまくできないようです。

改善案：

  • ビルドのたびにテーマのCSSをnpmパッケージから取得するのではなく、テーマが最初にローカルにコピーされたら、ユーザーがそのCSSを修正してカスタマイズしたうえで本のビルドやプレビューをできるようにする。
  • テーマのパッケージにSass (scss)などスタイルシートのソースファイルが含まれている場合（その方法の定義も必要）、ソースファイルがコピーされて、ユーザーはそのscssファイル類を修正してカスタマイズしたうえで本のビルドやプレビューをできるようにする。
  • 現状の vivliostyle.config.js で、ルートの theme のほかに、entry配列の項目ごとにも theme を指定できるが、本全体で共通の theme を使いながら、entry項目によって追加のスタイルシートを指定できるようにはなっていない。これをできるようにする。
@MurakamiShinyu MurakamiShinyu mentioned this issue Jul 27, 2020
Merged
@MurakamiShinyu MurakamiShinyu mentioned this issue Aug 7, 2020
Closed
28 tasks
@akabekobeko
Copy link
Member

akabekobeko commented Aug 8, 2020 •
edited
Loading

現状の vivliostyle.config.js で、ルートの theme のほかに

について。これは Frontmatter に指定するのがよいと思います。Frontmatter はページ単位のメタデータなので例えば

style: 'akabeko'

のように指定 (プロパティー名は議論の余地あり) すると

<body class="akabeko">
...contents
</body>

のように class や id として出力されて、それを元に CSS や SCSS 側で外観を分岐します。この方法は

  • Markdown として特別な構文を追加する必要がない
  • 影響範囲がページ単位となり局所的
  • 正当な CSS としての定義で外観を分岐できる

というメリットがあります。

@MurakamiShinyu
Copy link
Member Author

テーマのCSSのscssソースをカスタマイズに活かすことができるように、各themeのpackage.jsonの "files" にscssも含めるとよさそうですね。現在は次のものだけ

themes/packages/@vivliostyle/theme-techbook/package.json

Lines 18 to 21 in 5fe766e

"files": [
"*.css",
"*.css.map"
],

それからテーマのパッケージに入っている example もここに含めるとよさそうです。そうすると create-book でこのexampleもインストールできるようになり、それを参考に原稿作成したり、スタイルのカスタマイズのためにも有用でしょう。

@yamasy1549
Copy link
Member

それからテーマのパッケージに入っている example もここに含めるとよさそうです。そうすると create-book でこのexampleもインストールできるようになり、それを参考に原稿作成したり、スタイルのカスタマイズのためにも有用でしょう。

いいですね。create-vivliostyle-theme のテンプレート修正します。

@yamasy1549 yamasy1549 mentioned this issue Aug 28, 2020
Merged
@yamasy1549 yamasy1549 mentioned this issue Sep 4, 2020
Open
@yamasy1549 yamasy1549 mentioned this issue Dec 5, 2020
Open
11 tasks
@MurakamiShinyu MurakamiShinyu mentioned this issue Sep 28, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discussion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@akabekobeko @MurakamiShinyu @yamasy1549