[ English | English (United Kingdom) | 中文 (简体, 中国) | Indonesia | русский | français | नेपाली | Deutsch | Esperanto | português (Brasil) | español | 한국어 (대한민국) ]

Themes (tema)

Pada rilis Kilo, styling untuk OpenStack Dashboard dapat diubah melalui penggunaan tema. Tema adalah direktori yang berisi file _variables.scss untuk mengganti kode warna yang digunakan di seluruh SCSS dan file _style.scss dengan gaya tambahan untuk dimuat setelah gaya dasbor dimuat.

Pada rilis Mitaka, Horizon dapat dikonfigurasi untuk dijalankan dengan beberapa tema yang tersedia pada waktu proses. Ini menggunakan cookie browser untuk memungkinkan pengguna untuk beralih di antara tema yang dikonfigurasi. Secara default, Horizon dikonfigurasi dengan dua tema standar yang tersedia: 'default' dan 'material'.

Untuk mengkonfigurasi atau mengubah tema yang tersedia, atur AVAILABLE_THEMES dalam local_settings.py ke daftar tupel, seperti `` ('name', 'label', 'path') ``

name

Kunci yang dengannya nilai tema disimpan dalam cookie

label

Label yang ditampilkan pada tombol tema di bawah User Menu

path

Lokasi direktori untuk tema. Path harus relatif terhadap direktori openstack_dashboard atau jalur absolut ke lokasi yang dapat diakses pada sistem file

Untuk menggunakan tema khusus, setel AVAILABLE_THEMES dalam local_settings.py ke daftar tema. Jika Anda ingin menjalankan dalam mode yang mirip dengan Horizon lama, atur AVAILABLE_THEMES dengan tupel tunggal, dan tombol tema tidak akan tersedia sama sekali melalui aplikasi untuk memungkinkan tema konfigurasi pengguna.

Misalnya, konfigurasi dengan beberapa tema

AVAILABLE_THEMES = [
    ('default', 'Default', 'themes/default'),
    ('material', 'Material', 'themes/material'),
]

Konfigurasi dengan satu tema

AVAILABLE_THEMES = [
    ('default', 'Default', 'themes/default'),
]

Variabel khusus Dasbor dan variabel Bootstrap dapat dikesampingkan. Untuk daftar lengkap variabel Dashboard SCSS yang dapat diubah, lihat file variabel di openstack_dashboard/static/dashboard/scss/_variables.scss.

Untuk membuat tema kustom, baik _variables.scss maupun `` _styles.scss`` diperlukan dan _variables.scss harus menyediakan semua variabel Bootstrap default.

Mewarisi dari Tema yang Ada

Tema khusus harus mengimplementasikan semua variabel Bootstrap yang diperlukan oleh Horizon di _variables.scss dan _styles.scss. Agar lebih mudah, Anda dapat mewarisi variabel yang diperlukan dalam tema default dan hanya menimpa variabel yang perlu Anda sesuaikan. Untuk mewarisi dari tema default, letakkan ini di tema Anda _variables.scss

@import "/themes/default/variables";

Setelah Anda membuat perubahan, Anda harus menghasilkan kembali file statis dengan:

python manage.py collectstatic

Secara default, semua tema yang dikonfigurasi oleh pengaturan AVAILABLE_THEMES dikumpulkan oleh horizon selama proses collectstatic. Secara default, tema dikumpulkan ke dalam direktori static/themes dinamis, tetapi lokasi ini dapat dikustomisasi melalui variabel local_settings.py: THEME_COLLECTION_DIR

Setelah dikumpulkan, setiap tema yang dikonfigurasi melalui AVAILABLE_THEMES tersedia untuk mewarisi dari dengan mengimpor variabel dan gaya dari direktori koleksi. Berikut ini adalah contoh mewarisi dari tema material

@import "/themes/material/variables";
@import "/themes/material/styles";

Semua tema harus dikonfigurasi dalam AVAILABLE_THEMES untuk mengizinkan pewarisan. Jika Anda ingin mewarisi dari sebuah tema, tetapi tidak menunjukkan tema itu sebagai opsi yang dapat dipilih dalam widget pemilih tema, maka cukup konfigurasikan SELECTABLE_THEMES untuk mengecualikan tema induk. SELECTABLE_THEMES ` harus berformat sama dengan AVAILABLE_THEMES. Ini default ke AVAILABLE_THEMES jika tidak diatur secara eksplisit.

Bootswatch

Horizon memaketkan file SCSS Bootswatch untuk digunakan dengan tema material. Karena itu, mudah menggunakan tema Bootswatch yang sudah ada sebagai basis. Hal ini karena fakta bahwa Bootswatch dimuat sebagai aset statis pihak ke-3, dan karena itu secara otomatis dikumpulkan ke direktori static di /horizon/lib/. Berikut ini adalah contoh cara mewarisi dari tema darkly Bootswatch

@import "/horizon/lib/bootswatch/darkly/variables";
@import "/horizon/lib/bootswatch/darkly/bootswatch";

Mengatur Direktori Tema Anda

Direktori tema khusus dapat diatur secara berbeda, tergantung pada tingkat kustomisasi yang diinginkan, karena dapat menyertakan file statis serta template Django. Ini dapat mencakup subdirektori khusus yang akan digunakan secara berbeda: static, templates dan img.

Folder static

Jika folder tema berisi sub-folder bernama static, maka sub folder itu akan digunakan sebagai ** static root of theme **. Ya, Horizon akan melihat di sub-folder untuk file _variables.scss dan _styles.scss. Isi folder ini juga akan disajikan di /static/custom.

Folder template

Jika folder tema berisi sub-folder templates, maka jalur ke sub-folder tersebut akan ditambahkan ke tuple TEMPLATE_DIRS untuk memungkinkan penyesuaian tema khusus.

Menggunakan Folder `` template``

Setiap template Django yang digunakan dalam Horizon dapat dikesampingkan melalui sebuah tema. Hal ini memungkinkan pengalaman pengguna yang sangat disesuaikan untuk berada dalam lingkup tema yang berbeda. Template apa pun yang diganti harus mematuhi struktur direktori yang sama yang diharapkan oleh template yang diperluas.

Sebagai contoh, jika Anda ingin menyesuaikan sidebar, Horizon mengharapkan template untuk tinggal di horizon/_sidebar.html. Anda perlu menduplikasi struktur direktori tersebut di bawah direktori template Anda, sehingga penggantian Anda akan ditayangkan { theme_path }/templates/horizon/_sidebar.html.

Folder img

Jika akar statis folder tema berisi direktori img, maka semua image yang menggunakan templatetag {% themable_asset%} dapat ditimpa.

Aset ini termasuk logo.svg, splash-logo.svg dan favicon.ico, namun menimpa aset SVG/GIF yang digunakan oleh Heat dalam folder dashboard/img saat ini tidak didukung.