TablerForNet: Tablo Tablosuna Dayalı Blazor için SEO için Optimize Edilmiş Bir Çerçeve

TablerForNet ile Blazor geliştirmenizi geliştirin. Bu son teknoloji ürünü çerçeve, duyarlı tasarımı SEO yetenekleriyle bütünleştirerek geliştiricilerin yalnızca olağanüstü kullanıcı deneyimleri sunmakla kalmayıp aynı zamanda güçlü arama motoru görünürlüğü sağlayan web uygulamaları oluşturmalarını sağlar.

TablerForNet'i Kurmak için Adım Adım Kılavuz

Kılavuz, yeni bir Blazor Server .NET 7 projesindeki kurulumu gösterir. Lütfen aşağıdaki adımlara uyun:

• Adım 1: 'TablerForNet' NuGet paketini yükleyin.
• Adım 2: Gerekli 'kullanımları' dahil edin ve TablerForNet hizmetini Program.cs dosyasına kaydedin.
• Adım 3: Gerekli 'kullanımları' _imports.razor dosyasına entegre edin.
• Adım 4: PageTitle Etiketini değiştirin.
• Adım 5: _Host.cshtml dosyasına 'tablerForNet' CSS ve JS dosyalarını ekleyin.
• Adım 6: Bootstrap ve ilgili varlıkları kaldırın.
• Adım 7: NavMenu.razor'u buna göre güncelleyin.
• Adım 8: MainLayout.razor'u geliştirin.
• Adım 9: Dizin, Sayaç ve FetchData sayfalarını ayarlayın.

Adım 1: NuGet Paket Kurulumu

Nuget.org adresindeki yönergelere göre devam edin.

2. Adım: TablerForNet Hizmetini Kaydedin

using TablerForNet;
 builder.Services.AddTablerForNet();

3. Adım: 'Kullanımları' dahil edin

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

4. Adım: PageTitle Etiket Çakışması

TablerForNet'in PageTitle etiketi ile Microsoft'un PageTitle etiketi arasında bir adlandırma çakışması var. İlkini ortadan kaldırmanız veya açıkça 'TablerForNet.Components.PageTitle' olarak yeniden adlandırmanız önerilir. Aşağıdaki dosyalarda değişiklik yapıldığından emin olun:

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

5. Adım: CSS ve JS'yi entegre edin

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

Adım 6: Önyüklemeyi Sil

CSS dizinindeki Bootstrap klasörünü silin. Ayrıca, tabler simgelerini kullanacağınız için 'açık ikonik' klasörünü kaldırın. _Host.cshtml dosyasındaki ilişkili bağlantıyı aşağıda gösterildiği gibi kaldırın:

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

Adım 7: NavMenu Revizyonu

<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. Adım: Ana Düzen İnce Ayarı

@inherits LayoutComponentBase

<NavMenu />

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

9. Adım: Diğer Sayfaları Ayarlayın

Aşağıda görüldüğü gibi, dizin sayfasına bir 'div' etiketi eklenmiştir. Bunu diğer tüm sayfalarda çoğaltmanız önerilir.

@page "/"

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

	Welcome to your new app.

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

Tebrikler! TablerForNet'i Blazor projenize başarıyla entegre ettiniz. Bu adımlar tamamlandığında, bu güçlü çerçevenin tüm potansiyelinden yararlanma yolunda ilerliyorsunuz. Gelişmiş yetenekleri benimseyin ve olağanüstü web uygulamaları oluşturun. Herhangi bir zorlukla karşılaşırsanız, her engelin büyüme için bir fırsat olduğunu unutmayın. Mutlu kodlamalar!