LinkForest
لینک‌فارست
یک قالب HTML برای جمع‌آوری همه لینک‌های شما در یک جا
🌲لینک‌فارست چیست؟
همانطور که می‌دانید، اکثر شبکه‌های اجتماعی تنها از 1 لینک در بایوی پروفایل پشتیبانی می‌کنند. به این جهت لینک‌فارست برای افزایش کارایی آن لینک توسعه داده شده است. همچنین این قالب کاملا رایگان، متن‌باز و قابل شخصی‌سازی است.
📥دانلود
👀ویژگی‌ها
⚙چگونه استفاده کنیم؟
تنها چیزی که نیاز دارید، یک سرویس وب هاستینگ است (رایگان یا پولی بودن آن اهمیتی ندارد). بعد با شخصی‌سازی و آپلود قالب شخصی‌سازی شده روی هاست خود، برای بایوی پروفایل قابل استفاده خواهد بود.
تعدادی سرویس رایگان وب هاستینگ:
🎨چگونه شخصی‌سازی کنیم؟
برای شخصی‌سازی قالب، به کمی دانش برنامه‌نویسی فرانت-اِند نیاز دارید. سپس با پیروی از دستورات زیر به راحتی می‌توانید قالب را شخصی‌سازی کنید. اگر کمی حرفه‌ای‌تر هستید، می‌توانید به راحتی فایل‌های CSS و JS را نیز ویرایش کنید.
همچنین شما باید همه عبارت‌های در فایل index.html که با $ آغاز می‌شوند را جایگزین کنید. برای مثال اگر من در فایل index.html عبارتِ $Username را مشاهده کنم، آن را با عبارت @hamid0740 جایگزین خواهم کرد.
green paypal idpay
blue
purple
pink
red
orange aparat
yellow
cream clubhouse
brown
gray github stack-overflow crowdin
whatsapp
telegram
instagram
discord
twitter
facebook
tiktok
reddit
pinterest
youtube
twitch
custom-color
شما همچنین می‌توانید از 1 رنگ شخصی استفاده کنید. برای اینکار، عبارتِ $CustomColor را در فایلِ index.html جستجو کرده و آن را با رنگ شخصی دلخواه خود جایگزین کنید (برای مثال: #fe28a9).
شما باید عبارت‌های $SectionName، $Color، $Link، $FontAwesomeIcon و $LinkText را با عبارت مناسب جایگزین کنید. همچنین می‌توانید محل آیکون را به چپ انتقال داده و یا از هر دو طرف برای 2 آیکون استفاده کنید.
<p class="section-name">$SectionName</p>
<a class="link $Color" href="$Link" target="_blank">
<i class="link-icon-l"></i> <!-- To make text align center, keep both 'link-icon-l' and 'link-icon-r' elements. EVEN HAVING NO ICON OR IMAGE -->
<p class="link-text">$LinkText</p>
<i class="$FontAwesomeIcon link-icon-r"></i> <!-- Example of Font Awesome icon: 'fab fa-github' -->
</a>
برای استفاده از رنگِ شخصی برای لینک، کافی است عبارتِ $CustomColor با رنگ مد نظرتان جایگزین کنید. همچنین باید از کلاسِ custom-color برای اِلِمِنتِ لینک استفاده کنید.
<a style="--custom-color: $CustomColor;" class="link custom-color" href="$Link" target="_blank">
. . .
</a>
به جای کلاسِ link-icon-image-r می‌توانید از کلاسِ link-icon-image-l استفاده کنید تا آیکون-تصویر را به سمت چپ انتقال دهید. همچنین باید عبارت $IconImageLink را با لینک آیکون-تصویر جایگزین کنید.
<i class="link-icon-image-r" style="background-image: url('$IconImageLink')"></i>
به جای کلاسِ link-image-r می‌توانید از کلاسِ link-image-l استفاده کنید تا تصویرِ لینک را به سمت چپ انتقال دهید. همچنین باید عبارت $IconImageLink را با لینک تصویر جایگزین کنید.
<i class="link-image-r" style="background-image: url('$ImageLink')"></i>
👥چند نفر...؟
چند نفر تا بحال صفحه‌ی یک کاربر لینک‌فارست را مشاهده کرده‌اند؟
📝چگونه مشارکت کنیم؟
از هر گونه مشارکتی استقبال می‌شود. فقط کافی است یک Pull request ایجاد کرده و کدهای خود را در آنجا ثبت کنید. در صورت موافقت، کدهای شما اضافه خواهند شد. همچنین اگر ایده‌ای دارید که می‌تواند این قالب را بهتر کند، در بخش Discussions آن را ثبت کنید. در صورت مشاهده هرگونه باگ یا مشکل در قالب، آن را در بخش Issues ثبت کنید تا در اسرع وقت حل شود.
🧰اجزای سوم شخص
این‌ها اجزای سوم شخصی هستند که در لینک‌فارست استفاده شده‌اند:
💳حمایت مالی
