टेबलरफॉरनेट: टेबलर पर आधारित ब्लेज़र के लिए एक एसईओ - ऑप्टिमाइज़्ड फ़्रेमवर्क

TablerForNet के साथ अपने ब्लेज़र के विकास को बढ़ाएं। यह अत्याधुनिक ढांचा एसईओ क्षमताओं के साथ उत्तरदायी डिजाइन को एकीकृत करता है, डेवलपर्स को वेब एप्लिकेशन बनाने में सक्षम बनाता है जो न केवल उत्कृष्ट उपयोगकर्ता अनुभव प्रदान करते हैं बल्कि मजबूत खोज इंजन दृश्यता भी प्राप्त करते हैं।

TablerForNet इंस्टॉल करने के लिए चरण - दर - चरण मार्गदर्शिका

गाइड में एक नए Blazor Server .NET 7 प्रोजेक्ट पर इंस्टॉलेशन दिखाया गया है। कृपया निम्नलिखित चरणों का पालन करें:

• चरण 1: 'TablerForNet' NuGet पैकेज इंस्टॉल करें।
• चरण 2: आवश्यक 'उपयोगिताओं' को शामिल करें और Program.cs फ़ाइल में TablerForNet सेवा को पंजीकृत करें।
• चरण 3: _imports.razor फ़ाइल में आवश्यक 'usings' को एकीकृत करें।
• चरण 4: पेजटाइटल टैग को संशोधित करें।
• चरण 5: _Host.cshtml फ़ाइल में 'tablerForNet' CSS और JS फ़ाइलें जोड़ें।
• चरण 6: बूटस्ट्रैप और संबंधित परिसंपत्तियों को हटा दें।
• चरण 7: NavMenu.razor को उसी के अनुसार अपडेट करें।
• चरण 8: MainLayout.razor को परिष्कृत करें।
• चरण 9: इंडेक्स, काउंटर और फ़ेचडेटा पेज एडजस्ट करें।

चरण 1: न्यूगेट पैकेज इंस्टॉलेशन

Nuget.org पर दिए गए दिशानिर्देशों के अनुसार आगे बढ़ें।

चरण 2: TablerForNet सेवा रजिस्टर करें

using TablerForNet;
 builder.Services.AddTablerForNet();

चरण 3: 'यूज़िंग' को शामिल करें

@using TablerForNet;
 @using TablerForNet.Components
 @using TablerForNet.Icons
 @using TablerForNet.Flags

चरण 4: पेजटाइटल टैग का टकराव

TablerForNet के PageTitle टैग और Microsoft के PageTitle टैग के बीच एक नामकरण टकराव है। यह सलाह दी जाती है कि या तो पूर्व को हटा दें या स्पष्ट रूप से इसका नाम बदलकर 'TablerForNet.Components.PageTitle' कर दें। निम्नलिखित फ़ाइलों में संशोधन सुनिश्चित करें:

• App.razor
• Index.razor
• Counter.razor
• Fetchdata.razor
• MainLayout.razor

चरण 5: सीएसएस और जेएस को एकीकृत करें

<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

चरण 6: बूटस्ट्रैप हटाएं

सीएसएस निर्देशिका के भीतर बूटस्ट्रैप फ़ोल्डर को मिटा दें। इसके अतिरिक्त, 'ओपन - आइकन' फ़ोल्डर को हटा दें क्योंकि आप टैबलर आइकन का उपयोग करेंगे। _Host.cshtml फ़ाइल में संबद्ध लिंक को हटा दें जैसा कि नीचे दिखाया गया है:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

चरण 7: नवमेनु ओवरहाल

<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">

	<NavbarMenu>
		<NavbarMenuItem Href="@($"/")" Text="Home">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Home" Filled="true" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/counter")" Text="Counter">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" Filled="true" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Database" Filled="true" />
			</MenuItemIcon>
		</NavbarMenuItem>
	</NavbarMenu>
</Navbar>

@code {
	private bool collapseNavMenu = true;

	private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

	private void ToggleNavMenu()
	{
		collapseNavMenu = !collapseNavMenu;
	}
}

चरण 8: मुख्य लेआउट फ़ाइन - ट्यूनिंग

@inherits LayoutComponentBase

<NavMenu />

<div class="page">
	<div class="container-fluid mt-2">
		@Body
		<br />
	</div>
</div>

चरण 9: अन्य पेज एडजस्ट करें

जैसा कि नीचे देखा गया है, सूचकांक पृष्ठ में एक 'div' टैग जोड़ा गया है। इसे अन्य सभी पेज पर दोहराने की सलाह दी जाती है।

@page "/"

<div class="container-md">
	<h1>Hello, world!</h1>

	Welcome to your new app.

	<SurveyPrompt Title="How is Blazor working for you?" />
</div>

बधाई हो! आपने अपने Blazor प्रोजेक्ट में TablerForNet को सफलतापूर्वक एकीकृत कर लिया है। इन चरणों को पूरा करने के साथ, आप इस शक्तिशाली ढांचे की पूरी क्षमता का उपयोग करने के अपने रास्ते पर हैं। बढ़ी हुई क्षमताओं को अपनाएं और उत्कृष्ट वेब एप्लिकेशन बनाएं। यदि आप किसी भी चुनौती का सामना करते हैं, तो याद रखें कि हर बाधा विकास का अवसर है। हैप्पी कोडिंग!