وعليكم السلام ورحمة الله وبركاته،
حياك الله أخي عبدالله، وبارك الله في مشروعكم.
يمكنكم تنفيذ الربط دون الحاجة إلى التحكم في التمرير داخل موقع الموسوعة، أو إنشاء رابط مستقل لكل صفحة من صفحات المصحف.
لدينا رابط تضمين يمكن فتحه داخل iframe لأي آية بهذا الشكل:
https://quranpedia.net/embed?surah=1&ayah=1
يكفي تمرير رقم السورة ورقم الآية، وستظهر تجربة مطابقة للخيارات المرتبطة بالآية في الموسوعة القرآنية، مثل التفسير والتدبر وغريب القرآن وغيرها.
أما صفحات المصحف، فيمكنكم الحصول عليها بإحدى طريقتين:
- تحميل ملفات المصحف بصيغة SVG من مكتبة
quran-svg على GitHub.
- استخدام واجهة صفحات المصحف مباشرة:
https://quranpedia.net/api/page/hafs/1
الرقم الأخير هو رقم الصفحة.
كما يمكن تمرير رقم السورة لإظهار المقطع الخاص بسورة محددة فقط داخل الصفحة.
مثال لعرض سورة الناس فقط من الصفحة رقم 604:
https://quranpedia.net/api/page/hafs/604?surah=114
ولعرض الصفحة كاملة:
https://quranpedia.net/api/page/hafs/604
داخل كل ملف SVG توجد طبقة شفافة فوق كل آية، وتحمل رقم السورة ورقم الآية، مثل:
<path
class="ayahPolygon"
fill-opacity="0"
id="verse-51"
number="002044"
ayah="44"
surah="2"
d="M 0.0 298.31 L 155.22 298.31 L 155.22 333.35 L 0.0 333.35 Z"
></path>
يمكنكم التقاط حدث النقر على العناصر التي تحمل الصنف ayahPolygon، ثم قراءة قيمتي surah وayah وفتح نافذة منبثقة تحتوي على رابط الـ iframe المناسب.
ستكون آلية العمل كالتالي:
- تعرضون صفحة المصحف داخل التطبيق.
- ينقر المستخدم على أي آية.
- يقرأ التطبيق رقم السورة والآية من ملف SVG.
- تفتح نافذة منبثقة داخل التطبيق.
- يتم تحميل محتوى الموسوعة من خلال رابط التضمين الخاص بالآية.
وهذا مثال مبسط باستخدام React:
import { useEffect, useRef, useState } from "react";
export default function QuranPage({ page = 1, surah }) {
const containerRef = useRef(null);
const [selectedVerse, setSelectedVerse] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadPage = async () => {
try {
setLoading(true);
const query = surah ? `?surah=${surah}` : "";
const url = `https://quranpedia.net/api/page/hafs/${page}${query}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to load Quran page");
}
const svg = await response.text();
if (containerRef.current) {
containerRef.current.innerHTML = svg;
}
} catch (error) {
console.error(error);
if (containerRef.current) {
containerRef.current.innerHTML =
'<p class="p-4 text-red-600">تعذر تحميل الصفحة.</p>';
}
} finally {
setLoading(false);
}
};
loadPage();
}, [page, surah]);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
const handleVerseClick = (event) => {
const verseElement = event.target.closest(".ayahPolygon");
if (!verseElement) return;
const selectedSurah = verseElement.getAttribute("surah");
const selectedAyah = verseElement.getAttribute("ayah");
if (!selectedSurah || !selectedAyah) return;
setSelectedVerse({
surah: selectedSurah,
ayah: selectedAyah,
});
};
container.addEventListener("click", handleVerseClick);
return () => {
container.removeEventListener("click", handleVerseClick);
};
}, [loading]);
return (
<div className="relative">
{loading && (
<div className="p-6 text-center text-gray-500">
جارٍ تحميل صفحة المصحف...
</div>
)}
<div
ref={containerRef}
className="mx-auto w-full max-w-3xl cursor-pointer [&_svg]:h-auto [&_svg]:w-full"
/>
{selectedVerse && (
<VerseModal
surah={selectedVerse.surah}
ayah={selectedVerse.ayah}
onClose={() => setSelectedVerse(null)}
/>
)}
</div>
);
}
function VerseModal({ surah, ayah, onClose }) {
const embedUrl =
`https://quranpedia.net/embed?surah=${surah}&ayah=${ayah}`;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
onClick={onClose}
>
<div
className="h-[90vh] w-full max-w-5xl overflow-hidden rounded-2xl bg-white"
onClick={(event) => event.stopPropagation()}
>
<div className="flex items-center justify-between border-b px-4 py-3">
<div className="font-semibold">
السورة {surah} — الآية {ayah}
</div>
<button
type="button"
onClick={onClose}
className="rounded-lg px-3 py-1.5 hover:bg-gray-100"
>
إغلاق
</button>
</div>
<iframe
src={embedUrl}
title={`Quranpedia Surah ${surah} Ayah ${ayah}`}
className="h-[calc(90vh-57px)] w-full border-0"
loading="lazy"
allowFullScreen
/>
</div>
</div>
);
}
يمكن استخدام المكوّن لعرض الصفحة كاملة بهذا الشكل:
<QuranPage page={604} />
أو لإظهار الجزء الخاص بسورة الناس فقط:
<QuranPage page={604} surah={114} />
أما المقصود بعبارة:
abdullah (at) qaws . net
فهو ايميلي الشخصي، وقد كُتب بهذه الطريقة لتقليل الرسائل المزعجة.
بإمكانكم مراسلتي عليه إذا واجهتكم أي مشكلة أثناء التنفيذ، وبإذن الله نساعدكم بما نستطيع.
