چۆنیەتی گۆڕینی ئایکۆنی faviconی ماڵپەڕ بۆ وێنەیەکی جووڵاوی GIF
پێشتر لە ساڵەکانی ڕابردوو و لە بابەتێکدا باسی چۆنیەتی گۆڕینی ئایکۆنی faviconی ماڵپەڕمان کردبوو. ئەودەم دەمانتوانی ڕاستەوخۆ ئایکۆنێکی gifی جووڵاو دابنێین بەڵام ئێستا وێبگەڕەکانی پێشکەوتوو ڕێگە بەم کارە نادەن و تەنیا فرێمی یەکەمی gifـەکە دەخوێننەوە. جا بۆیە ڕێگایەکی تر بۆ چارەسەری ئەم کێشەیە دەناسێنین ئەویش کەڵکوەرگرتن لە دوو کتێبخانەی سووکی جاڤاسکریپتە.
پێشنیازەکان
سەرەتا دەبێت هەردوو کتێبخانەی خوارەوە لە پەڕەکەتدا باربکەیت. ڕیزبەندی بارکردن گرنگە و دەبێت omggif پێش gif-favicon بێت.<script src="https://cdn.jsdelivr.net/npm/omggif/omggif.js"></script> <script src="https://cdn.jsdelivr.net/npm/gif-favicon/dist/gif-favicon.min.js"></script>
تێبینییەکی گرنگ
بەهۆی سنووردارکردنی ئەمنیی وێبگەڕەکان (CORS)، دەبێت فایلەکەی GIF لە هەمان دامێنی (Domain) ماڵپەڕەکەت باربکرێت، یان ئەو ڕاژەکارەی فایلەکەی تێدایە، هێدەرەکانی (Headers) CORSـی چالاک کردبێت. نیگەران مەبن، تا کۆتایی لەگەڵمان بن تا ڕێگەی ساناتر ببینن.
جێبەجێکردن
دوای بارکردنی تەواوی کتێبخانەکان، تەنها ئەوەندە ماوە نموونەیەک لە GifFavicon دروست بکەیت و شوێنی فایلەکەی GIFـی خۆتی پێ بدەیت:<script> const favicon = new GifFavicon({ gifPath: "/favicon.gif", // شوێنی فایلی GIF لە ماڵپەڕەکەتدا fps: 0 // 0 به واتای کەڵکوەرگرتن لە کاتبەندیی سەرەکی فرێمەکانی GIFـە }); </script>
شێوازی کارکردن
ئەم کتێبخانەیە لە تێکەڵکردنی دوو تەکنەلۆژیا کەڵک وەردەگرێت:omggif.js: کتێبخانەیەکی سووک و قەبارە نزمە بۆ شیکردنەوەی (Decode) فایلەکانی GIF. ئەم کتێبخانەیە هەر فرێمێکی GIF دەکات بە پیکسێڵی خاو (RGBA).
gif-favicon.min.js: فرێمە شیکراوەکان لەسەر canvasـێکی شاراوە جێبەجێ (Render) دەکات و دواتر هەر فرێمێک دەگۆڕێت بۆ image/png. لە کۆتاییدا، ناونیشانی hrefـی تاگی <link rel="icon"> لە پەڕەکەدا بەم ناونیشانە PNGـانە بە شێوەیەکی بەردەوام دەگۆڕێت بۆ ئەوەی جووڵە (Animation) دروست بکات.
تێبینییە تەواوکەرەکان
پشتیوانیکردن لە وێبگەڕەکان
ئەم ڕێگایە لە وێبگەڕە مۆدێرنەکاندا کە پشتیوانی لە canvas و URL دەکەن، کار دەکات (نیگەران مەبن، هەموو وێبگەڕە نوێیەکان پشتیوانیی دەکەن).
پاراستنی سەرچاوەکان: کتێبخانەکە بە شێوەیەکی خۆکاری جووڵەکە ڕادەگرێت کاتێک تابـی (Tab) وێبگەڕەکە شاراوە (Hidden) دەبێت، بۆ ئەوەی ڕێگری بکات لە بەکارهێنانی بێهوودەی سەرچاوەکان (ئەمەش بە بژاردەی pauseOnHidden دەتوانرێت دەستکاری بکرێت).
پاراستنی سەرچاوەکان: کتێبخانەکە بە شێوەیەکی خۆکاری جووڵەکە ڕادەگرێت کاتێک تابـی (Tab) وێبگەڕەکە شاراوە (Hidden) دەبێت، بۆ ئەوەی ڕێگری بکات لە بەکارهێنانی بێهوودەی سەرچاوەکان (ئەمەش بە بژاردەی pauseOnHidden دەتوانرێت دەستکاری بکرێت).
زۆر بە کورتی (گرنگ)
ئەگەر حەزت لێیەتی، هەردوو کتێبخانەکە لەو بەستەرانەی خوارەوە دابەزێنە:ئەوجار لە شوێنێکی دیاریکراوی ماڵپەڕەکەتدا دایانبنێ و کۆدەکان لە نێوان تاگی <head></head> و دوای تاگەکانی <meta> بەو شێوەیە دابنێ:
<script src="files/lib/gif-favicon/omggif.js"></script>
<script src="files/lib/gif-favicon/gif-favicon.min.js"></script>
<script>const favicon=new GifFavicon({ gifPath:"files/img/fav.gif" })</script>
دوو دێڕی سەرتر، بانگهێشتکردنی کتێبخانەکانەیە، دێڕی سێهەم ناساندنی فایلەکەی gifـە. سەرنج بدە کە لە هەرسێک دێڕدا، شوێنەکان و ناوی فایلەکەی خۆت دابنێی.
ئەمە زۆر ساکارتر بوو، وانییە؟! (تەنیا سێ دێڕ).
سەرکەوتوو بیت!
دوو دێڕی سەرتر، بانگهێشتکردنی کتێبخانەکانەیە، دێڕی سێهەم ناساندنی فایلەکەی gifـە. سەرنج بدە کە لە هەرسێک دێڕدا، شوێنەکان و ناوی فایلەکەی خۆت دابنێی.
ئەمە زۆر ساکارتر بوو، وانییە؟! (تەنیا سێ دێڕ).
سەرکەوتوو بیت!
بارکردنی سەرنجەکان...