的 mastodon fork 增加了自定义 LOGO 支持,使用说明如下:

步骤一:制作自己的 LOGO

制作 LOGO,并放入 ./design/你的自定义字段名/ 下,相关设计素材和参考都在里面,尽量保证长宽比与原版一致。app icon 建议参考 Apple 的桌面图标设计规范:1024x1024px的图标,设置100px的margin,179.649px的圆角,padding可自己决定。mastodon 原版的正方形图标添加为桌面快捷方式后会非常的丑陋!

处理两个 logo-symbol 的时候注意将代码调整为图中的结构,填充了currentColor 的 path 会跟随背景色深浅生成黑色和白色两组图标,参考 /about 页面顶部的 LOGO。

步骤二:生成静态文件

复制 ./lib/tasks/branding_forest.rake 到同一文件夹下,把新文件的文件名和文件中的 _forest 字段替换成你的你的自定义字段名。

在系统上安装依赖:

# macOS
brew install imagemagick librsvg

# ubuntu
apt install imagemagick librsvg

运行:RAILS_ENV=development rails branding_forest:generate_forest 字段替换成你的自定义字段名。

步骤三:修改 mastodon 配置文件

参考:github.com/mashirozx/mastodon/

Follow

Steps to customize Mastodon Logo on Mastodon Fork: mashirozx/mastodon

Step 1: Design and create your Logo

Puts your logo svg files into ./design/YOUR_CUSTOM_NAMESPACE/. Please follow the examples in ./design/original and ./design/forest directories, and make sure the width-height ratio is the same as the original version.

When creating the two logo-symbol icons, please make sure the code structure is the same as picture below. The paths filled with currentColor will finally generate into two sets of icons for light and dark mode (eg. the top icon on /about page).

Step 2: Generate static assets

Copy ./lib/tasks/branding_forest.rake to ./lib/tasks/branding_your_custom_namespace.rake, and modify the new file, replace all _forest into _your_custom_namespace.

Install dependencies in your OS:

# macOS
brew install imagemagick librsvg

# ubuntu
apt install imagemagick librsvg

Run command (replace _your_custom_namespace to yours):

RAILS_ENV=production rails branding_your_custom_namespace:generate
# you may need `bundle exec` if rails cannot been found
RAILS_ENV=production bundle exec rails branding_your_custom_namespace:generate

Step 3: update Mastodon configuration

See: github.com/mashirozx/mastodon/

· Edited · · Web · 0 · 1 · 2
Sign in to participate in the conversation
小森林

每个人都有属于自己的一片森林,也许我们从来不曾走过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。愿这里,成为属于你的小森林。