واجهة إدارة Blazor

أنماط TablerForNet Blazor لشاشات الإدارة العملية

NuGet TablerForNet · latest
آخر تحديث 29‏‏/1‏‏/2026

يوفر TablerForNet لفرق Blazor واجهة إدارة مبنية على Tabler مع تنقل جاهز، بطاقات، نماذج، أيقونات، وعناصر تخطيط. استخدمه إذا كان التطبيق أداة تشغيلية، وليس صفحة تسويقية تحتاج لهوية بصرية خاصة.

يركز هذا الدليل على خطوات التنفيذ: تثبيت حزمة NuGet، تسجيل الخدمة، استبدال أصول Bootstrap الافتراضية، ترحيل عناصر التخطيط، وضبط SEO عبر البيانات الوصفية والتوجيه بدلًا من مكونات الواجهة.

بدء التثبيت تحقق من الملاءمة افتح مركز Blazor

إجابة سريعة

TablerForNet مفيد إذا كان تطبيق Blazor يعمل كأداة خلفية

مكتبة مكونات Tabler تساعد عندما يحتاج المستخدمون إلى تنقل مكثف، بطاقات حالة، نماذج، جداول، فلاتر، وشاشات لوحة تحكم متكررة. فائدتها أقل إذا كانت الصفحة محتوى تحريري، صفحة هبوط، أو تجربة علامة تجارية تحتاج تصميم خاص.

تخطيطات الإدارة نماذج قابلة لإعادة الاستخدام أيقونات Tabler ترحيل Bootstrap

التحقق من الملاءمة

استخدم إطار واجهة الإدارة فقط إذا كانت شاشات الأدوات المتكررة هي التحدي

توفر المكتبة الوقت عندما تتشارك الشاشات في التنقل، أنماط النماذج، التباعد، الأيقونات، ومكونات الحالة. لكنها قد تبطئك إذا احتاجت كل صفحة لهوية أو تفاعل خاص.

ملائم جيدًا

أدوات داخلية ولوحات تحكم

استخدم TablerForNet إذا كان المستخدمون يعملون في جداول، فلاتر، صفحات تفاصيل، شاشات إعدادات، ومناطق إدارة معقدة.

ملائم جيدًا

شاشات CRUD متناسقة

نمط المكونات الموحد مفيد عندما تكرر الصفحات النماذج، الجداول، البطاقات، الشارات، الحالات الفارغة، وإجراءات الأدوات.

مبالغ فيه

صفحات محتوى عامة صغيرة

غالبًا لا تحتاج مقالات، صفحات هبوط، توثيق، أو صفحات تعتمد على تصميم العلامة التجارية لإطار إدارة كامل.

انتبه

خلط أنماط Bootstrap وTabler

لا تترك أساسين بصريين نشطين إلا إذا كان لديك خطة ترحيل واضحة. تعارضات CSS الصغيرة قد تستهلك وقتًا في التصحيح لاحقًا.

فهرس المحتويات

التثبيت

ثبت الحزمة، سجل الخدمات، ثم استبدل الأصول الافتراضية بشكل مدروس

قم بالتكامل على دفعات صغيرة أو نقاط تحقق. TablerForNet يغير بنية التطبيق، لذا من الأسهل مراجعة كل جزء عندما يتم فصل إعداد الحزمة، الاستيرادات، الأصول الثابتة، التنقل، وتعديلات الهيكل.

إضافة حزمة NuGet

استخدم مدير الحزم أو .NET CLI، ثم نفذ dotnet restore قبل تعديل التخطيط.

Shellالطرفية
dotnet add package TablerForNet

تسجيل TablerForNet

سجل الخدمة بجانب بقية إعداد Blazor لتسهيل التحديثات لاحقًا.

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

استيراد المساحات الاسمية

أضف فقط المساحات الاسمية التي تحتاجها فعليًا لتجنب تعارضات الأنواع مع مكتبات أخرى.

Razor_Imports.razor
@using TablerForNet
@using TablerForNet.Components
@using TablerForNet.Flags

تحميل أصول TablerForNet

أضف حزمة CSS وJavaScript مرة واحدة في مستند المضيف أو مسار التخطيط المستخدم في التطبيق.

HTMLمستند المضيف
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

الترحيل

استبدل إعدادات Bootstrap الافتراضية فقط بعد تحديد التخطيط المسؤول عن الصفحة

قالب Blazor الافتراضي يستخدم Bootstrap، قائمة تنقل مبدئية، وحاويات صفحات بسيطة. TablerForNet يمكنه استبدال هذه العناصر، لكن قم بذلك بشكل مقصود لتجنب تكرار CSS أو تعارض الأيقونات أو مكوني عنوان صفحة.

01

احصر البنية الحالية

احصر ملفات القالب المسؤولة عن التنقل، حاويات الصفحات، الأيقونات، مراجع Bootstrap، واستخدام عنوان الصفحة.

02

استبدل طبقة واحدة في كل مرة

ابدأ بالأصول والاستيرادات، ثم رحّل NavMenu، MainLayout، وصفحة بسيطة قبل التعامل مع الشاشات المعقدة.

03

حل تعارضات أسماء المكونات

إذا كان PageTitle أو مكون آخر موجودًا في مساحتين اسميتين، حدد المقصود صراحة وقلل قائمة الاستخدام.

04

راجع الاستجابة

افتح التطبيق بعرض سطح المكتب والجوال قبل إنهاء الترحيل. غالبًا ما تظهر مشاكل التنقل الإداري أولًا على الشاشات الصغيرة.

إزالة مراجع Bootstrap الافتراضية

اعتمد أساس بصري واحد. إبقاء CSS القالب قد يسبب أخطاء تخطيط لاحقًا.

HTMLإزالة من مستند المضيف
<!-- Remove these default template references when TablerForNet owns the visual layout. -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />

حل تعارض PageTitle

إذا كان هناك مكون PageTitle في مكتبتين، حدد المقصود أو أزل الاستخدام المتعارض.

Razorمرجع مكون صريح
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

بنية التطبيق

انقل التنقل وواجهة الصفحة إلى التخطيط قبل تحسين الشاشات

بنية منظمة للتطبيق تجعل العمل على الصفحات لاحقًا أكثر وضوحًا: نموذج تنقل واحد، حاوية محتوى واحدة، نظام أيقونات موحد، ومكان ثابت لإجراءات الصفحة. ابدأ بذلك قبل تنسيق الصفحات الفردية.

مثال على التنقل

RazorNavMenu.razor
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">
    <NavbarMenu>
        <NavbarMenuItem Href="/" Text="Home">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Home" />
            </MenuItemIcon>
        </NavbarMenuItem>

        <NavbarMenuItem Href="/reports" Text="Reports">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Chart_bar" />
            </MenuItemIcon>
        </NavbarMenuItem>
    </NavbarMenu>
</Navbar>

مثال على التخطيط

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

<div class="page">
    <main class="container-xl py-3">
        @Body
    </main>
</div>

واقع SEO

TablerForNet يعزز اتساق الواجهة، وليس بيانات البحث الوصفية بحد ذاته

واجهة إدارة منظمة تحسن سهولة الاستخدام والوصول والجودة المتوقعة. لكنها لا تنشئ عناوين URL قانونية أو روابط hreflang أو معاينات Open Graph أو JSON-LD. ضع هذه القواعد في البيانات الوصفية وكود التوجيه.

تنفيذ ذو صلة

اربط إطار الواجهة مع بيانات الصفحة وروابط اللغة-المنطقة في الروابط.

استخدم هذه الأدلة إذا كان تطبيق TablerForNet يحتوي على صفحات عامة أو مسارات مترجمة أو محتوى مقالات أو توثيق يمكن فهرسته بجانب شاشات الإدارة.

دليل البيانات الوصفية دليل روابط اللغة-المنطقة

التحقق

افحص التطبيق المعروض وليس فقط تثبيت الحزمة

بعد تجميع الصفحة، راجع الواجهة في المتصفح. التنقل، نقاط الاستجابة، حالات التركيز، CSS المكرر، وإخراج البيانات الوصفية تظهر بصريًا أوضح من مخرجات مدير الحزم.

  • شغّل التطبيق وافتح صفحة تستخدم التخطيط الجديد.
  • تأكد أن أصول Bootstrap وTablerForNet لا تتعارض.
  • تحقق من التنقل، حالات التركيز، الأيقونات، ونقاط الاستجابة.
  • افحص العنوان، H1، الوصف التعريفي، عنوان URL القانوني، وإخراج JSON-LD في الصفحات العامة.
  • اجعل مراجعة إعداد الحزمة، ترحيل التخطيط، وتغييرات SEO منفصلة.

الأسئلة الشائعة

ماذا يضيف TablerForNet لتطبيق Blazor؟

يوفر مكونات واجهة Blazor مبنية على Tabler لتطبيقات الإدارة: التنقل، البطاقات، أنماط النماذج، الأيقونات، عناصر التخطيط، وهيكل مناسب للوحة التحكم.

هل يجب إزالة Bootstrap عند استخدام TablerForNet؟

عادةً نعم. TablerForNet مبني على نظام Tabler البصري، وترك أصول Bootstrap الافتراضية قد يسبب تكرار التباعد، الأزرار، الأيقونات، وقواعد التخطيط.

هل TablerForNet خيار جيد لكل موقع Blazor؟

لا. يناسب شاشات الإدارة، الأدوات الداخلية، لوحات التحكم، والتطبيقات المعتمدة على البيانات. للصفحات التحريرية أو صفحات الهبوط أو المواقع العامة ذات العلامة التجارية القوية، قد يكون التصميم المخصص الأصغر أنسب.

هل يحل TablerForNet مشكلة SEO في Blazor؟

لا. يمكن أن يساعد في بناء واجهة أنظف، لكن SEO يعتمد على المحتوى المعروض، العناوين، الأوصاف، عناوين URL القانونية، روابط hreflang، بيانات Open Graph، وJSON-LD المتوافقة مع الصفحة.

هل يمكنني استخدام TablerForNet مع Blazor WebAssembly؟

نعم، لكن نفس قواعد الواجهة الأمامية تنطبق: اجعل الحزم معقولة، حمّل الأصول مرة واحدة، ووفّر المحتوى العام كـ HTML معروض إذا كان SEO مهمًا.

كيف أتعامل مع تعارضات PageTitle؟

استخدم المساحة الاسمية صراحة للمكون المطلوب أو أزل الاستخدام المتعارض. هذا أوضح من الاعتماد على أول PageTitle يجده المترجم.