soroush.asadi
291 lines
18 KiB
Plaintext
291 lines
18 KiB
Plaintext
@page "/blog/{slug}"
|
|
@model DrSousan.Api.Pages.Blog.PostModel
|
|
@{
|
|
var post = Model.Post!;
|
|
var baseUrl = Request.Scheme + "://" + Request.Host;
|
|
var canonicalUrl = baseUrl + "/blog/" + post.Slug;
|
|
var ogImage = ViewData["OgImage"]?.ToString() ?? "";
|
|
var articleType = ViewData["ArticleType"]?.ToString() ?? "MedicalWebPage";
|
|
var pubDate = post.PublishedAt?.ToString("yyyy-MM-ddTHH:mm:ssZ") ?? "";
|
|
var updDate = post.UpdatedAt.ToString("yyyy-MM-ddTHH:mm:ssZ");
|
|
}
|
|
|
|
@section Head {
|
|
<title>@ViewData["Title"]</title>
|
|
<meta name="description" content="@ViewData["MetaDesc"]" />
|
|
@if (!string.IsNullOrEmpty(ViewData["Keywords"]?.ToString())) {
|
|
<meta name="keywords" content="@ViewData["Keywords"]" />
|
|
}
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:title" content="@ViewData["Title"]" />
|
|
<meta property="og:description" content="@ViewData["MetaDesc"]" />
|
|
<meta property="og:url" content="@canonicalUrl" />
|
|
<meta property="og:locale" content="fa_IR" />
|
|
@if (!string.IsNullOrEmpty(ogImage)) {
|
|
<meta property="og:image" content="@(ogImage.StartsWith("http") ? ogImage : baseUrl + ogImage)" />
|
|
}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="@ViewData["Title"]" />
|
|
<meta name="twitter:description" content="@ViewData["MetaDesc"]" />
|
|
<link rel="canonical" href="@canonicalUrl" />
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@type": "@articleType",
|
|
"headline": "@post.Title.Replace("\"","\\\"") ",
|
|
"description": "@(ViewData["MetaDesc"]?.ToString()?.Replace("\"","\\\""))",
|
|
"author": { "@@type": "Person", "name": "@post.Author" },
|
|
"publisher": {
|
|
"@@type": "Organization",
|
|
"name": "@ViewData["SiteName"]",
|
|
"url": "@baseUrl"
|
|
},
|
|
"datePublished": "@pubDate",
|
|
"dateModified": "@updDate",
|
|
"mainEntityOfPage": "@canonicalUrl"
|
|
@if (!string.IsNullOrEmpty(ogImage)) {
|
|
@:,"image": "@(ogImage.StartsWith("http") ? ogImage : baseUrl + ogImage)"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* ─── Post Layout ──────────────────────────────────────────────── */
|
|
.post-layout{max-width:1100px;margin:0 auto;padding:5rem 2rem 3rem;display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start}
|
|
@@media(max-width:900px){.post-layout{grid-template-columns:1fr;padding-top:5rem}}
|
|
/* ─── Article ──────────────────────────────────────────────────── */
|
|
.article-hero{border-radius:16px;overflow:hidden;margin-bottom:2rem;aspect-ratio:16/6;background:linear-gradient(135deg,var(--gold-pale),#EDE0CA);display:flex;align-items:center;justify-content:center;font-size:3rem}
|
|
.article-hero img{width:100%;height:100%;object-fit:cover}
|
|
.article-cat{display:inline-block;background:var(--gold-pale);color:var(--gold);font-size:.75rem;font-weight:600;padding:.25rem .8rem;border-radius:50px;margin-bottom:.8rem}
|
|
.article-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.4;margin-bottom:1rem}
|
|
.article-meta{display:flex;gap:1.5rem;font-size:.8rem;color:var(--light);margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
|
|
.article-meta span{display:flex;align-items:center;gap:.3rem}
|
|
/* ─── Content ──────────────────────────────────────────────────── */
|
|
.article-content{font-size:.95rem;line-height:2;color:var(--dark)}
|
|
.article-content h2{font-size:1.3rem;font-weight:700;margin:1.8rem 0 .8rem;color:var(--dark);padding-bottom:.4rem;border-bottom:2px solid var(--gold-pale)}
|
|
.article-content h3{font-size:1.1rem;font-weight:600;margin:1.4rem 0 .6rem;color:var(--dark)}
|
|
.article-content p{margin-bottom:1rem}
|
|
.article-content ul,.article-content ol{padding-right:1.5rem;margin-bottom:1rem}
|
|
.article-content li{margin-bottom:.4rem}
|
|
.article-content strong{color:var(--dark);font-weight:600}
|
|
.article-content a{color:var(--gold);border-bottom:1px solid var(--gold-pale)}
|
|
.article-content blockquote{border-right:4px solid var(--gold);padding:.8rem 1.2rem;background:var(--gold-pale);border-radius:0 8px 8px 0;margin:1.2rem 0;font-style:italic;color:var(--mid)}
|
|
/* ─── Tags ─────────────────────────────────────────────────────── */
|
|
.article-tags{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;gap:.5rem;flex-wrap:wrap}
|
|
.tag{background:var(--bg);border:1px solid var(--border);padding:.25rem .75rem;border-radius:50px;font-size:.78rem;color:var(--mid)}
|
|
/* ─── Share ─────────────────────────────────────────────────────── */
|
|
.share-box{margin-top:2rem;padding:1.5rem;background:var(--white);border-radius:12px;border:1px solid var(--border);text-align:center}
|
|
.share-title{font-size:.9rem;font-weight:600;margin-bottom:1rem}
|
|
.share-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
|
|
.share-btn{padding:.45rem 1rem;border-radius:8px;font-family:'Vazirmatn',sans-serif;font-size:.82rem;cursor:pointer;border:none;font-weight:500}
|
|
.share-telegram{background:#2CA5E0;color:#fff}
|
|
.share-whatsapp{background:#25D366;color:#fff}
|
|
.share-copy{background:var(--bg);color:var(--mid);border:1px solid var(--border)}
|
|
/* ─── CTA ──────────────────────────────────────────────────────── */
|
|
.cta-box{margin-top:2.5rem;padding:2rem;background:linear-gradient(135deg,var(--gold-pale),#EDE0CA);border-radius:16px;text-align:center}
|
|
.cta-box h3{font-size:1.1rem;font-weight:700;margin-bottom:.6rem}
|
|
.cta-box p{font-size:.88rem;color:var(--mid);margin-bottom:1.2rem}
|
|
.cta-btn{background:var(--gold);color:#fff;padding:.7rem 1.8rem;border-radius:50px;font-family:'Vazirmatn',sans-serif;font-size:.9rem;font-weight:600;border:none;cursor:pointer;display:inline-block;text-decoration:none}
|
|
/* ─── Sidebar ──────────────────────────────────────────────────── */
|
|
.sidebar{position:sticky;top:90px}
|
|
.sidebar-card{background:var(--white);border-radius:14px;border:1px solid var(--border);padding:1.4rem;margin-bottom:1.5rem}
|
|
.sidebar-title{font-size:.88rem;font-weight:700;color:var(--dark);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
|
|
.recent-post{display:flex;gap:.8rem;margin-bottom:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--border)}
|
|
.recent-post:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
|
|
.recent-img{width:56px;height:56px;border-radius:8px;background:var(--gold-pale);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden}
|
|
.recent-img img{width:100%;height:100%;object-fit:cover;border-radius:8px}
|
|
.recent-title{font-size:.82rem;font-weight:600;line-height:1.4;color:var(--dark);text-decoration:none}
|
|
.recent-title:hover{color:var(--gold)}
|
|
.recent-date{font-size:.73rem;color:var(--light);margin-top:.2rem}
|
|
.doctor-card{text-align:center}
|
|
.doc-avatar{width:80px;height:80px;border-radius:50%;background:var(--gold-pale);margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;font-size:2rem}
|
|
.doc-name{font-size:.95rem;font-weight:700;color:var(--dark)}
|
|
.doc-title{font-size:.78rem;color:var(--light);margin:.2rem 0 .8rem}
|
|
.doc-btn{background:var(--gold);color:#fff;padding:.5rem 1.2rem;border-radius:50px;font-family:'Vazirmatn',sans-serif;font-size:.82rem;border:none;cursor:pointer;width:100%;text-decoration:none;display:block;text-align:center}
|
|
/* ─── Comments ─────────────────────────────────────────────────── */
|
|
.comments-section{margin-top:3rem}
|
|
.comments-section h2{font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;color:var(--dark)}
|
|
.comment-card{background:var(--gold-pale);border-radius:12px;padding:1.2rem;margin-bottom:1rem;opacity:.98}
|
|
.comment-card.admin-reply{background:rgba(184,149,90,0.12);border-right:3px solid var(--gold)}
|
|
.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
|
|
.comment-author{font-weight:600;font-size:.92rem;color:var(--dark)}
|
|
.comment-author.admin{color:var(--gold)}
|
|
.comment-date{font-size:.78rem;color:var(--light)}
|
|
.comment-body{font-size:.88rem;color:var(--mid);line-height:1.8}
|
|
.comment-replies{margin-top:1rem;margin-right:1.5rem}
|
|
.comment-form-wrap{margin-top:2rem;background:var(--section-bg);border-radius:16px;padding:1.75rem;border:1px solid var(--border)}
|
|
.comment-form-wrap h3{font-size:1rem;font-weight:700;margin-bottom:1.2rem;color:var(--dark)}
|
|
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
|
|
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
|
|
.form-group label{font-size:.85rem;font-weight:500;color:var(--dark)}
|
|
.form-group input,.form-group textarea{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:.65rem .9rem;font-family:'Vazirmatn',sans-serif;font-size:.88rem;color:var(--dark);direction:rtl;outline:none;transition:border-color .2s}
|
|
.form-group input:focus,.form-group textarea:focus{border-color:var(--gold)}
|
|
.form-group textarea{resize:vertical;min-height:100px}
|
|
.form-success{display:none;background:#e6f4ea;color:#1e7e34;border-radius:8px;padding:.8rem 1rem;text-align:center;margin-bottom:1rem;font-size:.88rem}
|
|
.form-success.show{display:block}
|
|
@@media(max-width:600px){.form-row{grid-template-columns:1fr}}
|
|
</style>
|
|
}
|
|
|
|
<div class="post-layout">
|
|
<!-- ── Article ── -->
|
|
<article>
|
|
<div class="article-hero">
|
|
@if (!string.IsNullOrEmpty(post.FeaturedImage))
|
|
{
|
|
<img src="@post.FeaturedImage" alt="@post.Title" loading="lazy" />
|
|
}
|
|
else { <span>📝</span> }
|
|
</div>
|
|
|
|
@if (post.Category != null)
|
|
{
|
|
<span class="article-cat">@post.Category.Name</span>
|
|
}
|
|
<h1 class="article-title">@post.Title</h1>
|
|
<div class="article-meta">
|
|
<span>✍️ @post.Author</span>
|
|
@if (post.PublishedAt.HasValue)
|
|
{
|
|
<span>📅 @post.PublishedAt.Value.ToString("yyyy/MM/dd")</span>
|
|
}
|
|
<span>🕐 @post.ReadingTimeMinutes دقیقه مطالعه</span>
|
|
<span>👁 @post.ViewCount بازدید</span>
|
|
</div>
|
|
|
|
<div class="article-content">
|
|
@Html.Raw(post.Content)
|
|
</div>
|
|
|
|
@if (!string.IsNullOrEmpty(post.Keywords))
|
|
{
|
|
<div class="article-tags">
|
|
@foreach (var kw in post.Keywords.Split(',', StringSplitOptions.RemoveEmptyEntries))
|
|
{
|
|
<span class="tag">@kw.Trim()</span>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<div class="share-box">
|
|
<div class="share-title">این مقاله را به اشتراک بگذارید</div>
|
|
<div class="share-btns">
|
|
<a class="share-btn share-telegram" href="https://t.me/share/url?url=@Uri.EscapeDataString(canonicalUrl)&text=@Uri.EscapeDataString(post.Title)" target="_blank" rel="noopener">📱 تلگرام</a>
|
|
<a class="share-btn share-whatsapp" href="https://wa.me/?text=@Uri.EscapeDataString(post.Title + " " + canonicalUrl)" target="_blank" rel="noopener">💬 واتساپ</a>
|
|
<button class="share-btn share-copy" onclick="navigator.clipboard.writeText('@canonicalUrl').then(()=>{this.textContent='✓ کپی شد!';setTimeout(()=>this.textContent='🔗 کپی لینک',2000)})">🔗 کپی لینک</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta-box">
|
|
<h3>آماده تحول در پوستتان هستید؟</h3>
|
|
<p>همین امروز با دکتر سوسن آلطه مشاوره رایگان دریافت کنید</p>
|
|
<a href="/#contact" class="cta-btn">رزرو نوبت رایگان</a>
|
|
</div>
|
|
|
|
<!-- Comments -->
|
|
<section class="comments-section" id="comments">
|
|
<h2>نظرات (@Model.Comments.Count)</h2>
|
|
|
|
@if (!Model.Comments.Any())
|
|
{
|
|
<p style="color:var(--light);margin-bottom:2rem;">اولین نظر را ثبت کنید!</p>
|
|
}
|
|
else
|
|
{
|
|
@foreach (var comment in Model.Comments)
|
|
{
|
|
<div class="comment-card @(comment.IsAdminReply ? "admin-reply" : "")">
|
|
<div class="comment-header">
|
|
<span class="comment-author @(comment.IsAdminReply ? "admin" : "")">
|
|
@(comment.IsAdminReply ? "👩⚕️ " : "")@comment.AuthorName
|
|
</span>
|
|
<span class="comment-date">@comment.CreatedAt.ToString("yyyy/MM/dd")</span>
|
|
</div>
|
|
<p class="comment-body">@comment.Body</p>
|
|
@if (comment.Replies.Any())
|
|
{
|
|
<div class="comment-replies">
|
|
@foreach (var reply in comment.Replies)
|
|
{
|
|
<div class="comment-card admin-reply">
|
|
<div class="comment-header">
|
|
<span class="comment-author admin">👩⚕️ @reply.AuthorName</span>
|
|
<span class="comment-date">@reply.CreatedAt.ToString("yyyy/MM/dd")</span>
|
|
</div>
|
|
<p class="comment-body">@reply.Body</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<div class="comment-form-wrap">
|
|
<h3>ثبت نظر</h3>
|
|
@if (Model.CommentSent)
|
|
{
|
|
<div class="form-success show">✅ نظر شما ثبت شد و پس از تأیید نمایش داده میشود.</div>
|
|
}
|
|
<form method="post" asp-page="/Blog/Post" asp-route-slug="@post.Slug">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label asp-for="CommentAuthor">نام *</label>
|
|
<input asp-for="CommentAuthor" placeholder="نام شما" />
|
|
<span asp-validation-for="CommentAuthor" style="color:red;font-size:.78rem;"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="CommentEmail">ایمیل (اختیاری)</label>
|
|
<input asp-for="CommentEmail" placeholder="ایمیل شما" dir="ltr" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="CommentBody">نظر *</label>
|
|
<textarea asp-for="CommentBody" placeholder="نظر خود را بنویسید..."></textarea>
|
|
<span asp-validation-for="CommentBody" style="color:red;font-size:.78rem;"></span>
|
|
</div>
|
|
<button type="submit" class="btn-primary">ارسال نظر</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<!-- ── Sidebar ── -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-card doctor-card">
|
|
<div class="doc-avatar">👩⚕️</div>
|
|
<div class="doc-name">@post.Author</div>
|
|
<div class="doc-title">پزشک عمومی | متخصص زیبایی پوست</div>
|
|
<a href="/#contact" class="doc-btn">رزرو نوبت</a>
|
|
</div>
|
|
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">دستهبندی</div>
|
|
@if (post.Category != null)
|
|
{
|
|
<a href="/blog?category=@post.Category.Slug" style="color:var(--gold);font-size:.9rem;">@post.Category.Name ←</a>
|
|
}
|
|
</div>
|
|
|
|
@if (!string.IsNullOrEmpty(post.FocusKeyword))
|
|
{
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">کلیدواژه اصلی</div>
|
|
<span style="background:var(--gold-pale);padding:.3rem .7rem;border-radius:12px;font-size:.82rem;color:var(--mid);">@post.FocusKeyword</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">خدمات ما</div>
|
|
<div style="display:flex;flex-direction:column;gap:.5rem;font-size:.85rem">
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> بوتاکس و فیلر</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> لیزر درمانی</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> مزوتراپی</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> پاکسازی پوست</a>
|
|
<a href="/#services" style="color:var(--mid);display:flex;align-items:center;gap:.4rem"><span style="color:var(--gold)">←</span> مشاوره زیبایی</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|