Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sulmar/sages-blazor-portfolio
Jak stworzyć stronę webową w Blazor 7.0
https://github.com/sulmar/sages-blazor-portfolio
blazor-webassembly
Last synced: 1 day ago
JSON representation
Jak stworzyć stronę webową w Blazor 7.0
- Host: GitHub
- URL: https://github.com/sulmar/sages-blazor-portfolio
- Owner: sulmar
- Created: 2023-04-26T16:35:55.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-05-03T08:45:40.000Z (over 1 year ago)
- Last Synced: 2024-11-08T21:13:22.733Z (about 2 months ago)
- Topics: blazor-webassembly
- Language: HTML
- Homepage: https://live.sages.pl/jak-stworzyc-strone-webowa-w-blazor-7
- Size: 1.19 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blazor
## Introduction
Welcome! This is the portfolio repository created in Blazor Web Assembly.
To take this website you'll need the following.
1. The [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0).
2. Clone this git repository from GitHub.
## Get started
Clone the Git Repository
``` bash
git clone https://github.com/sages-blazor-portfolio
```
## Setup
``` bash
cd src
dotnet run
```
## Mockup
## Tutorial
1. Utwórz projekt **MyPortfolio** na podstawie szablonu **Blazor Web Assembly App Empty**
2. Skopiuj pliki z folderu _Assets_ do folderu _wwwroot_
3. Dodaj folder _Models_ i dodaj klasy modelu:
- AboutMe.cs
- Project.cs
- SiteProperties.cs
- SocialIcons.cs
4. Utwórz folder **Shared** i dodaj w nim komponenty **Razor Component**:
- Header.razor
- Footer.razor
6. Umieść komponenty w MainLayout.razor
```html
@Body
```
7. Dodaj do pliku _Imports.razor globalne przestrzenie
```html
@using MyPortfolio.Shared
@using MyPortfolio.Models
@using MyPortfolio.Components
```
8. Dodaj do Header
```html
```
9. Utwórz folder Components w a nim:
- Home.razor
- About.razor
- Portfolio.razor
- Contact.razor
10. Umieść na stronie **Pages/Index.razor**
```html
Portfolio
```
11. W _wwwroot/index.html_ odkomentuj linię:
``` html
```
aby włączyć mechanizm **CSS isolation**
12. Dodaj style
- Home.razor.css
- About.razor.css
- Contact.razor.css
- Portfolio.razor.css