GitHub Pagesで自分のポートフォリオサイト作りたいなと思い立ちましたが
- markdownで作るのはちょっと味気ない
- html書くのめんどくさいし、ReactとかVueとかはまだ使ったことない
- css書くのめんどくさい
という壁がありました。ReactやVueなどのフレームワークは身につけたいところではありますが、とりあえずは手っ取り早く作りたかったのでBlazorとUIフレームワークの一つであるSkclusive-UIで作って見ました。
この記事はUIフレームワークについての記事になります。
環境
- VisualStudio for Mac 2022 preview
- dotnet6
Skclusive-UI
Github
- https://github.com/skclusive/Skclusive.Material.Component
- https://github.com/skclusive/Skclusive.Material.Layout
パーツだけ使いたいのであればComponentの方だけ使えばOKです（Button, MenuなどパーツごとにNugetパッケージになっているので部分的に利用することもできます）
今回は全部任せるつもりで、ComponentとLayoutの両方を使用しています。両方Ver.5.2.0です。
Docs
このdocsのソースを見ていれば大体できる気はします
_import.razor
docsのinstallation with nugetに書いてあることをすれば大丈夫ですが、Migrating to 5.2.0 from 2.0.1にあるように、@using Skclusive.Material.Scriptと@using Skclusive.Material.Themeを消しました。
それとは別で@using Skclusive.Material.Linkを追加しています。HyperLinkコンポーネント等を使うためです。
MainLayout.razor
VisualStudioで新規Blazorプロジェクトと共に作成されるMainLayout.razorは削除しています。（Skclusive.Material.Layoutで定義済みであるため）
App.razor
RouterLayoutをThemeProviderで囲います。Light,Darkプロパティは定義しなくてもOKです。定義しない場合はデフォルトのライトテーマ、ダークテーマが割当たります。
@using Skclusive.Material.Theme
<ThemeProvider
Light="@Light"
Dark="@Dark">
<RouterLayout Default="@typeof(AppLayout)"/>
</ThemeProvider>
@code{
public static ThemeValue Light = ThemeFactory.CreateTheme(new ThemeConfig
{
Palette = new PaletteConfig
{
Type = PaletteType.Light,
Primary = new PaletteColorConfig
{
Main = PaletteColors.Blue.X700
},
Secondary = new PaletteColorConfig
{
Main = PaletteColors.Pink.A400.Darken(0.1m)
},
Background = new PaletteBackground
{
Default = "#fff",
Custom = new Dictionary<string, string>
{
{ "level1", "#fff" },
{ "level2", PaletteColors.Grey.X100 },
{ "appbar-color", "var(--theme-palette-primary-contrast-text)" },
{ "appbar-background-color", "var(--theme-palette-primary-main)" },
},
}
}
});
public static ThemeValue Dark = ThemeFactory.CreateTheme(new ThemeConfig
{
Palette = new PaletteConfig
{
Type = PaletteType.Dark,
Primary = new PaletteColorConfig
{
Main = PaletteColors.Blue.X200
},
Secondary = new PaletteColorConfig
{
Main = PaletteColors.Pink.X200
},
Background = new PaletteBackground
{
Default = "#121212",
Custom = new Dictionary<string, string>
{
{ "level1", PaletteColors.Grey.X900 },
{ "level2", "#333" },
{ "appbar-color", "#fff" },
{ "appbar-background-color", "#333" },
},
}
}
});
}
AppLayout.razor
メインのレイアウト部分です。最初に削除したMainLayout相当です。
Skclusive.Material.LayoutではMainLayoutコンポーネントが定義済みになっており、良くも悪くも強制的にこのレイアウトを使うことになりそうです。
私の場合は楽であることを追求していたのでレイアウトが決まっているのは助かりました。
一方で自由にレイアウトを決めたい人はSkclusive.Material.Componentのみを使用して好みのレイアウトにするということになりそうです。
@inherits MaterialLayoutComponent
@inject NavigationManager navman
@using website.Components
<style>
.styled-menu-item:not(:active):is(:hover) {
/*カーソル当てた時の強調*/
background-color: var(--theme-palette-primary-main, #90caf9);
text-decoration: underline;
color: white;
}
.styled-menu-item:active {
/*現在表示しているページのMenuItemの色変更*/
background-color: var(--theme-palette-primary-main, #fff)
}
.styled-nav-item:is(:hover) {
background-color: var(--theme-palette-primary-main, #90caf9);
text-decoration: underline;
}
.styled-nav-item__active {
background-color: var(--theme-palette-primary-main, #fff)
}
</style>
<MainLayout TopbarClass="App-Topbar" >
<TitleContent>
<Button OnClick="@(s => NavTo(""))" Color="Color.Inherit" Style="text-transform:none;">
<Typography NoWrap Variant="TypographyVariant.H6">
sYamaz
</Typography>
</Button>
</TitleContent>
<ActionsContent>
<Hidden ExtraSmallDown Context="HiddenContext">
<div class="@HiddenContext.Class">
@foreach (var navItem in navigationItems)
{
<Button Style="text-transform:none;"
Color="Color.Inherit"
Class="@("styled-nav-item" + ClassActive(navItem.Path))"
OnClick="@(s => NavTo(navItem.Path))">
<Typography NoWrap Variant="TypographyVariant.Body1">@navItem.Title</Typography>
</Button>
}
</div>
</Hidden>
<ToggleTheme />
</ActionsContent>
<BodyContent>
<Box Padding="3" Class="App-Body">
@Body
</Box>
</BodyContent>
<SidebarContent>
<Navigation Items="@navigationItems"/>
</SidebarContent>
</MainLayout>
@code {
private void NavTo(string page)
{
navman.NavigateTo(page);
HandleClose(MenuCloseReason.BackdropClick);
}
private bool Open { set; get; }
private IReference ButtonRef { set; get; } = new Reference();
private List<NavigationItem> navigationItems = new List<NavigationItem>
{
new NavigationItem{Path = "", Title = "About"},
new NavigationItem{Path = "apps", Title = "Apps"},
new NavigationItem{Path = "posts", Title = "Posts"},
new NavigationItem{Path = "https://github.com/sYamaz/website", Title = "Source", Icon=@<GitHubIcon />},
};
private void HandleClose(EventArgs args)
{
Open = false;
StateHasChanged();
}
private void HandleClose(MenuCloseReason reason)
{
Open = false;
StateHasChanged();
}
private void OnOpen()
{
Open = true;
StateHasChanged();
}
private string ClassActive(string page)
{
System.Diagnostics.Debug.WriteLine(page);
return navman.BaseUri + page == navman.Uri ? " styled-nav-item__active" : "";
}
}
できたもの
ほぼSkclusiveのdocsのままですが、個人的に満足のいくサイトができました。
- GitHub pages: https://syamaz.github.io/website/
- GitHub: https://github.com/sYamaz/website
GitHub pagesについて参考にさせていただいた記事