توجيه الثقافة في Blazor: روابط ثقافية صديقة للسيو في Blazor
في هذا الدرس الخاص بـ Blazor، ستطبق روابط ثقافية صديقة للسيو بحيث تستخدم كل صفحة روابط نظيفة وقابلة للفهرسة مثل ghostlyinc.com/en-us/page-name. ستتعلم كيفية تبديل الثقافات بأمان، والحفاظ على تنقل متسق، وتحسين اكتشاف المحتوى متعدد اللغات. لنبدأ خطوة بخطوة.
إذا كنت تريد الأساسيات كاملة أولاً، اقرأ ما هو Blazor؟ ثم عد لتطبيق توجيه الثقافة لتحسين السيو.

فهرس المحتويات
ما ستبنيه في هذا الدرس حول الروابط الثقافية الصديقة للسيو
يرشدك هذا الدليل خلال التنفيذ الكامل:
- تغيير ثقافة التطبيق: تحديث الثقافة بشكل متسق في تطبيق Blazor الخاص بك.
- استخدم نظام روابط منظم: قدم الصفحات تحت /en-us/your-page لكل ثقافة.
- دعم تغييرات الثقافة عبر المتصفح: اسمح للمستخدمين بتبديل الثقافات حسب تفضيلاتهم.
- تعامل مع روابط الثقافة غير الصالحة: أعد التوجيه أو استخدم بديلًا عند عدم دعم الثقافة.
- حافظ على روابط صديقة للسيو ومخصصة للثقافة: اجعل كل صفحة مترجمة سهلة الزحف.
- حسّن الفهرسة وتجربة المستخدم: عزز الظهور مع الحفاظ على تجربة متوقعة.
للمزيد عن البيانات الوصفية وأساسيات السيو المنظمة في Blazor، راجع مكون بيانات SEO لـ Blazor.
خطوة بخطوة: تنفيذ روابط ثقافية صديقة للسيو في Blazor
لننتقل الآن إلى الكود الذي يضيف توجيهًا معتمدًا على الثقافة لتطبيق Blazor الخاص بك. اتبع كل خطوة لتحصل على روابط ثقافية متسقة عبر الصفحات الحالية والمستقبلية.
بعد ذلك، أضف متحكم الثقافة. يطبق الثقافة المختارة ويعيد توجيه المستخدم إلى الرابط الصحيح الخاص بالثقافة.
في هذه المرحلة لديك ICultureService و CultureController. الآن قم بالتحديث Program.cs مع هذه التغييرات:
- سجّل ICultureService.
- حدد الثقافة الافتراضية كأول ثقافة مدعومة في القائمة.
- قم بتكوين الثقافات المدعومة لترجمة المحتوى.
- قم بتكوين الثقافات المدعومة لواجهة المستخدم.
- طبق خيارات الترجمة المكونة على مسار الطلبات.
- ربط طلبات HTTP الواردة بإجراءات المتحكم المناسبة.
قم بالتحديث الآن _host.cshtml مع هذه التغييرات:
- قم بحقن ICultureService.
- تعيين خاصية lang في HTML.
- تعيين ملف تعريف الارتباط للثقافة في وسم body.
قم بالتحديث الآن App.razor مع هذه التغييرات:
- قم بحقن ICultureService.
- حقن مدير التنقل.
- أضف قسم الكود الموضح أدناه.
@inject NavigationManager Navigation
@inject ICultureService cultureService
@code {
/// <summary>
/// This section handles redirection to a new culture when the user changes the culture in the browser link.
/// If you don't wish to support this, you can delete this code.
/// By default, it redirects to the current culture if no culture is specified in the link.
/// </summary>
/// <param name="firstRender">Indicates whether this is the initial rendering of the page</param>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
// Check if the link contains a specified culture
var culture = cultureService.GetCultureFromLink(Navigation.Uri, Navigation.BaseUri);
// If the culture string is null or empty, it's the page's first load. In this case, set the culture from the browser settings.
if (string.IsNullOrEmpty(culture)) culture = CultureInfo.CurrentCulture.Name.ToLowerInvariant();
// Check if the culture is supported by the application
if (!cultureService.IsCultureSupported(culture))
{
// Try to set the language contained in the culture
culture = cultureService.HandleUnsupportedCulture(culture);
}
var cultureInfo = new CultureInfo(culture);
// If the current culture differs from the specified culture, set the new culture
if (!string.Equals(CultureInfo.CurrentCulture.Name, culture, StringComparison.OrdinalIgnoreCase))
{
cultureService.SetCulture(cultureInfo);
}
}
}
}
أنشئ مكونًا جديدًا لاختبار الثقافات المختلفة: ChangeCulture.razor
@using System.Globalization
@inject ICultureService cultureService
<button @onclick="() => SetCulture(Englisch)"> Englisch</button>
<button @onclick="() => SetCulture(Arabische)"> Arabische</button>
<button @onclick="() => SetCulture(France)"> France</button>
<button @onclick="() => SetCulture(Austria)"> Austria</button>
<button @onclick="() => SetCulture(Germany)"> Germany</button>
@code {
private string Englisch = "en-us";
private string Arabische = "ar-ae";
private string France = "fr-fr";
private string Austria = "de-at";
private string Germany = "de-de";
private void SetCulture(string culture)
{
cultureService.SetCulture(new CultureInfo(culture));
}
}
قم بالتحديث الآن MainLayout.razor مع هذه التغييرات:
- قم بحقن ICultureService.
- حقن مدير التنقل.
- أضف المكون قبل الإنشاء.
- أضف قسم الكود الموضح أدناه.
@inject NavigationManager navi
@inject ICultureService cultureService
<article class="content px-4">
<ChangeCulture/>
@Body
</article>
@code {
// Here we redirect to culture link, for example, from example.com to example.com/de-de/
protected override void OnAfterRender(bool firstRender)
{
// Only perform this logic on the first render
if (firstRender)
{
// Extract the relative path from the current URI by removing the base URI
var currentUri = navi.Uri.Replace(navi.BaseUri, ");
// Find the index of the first slash in the relative path
int firstSlashIndex = currentUri.IndexOf('/');
// Prepare the culture-specific URI
string uri;
if (firstSlashIndex >= 0)
{
// Extract the part of the relative path after the first slash
string result = currentUri.Substring(firstSlashIndex + 1);
// Construct the culture-specific URI
uri = "/" + cultureService.Culture + "/" + result;
}
else
{
// If no slash was found in the relative path, navigate to the root path for the current culture
uri = "/" + cultureService.Culture + "/";
}
// Navigate to the determined URI
navi.NavigateTo(uri, false, false);
}
// Call the base OnAfterRender method to ensure proper functioning of the component
base.OnAfterRender(firstRender);
}
}
تطبيق توجيه الثقافة على جميع الصفحات
الآن، مع تطبيق روابط ثقافية صديقة للسيو عبر جميع صفحات Blazor، أنشأت نهجًا متسقًا ينطبق على الصفحات الحالية والمستقبلية. عند إضافة مسارات جديدة، طبق نفس الخطوات للحفاظ على قابلية الزحف والتوقع لكل صفحة مترجمة.
- قم بحقن ICultureService.
- أنشئ معامل الثقافة.
- حدد معامل الثقافة في طريقة OnInitialized.
- أضف معامل الثقافة إلى وسم الصفحة.
الكود التالي يوضح التغييرات على الصفحة fetchdata.razor
بناء تطبيقات Blazor بثقة باستخدام أنماط عملية
نصيحة مني تعلمت الكثير هنا من خلال إرشادات فيديو عملية حول أساسيات Blazor، خيارات البنية، وتصميم المكونات القابلة للصيانة.
- مختبرات خطوة بخطوة لمكونات Razor، الحالة، وحقن التبعيات.
- إرشادات عملية حول الاستضافة، الأداء، وسير العمل للنشر.
- تقنيات واجهة مستخدم نظيفة تحافظ على قابلية صيانة كود Blazor الخاص بك.
لماذا روابط الثقافة الصديقة للسيو مهمة في Blazor
- حسّن إمكانية الاكتشاف: تساعد الروابط المعتمدة على الثقافة محركات البحث على فهم المحتوى الخاص بكل لغة وفهرسته بشكل صحيح.
- عزز ثقة المستخدم: يتعرف المستخدمون فورًا على /en-us/ أو /de-de/ مما يقلل الاحتكاك ويزيد التفاعل.
- حافظ على تنقل متسق: نمط رابط موحد عبر الموقع يمنع التنقل بلغات مختلطة.
- وسع المحتوى متعدد اللغات: يمكنك إضافة لغات جديدة دون إعادة تصميم المسارات أو تكرار الصفحات.
- اجعل موقعك مستقبليًا: تتبع الصفحات الجديدة تلقائيًا نفس قواعد توجيه الثقافة الصديقة للسيو.
- الوصول العالمي: تسهل الروابط الخاصة بالثقافة استهداف مناطق وتفضيلات لغوية مختلفة.
إذا كنت تخطط لنشر Blazor Server علنًا، فهذه ملاحظات الاستضافة قد تساعدك: استضافة Blazor Server على UpCloud.
الأسئلة المتكررة
إجابات على الأسئلة الشائعة حول روابط الثقافة وترجمة Blazor
لقد انتهينا. لأي صفحات مستقبلية، كرر خطوات المسار + معامل الثقافة. وعند إنشاء روابط في الكود، أدرج دائمًا جزء الثقافة لتجنب التنقل المعطل.