299 lines
17 KiB
Twig
299 lines
17 KiB
Twig
{% extends 'base.html.twig' %}
|
|
{% block keywords %}
|
|
{{ item.keywords }}
|
|
{% endblock %}
|
|
{% block title %}
|
|
{{ item.title }}
|
|
{% endblock %}
|
|
|
|
{% block des %}
|
|
{{ item.intro }}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{% if item.plain is not null %}
|
|
{{ item.plain | raw}}
|
|
{% endif %}
|
|
{% if item.body is not null %}
|
|
<main class="min-h-screen bg-gray-50">
|
|
<!-- هدر پست -->
|
|
<div class="bg-white border-b border-gray-200">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- برچسبها -->
|
|
{% if item.tree|length > 0 %}
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
{% for tree in item.tree %}
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">
|
|
{{ tree.label }}
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- عنوان -->
|
|
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-6 leading-tight">
|
|
{{item.title}}
|
|
</h1>
|
|
|
|
<!-- متا اطلاعات -->
|
|
<div class="flex flex-wrap items-center gap-6 text-sm text-gray-600 mb-8">
|
|
<div class="flex items-center space-x-2 space-x-reverse">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
<span>توسط <strong class="text-gray-900">{{item.submitter.name}}</strong></span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 space-x-reverse">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
<span>{{Jdate.jdate('Y/n/d',item.dateSubmit|date('U'))}}</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 space-x-reverse">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
<span>{{ item.views }} بازدید</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- محتوای اصلی -->
|
|
<div class="container mx-auto px-4 py-12">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<!-- محتوای پست -->
|
|
<div class="lg:col-span-2">
|
|
<article class="prose prose-lg max-w-none">
|
|
<!-- تصویر اصلی -->
|
|
<div class="mb-8">
|
|
<img src="{{asset('uploaded/'~ item.mainPic)}}"
|
|
alt="{{item.title}}"
|
|
class="w-full h-64 lg:h-80 object-cover rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
|
|
</div>
|
|
|
|
<!-- خلاصه پست -->
|
|
{% if item.intro %}
|
|
<div class="bg-blue-50 border-r-4 border-blue-500 p-6 rounded-lg mb-8">
|
|
<p class="text-lg text-gray-700 leading-relaxed font-medium">
|
|
{{item.intro}}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- محتوای پست -->
|
|
<div class="prose prose-lg max-w-none text-gray-800 leading-relaxed">
|
|
{{ item.body | raw }}
|
|
</div>
|
|
|
|
</article>
|
|
|
|
<!-- اشتراکگذاری -->
|
|
<div class="mt-12 pt-8 border-t border-gray-200">
|
|
<div class="text-center">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-blue-600 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
|
|
</svg>
|
|
این مطلب را به اشتراک بگذارید
|
|
</h3>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<!-- توییتر -->
|
|
<a href="https://twitter.com/intent/tweet?text={{item.title|url_encode}}&url={{app.request.uri|url_encode}}"
|
|
target="_blank"
|
|
class="group flex items-center space-x-2 space-x-reverse px-6 py-3 bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-xl hover:from-blue-500 hover:to-blue-600 transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
|
</svg>
|
|
<span class="font-medium">توییتر</span>
|
|
</a>
|
|
|
|
<!-- لینکدین -->
|
|
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{app.request.uri|url_encode}}"
|
|
target="_blank"
|
|
class="group flex items-center space-x-2 space-x-reverse px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
<span class="font-medium">لینکدین</span>
|
|
</a>
|
|
|
|
<!-- تلگرام -->
|
|
<a href="https://t.me/share/url?url={{app.request.uri|url_encode}}&text={{item.title|url_encode}}"
|
|
target="_blank"
|
|
class="group flex items-center space-x-2 space-x-reverse px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
|
|
</svg>
|
|
<span class="font-medium">تلگرام</span>
|
|
</a>
|
|
|
|
<!-- واتساپ -->
|
|
<a href="https://wa.me/?text={{item.title|url_encode}}%20{{app.request.uri|url_encode}}"
|
|
target="_blank"
|
|
class="group flex items-center space-x-2 space-x-reverse px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl hover:from-green-600 hover:to-green-700 transition-all duration-300 transform hover:scale-105 hover:shadow-lg">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
|
|
</svg>
|
|
<span class="font-medium">واتساپ</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- بخش کامنتها -->
|
|
<div class="mt-4">
|
|
<!-- نمایش کامنتهای موجود -->
|
|
{% if comments|length > 0 %}
|
|
<div class="mb-12">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-8 flex items-center">
|
|
<svg class="w-6 h-6 text-blue-600 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
</svg>
|
|
نظرات ({{ comments|length }})
|
|
</h3>
|
|
<div class="space-y-6">
|
|
{% for comment in comments %}
|
|
<div class="bg-white rounded-lg border border-gray-200 p-6">
|
|
<div class="flex items-start space-x-4 space-x-reverse">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span class="text-blue-600 font-semibold text-sm">
|
|
{{ comment.name|slice(0, 1)|upper }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center space-x-2 space-x-reverse mb-3">
|
|
<h4 class="text-sm font-semibold text-gray-900">{{ comment.name }}</h4>
|
|
<span class="text-xs text-gray-500">{{ Jdate.jdate('Y/n/d H:i', comment.dateSubmit|date('U')) }}</span>
|
|
{% if comment.website %}
|
|
<a href="{{ comment.website }}" target="_blank" class="text-blue-500 hover:text-blue-700 text-xs">
|
|
وبسایت
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<p class="text-gray-700 leading-relaxed">{{ comment.body }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- فرم ارسال کامنت -->
|
|
<div class="bg-gray-50 rounded-lg p-8">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-6">نظر خود را بنویسید</h3>
|
|
<form method="post" action="{{ path('app_blog_post_comment', {'url': item.url}) }}" class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="comment_name" class="block text-sm font-medium text-gray-700 mb-2">نام *</label>
|
|
<input type="text"
|
|
id="comment_name"
|
|
name="comment[name]"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
|
|
placeholder="نام شما">
|
|
</div>
|
|
<div>
|
|
<label for="comment_email" class="block text-sm font-medium text-gray-700 mb-2">ایمیل</label>
|
|
<input type="email"
|
|
id="comment_email"
|
|
name="comment[email]"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
|
|
placeholder="ایمیل شما (اختیاری)">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="comment_website" class="block text-sm font-medium text-gray-700 mb-2">وبسایت</label>
|
|
<input type="url"
|
|
id="comment_website"
|
|
name="comment[website]"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
|
|
placeholder="آدرس وبسایت شما (اختیاری)">
|
|
</div>
|
|
<div>
|
|
<label for="comment_body" class="block text-sm font-medium text-gray-700 mb-2">نظر *</label>
|
|
<textarea id="comment_body"
|
|
name="comment[body]"
|
|
required
|
|
rows="5"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 resize-none"
|
|
placeholder="نظر خود را اینجا بنویسید..."></textarea>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm text-gray-500">
|
|
نظر شما پس از تایید مدیر نمایش داده خواهد شد
|
|
</p>
|
|
<button type="submit"
|
|
class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
|
|
ارسال نظر
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- سایدبار -->
|
|
<div class="lg:col-span-1">
|
|
<div class="sticky top-8">
|
|
<!-- پستهای مرتبط -->
|
|
{% if posts|length > 0 %}
|
|
<div class="bg-white rounded-2xl shadow-soft p-6 mb-8">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
|
|
<svg class="w-5 h-5 text-blue-600 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
</svg>
|
|
جدیدترینها
|
|
</h3>
|
|
<div class="space-y-4">
|
|
{% for post in posts %}
|
|
<a href="{{path('app_blog_post',{'url':post.url})}}"
|
|
class="group block bg-gray-50 rounded-xl p-4 hover:bg-gray-100 transition-colors duration-200">
|
|
<div class="flex space-x-3 space-x-reverse">
|
|
<img src="{{asset('uploaded/'~ post.mainPic)}}"
|
|
alt="{{post.title}}"
|
|
class="w-16 h-16 object-cover rounded-lg flex-shrink-0">
|
|
<div class="flex-1 min-w-0">
|
|
<h4 class="text-sm font-semibold text-gray-900 group-hover:text-blue-600 transition-colors duration-200 line-clamp-2">
|
|
{{post.title}}
|
|
</h4>
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
{{ Jdate.jdate('Y/n/d',post.dateSubmit|date('U')) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- دکمه بازگشت به وبلاگ -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6 text-center">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">بازگشت به وبلاگ</h3>
|
|
<p class="text-sm text-gray-600 mb-4">مطالب بیشتری را در وبلاگ ما بخوانید</p>
|
|
<a href="{{path('app_blog_home')}}"
|
|
class="inline-flex items-center space-x-2 space-x-reverse px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
<span>مشاهده همه مطالب</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% endif %}
|
|
{% endblock %}
|