واجهة إدارة Blazor

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

NuGet TablerForNet · latest

يوفر 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، NavMenu مبدئي، وحاويات صفحات بسيطة. TablerForNet يمكنه استبدال هذه العناصر، لكن قم بذلك بشكل منظم حتى لا تترك CSS مكررة أو مجموعات أيقونات مختلطة أو مكونات عنوان صفحة متضاربة.

01

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

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

02

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

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

03

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

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

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 يجده المترجم.