БообщСство RSS DEV

πŸ“ 7 шагов ΠΊ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Π² Filament

Настройка Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° вашСго прилоТСния Filament ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для создания цСлостного ΠΈ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Filament ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ имя прилоТСния Π² качСствС простого тСкстового Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°, Π½ΠΎ это ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚Ρ€Π°Π·ΠΈΡ‚ΡŒ Π²Π°ΡˆΡƒ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½ΡƒΡŽ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ. БущСствуСт Ρ‚Ρ€ΠΈ способа Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ: ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ тСкстовый Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π² Π²ΠΈΠ΄Π΅ изобраТСния ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ встроСнный SVG для максимального контроля. ИзмСнСниС тСкстового Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ тСкста, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π² вашСм Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ΅, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° `brandName()` Π² ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ вашСй ΠΏΠ°Π½Π΅Π»ΠΈ. Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚ тСкстовый Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π½ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ слова, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΡ‚ ΠΈΠΌΠ΅Π½ΠΈ своСго прилоТСния. ИспользованиС Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Π² Π²ΠΈΠ΄Π΅ изобраТСния позволяСт Π²Π°ΠΌ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π²Π°ΡˆΡƒ ΠΏΠΎΠ»Π½ΡƒΡŽ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½ΡƒΡŽ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Ρ†Π²Π΅Ρ‚Π° ΠΈ графичСскиС элСмСнты. Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° `brandLogo()` ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ URL-адрСса вашСго Ρ„Π°ΠΉΠ»Π° Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°. ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° изобраТСния для Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG, PNG ΠΈΠ»ΠΈ WebP. ИспользованиС встроСнного SVG для максимального контроля ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ряд прСимущСств, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, отсутствиС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… HTTP-запросов ΠΈ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ с Ρ‚Π΅ΠΌΠ½Ρ‹ΠΌ Ρ€Π΅ΠΆΠΈΠΌΠΎΠΌ. Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя использованиС ΠΌΠ΅Ρ‚ΠΎΠ΄Π° `brandLogo()` ΠΈ прСдоставлСниС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, которая Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ прСдставлСниС. Filament Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для случаСв, ΠΊΠΎΠ³Π΄Π° Π°ΠΊΡ‚ΠΈΠ²Π΅Π½ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ. Для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°, спСцифичного для Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄ `darkModeBrandLogo()`. ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° для Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΠΆΠΈΠΌΠ° ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ сохранСниС Ρ‚ΠΎΠΉ ΠΆΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ идСнтичности, Π½ΠΎ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ своСго Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° `brandLogoHeight()`. ΠŸΡ€ΠΈ установкС высоты Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, внСшний Π²ΠΈΠ΄ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… устройств ΠΈ сохранСниС ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… отступов Π²ΠΎΠΊΡ€ΡƒΠ³ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°. Π§Ρ‚ΠΎΠ±Ρ‹ максимально эффСктивно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Filament, слСдуйтС рСкомСндациям, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰Π΅Π³ΠΎ контраста, оптимизация Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ², тСстированиС Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах, ΡƒΡ‡Π΅Ρ‚ доступности ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ согласованного Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π°.
favicon
dev.to
πŸ“ 7 Steps to Professional Logo Integration in Filament
Create attached notes ...