@page "/article/read/{Id}"
<article>
    <h1 class="nav-map">
        <span>您现在的位置是：首页 > 文章列表 > 文章详情</span>
        <a href="/" class="n1">网站首页</a>
        <a href="/article/list" class="n2">文章列表</a>
    </h1>
    <div class="infos-box">
        @if (_loading)
        {
            <MudCard>
                <MudCardContent>
                    <MudSkeleton Width="30%" Height="42px;"/>
                    <MudSkeleton Width="80%"/>
                    <MudSkeleton Width="100%"/>
                    <MudSkeleton Width="100%"/>
                    <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="200px"/>
                    <MudSkeleton Width="100%"/>
                    <MudSkeleton Width="100%"/>
                    <MudSkeleton Width="100%"/>
                </MudCardContent>
                <MudCardActions>
                    <MudSkeleton Width="64px" Height="40px" Class="ml-2"/>
                    <MudSkeleton Width="105px" Height="40px" Class="ml-3"/>
                </MudCardActions>
            </MudCard>
        }
        else
        {
            <Title Value="@((_article?.Title ?? "") + " - 个人文章分享")"></Title>
            <div class="news-view">
                <h3 class="news-title">@_article?.Title</h3>
                <div class="blog-info">
                    <ul>
                        <li class="author">
                            @_article?.Author?.Name
                        </li>
                        @foreach (var tag in _article?.Tags ?? new List<string>())
                        {
                            <li class="article-tag">
                                @tag
                            </li>
                        }
                        <li class="timer">@_article?.CreateTime.ToString("yyyy-MM-dd")</li>
                        <li class="view">@(_article?.ViewCount)已阅读</li>
                        <li class="like">0</li>
                    </ul>
                </div>
                <div class="tags">
                    <a href="/article/list">文章阅读</a> &nbsp;
                </div>
                <div class="news-about">
                    @((MarkupString) (_article?.Introduction ?? ""))
                </div>
                <div class="news-con">
                    <MarkdownPreview Markdown="@_article?.Markdown"></MarkdownPreview>
                </div>
            </div>
            <div class="share">
                <p class="like-article">
                    <a href="javascript:void(0);" @onclick="Like"> 很赞哦！ </a>
                    (<b>0</b>)
                </p>
                <p class="pay-box">
                    <a href="javascript:void(0)" title="打赏，支持一下" @onclick="ShowPay">打赏本站</a>
                </p>
            </div>
            <div class="new-comment">
                <h2>文章评论</h2>
                <Comment Node="CommentNode.Article" Relation="@_article?.Id"></Comment>
            </div>
        }
    </div>
    <RightComponent></RightComponent>
</article>