MastdonでTopページと「このインスタンスについて」を改造する
Mastodonは、サイトの説明文*1という項目で、テキストを追加することはできますが、画像を入れ替えたり、記述の順序を変えることはできません。
デフォルトのままでは、何のMastodonかわかりにくいですので、次にやりたいのはTopページと「このインスタンスについて」の改造ですよね?
Topページをいじる
Topページは、app/views/about/show.html.haml に記述されている通りに表示されます。
hamlというのはRailsが実装しているhtmlのテンプレート形式で、PythonやMarkdownのような記述方式でhtmlが書けるというものです。詳しくはググってください。
次のリンクを見ながら読み進めてください。
mastodon/show.html.haml at master · tootsuite/mastodon · GitHub
「Mastodonとは?」
”Mastodonとは? Mastodonは自由でオープンソースな……”というMastodonの説明は、23行目
23: %p= t('about.about_mastodon').html_safe
で出力されますので、好きな位置に移動します。
「Mastdonの特徴」
”Mastdonの特徴”と続くチェックボックスがついたリストは43行目~73行目です。
43: %h3= t('about.features_headline') // "Mastdonの特徴" 44: 45: .features-list // このブロックがチェックボックスリスト . . . 73: = t 'about.features.api'
で出力されますので、好きな位置に移動します。
画像を変更する
画像の変更の仕方は2つあります。
- 画像を上書きしてしまう
- 画像のurlを変更する
です。
画像は、app/assets/imagesディレクトリ の中にありますので、対応する画像を置き換えることで入れ替えます。
置き換えをせずに入れ替えるには、hamlの画像urlを書き換えます。
対応するhamlは、26行目です。
26: .mascot= image_tag 'fluffy-elephant-friend.png'
'fluffy-elephant-friend.png'を追加した画像ファイル名に変更します。
また、画像を追加したい場合は、app/assets/imagesディレクトリに画像を追加し、image_tagを使って好きな場所に書きます。
サイトの説明文
サイトの説明文は、75行目~77行目です。
75: - unless @instance_presenter.site_description.blank? 76: %h3= t('about.description_headline', domain: site_hostname) 77: %p= @instance_presenter.site_description.html_safe
ログインのすぐ下など、すぐに見える位置に移動させるのが良いと思います。
ちなみに、自分はインスタンス説明は、hamlに直書きしてしまい。
buildをせずに反映させることができるため、この部分は「お知らせ」に使っています。
「このインスタンスについて」の改造
「このインスタンスについて」は、app/views/about/more.html.haml です。
表示とhamlをにらめっこすればわかると思いますので、詳しくは説明しません。
改造の反映
改造を反映するには、改めてbuildする必要がありますので、いったんdockerをstopし、buildしてから立ち上げ直します。
画像などassetを追加した場合は、アセットのprecompileも必要ですのでお忘れなく。
*1:admin権限を持つユーザーにのみ表示されます