Homer Dashboard Customize

Bir önceki kılavuzda docker üzerine homer kurulumu gerçekleştirmiştik. Bu kılavuzda ise, homer uygulaması üzerinde bir çok özelleştirme yapmaya çalışacağız. Sonuç olarak aşağıdaki gibi kendimize özel bir dashboard hazırlayacağız.

Konfigürasyon dosyası yaml formatı kullanmaktadır. Visual Studio Code vb. araçları kullanmanız rahatlık sağladığı gibi hata payınızı da azaltacaktır.

İşlemler config.yml dosyası üzerinden gerçekleştirilecektir.

iconlar https://fontawesome.com/v5/search sitesinden değiştirilecektir.

favicon için https://realfavicongenerator.net/ sitesi kullanılacaktır.

html renk kodları için https://htmlcolorcodes.com/ sitesi kullanılacaktır.

Daha fazla bilgi için bakınız:

https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md

Favicon Değişimi

Favicon, kısayol simgesi, website ikonu, sekme ikonu, URL ikonu, veya yer imi ikonu olarak da bilinir, bir veya daha fazla küçük simge içeren bir dosyadır. Varsayılan olarak homer favicon aşağıdaki gibidir. Favicon uygulama simgesi assets/icons dizinde bulunur ve istediğiniz herhangi bir görüntü ile değiştirilebilir. Sadece aynı isim ve boyut olması gerekmektedir.

Uygulamanız için bir svg veya png simgesi oluşturmanızı ve bunu kılavuz başında belirtilen Favicon Generator'da bir favicon paketi oluşturmak için kullanmanız önerilmektedir .En son aşamada site üzerinden indirdiğiniz zip dosyasındaki favicon-32x32 olan dosyasının ismini favicon.ico olarak değiştiriniz.

Artık tek yapmanız gereken, homer yapılandırma dizini içinde bulunan, icon dizinine favicon.ico dosyası atmak olacaktır.

Tarayıcıda gizli bir sayfa açıp favicon değişikliğini kontrol edelim.

Title ve Subtitle Düzenleme

Homer uygulaması açıldıktan sonra, aşağıdaki ok ile gösterilen başlık bilgilerini değiştirerek işlemlere başlayalım.

config.yml dosyasını açtıktan sonra, aşağıdaki görseldeki gibi tırnak içine istediğim başlık bilgilerini kayıt edip çıkıyorum.

Sayfayı yenilediğimiz zaman başlık bilgilerin güncellendiğini rahatlıkla görebiliriz.

Titli Logo Değişimi

Başlığın sol tarafında aşağıdaki görseldeki gibi homer logosu gözükmektedir.

Homer yapılandırma dizini içerisinde bulunan, tools dizini içine logonuzu atınız. Komut satırı ile dosya atmak zor oluyor ise, winscp vb. araç kullanabilirsiniz.

Logomuzu attıktan sonra, tekrar config.yml dosyamızı açalım ve logomuzun yolunu ve adını yazalım.

Title Icon Ekleme

Homer logo değişiminden sonra, yanına ek olarak istediğimiz bir icon ekleyebilmekteyiz. Kılavuzun başında belirtilen site üzerinden kendimize bir icon seçelim. İconu seçtikten sonra aşağıdaki görseldeki gibi kare içine alınan kısmı kopyalayalım.

Konfigürasyon dosyasını açtıktan sonra, icon kısmındaki yorum satırını “#” kaldıralım ve kopyaladığımız logoyu fas yazan kısmın yanına ekleyelim.

Dosyayı kayıt ettikten sonra, icon'un eklendiğini görebiliriz.

Title (Başlık) Gizleme

Başlık kısmını komple gizlemek için aşağıdaki header satırını false olarak değiştirmeniz yeterlidir.

Önce

Sonra

Footer (alt bilgi) gizleme

Sayfanın en altında aşağıdaki görseldeki gibi bilgi ekleyebilir veya kaldırabilirsiniz.

Varsayılan footer kısmına bir yorum satırı “#” ekleyip pasif hale getiriyorum. Sonrasında yeni bir satıra footer ekleyip aşağıdaki gibi false yazıyorum. Sayfayı yenilediğiniz zaman, footer kısmının gizlendiğini görebilirsiniz.

Message Kısmını Düzenleme

Homer sayfası açıldığı zaman, aşağıdaki gibi özel mesaj alanı gözükmektedir.

İlk olarak konfigürasyon dosyasında, message kısmına gelelim. Bu alanı istediğiniz gibi düzenleyebilir veya yorum satırı “#” ekleyerek kaldırabilirsiniz. İcon vb. ekleme işlemleri diğerleri ile aynı şekilde gerçekleşmektedir. Ben message kısmına yorum satırı “#” ekleyerek bu kısmı göstermek istemiyorum.

Sayfayı yeniledikten sonra, message kısmının kaybolduğunu görebilirsiniz.

Link Düzenlemek

Homer gösterge panelinde varsayılan olarak aşağıdaki gibi 2 tane link gelmektedir. Bunları düzenleyebilir ve daha fazlasını ekleyebilirsiniz.

Konfigürasyon dosyası içinde links kısmına gelelim. İlk olarak aşağıdaki satırların ne anlama geldiğini kısaca açıklayalım.

name = Homer ekranında linkin gözükeceği isim.
icon = Linkin icon resmi
url = Linke seçildiği zaman gidilecek url
target = Linke tıkladıktan sonra, belirlenen url yeni sayfa olarak açılmasını sağlar.

Şimdi Contribute yazan alanı google olarak değiştirmek istiyorum. Kılavuzun başında belirtilen site üzerinden kendimize bir icon seçelim. İconu seçtikten sonra aşağıdaki görseldeki gibi kare içine alınan kısmı kopyalayalım.

Konfigürasyon dosyasını açtıktan sonra, link kısmına gelelim. icon kısmına kopyaladığımız logoyu fas yazan kısmın yanına aşağıdaki gibi ekleyelim. Diğer kısımları ise yukarıda açıkladığımız gibi düzenleyebilirsiniz.

Sonuç olarak aşağıdaki gibi sonuç elde edeceksiniz.

Aşağıdaki görseldeki gibi, birden fazla link ekleyebilirsiniz. Sadece yaml formatına dikkat etmeniz yeterlidir. Geri kalan işlemler hep aynıdır.

Bu şekilde gösterge panelinizi daha kullanışlı hale getirebilirsiniz.

Services Düzenlemek

Son aşamada ise uygulamaları gösterge panelinde nasıl ekleyip düzenleyeceğimize bakalım. Varsayılan olarak aşağıdaki gibi bir ekran bizi karşılayacaktır.

Konfigürasyon dosyası içinde services kısmına gelelim. İlk olarak aşağıdaki satırların ne anlama geldiğini kısaca açıklayalım.

name = Tüm uygulamalar için başlık ismi
icon = Tüm uygulamalar için başlık icon
name = Uygulamanın adı
logo = Uygulama için özel icon
subtitle = Uygulamanın için genel kısa bir başlık
tag = Uygulamanın üzerine mouse ile gelindiği zaman yazacak olan etiket
keywords = Arama kısmında aradıklarını bulmak için yazılan kelimeler.
url = Uygulamaya tıklanıldığı zaman açılacak olan URL adresi
target = Linke tıkladıktan sonra, belirlenen url yeni sayfa olarak açılmasını sağlar.

Şimdi bir tanesini düzenleyelim. Tüm uygulamalar için ana başlığın kurumsal olarak adlandırılmasını ve ilk uygulama olarak e-devleti eklemeye karar verdim. Ana başlık iconu için, kılavuzun başında belirtilen site üzerinden kendimize bir icon seçelim. İconu seçtikten sonra aşağıdaki görseldeki gibi kare içine alınan kısmı kopyalayalım.

Konfigürasyon dosyasını açtıktan sonra, services kısmına gelelim. icon kısmına kopyaladığımız logoyu fas yazan kısmın yanına aşağıdaki gibi ekleyelim. Diğer kısımları ise yukarıda açıkladığımız gibi düzenleyebilirsiniz.

Sayfayı yenileyelim ve değişikleri inceleyelim. Aşağıdaki görseldeki gibi, ana başlık logo ve diğer tüm değişiklerinin başarılı bir şekilde gerçekleştiğini görebilirsiniz.

Arama kısmına eklediğimiz keywords (anahtar kelime) yazıldığı zaman uygulamanın basit bir şekilde bulunduğunu görebiliriz.

Buradaki örnek üzerinden gidersek, Kurumsal olarak belirlediğimiz Ana başlığın altında birden fazla uygulama belirlemek için aynı işlemleri alt alta aşağıdaki görseldeki gibi gerçekleştirmeniz yeterlidir.

Bu şekilde aşağıya doğru uygulamalarınızı ekleyebilirsiniz.

Kurumsal gibi birden çok ana başlık ve uygulama eklemek için yine aynı işlemleri yapıp düzenlemeniz yeterlidir. Örneğin:

Sonuç olarak aşağıdaki gibi bir panele ulaşacaksınız.

Thema Değişimi

Homer varsayılan olarak açık ve koyu bir tema kullanılır.

Bu renkler üzerinde değişiklik gerçekleştirmeden önce github üzerinden aşağıdaki farklı bir tema'da göz atmakta fayda var.

https://github.com/WalkxCode/Homer-Theme

Şimdi varsayılan tema üzerinde değişiklik gerçekleştirelim. İlk olarak, birincil alan için, kılavuz başında belirtile site üzerinden istediğiniz renk seçimini gerçekleştiriniz. Renk seçtikten sonra hex değerini kopyalayın.