Skip to content

Commit eee3987

Browse files
osaengineosaengine
committed
дизайн
1 parent 69d6aa9 commit eee3987

2 files changed

Lines changed: 587 additions & 9 deletions

File tree

‎_layouts/post.html‎

Lines changed: 163 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,181 @@
22
layout: default
33
---
44
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
5-
<header>
5+
<header class="post-header">
66
<h1 itemprop="name headline">{{ page.title }}</h1>
7-
<p class="meta">
8-
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>
9-
</p>
7+
<div class="post-meta">
8+
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
9+
{{ page.date | date: "%d %B %Y" }}
10+
</time>
11+
{% if page.author %}
12+
<span class="post-author">
13+
• <span itemprop="author" itemscope itemtype="http://schema.org/Person">
14+
<span itemprop="name">{{ page.author }}</span>
15+
</span>
16+
</span>
17+
{% endif %}
18+
{% assign words = content | number_of_words %}
19+
<span class="reading-time">
20+
• {% if words < 360 %}1 мин{% else %}{{ words | divided_by: 180 }} мин{% endif %} чтения
21+
</span>
22+
</div>
1023
</header>
1124

1225
{% if page.image %}
13-
<img src="{{ page.image }}" alt="{{ page.title }}" class="post-image-post">
26+
<div class="post-featured-image">
27+
<img src="{{ page.image }}" alt="{{ page.title }}" class="post-image-post" itemprop="image">
28+
</div>
1429
{% endif %}
1530

1631
<div class="post-content" itemprop="articleBody">
1732
{{ content }}
1833
</div>
1934

2035
{% if page.tags.size > 0 %}
21-
<div class="tags">
22-
<span>Теги:</span>
36+
<div class="post-tags">
37+
<span class="tags-label">Теги:</span>
2338
{% for tag in page.tags %}
24-
<a href="/tags#{{ tag | slugify }}">{{ tag }}</a>
39+
<a href="/tags#{{ tag | slugify }}" class="tag-link" rel="tag">{{ tag }}</a>
40+
{% endfor %}
41+
</div>
42+
{% endif %}
43+
44+
<div class="post-sharing">
45+
<h3>Поделиться статьей:</h3>
46+
<div class="sharing-buttons">
47+
<a href="https://t.me/share/url?url={{ site.url }}{{ page.url | uri_escape }}&text={{ page.title | uri_escape }}"
48+
class="share-btn telegram" target="_blank" rel="noopener noreferrer" aria-label="Поделиться в Telegram">
49+
<span>📱 Telegram</span>
50+
</a>
51+
52+
<a href="https://twitter.com/intent/tweet?url={{ site.url }}{{ page.url | uri_escape }}&text={{ page.title | uri_escape }}&via=osengine_ru"
53+
class="share-btn twitter" target="_blank" rel="noopener noreferrer" aria-label="Поделиться в Twitter">
54+
<span>🐦 Twitter</span>
55+
</a>
56+
57+
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url | uri_escape }}"
58+
class="share-btn facebook" target="_blank" rel="noopener noreferrer" aria-label="Поделиться в Facebook">
59+
<span>📘 Facebook</span>
60+
</a>
61+
62+
<a href="https://vk.com/share.php?url={{ site.url }}{{ page.url | uri_escape }}&title={{ page.title | uri_escape }}"
63+
class="share-btn vkontakte" target="_blank" rel="noopener noreferrer" aria-label="Поделиться ВКонтакте">
64+
<span>🔵 ВКонтакте</span>
65+
</a>
66+
67+
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site.url }}{{ page.url | uri_escape }}"
68+
class="share-btn linkedin" target="_blank" rel="noopener noreferrer" aria-label="Поделиться в LinkedIn">
69+
<span>💼 LinkedIn</span>
70+
</a>
71+
72+
<button class="share-btn copy-link" onclick="copyToClipboard('{{ site.url }}{{ page.url }}')" aria-label="Скопировать ссылку">
73+
<span>🔗 Копировать ссылку</span>
74+
</button>
75+
</div>
76+
</div>
77+
78+
<!-- Related Posts -->
79+
{% assign related_posts = site.related_posts | limit: 3 %}
80+
{% if related_posts.size > 0 %}
81+
<div class="related-posts">
82+
<h3>Похожие статьи</h3>
83+
<div class="related-posts-grid">
84+
{% for post in related_posts %}
85+
<article class="related-post-card">
86+
{% if post.image %}
87+
<img src="{{ post.image }}" alt="{{ post.title }}" class="related-post-image">
88+
{% else %}
89+
<div class="related-post-placeholder">📰</div>
90+
{% endif %}
91+
<div class="related-post-content">
92+
<h4><a href="{{ post.url }}">{{ post.title }}</a></h4>
93+
<time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%d %B %Y" }}</time>
94+
</div>
95+
</article>
2596
{% endfor %}
2697
</div>
98+
</div>
2799
{% endif %}
28-
</article>
100+
101+
<!-- Navigation to Previous/Next Posts -->
102+
<nav class="post-navigation">
103+
{% if page.previous %}
104+
<a href="{{ page.previous.url }}" class="nav-previous" rel="prev">
105+
← {{ page.previous.title | truncate: 30 }}
106+
</a>
107+
{% endif %}
108+
{% if page.next %}
109+
<a href="{{ page.next.url }}" class="nav-next" rel="next">
110+
{{ page.next.title | truncate: 30 }} →
111+
</a>
112+
{% endif %}
113+
</nav>
114+
115+
<!-- Comments Section Placeholder -->
116+
<div class="post-comments">
117+
<h3>Обсуждение</h3>
118+
<p>Присоединяйтесь к обсуждению в нашем <a href="https://t.me/osengine" target="_blank">Telegram-чате</a>!</p>
119+
120+
<!-- Здесь можно добавить систему комментариев (Disqus, Gitalk, etc.) -->
121+
<div id="comments">
122+
<!-- Comments system integration -->
123+
</div>
124+
</div>
125+
</article>
126+
127+
<script>
128+
// Copy to clipboard function
129+
function copyToClipboard(text) {
130+
if (navigator.clipboard && window.isSecureContext) {
131+
navigator.clipboard.writeText(text).then(() => {
132+
showCopyMessage('Ссылка скопирована!');
133+
});
134+
} else {
135+
// Fallback for older browsers
136+
const textArea = document.createElement('textarea');
137+
textArea.value = text;
138+
textArea.style.position = 'fixed';
139+
textArea.style.left = '-999999px';
140+
textArea.style.top = '-999999px';
141+
document.body.appendChild(textArea);
142+
textArea.focus();
143+
textArea.select();
144+
145+
try {
146+
document.execCommand('copy');
147+
showCopyMessage('Ссылка скопирована!');
148+
} catch (err) {
149+
showCopyMessage('Ошибка копирования');
150+
}
151+
152+
textArea.remove();
153+
}
154+
}
155+
156+
function showCopyMessage(message) {
157+
// Create and show a temporary message
158+
const msgEl = document.createElement('div');
159+
msgEl.textContent = message;
160+
msgEl.style.cssText = `
161+
position: fixed;
162+
top: 20px;
163+
right: 20px;
164+
background: var(--primary-color);
165+
color: white;
166+
padding: 12px 20px;
167+
border-radius: 8px;
168+
box-shadow: var(--shadow-lg);
169+
z-index: 10000;
170+
font-weight: 500;
171+
transition: all 0.3s ease;
172+
`;
173+
174+
document.body.appendChild(msgEl);
175+
176+
setTimeout(() => {
177+
msgEl.style.opacity = '0';
178+
msgEl.style.transform = 'translateY(-20px)';
179+
setTimeout(() => msgEl.remove(), 300);
180+
}, 2000);
181+
}
182+
</script>

0 commit comments

Comments
 (0)