https://github.com/assayyaad/links
صفحة الروابط الرئيسية
https://github.com/assayyaad/links
html-css-javascript link-in-bio links static-site website website-template
Last synced: 2 months ago
JSON representation
صفحة الروابط الرئيسية
- Host: GitHub
- URL: https://github.com/assayyaad/links
- Owner: Assayyaad
- License: other
- Created: 2024-05-06T09:59:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-20T03:11:25.000Z (10 months ago)
- Last Synced: 2025-09-20T05:32:43.915Z (10 months ago)
- Topics: html-css-javascript, link-in-bio, links, static-site, website, website-template
- Language: CSS
- Homepage: https://links.assayyaad.pro/
- Size: 1.29 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# الروابط - الصياد
[English](./README.en.md)
قالب ويب مجاني بسيط جداً لحفظ ومشاركة روابطك مثل Linktree أو Link-in-bio
## المميزات
- 😊 لا يتطلب تثبيت أو إعداد معقد؛ فقط استبدل الروابط/الأيقونات في ملفات JSON!
- 🌙 تصميم الوضع المظلم الجميل مع التصميم الحديث والرسوم المتحركة!
- 😍 الأيقونات مدعومة بواسطة [iconify](https://github.com/iconify/iconify)؛ اعثر على الكثير من الأيقونات المجانية لأي غرض تقريباً!
- 🔠 تصنيف الروابط بهيكل هرمي متداخل؛ نظم روابطك تحت فئات وفئات فرعية مختلفة!
- 🎨 تحسينات بصرية حديثة مع انتقالات سلسة، تأثيرات التمرير، وتصميم glass-morphism!
- 📱 تصميم متجاوب بالكامل يعمل بشكل مثالي على جميع الأجهزة!
## الاستخدام
الخطوة الأولى هي النقر على زر **استخدام هذا القالب** أعلى قائمة الملفات لإنشاء مستودع جديد
### تعديل روابط وسائل التواصل الاجتماعي
اذهب إلى ملف `data/social.json` وقم بتحرير روابط وسائل التواصل الاجتماعي:
```json
[
{
"name": "YouTube",
"url": "https://youtube.com/@yourusername",
"icon": "ri:youtube-fill"
},
{
"name": "GitHub",
"url": "https://github.com/yourusername",
"icon": "ri:github-fill"
}
]
```
#### تغيير الأيقونات ولونها
اذهب إلى [مجموعات أيقونات iconify](https://icon-sets.iconify.design/) وابحث عن الأيقونة التي تريدها. انسخ اسم الأيقونة الفريد والصقه في حقل `icon`. يمكنك أيضاً إضافة حقل `color` مخصص لتغيير لون الأيقونة:
```json
{
"name": "Instagram",
"url": "https://instagram.com/yourusername",
"icon": "ri:instagram-fill",
"color": "#E4405F"
}
```
### تعديل أزرار الروابط والفئات
يتم تكوين أزرار الروابط والفئات في ملف `data/links.json`. يدعم الهيكل الفئات المتداخلة لتنظيم أفضل:
#### رابط بسيط
```json
{
"name": "موقعي الإلكتروني",
"url": "https://example.com",
"icon": "ri:global-line"
}
```
#### رابط مع علامة
```json
{
"name": "مشروعي الجديد",
"url": "https://example.com",
"icon": "ri:rocket-line",
"tag": "جديد"
}
```
#### زر النسخ إلى الحافظة
```json
{
"name": "عنوان البريد الإلكتروني",
"text": "contact@example.com",
"icon": "ri:mail-line"
}
```
#### فئة مع عناصر متداخلة
```json
{
"category": "البرمجة",
"items": [
{
"category": "المشاريع",
"items": [
{
"name": "GitHub",
"url": "https://github.com/yourusername",
"icon": "ri:github-fill"
}
]
},
{
"name": "المحفظة",
"url": "https://yourportfolio.com",
"icon": "ri:briefcase-line"
}
]
}
```
### التخصيص
#### تغيير معلومات الموقع
قم بتحرير ملف `index.html` لتحديث:
- عنوان الصفحة ووصفات meta
- محتوى الرأس (الاسم، الوصف)
- روابط التذييل
#### تخصيص الألوان والتصميم
يتم تعريف الألوان الرئيسية في خصائص CSS المخصصة في `style.css`:
```css
body.dark {
--color-primary: #00d4aa; /* لون التمييز الأساسي */
--color-accent: #6366f1; /* لون التمييز الثانوي */
--bg-color: #0a0a0a; /* الخلفية الرئيسية */
--bg-secondary-color: #1a1a1a; /* خلفيات البطاقات */
}
```
#### لون الأيقونة الافتراضي
قم بتحرير `data/theme.json` لتغيير اللون الافتراضي لأيقونات وسائل التواصل الاجتماعي:
```json
{
"color": "#00E6E6"
}
```
## هيكل الملفات
```
├── index.html # ملف HTML الرئيسي
├── style.css # الأنماط والتصميم
├── assets/
│ └── logo.webp # شعار الموقع
├── data/
│ ├── theme.json # الإعدادات الافتراضية
│ ├── links.json # الروابط والفئات الرئيسية
│ └── social.json # روابط وسائل التواصل الاجتماعي
└── src/
├── func.js # الوظائف الأساسية
├── script.js # JavaScript الرئيسي
└── types.js # تعريفات الأنواع
```
## المميزات بالتفصيل
### الفئات الهرمية
يدعم القالب مستويات متعددة من الفئات المتداخلة مع مؤشرات بصرية:
- المستوى 1: `◀ الفئة ▶` (مغلق) / `▼ الفئة ▼` (مفتوح)
- المستوى 2: `◀◀ الفئة الفرعية ▶▶` (مغلق) / `▼▼ الفئة الفرعية ▼▼` (مفتوح)
- المستوى 3: `◀◀◀ الفئة الفرعية الثانوية ▶▶▶` (مغلق) / `▼▼▼ الفئة الفرعية الثانوية ▼▼▼` (مفتوح)
### عناصر التصميم الحديث
- رسوم متحركة سلسة لتحميل الصفحة مع تأثيرات fade-in متدرجة
- رسوم متحركة للتمرير مع تأثيرات الرفع على الأزرار والبطاقات
- شريط التنقل glass-morphism مع blur الخلفية
- زوايا مدورة وظلال حديثة في جميع أنحاء التصميم
- تصميم متجاوب يتكيف مع جميع أحجام الشاشات
### العناصر التفاعلية
- وظيفة النسخ إلى الحافظة للأزرار النصية
- انتقالات سلسة وحالات التمرير
- دعم التنقل بلوحة المفاتيح
- متوافق مع قارئات الشاشة مع تسميات ARIA المناسبة
## الترخيص
هذا المشروع منشور تحت [The Unlicense](https://unlicense.org/)، مما يجعله مجاني تماماً للاستخدام لأي غرض