70 lines
3.1 KiB
Plaintext
70 lines
3.1 KiB
Plaintext
<mdui-card
|
|
class="article-card"
|
|
variant="filled"
|
|
onclick="location.href='<%= url_for(post.path) %>'">
|
|
|
|
<div class="article-content">
|
|
<!-- 封面图片 -->
|
|
<% if (post.cover) { %>
|
|
<div class="article-cover">
|
|
<img src="<%= post.cover %>" alt="<%= post.title %>" />
|
|
</div>
|
|
<% } %>
|
|
|
|
<!-- 内容区域 -->
|
|
<div class="article-main">
|
|
<mdui-typography class="article-title">
|
|
<%= post.title %>
|
|
</mdui-typography>
|
|
|
|
<!-- 有封面时摘要限制20字 -->
|
|
<% if (post.cover) { %>
|
|
<span><%- truncate(strip_html(post.content), { length: 120 }) %></span>
|
|
<% } else { %>
|
|
<span><%- truncate(strip_html(post.content), { length: 200 }) %></span>
|
|
<% } %>
|
|
|
|
<div class="article-meta">
|
|
<mdui-typography variant="body2" class="article-date">
|
|
<mdui-icon name="calendar_today" style="font-size: 1.1rem;"></mdui-icon>
|
|
<%= post.date.format('YYYY-MM-DD') %>
|
|
</mdui-typography>
|
|
|
|
<div class="article-tags">
|
|
<% if (post.tags && post.tags.length > 0) { %>
|
|
<% post.tags.data.slice(0, 2).forEach((tag) => { %>
|
|
<mdui-chip
|
|
size="small"
|
|
variant="filled"
|
|
style="background: var(--mdui-color-secondary-container); color: var(--mdui-color-on-secondary-container);">
|
|
<mdui-icon name="sell" slot="icon" style="font-size: 1rem;"></mdui-icon>
|
|
<%= tag.name %>
|
|
</mdui-chip>
|
|
<% }); %>
|
|
<% if (post.tags.length > 2) { %>
|
|
<mdui-chip
|
|
size="small"
|
|
variant="filled"
|
|
style="background: var(--mdui-color-tertiary-container); color: var(--mdui-color-on-tertiary-container);">
|
|
+<%= post.tags.length - 2 %>
|
|
</mdui-chip>
|
|
<% } %>
|
|
<% } else if (post.categories && post.categories.length > 0) { %>
|
|
<mdui-chip
|
|
size="small"
|
|
variant="filled"
|
|
style="background: var(--mdui-color-primary-container); color: var(--mdui-color-on-primary-container);">
|
|
<mdui-icon name="folder" slot="icon" style="font-size: 1rem;"></mdui-icon>
|
|
<%= post.categories.data[0].name %>
|
|
</mdui-chip>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：阅读更多 -->
|
|
<mdui-button class="article-side" variant="tonal">
|
|
<mdui-icon name="arrow_forward"></mdui-icon>
|
|
</mdui-button>
|
|
</div>
|
|
</mdui-card> |